:root {
  color-scheme: dark;
  --color-night: #040d19;
  --color-world-navy: #071426;
  --color-navy-soft: #0a192d;
  --color-surface: #0d1d33;
  --color-surface-raised: #132843;
  --color-surface-strong: #1b3452;
  --color-border: #243a55;
  --color-border-soft: rgb(169 181 198 / 0.16);
  --color-connection-blue: #168bff;
  --color-blue-strong: #087bea;
  --color-sky: #56b8ff;
  --color-focus: #7cc8ff;
  --color-ice: #bde9ff;
  --color-text: #f4f7fb;
  --color-text-soft: #a9b5c6;
  --color-text-muted: #8291a6;
  --color-silver: #d5dfec;
  --color-magenta: #e82c78;
  --color-textile-blue: #287acb;
  --color-success: #34c98b;
  --color-warning: #f4b942;
  --color-danger: #ff5d6c;
  --font-display: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-1: 0 12px 36px rgb(0 0 0 / 0.2);
  --shadow-2: 0 24px 80px rgb(0 0 0 / 0.36);
  --header-height: 72px;
  --bottom-nav-height: 72px;
  --internal-banner-offset: calc(34px + env(safe-area-inset-top));
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--color-world-navy);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text);
  background:
    radial-gradient(circle at 52% -14%, rgb(22 139 255 / 0.12), transparent 40rem),
    linear-gradient(180deg, var(--color-world-navy), #061120 68%, var(--color-night));
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body.modal-open { overflow: hidden; }

html[data-native="true"], html[data-native="true"] body {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

html[data-native="true"] input,
html[data-native="true"] textarea,
html[data-native="true"] [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

::selection { color: white; background: rgb(22 139 255 / 0.55); }

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

.skip-link {
  position: fixed;
  z-index: 300;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-180%);
  border-radius: var(--radius-sm);
  color: white;
  background: var(--color-blue-strong);
  font-weight: 760;
}
.skip-link:focus { transform: translateY(0); }

.internal-banner {
  position: sticky;
  z-index: 80;
  top: 0;
  margin: 0;
  min-height: var(--internal-banner-offset);
  padding: max(8px, env(safe-area-inset-top)) 16px 8px;
  color: #041018;
  background: #f4b942;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-align: center;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.topbar {
  position: sticky;
  z-index: 60;
  top: var(--internal-banner-offset);
  display: grid;
  grid-template-columns: 250px minmax(300px, 590px) 360px;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  padding: 8px max(20px, calc((100vw - 1510px) / 2));
  border-bottom: 1px solid rgb(36 58 85 / 0.78);
  background: rgb(7 20 38 / 0.91);
  backdrop-filter: blur(20px);
}

.brand { display: inline-flex; align-items: center; width: 224px; min-width: 0; }
.brand-wide { width: 220px; height: 54px; object-fit: contain; object-position: left center; }
.brand-mark { display: none; width: 44px; height: 44px; object-fit: contain; }

.global-search, .discover-search, .conversation-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.global-search:focus-within, .discover-search:focus-within, .conversation-search:focus-within { border-color: var(--color-sky); background: var(--color-surface-raised); box-shadow: 0 0 0 3px rgb(86 184 255 / 0.12); }
.global-search input, .discover-search input, .conversation-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--color-text); background: transparent; }
.global-search input::placeholder, .discover-search input::placeholder, .conversation-search input::placeholder { color: var(--color-text-muted); opacity: 1; }
.search-hint { padding: 2px 7px; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-text-muted); background: var(--color-surface-raised); font-size: 12px; }

.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.icon-button, .profile-button, .messages-button, .composer-media {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.icon-button:hover, .profile-button:hover, .messages-button:hover { background: var(--color-surface-raised); }
.mobile-search-button { display: none; }
.messages-button { gap: 8px; padding: 0 11px; color: var(--color-text-soft); font-size: 14px; font-weight: 680; }
.messages-button.active { color: var(--color-sky); background: rgb(22 139 255 / 0.12); }
/* Bee (2026-10-11): Create in the top bar — same create flow as the rail and
   the mobile bottom nav (data-context-create). Labeled pill on desktop,
   blue + orb on mobile where the label is hidden. */
.top-create-button { gap: 8px; padding: 0 14px; color: white; background: var(--color-connection-blue); box-shadow: 0 6px 18px rgb(22 139 255 / 0.25); }
.top-create-button:hover { background: var(--color-blue-strong); }
.top-create-button .icon { stroke-width: 2.3; }
.count-badge, .dot-badge, .button-count {
  display: grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  color: white;
  background: var(--color-magenta);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
.dot-badge { position: absolute; top: 1px; right: 0; border: 2px solid var(--color-world-navy); }
.profile-button { gap: 8px; width: auto; padding: 3px 9px 3px 3px; font-size: 14px; font-weight: 680; }

.avatar {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #287acb, #0a2d61 65%, #e82c78);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.avatar-x { background: linear-gradient(145deg, #168bff, #0a2d61 66%, #e82c78); }
/* Bee (2026-10-11): no personal initials in preview UI — generic guest avatar. */
.avatar-guest { background: var(--color-surface-raised); color: var(--color-text-muted); }
.avatar-guest .icon { width: 22px; height: 22px; }
.avatar-language, .avatar-mai { background: linear-gradient(145deg, #e82c78, #6b3279 58%, #168bff); }
.avatar-world, .avatar-local-event, .avatar-hmong-worldwide { background: radial-gradient(circle at 35% 30%, #bde9ff, #168bff 40%, #082b63 72%); }
.avatar-maker, .avatar-paj-studio { background: linear-gradient(135deg, #e82c78, #168bff); }
.avatar-forum, .avatar-language-circle { background: repeating-linear-gradient(45deg, #168bff 0 5px, #f4f7fb 5px 9px, #e82c78 9px 12px, #0a2d61 12px 20px); }
.avatar-music, .avatar-tone { background: linear-gradient(145deg, #8f4fff, #e82c78 55%, #168bff); }
.avatar-food { background: linear-gradient(145deg, #f4b942, #b65224 55%, #0a2d61); }
.avatar-gaming { background: linear-gradient(145deg, #34c98b, #087bea 58%, #071426); }
.avatar-career { background: linear-gradient(145deg, #d5dfec, #287acb 58%, #071426); }

.product-shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 28px;
  width: min(1520px, 100%);
  max-width: 1520px;
  margin: 0 auto;
  padding: 24px 20px 90px;
}
/* Bee (2026-10-11): no right rail — simplest layout. Main content takes the freed space. */
.product-shell.messages-layout { grid-template-columns: 250px minmax(0, 1fr); max-width: 1520px; }

.desktop-rail { position: sticky; top: calc(var(--header-height) + var(--internal-banner-offset) + 24px); align-self: start; }
/* Bee (2026-10-11): the desktop rail is one flat list of every feature — let it scroll on shorter screens. */
.desktop-rail { max-height: calc(100vh - var(--header-height) - var(--internal-banner-offset) - 40px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 12px; }
.rail-nav { display: grid; gap: 5px; }
.rail-link, .rail-create, .quick-link {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-text-soft);
  background: transparent;
  font-size: 16px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}
.rail-link:hover, .quick-link:hover { color: var(--color-text); background: var(--color-surface); }
.rail-link.active { position: relative; color: var(--color-sky); background: rgb(22 139 255 / 0.12); }
.rail-link.active::before { content: ""; position: absolute; left: 3px; width: 3px; height: 26px; border-radius: 3px; background: linear-gradient(var(--color-sky), var(--color-magenta)); }
.rail-link.active .icon { stroke-width: 2.25; }
.rail-create { justify-content: center; margin: 8px 0 4px; color: white; background: var(--color-connection-blue); box-shadow: 0 10px 28px rgb(22 139 255 / 0.2); }
.rail-create:hover { background: var(--color-blue-strong); transform: translateY(-1px); }
/* Bee (2026-10-11): Quick places strip at the top of the More page — the
   mobile "see everything" answer. Same 9 places as the desktop rail. */
.menu-quick { margin: 22px 0 6px; }
.menu-quick .eyebrow { margin: 0 4px 10px; }
.quick-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.quick-strip .quick-link { border: 1px solid var(--color-border); background: var(--color-surface); }
.rail-section { padding-top: 18px; border-top: 1px solid var(--color-border); }
.rail-label { margin: 0 12px 8px; color: var(--color-text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.quick-link { min-height: 42px; font-size: 14px; }
.quick-link .icon { width: 20px; height: 20px; }
.quick-link .chevron { width: 16px; height: 16px; margin-left: auto; color: var(--color-text-muted); }
.quick-link-featured { color: #fff; background: linear-gradient(135deg, #7c3aed, #d946ef); font-weight: 800; box-shadow: 0 8px 24px rgb(168 85 247 / 0.35); letter-spacing: 0.01em; }
.quick-link-featured:hover { color: #fff; background: linear-gradient(135deg, #8b5cf6, #e879f9); transform: translateY(-1px); }
.quick-link-featured .icon { width: 22px; height: 22px; }
.quick-link-featured .chevron { color: rgb(255 255 255 / 0.85); }
.rail-story { position: relative; margin-top: 22px; overflow: hidden; padding: 21px 18px 20px 21px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--color-surface), rgb(11 78 162 / 0.18)); }
.rail-story::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: repeating-linear-gradient(180deg, #56b8ff 0 8px, #f4f7fb 8px 14px, #e82c78 14px 20px, #287acb 20px 28px); }
.rail-story h2 { margin: 7px 0 8px; font-family: var(--font-display); font-size: 19px; line-height: 1.25; }
.rail-story > p:last-child { margin: 0; color: var(--color-text-soft); font-size: 13px; line-height: 1.5; }

.main-content { min-width: 0; }
.main-content:focus { outline: none; }
.surface-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgb(13 29 51 / 0.94); box-shadow: 0 1px 0 rgb(255 255 255 / 0.02); }

.eyebrow { margin: 0; color: var(--color-sky); font-size: 11px; font-weight: 820; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; min-height: 112px; margin-bottom: 18px; }
.page-heading h1 { margin: 5px 0 5px; font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); font-weight: 780; line-height: 1.08; letter-spacing: -0.035em; }
.page-heading > div:first-child > p:last-child { max-width: 670px; margin: 0; color: var(--color-text-soft); font-size: 15px; line-height: 1.55; }
.page-actions { flex: 0 0 auto; padding-bottom: 2px; }

.primary-button, .secondary-button, .text-button, .follow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.primary-button { color: white; background: var(--color-connection-blue); box-shadow: 0 8px 24px rgb(22 139 255 / 0.2); }
.primary-button:hover { background: var(--color-blue-strong); transform: translateY(-1px); }
.secondary-button { border-color: var(--color-border); color: var(--color-text); background: var(--color-surface-raised); }
.secondary-button:hover { border-color: var(--color-sky); background: var(--color-surface-strong); }
.secondary-button .icon { width: 19px; height: 19px; }
.text-button { min-height: 36px; padding-inline: 10px; color: var(--color-sky); background: transparent; }
.text-button:hover { background: rgb(22 139 255 / 0.1); }
.text-button .icon { width: 16px; height: 16px; }

.composer { display: block; padding: 14px; }
.composer-top { display: flex; align-items: center; gap: 12px; }
.composer-prompt { flex: 1; min-height: 44px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-soft); background: var(--color-surface-raised); text-align: left; cursor: pointer; }
.composer-prompt:hover { border-color: var(--color-sky); color: var(--color-text); }
/* Bee (2026-10-11): Facebook-style quick options under the prompt. */
.composer-quick { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-border-soft); }
.composer-quick button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 0; border-radius: 10px; color: var(--color-text-soft); background: transparent; font-size: 13px; font-weight: 600; cursor: pointer; }
.composer-quick button:hover { background: var(--color-surface-raised); color: var(--color-text); }
.composer-quick button .icon { width: 20px; height: 20px; }
.composer-quick button:nth-child(1) .icon { color: #73e5e6; }
.composer-quick button:nth-child(2) .icon { color: var(--color-sky); }
.composer-quick button:nth-child(3) .icon { color: #ff89bc; }

.feed-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 2px 12px; }
.feed-tools > p { margin: 0; color: var(--color-text-muted); font-size: 12px; text-align: right; }
.tab-strip { display: flex; gap: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tab-strip::-webkit-scrollbar { display: none; }
.tab-strip button, .role-tabs button, .message-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-muted);
  background: transparent;
  font-size: 14px;
  font-weight: 680;
  cursor: pointer;
}
.tab-strip button:hover, .role-tabs button:hover, .message-tabs button:hover { color: var(--color-text); background: var(--color-surface); }
.tab-strip button.active, .role-tabs button.active, .message-tabs button.active { color: var(--color-text); background: var(--color-surface-raised); box-shadow: inset 0 0 0 1px var(--color-border); }

.feed-list { display: grid; gap: 18px; }
.post-card { overflow: hidden; }
.post-header { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 18px 18px 12px; }
.post-header h2 { margin: 0 0 2px; font-size: 15px; line-height: 1.25; }
.post-header p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.icon-button.subtle { color: var(--color-text-muted); }
.post-body { padding: 0 18px 16px; }
.post-body h3 { margin: 3px 0 6px; font-family: var(--font-display); font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; }
.post-body > p { margin: 0 0 12px; color: #e2e9f2; line-height: 1.6; }
.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-row span { display: inline-flex; padding: 4px 9px; border: 1px solid rgb(86 184 255 / 0.2); border-radius: 999px; color: var(--color-sky); background: rgb(22 139 255 / 0.08); font-size: 12px; font-weight: 680; }

.post-visual {
  position: relative;
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  min-height: 235px;
  margin: 0 18px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgb(86 184 255 / 0.24);
  border-radius: 15px;
  background: linear-gradient(140deg, #082b63, #0d1d33 70%);
}
.post-visual::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 76% 36%, rgb(86 184 255 / 0.28), transparent 16rem); }
.post-visual > img { position: absolute; z-index: -1; right: 20px; bottom: -55px; width: 225px; opacity: 0.13; filter: saturate(0.8); }
.visual-pattern { align-self: stretch; background: repeating-linear-gradient(45deg, #168bff 0 5px, #f4f7fb 5px 10px, #e82c78 10px 14px, #0a2d61 14px 22px); }
.visual-copy { z-index: 1; max-width: 72%; padding: 28px; }
.visual-copy small { color: var(--color-sky); font-size: 11px; font-weight: 820; letter-spacing: 0.14em; }
.visual-copy strong { display: block; margin: 7px 0; font-family: var(--font-display); font-size: clamp(28px, 5vw, 40px); line-height: 1.05; letter-spacing: -0.035em; }
.visual-copy span { color: var(--color-text-soft); font-size: 14px; }
.visual-maker { background: linear-gradient(140deg, #251438, #0d1d33 68%); }
.visual-maker::before { background: radial-gradient(circle at 78% 30%, rgb(232 44 120 / 0.2), transparent 15rem); }
.visual-forum { background: linear-gradient(140deg, #0a2d61, #101b2d 68%); }
.visual-music { background: linear-gradient(140deg, #311547, #0a192d 70%); }
.visual-local { background: linear-gradient(140deg, #173c4c, #0d1d33 70%); }
.visual-career { background: linear-gradient(140deg, #1a2e4b, #0d1d33 70%); }
.play-button, .feature-play {
  position: absolute;
  z-index: 2;
  right: 26px;
  bottom: 24px;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 50%;
  color: white;
  background: rgb(7 20 38 / 0.78);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.play-button:hover, .feature-play:hover { background: var(--color-connection-blue); transform: scale(1.04); }
.post-context { display: flex; justify-content: space-between; gap: 12px; padding: 13px 19px 12px; color: var(--color-text-muted); font-size: 12px; }
.post-context strong { color: var(--color-text-soft); }
.post-actions { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--color-border); }
.post-actions button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; border: 0; color: var(--color-text-soft); background: transparent; font-size: 13px; font-weight: 650; cursor: pointer; }
.post-actions button:hover { color: var(--color-text); background: rgb(255 255 255 / 0.025); }
.post-actions button.selected { color: var(--color-sky); }
.post-actions button.selected .icon { fill: rgb(86 184 255 / 0.14); }
.post-actions .icon { width: 20px; height: 20px; }

.context-rail { display: grid; gap: 16px; }
.context-card { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgb(13 29 51 / 0.92); }
.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-title.compact { align-items: flex-start; }
.section-title h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 23px; line-height: 1.2; letter-spacing: -0.025em; }
.section-title.compact h2 { font-size: 18px; }
.section-title.compact button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; color: var(--color-text-muted); background: transparent; cursor: pointer; }
.section-title.compact button:hover { color: var(--color-text); background: var(--color-surface-raised); }
.section-title.compact .icon { width: 19px; height: 19px; }
.pulse-item { display: grid; grid-template-columns: 4px 1fr auto; gap: 11px; align-items: center; width: 100%; min-height: 70px; padding: 9px 6px; border: 0; border-radius: 10px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.pulse-item:hover { background: var(--color-surface-raised); }
.pulse-accent { align-self: stretch; border-radius: 4px; background: var(--color-sky); }
.pulse-accent.accent-magenta { background: var(--color-magenta); }
.pulse-accent.accent-silver { background: var(--color-silver); }
.pulse-item small, .pulse-item strong, .pulse-item em { display: block; font-style: normal; }
.pulse-item small { color: var(--color-sky); font-size: 10px; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; }
.pulse-item strong { margin: 2px 0; font-size: 14px; }
.pulse-item em { color: var(--color-text-muted); font-size: 11px; }
.pulse-item > .icon { width: 16px; color: var(--color-text-muted); }
.community-signal h2 { margin: 6px 0; font-size: 19px; }
.community-signal > p:not(.eyebrow) { margin: 0 0 16px; color: var(--color-text-soft); font-size: 13px; }
.signal-options { display: grid; gap: 9px; }
.signal-options span { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; overflow: hidden; padding: 6px 8px; border-radius: 8px; background: var(--color-navy-soft); }
.signal-options b { position: absolute; inset: 0 auto 0 0; width: var(--value); background: rgb(22 139 255 / 0.16); }
.signal-options em, .signal-options strong { position: relative; z-index: 1; font-size: 11px; font-style: normal; }
.signal-options em { color: var(--color-text-soft); }
.community-signal .text-button { margin-top: 11px; padding: 0; }
.context-footer { display: flex; flex-wrap: wrap; gap: 5px 13px; padding: 0 5px; color: var(--color-text-muted); font-size: 11px; }
.context-footer a:hover { color: var(--color-text); }

.bottom-nav { display: none; }

.content-section { margin-top: 30px; }
.content-section.compact-top { margin-top: 18px; }

/* Watch */
.watch-mode-intro { display: grid; grid-template-columns: 54px 1fr; gap: 15px; align-items: center; margin-top: 16px; padding: 18px; }
.watch-mode-intro > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; color: white; background: linear-gradient(145deg, var(--color-connection-blue), #075db8); }
.watch-mode-intro.live-intro > span { background: linear-gradient(145deg, var(--color-magenta), #79245d); }
.watch-mode-intro h2 { margin: 4px 0; font-family: var(--font-display); font-size: 21px; }
.watch-mode-intro p:last-child { margin: 0; color: var(--color-text-soft); font-size: 13px; line-height: 1.5; }
.watch-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr); min-height: 425px; margin-top: 16px; overflow: hidden; }
.feature-stage { position: relative; min-height: 425px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 42% 32%, rgb(143 79 255 / 0.36), transparent 18rem), linear-gradient(145deg, #1f1237, #082b63 55%, #071426); }
.feature-stage::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent, rgb(7 20 38 / 0.2)); }
.feature-stage > img { position: absolute; left: 50%; top: 50%; width: 310px; transform: translate(-50%, -50%); opacity: 0.28; filter: saturate(0.8); }
.stage-pattern { position: absolute; inset: 0 auto 0 0; width: 12px; background: repeating-linear-gradient(45deg, #56b8ff 0 8px, #f4f7fb 8px 14px, #e82c78 14px 20px, #287acb 20px 29px); }
.stage-orbit { position: absolute; width: 560px; height: 220px; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-12deg); border: 2px solid rgb(86 184 255 / 0.35); border-radius: 50%; box-shadow: 0 0 22px rgb(22 139 255 / 0.18); }
.feature-play { right: auto; bottom: auto; left: 50%; top: 50%; width: 66px; height: 66px; transform: translate(-50%, -50%); color: white; background: rgb(7 20 38 / 0.7); }
.feature-play:hover { transform: translate(-50%, -50%) scale(1.05); }
.caption-chip { position: absolute; right: 18px; bottom: 16px; padding: 7px 10px; border: 1px solid rgb(255 255 255 / 0.16); border-radius: 999px; color: white; background: rgb(7 20 38 / 0.72); font-size: 11px; font-weight: 720; backdrop-filter: blur(8px); }
.feature-info { display: flex; flex-direction: column; justify-content: center; padding: 28px; background: linear-gradient(145deg, var(--color-surface), var(--color-navy-soft)); }
.creator-line { display: flex; align-items: center; gap: 11px; }
.creator-line > span { flex: 1; min-width: 0; }
.creator-line strong, .creator-line small { display: block; }
.creator-line strong { font-size: 14px; }
.creator-line small { margin-top: 2px; color: var(--color-text-muted); font-size: 11px; }
.follow-button { min-height: 36px; padding: 0 13px; color: white; background: var(--color-connection-blue); }
.follow-button.following { color: var(--color-sky); background: rgb(22 139 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(86 184 255 / 0.25); }
.feature-info h2 { margin: 24px 0 8px; font-family: var(--font-display); font-size: clamp(26px, 3.8vw, 38px); line-height: 1.08; letter-spacing: -0.035em; }
.feature-info > p { margin: 0 0 14px; color: var(--color-text-soft); font-size: 14px; }
.attached-card { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; width: 100%; margin-top: 22px; padding: 12px; border: 1px solid var(--color-border); border-radius: 13px; color: inherit; background: var(--color-surface-raised); text-align: left; cursor: pointer; }
.attached-card:hover { border-color: var(--color-sky); }
.attached-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, var(--color-magenta), #8f2f78); }
.attached-card small, .attached-card strong { display: block; }
.attached-card small { color: var(--color-sky); font-size: 9px; font-weight: 800; letter-spacing: 0.08em; }
.attached-card strong { margin-top: 3px; font-size: 12px; }
.attached-card > .icon { width: 16px; color: var(--color-text-muted); }
.shorts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.short-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.short-art { position: relative; min-height: 270px; overflow: hidden; background: radial-gradient(circle at 54% 35%, rgb(244 185 66 / 0.3), transparent 10rem), linear-gradient(150deg, #432b17, #0d1d33); }
.short-tone .short-art { background: radial-gradient(circle at 50% 36%, rgb(232 44 120 / 0.3), transparent 10rem), linear-gradient(150deg, #3b183b, #0d1d33); }
.short-gaming .short-art { background: radial-gradient(circle at 50% 36%, rgb(52 201 139 / 0.28), transparent 10rem), linear-gradient(150deg, #123936, #0d1d33); }
.short-pattern { position: absolute; inset: auto 0 0; height: 56%; opacity: 0.55; background: repeating-linear-gradient(135deg, transparent 0 14px, rgb(244 247 251 / 0.16) 14px 18px, transparent 18px 30px); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.short-art button { position: absolute; left: 50%; top: 50%; display: grid; width: 52px; height: 52px; place-items: center; transform: translate(-50%, -50%); border: 1px solid rgb(255 255 255 / 0.25); border-radius: 50%; color: white; background: rgb(7 20 38 / 0.7); cursor: pointer; }
.short-art > span:last-child { position: absolute; right: 11px; bottom: 10px; padding: 5px 8px; border-radius: 999px; background: rgb(7 20 38 / 0.75); font-size: 10px; font-weight: 700; }
.short-copy { display: flex; gap: 9px; align-items: center; padding: 12px; }
.short-copy .avatar { width: 36px; height: 36px; font-size: 11px; }
.short-copy h3 { margin: 0; font-size: 13px; line-height: 1.3; }
.short-copy p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 11px; }
.short-full-link { display: grid; grid-template-columns: 18px 1fr 16px; gap: 8px; align-items: center; width: calc(100% - 20px); min-height: 42px; margin: 0 10px 10px; padding: 8px 10px; border: 1px solid rgb(86 184 255 / 0.2); border-radius: 10px; color: var(--color-sky); background: rgb(22 139 255 / 0.08); font-size: 11px; font-weight: 750; text-align: left; cursor: pointer; }
.short-full-link:hover { border-color: var(--color-sky); background: rgb(22 139 255 / 0.14); }
.short-full-link .icon { width: 17px; height: 17px; }
.live-list { display: grid; gap: 8px; }
.live-row { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 12px; align-items: center; width: 100%; min-height: 76px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: inherit; background: var(--color-surface); text-align: left; cursor: pointer; }
.live-row:hover { border-color: rgb(86 184 255 / 0.45); background: var(--color-surface-raised); }
.live-orb { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; color: white; background: linear-gradient(145deg, var(--color-magenta), #79245d); box-shadow: 0 0 0 4px rgb(232 44 120 / 0.12); }
.live-row small, .live-row strong, .live-row em { display: block; font-style: normal; }
.live-row small { color: var(--color-magenta); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.live-row strong { margin: 2px 0; font-size: 14px; }
.live-row em { color: var(--color-text-muted); font-size: 11px; }
.viewer-count { color: var(--color-text-soft); font-size: 12px; font-weight: 680; }
.live-row > .icon { width: 17px; color: var(--color-text-muted); }

/* Community */
.continue-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 13px; align-items: center; width: 100%; margin-top: 16px; padding: 16px; color: inherit; text-align: left; cursor: pointer; }
.continue-card:hover { border-color: rgb(86 184 255 / 0.48); background: var(--color-surface-raised); }
.continue-card small, .continue-card strong, .continue-card em { display: block; font-style: normal; }
.continue-card small { color: var(--color-magenta); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.continue-card strong { margin: 3px 0; font-size: 15px; }
.continue-card em { color: var(--color-text-muted); font-size: 12px; }
.continue-card > .icon { width: 17px; color: var(--color-text-muted); }
.community-list { display: grid; gap: 8px; }
.community-row { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; width: 100%; min-height: 82px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: inherit; background: var(--color-surface); text-align: left; cursor: pointer; }
.community-row:hover { border-color: rgb(86 184 255 / 0.45); background: var(--color-surface-raised); }
.community-row strong, .community-row small, .community-row em { display: block; font-style: normal; }
.community-row strong { font-size: 14px; }
.community-row small { margin-top: 3px; color: var(--color-text-soft); font-size: 11px; }
.community-row em { margin-top: 2px; color: var(--color-magenta); font-size: 10px; }
.community-row > .icon { width: 17px; color: var(--color-text-muted); }

/* Forums */
.forum-hero { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; align-items: end; margin-top: 16px; padding: 28px; overflow: hidden; background: radial-gradient(circle at 84% 16%, rgb(232 44 120 / 0.12), transparent 18rem), radial-gradient(circle at 8% 100%, rgb(22 139 255 / 0.16), transparent 22rem), var(--color-surface); }
.forum-hero h1 { max-width: 620px; margin: 5px 0 8px; font-family: var(--font-display); font-size: clamp(29px, 4vw, 43px); line-height: 1.06; letter-spacing: -0.04em; }
.forum-hero-copy > p:last-of-type { max-width: 650px; margin: 0; color: var(--color-text-soft); font-size: 14px; }
.forum-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 20px; }
.forum-hero-actions .primary-button { white-space: nowrap; }
.forum-search { display: flex; min-width: 0; min-height: 46px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 12px; background: rgb(7 20 38 / 0.72); }
.forum-search:focus-within { border-color: var(--color-sky); box-shadow: 0 0 0 3px rgb(86 184 255 / 0.1); }
.forum-search > .icon { flex: 0 0 auto; width: 18px; color: var(--color-sky); }
.forum-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--color-text); background: transparent; font-size: 13px; }
.forum-search button { width: 28px; height: 28px; border: 0; border-radius: 50%; color: var(--color-text-muted); background: transparent; cursor: pointer; }
.forum-search button:hover { color: var(--color-text); background: var(--color-surface-strong); }
.forum-stat-strip { display: grid; gap: 11px; }
.forum-stat-strip span { padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft); }
.forum-stat-strip span:last-child { border: 0; }
.forum-stat-strip strong, .forum-stat-strip small { display: block; }
.forum-stat-strip strong { font-family: var(--font-display); font-size: 19px; }
.forum-stat-strip small { color: var(--color-text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; }
.forum-continue { display: grid; grid-template-columns: 44px 1fr 18px; gap: 12px; align-items: center; margin-top: 10px; padding: 13px 15px; border-color: rgb(232 44 120 / 0.25); background: linear-gradient(90deg, rgb(232 44 120 / 0.075), var(--color-surface)); }
.forum-continue:hover { border-color: rgb(232 44 120 / 0.5); background: linear-gradient(90deg, rgb(232 44 120 / 0.13), var(--color-surface-raised)); }
.forum-continue-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: #ff8eba; background: rgb(232 44 120 / 0.12); }
.forum-continue-icon .icon { width: 20px; }
.forum-continue small, .forum-continue strong, .forum-continue em { display: block; font-style: normal; }
.forum-continue small { color: #ff8eba; font-size: 8px; font-weight: 800; letter-spacing: 0.07em; }
.forum-continue strong { margin: 2px 0; font-size: 13px; }
.forum-continue em { color: var(--color-text-muted); font-size: 10px; }
.forum-continue > .icon { width: 17px; color: var(--color-text-muted); }
.forum-following, .forum-section { margin-top: 28px; }
.section-note { color: var(--color-text-muted); font-size: 10px; }
.forum-followed-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.forum-followed-chip { display: grid; grid-template-columns: 38px 1fr 16px; gap: 10px; align-items: center; min-width: 0; padding: 10px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.forum-followed-chip:hover { border-color: rgb(86 184 255 / 0.42); background: var(--color-surface-raised); }
.forum-followed-chip strong, .forum-followed-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-followed-chip strong { font-size: 11px; }
.forum-followed-chip small { margin-top: 2px; color: var(--color-magenta); font-size: 9px; }
.forum-followed-chip > .icon { width: 15px; color: var(--color-text-muted); }
/* Bee (2026-10-11): categories are a clean list, not boxes — one list style site-wide. */
.forum-category-list { margin-top: 14px; padding: 6px; }
.forum-category-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; padding: 13px 10px; border-bottom: 1px solid var(--color-border-soft); color: inherit; text-decoration: none; }
.forum-category-row:last-child { border-bottom: 0; }
.forum-category-row:hover { background: var(--color-surface-raised); }
.forum-category-main { min-width: 0; }
.forum-category-row strong, .forum-category-row small { display: block; }
.forum-category-row strong { font-family: var(--font-display); font-size: 15px; }
.forum-category-row small { margin-top: 3px; color: var(--color-text-muted); font-size: 11px; line-height: 1.45; }
.forum-category-row .destination-arrow { width: 18px; color: var(--color-text-muted); }
.forum-category-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--color-sky); background: rgb(22 139 255 / 0.13); }
.forum-category-icon .icon { width: 22px; }
.forum-category-icon.large { width: 64px; height: 64px; border-radius: 19px; }
.forum-category-icon.large .icon { width: 29px; height: 29px; }
.forum-category-icon.accent-magenta, .forum-category-icon.accent-pink { color: #ff8eba; background: rgb(232 44 120 / 0.12); }
.forum-category-icon.accent-violet { color: #bca7ff; background: rgb(155 115 255 / 0.13); }
.forum-category-icon.accent-cyan { color: #73e5e6; background: rgb(62 201 204 / 0.12); }
.forum-category-icon.accent-silver { color: var(--color-silver); background: rgb(213 223 236 / 0.1); }
.forum-unread { position: absolute; top: 13px; right: 13px; padding: 3px 6px; border-radius: 999px; color: #ff8eba; background: rgb(232 44 120 / 0.12); font-size: 8px; font-style: normal; font-weight: 800; }
.forum-subforums { display: flex; flex-wrap: wrap; gap: 5px; min-height: 54px; padding: 0 15px 13px; }
.forum-subforums a, .forum-subforum-nav button { min-height: 27px; padding: 5px 8px; border: 1px solid var(--color-border-soft); border-radius: 999px; color: var(--color-text-soft); background: var(--color-navy-soft); font-size: 9px; cursor: pointer; }
.forum-subforums a:hover, .forum-subforum-nav button:hover, .forum-subforum-nav button.active { border-color: rgb(86 184 255 / 0.45); color: var(--color-sky); background: rgb(22 139 255 / 0.09); }
.forum-breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 2px 12px; color: var(--color-text-muted); font-size: 10px; }
.forum-breadcrumbs a { color: var(--color-sky); }
.forum-breadcrumbs .icon { width: 12px; height: 12px; }
.forum-category-hero { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 17px; align-items: center; padding: 22px; background: radial-gradient(circle at 0 100%, rgb(22 139 255 / 0.12), transparent 18rem), var(--color-surface); }
.forum-category-hero h1, .forum-thread-head h1 { margin: 2px 0 4px; font-family: var(--font-display); font-size: clamp(28px, 4vw, 38px); line-height: 1.08; letter-spacing: -0.035em; }
.forum-category-hero p { max-width: 590px; margin: 0; color: var(--color-text-soft); font-size: 12px; }
.forum-category-hero > div > span { display: block; margin-top: 8px; color: var(--color-text-muted); font-size: 9px; }
.forum-category-actions { display: flex; gap: 7px; }
.secondary-button.active { border-color: rgb(52 201 139 / 0.38); color: var(--color-success); background: rgb(52 201 139 / 0.08); }
.forum-subforum-nav { display: flex; gap: 6px; margin: 10px 0; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }
.forum-subforum-nav::-webkit-scrollbar { display: none; }
.forum-subforum-nav button { flex: 0 0 auto; min-height: 32px; padding-inline: 11px; }
.forum-tools { display: grid; grid-template-columns: minmax(210px, 1fr) auto auto; gap: 10px; align-items: center; margin-bottom: 10px; padding: 10px; }
.forum-filter-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--color-navy-soft); }
.forum-filter-tabs button { min-height: 32px; padding: 0 9px; border: 0; border-radius: 7px; color: var(--color-text-muted); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.forum-filter-tabs button.active { color: white; background: var(--color-surface-strong); }
.forum-sort { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); font-size: 9px; }
.forum-sort select { min-height: 36px; padding: 0 28px 0 9px; border: 1px solid var(--color-border); border-radius: 9px; color: var(--color-text); background: var(--color-navy-soft); font-size: 10px; }
.forum-thread-list { overflow: hidden; }
.forum-thread-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 70px 24px; gap: 11px; align-items: center; min-height: 88px; padding: 12px 14px; border-bottom: 1px solid var(--color-border-soft); }
.forum-thread-row:last-child { border-bottom: 0; }
.forum-thread-row:hover { background: var(--color-surface-raised); }
.forum-thread-row.unread { box-shadow: inset 3px 0 var(--color-connection-blue); }
.forum-thread-main { min-width: 0; }
.forum-thread-main > strong { display: block; margin: 3px 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.forum-thread-main > small { display: block; overflow: hidden; color: var(--color-text-muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.forum-thread-labels, .thread-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.forum-thread-labels em, .thread-tags i { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px; border-radius: 5px; font-size: 7px; font-style: normal; font-weight: 800; }
.thread-prefix { color: var(--color-sky); background: rgb(22 139 255 / 0.11); }
.thread-state { color: var(--color-warning); background: rgb(244 185 66 / 0.1); }
.thread-solved { color: var(--color-success); background: rgb(52 201 139 / 0.09); }
.forum-thread-labels .icon { width: 9px; height: 9px; }
.thread-tags { margin-top: 5px; }
.thread-tags i { color: var(--color-text-muted); background: var(--color-navy-soft); font-weight: 650; }
.forum-thread-stats { display: grid; grid-template-columns: auto 1fr; gap: 0 4px; color: var(--color-text-muted); font-size: 8px; }
.forum-thread-stats strong { color: var(--color-text-soft); font-size: 9px; text-align: right; }
.forum-last-reply { display: grid; grid-template-columns: 1fr 12px; min-width: 0; }
.forum-last-reply strong, .forum-last-reply small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-last-reply strong { font-size: 9px; }
.forum-last-reply small { color: var(--color-text-muted); font-size: 8px; }
.forum-last-reply .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 12px; color: var(--color-text-muted); }
.forum-no-results { display: grid; min-height: 180px; place-items: center; align-content: center; gap: 6px; padding: 24px; color: var(--color-text-muted); font-size: 11px; text-align: center; }
.forum-no-results > .icon { width: 28px; color: var(--color-sky); }
.forum-no-results strong { color: var(--color-text); font-size: 14px; }
.forum-no-results .primary-button { margin-top: 8px; }
.forum-thread-head { padding: 24px; background: radial-gradient(circle at 100% 0, rgb(22 139 255 / 0.11), transparent 22rem), var(--color-surface); }
.forum-thread-head h1 { max-width: 780px; }
.forum-thread-head > p { margin: 0; color: var(--color-text-muted); font-size: 10px; }
.forum-thread-head > .thread-tags { margin-top: 10px; }
.forum-thread-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.forum-post-list { display: grid; gap: 9px; margin-top: 10px; }
.forum-post { display: grid; grid-template-columns: 138px minmax(0, 1fr); overflow: hidden; scroll-margin-top: 100px; }
.forum-post.accepted-answer { border-color: rgb(52 201 139 / 0.35); box-shadow: inset 4px 0 rgb(52 201 139 / 0.66); }
.forum-post.reply-highlight { animation: reply-found 2.4s ease-out; }
@keyframes reply-found { from { box-shadow: inset 0 0 0 2px var(--color-sky), 0 0 32px rgb(22 139 255 / 0.32); } }
.forum-post-author { padding: 16px 13px; border-right: 1px solid var(--color-border-soft); background: var(--color-navy-soft); text-align: center; }
.forum-post-author .avatar { width: 52px; height: 52px; margin: 0 auto 8px; }
.forum-post-author strong, .forum-post-author small, .forum-post-author span { display: block; }
.forum-post-author strong { font-size: 11px; }
.forum-post-author small { margin-top: 2px; color: var(--color-sky); font-size: 8px; }
.forum-post-author span { margin-top: 9px; color: var(--color-text-muted); font-size: 8px; }
.forum-post-body { min-width: 0; padding: 14px 16px; }
.forum-post-body > header { display: flex; gap: 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--color-border-soft); }
.forum-post-body header time { margin-right: auto; color: var(--color-text-muted); font-size: 9px; }
.forum-post-body header span { display: inline-flex; align-items: center; gap: 4px; color: var(--color-success); font-size: 9px; font-weight: 800; }
.forum-post-body header span .icon { width: 12px; }
.forum-post-body header button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: var(--color-text-muted); background: transparent; font-size: 8px; cursor: pointer; }
.forum-post-body header button .icon { width: 12px; }
.forum-post-body > p { min-height: 74px; margin: 15px 0; color: var(--color-text-soft); font-size: 12px; line-height: 1.65; }
.forum-quote { margin: 13px 0 -4px; padding: 9px 11px; border-left: 3px solid var(--color-textile-blue); color: var(--color-text-muted); background: var(--color-navy-soft); font-size: 10px; }
.forum-post-body > footer { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 9px; border-top: 1px solid var(--color-border-soft); }
.forum-post-body > footer button { display: inline-flex; min-height: 30px; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--color-border-soft); border-radius: 8px; color: var(--color-text-muted); background: transparent; font-size: 8px; cursor: pointer; }
.forum-post-body > footer button:hover, .forum-post-body > footer button.active { border-color: rgb(86 184 255 / 0.35); color: var(--color-sky); background: rgb(22 139 255 / 0.07); }
.forum-post-body > footer .icon { width: 13px; }
.forum-reply-composer { margin-top: 10px; padding: 16px; }
.forum-reply-composer > header { display: flex; gap: 10px; align-items: center; }
.forum-reply-composer h2 { margin: 1px 0; font-size: 13px; }
.forum-reply-prompt { width: 100%; min-height: 46px; margin-top: 12px; padding: 0 13px; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text-muted); background: var(--color-navy-soft); text-align: left; cursor: text; }
.forum-reply-prompt:hover { border-color: var(--color-sky); }
.forum-reply-composer form { margin-top: 12px; }
.forum-reply-composer textarea { width: 100%; padding: 12px; resize: vertical; border: 1px solid var(--color-border); border-radius: 11px; outline: 0; color: var(--color-text); background: var(--color-navy-soft); }
.forum-reply-composer textarea:focus { border-color: var(--color-sky); box-shadow: 0 0 0 3px rgb(86 184 255 / 0.1); }
.forum-reply-composer form > div { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 8px; }
.forum-reply-composer form > div > span { display: inline-flex; gap: 5px; color: var(--color-text-muted); font-size: 8px; }
.forum-reply-composer form > div .icon { width: 13px; color: var(--color-sky); }
.forum-rules { display: flex; gap: 9px; align-items: flex-start; margin: 10px 0; padding: 11px; border: 1px solid rgb(86 184 255 / 0.14); border-radius: 11px; color: var(--color-text-muted); background: rgb(22 139 255 / 0.045); }
.forum-rules > .icon { flex: 0 0 auto; width: 17px; color: var(--color-sky); }
.forum-rules p { flex: 1; margin: 0; font-size: 9px; }
.forum-rules strong { color: var(--color-text-soft); }
.forum-rules button { padding: 0; border: 0; color: var(--color-text-muted); background: transparent; font-size: 9px; text-decoration: underline; cursor: pointer; }
.rooms-explainer { display: flex; gap: 13px; align-items: flex-start; margin-top: 16px; padding: 15px; }
.rooms-explainer > .icon { flex: 0 0 auto; color: var(--color-sky); }
.rooms-explainer strong { font-size: 14px; }
.rooms-explainer p { margin: 4px 0 0; color: var(--color-text-soft); font-size: 12px; line-height: 1.5; }
.room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.room-card { display: flex; min-height: 260px; flex-direction: column; align-items: flex-start; padding: 17px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--color-surface), var(--color-navy-soft)); }
.room-icon { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 18px; border-radius: 14px; color: var(--color-sky); background: rgb(22 139 255 / 0.13); }
.room-card > small { color: var(--color-sky); font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.room-card h2 { margin: 7px 0 5px; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.room-card p { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.room-card > strong { margin-top: 8px; color: var(--color-text-soft); font-size: 11px; }
.room-card button { width: 100%; min-height: 40px; margin-top: auto; border: 0; border-radius: 999px; color: white; background: var(--color-connection-blue); font-weight: 760; cursor: pointer; }
.room-card button:hover { background: var(--color-blue-strong); }

/* Rooms */
.rooms-hero { display: grid; grid-template-columns: 68px 1fr minmax(230px, 0.55fr); gap: 18px; align-items: center; margin-bottom: 16px; padding: 20px; background: radial-gradient(circle at 10% 20%, rgb(22 139 255 / 0.18), transparent 17rem), linear-gradient(135deg, var(--color-surface), var(--color-navy-soft)); }
.rooms-hero-mark { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid rgb(86 184 255 / 0.34); border-radius: 20px; color: white; background: linear-gradient(145deg, var(--color-connection-blue), #7554d7); box-shadow: 0 14px 36px rgb(22 139 255 / 0.2); }
.rooms-hero-mark .icon { width: 30px; height: 30px; }
.rooms-hero h2 { margin: 4px 0; font-family: var(--font-display); font-size: 22px; }
.rooms-hero p:not(.eyebrow) { margin: 0; color: var(--color-text-soft); font-size: 13px; }
.room-type-filter { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; padding: 8px 10px; border: 1px solid var(--color-border-soft); border-radius: 13px; background: var(--color-navy-soft); }
.room-type-filter > span { flex: 0 0 auto; color: var(--color-text-muted); font-size: 11px; font-weight: 750; }
.provider-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid rgb(52 201 139 / 0.22); border-radius: 12px; background: rgb(52 201 139 / 0.07); }
.provider-note > .icon { flex: 0 0 auto; width: 18px; color: var(--color-success); }
.provider-note strong, .provider-note small { display: block; }
.provider-note strong { font-size: 12px; }
.provider-note small { margin-top: 3px; color: var(--color-text-muted); font-size: 10px; line-height: 1.45; }
/* Bee (2026-10-11): rooms are a clean list now, not boxes — one row per room. */
.rooms-browser-list { margin-top: 16px; padding: 6px; }
.room-list-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; width: 100%; padding: 12px 10px; border: 0; border-bottom: 1px solid var(--color-border-soft); color: inherit; background: transparent; text-align: left; cursor: pointer; }
.room-list-row:last-child { border-bottom: 0; }
.room-list-row:hover { background: var(--color-surface-raised); }
.room-list-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; color: var(--color-sky); background: rgb(22 139 255 / 0.13); }
.room-list-icon .icon { width: 22px; height: 22px; }
.room-list-icon.type-voice { color: #bca7ff; background: rgb(155 115 255 / 0.12); }
.room-list-icon.type-video { color: #ff89bc; background: rgb(232 44 120 / 0.12); }
.room-list-main { min-width: 0; }
.room-list-main strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.room-list-main small { display: block; margin-top: 3px; overflow: hidden; color: var(--color-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.room-live-badge { padding: 3px 8px; border-radius: 999px; color: #fff; background: #e82c78; font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }
.room-list-chevron { width: 18px; color: var(--color-text-muted); }
.room-type { display: inline-flex; width: max-content; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: var(--color-sky); background: rgb(22 139 255 / 0.11); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.room-type .icon { width: 14px; height: 14px; }
.type-voice { color: #bca7ff; background: rgb(155 115 255 / 0.12); }
.type-video { color: #ff89bc; background: rgb(232 44 120 / 0.12); }
.room-access { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); font-size: 10px; }
.room-access .icon { width: 13px; height: 13px; }
.rooms-connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.connect-entry { display: grid; grid-template-columns: 54px 1fr 20px; gap: 14px; align-items: center; min-height: 150px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: inherit; background: var(--color-surface); text-align: left; cursor: pointer; }
.connect-entry:hover { transform: translateY(-2px); border-color: rgb(86 184 255 / 0.45); box-shadow: var(--shadow-1); }
.connect-entry > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: var(--color-sky); background: rgb(22 139 255 / 0.13); }
.connect-entry.dating > span { color: #ff89bc; background: rgb(232 44 120 / 0.12); }
.connect-entry small { color: var(--color-sky); font-size: 9px; font-weight: 800; letter-spacing: 0.07em; }
.connect-entry.dating small { color: #ff89bc; }
.connect-entry h3 { margin: 3px 0; font-family: var(--font-display); font-size: 18px; }
.connect-entry p { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.connect-entry > .icon { width: 18px; color: var(--color-text-muted); }
.hosting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hosting-grid article { min-height: 150px; padding: 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.hosting-grid article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; color: var(--color-success); background: rgb(52 201 139 / 0.09); }
.hosting-grid h3 { margin: 17px 0 5px; font-size: 14px; }
.hosting-grid p, .future-note { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.future-note { margin-top: 10px; }
.room-lobby { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: center; min-height: 390px; padding: 34px; background: radial-gradient(circle at 16% 32%, rgb(22 139 255 / 0.14), transparent 22rem), linear-gradient(135deg, var(--color-surface), var(--color-night)); }
.room-lobby-copy > .eyebrow { margin-top: 38px; }
.room-lobby h1, .active-room-header h1, .connect-panel h1 { margin: 6px 0 8px; font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px); line-height: 1.05; letter-spacing: -0.04em; }
.room-lobby-copy > p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--color-text-soft); font-size: 15px; }
.room-meta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.room-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--color-border-soft); border-radius: 999px; color: var(--color-text-soft); background: rgb(13 29 51 / 0.7); font-size: 10px; }
.room-meta .icon { width: 14px; height: 14px; color: var(--color-sky); }
.join-card { padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: rgb(13 29 51 / 0.88); box-shadow: var(--shadow-1); }
.join-card h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 21px; }
.join-card > p { margin: 0 0 16px; color: var(--color-text-soft); font-size: 12px; }
.join-setting { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; border-top: 1px solid var(--color-border-soft); font-size: 11px; }
.join-setting span { display: inline-flex; align-items: center; gap: 6px; }
.join-setting .icon { width: 16px; color: var(--color-text-muted); }
.join-setting strong { color: var(--color-success); font-size: 10px; }
.join-card .primary-button { width: 100%; margin-top: 14px; }
.join-card > small { display: block; margin-top: 9px; color: var(--color-text-muted); font-size: 9px; text-align: center; }
.room-safety, .connect-boundary { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border: 1px solid rgb(86 184 255 / 0.18); border-radius: 12px; color: var(--color-text-soft); background: rgb(22 139 255 / 0.06); }
.room-safety .icon, .connect-boundary .icon { flex: 0 0 auto; width: 19px; color: var(--color-sky); }
.room-safety p, .connect-boundary p { margin: 0; font-size: 11px; }
.room-safety strong, .connect-boundary strong { color: var(--color-text); }
.active-room-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.active-room-header h1 { font-size: 34px; }
.active-room-header p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.active-room-header > div:last-child { display: flex; gap: 8px; }
.danger-button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 6px; padding: 0 13px; border: 1px solid rgb(255 93 108 / 0.34); border-radius: 10px; color: #ff9ca6; background: rgb(255 93 108 / 0.07); font-size: 12px; font-weight: 750; cursor: pointer; }
.danger-button:hover { background: rgb(255 93 108 / 0.13); }
.danger-button .icon { width: 17px; }
.text-room-layout, .voice-room-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.room-conversation { min-width: 0; }
.pinned-message { display: flex; gap: 10px; align-items: center; margin: 12px; padding: 11px; border: 1px solid rgb(86 184 255 / 0.18); border-radius: 10px; background: rgb(22 139 255 / 0.07); }
.pinned-message > .icon { width: 18px; color: var(--color-sky); }
.pinned-message small, .pinned-message strong { display: block; }
.pinned-message small { color: var(--color-sky); font-size: 8px; font-weight: 800; letter-spacing: 0.07em; }
.pinned-message strong { font-size: 11px; }
.room-messages { display: grid; min-height: 330px; align-content: end; padding: 8px 16px; }
.room-message { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--color-border-soft); }
.room-message header { display: flex; align-items: center; gap: 6px; }
.room-message header strong { font-size: 12px; }
.room-message header span { padding: 2px 5px; border-radius: 5px; color: var(--color-sky); background: rgb(22 139 255 / 0.09); font-size: 8px; }
.room-message time { margin-left: auto; color: var(--color-text-muted); font-size: 9px; }
.room-message p { margin: 4px 0; color: var(--color-text-soft); font-size: 12px; }
.room-message footer { display: flex; gap: 10px; }
.room-message footer button { padding: 0; border: 0; color: var(--color-text-muted); background: transparent; font-size: 9px; cursor: pointer; }
.room-composer { display: grid; grid-template-columns: 1fr 44px auto; gap: 7px; padding: 12px; border-top: 1px solid var(--color-border); }
.room-composer label { min-width: 0; }
.room-composer input { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--color-border); border-radius: 11px; outline: 0; color: var(--color-text); background: var(--color-navy-soft); }
.room-members, .speaker-queue { padding: 14px; border-left: 1px solid var(--color-border); background: var(--color-navy-soft); }
.room-members > header, .speaker-queue > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-soft); }
.room-members header small, .room-members header strong, .speaker-queue header small, .speaker-queue header strong { display: block; }
.room-members header small, .speaker-queue header small { color: var(--color-sky); font-size: 8px; font-weight: 800; letter-spacing: 0.06em; }
.room-members header strong, .speaker-queue header strong { font-size: 11px; }
.room-members button, .speaker-queue button { border: 0; color: var(--color-sky); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.room-members > div, .speaker-queue > div { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border-soft); }
.room-members > div span, .speaker-queue > div span { flex: 1; min-width: 0; }
.room-members > div strong, .room-members > div small, .speaker-queue > div strong, .speaker-queue > div small { display: block; }
.room-members > div strong, .speaker-queue > div strong { font-size: 11px; }
.room-members > div small, .speaker-queue > div small { color: var(--color-text-muted); font-size: 9px; }
.room-members > p, .speaker-queue > p { margin-top: 14px; color: var(--color-text-muted); font-size: 9px; }
.room-members > p .icon { display: inline; width: 12px; color: var(--color-sky); }
.voice-stage { padding: 22px; }
.voice-stage > header { display: flex; align-items: center; justify-content: space-between; }
.voice-stage header small { color: var(--color-sky); font-size: 9px; font-weight: 800; }
.voice-stage h2 { margin: 3px 0; font-family: var(--font-display); font-size: 21px; }
.live-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--color-magenta); font-size: 10px; font-weight: 750; }
.live-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-magenta); box-shadow: 0 0 0 5px rgb(232 44 120 / 0.09); }
.participant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; min-height: 310px; align-content: center; }
.participant { display: grid; place-items: center; min-height: 150px; padding: 12px; border: 1px solid var(--color-border-soft); border-radius: 14px; background: var(--color-navy-soft); text-align: center; }
.participant.speaking { border-color: var(--color-success); box-shadow: inset 0 0 0 2px rgb(52 201 139 / 0.15); }
.participant .avatar { width: 60px; height: 60px; font-size: 15px; }
.participant strong { margin-top: 9px; font-size: 11px; }
.participant small { color: var(--color-text-muted); font-size: 9px; }
.participant > span { display: flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--color-text-soft); font-size: 8px; }
.participant > span .icon { width: 11px; }
.room-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--color-border-soft); }
.control-button { display: inline-flex; min-height: 44px; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-soft); background: var(--color-navy-soft); font-size: 10px; font-weight: 700; cursor: pointer; }
.control-button.active { border-color: var(--color-success); color: white; background: rgb(52 201 139 / 0.1); }
.control-button .icon { width: 16px; }
.video-room-layout { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.video-tile { position: relative; display: grid; min-height: 220px; place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: 14px; background: radial-gradient(circle at center, #1d4169, var(--color-night)); }
.video-tile.camera-off { background: var(--color-navy-soft); }
.video-tile .avatar { width: 74px; height: 74px; font-size: 18px; }
.video-tile.camera-off > p { margin: -45px 0 0; color: var(--color-text-muted); font-size: 10px; }
.video-tile footer { position: absolute; inset: auto 0 0; display: flex; align-items: center; justify-content: space-between; padding: 10px; background: linear-gradient(transparent, rgb(4 13 25 / 0.94)); }
.video-tile footer strong { font-size: 11px; }
.video-tile footer span { display: flex; align-items: center; gap: 4px; color: var(--color-text-soft); font-size: 9px; }
.video-tile footer .icon { width: 12px; }
.audience-tile { align-content: center; gap: 5px; color: var(--color-text-soft); background: var(--color-navy-soft); }
.audience-tile > .icon { width: 38px; height: 38px; color: var(--color-sky); }
.audience-tile strong { font-size: 13px; }
.audience-tile small { color: var(--color-text-muted); font-size: 10px; }
.active-room-safety { display: flex; justify-content: center; gap: 9px; margin-top: 13px; color: var(--color-text-muted); font-size: 10px; }
.active-room-safety button { padding: 0; border: 0; color: var(--color-text-muted); background: transparent; cursor: pointer; text-decoration: underline; }
.connect-panel { max-width: 850px; min-height: 620px; margin-inline: auto; padding: 30px; background: radial-gradient(circle at 90% 10%, rgb(22 139 255 / 0.13), transparent 24rem), var(--color-surface); }
.connect-panel.dating-connect { background: radial-gradient(circle at 90% 10%, rgb(232 44 120 / 0.12), transparent 24rem), var(--color-surface); }
.connect-panel > header { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; }
.connect-panel > header > span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 19px; color: var(--color-sky); background: rgb(22 139 255 / 0.13); }
.dating-connect > header > span { color: #ff89bc; background: rgb(232 44 120 / 0.12); }
.connect-panel h1 { font-size: 34px; }
.connect-panel header p:last-child { margin: 0; color: var(--color-text-soft); font-size: 12px; }
.connect-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 24px 0 0; padding: 0; border: 0; }
.connect-modes legend { grid-column: 1 / -1; margin-bottom: 7px; color: var(--color-text-soft); font-size: 11px; font-weight: 700; }
.connect-modes button { display: flex; min-height: 68px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text-soft); background: var(--color-navy-soft); cursor: pointer; }
.connect-modes button.active { border-color: var(--color-sky); color: white; background: rgb(22 139 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(86 184 255 / 0.15); }
.dating-checks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.dating-checks span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 7px; border-radius: 999px; color: var(--color-text-soft); background: var(--color-navy-soft); font-size: 9px; }
.dating-checks .icon { width: 12px; height: 12px; color: var(--color-success); }
.video-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border: 1px solid rgb(232 44 120 / 0.2); border-radius: 11px; background: rgb(232 44 120 / 0.06); cursor: pointer; }
.video-consent input { width: 18px; height: 18px; accent-color: var(--color-magenta); }
.video-consent strong, .video-consent small { display: block; }
.video-consent strong { font-size: 11px; }
.video-consent small { color: var(--color-text-muted); font-size: 9px; }
.connect-state { display: grid; min-height: 260px; place-items: center; align-content: center; padding: 20px; text-align: center; }
.connect-orb { display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgb(86 184 255 / 0.28); border-radius: 50%; color: var(--color-sky); background: rgb(22 139 255 / 0.1); box-shadow: 0 0 0 15px rgb(22 139 255 / 0.025); }
.connect-orb .icon { width: 31px; height: 31px; }
.connect-state h2 { margin: 22px 0 4px; font-family: var(--font-display); font-size: 21px; }
.connect-state > p, .connect-state > small { margin: 0 0 16px; color: var(--color-text-muted); font-size: 10px; }
.connect-state.matching .connect-orb { animation: connect-pulse 1.5s ease-in-out infinite; }
@keyframes connect-pulse { 50% { transform: scale(1.06); box-shadow: 0 0 0 24px rgb(22 139 255 / 0.04); } }
.matched-person { display: flex; gap: 14px; align-items: center; min-width: min(100%, 380px); padding: 16px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-navy-soft); text-align: left; }
.matched-person .avatar { width: 62px; height: 62px; font-size: 15px; }
.matched-person small { color: var(--color-sky); font-size: 8px; font-weight: 800; }
.matched-person h2 { margin: 3px 0; }
.matched-person p { margin: 0; color: var(--color-text-muted); font-size: 10px; }
.connect-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 18px; }

/* Discover */
.discover-search { min-height: 56px; margin-bottom: 13px; padding-inline: 18px; border-radius: 15px; background: var(--color-surface-raised); }
.discover-search .icon { color: var(--color-sky); }
.discover-search input { font-size: 16px; }
.discover-search button { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; color: var(--color-text-muted); background: transparent; cursor: pointer; }
.discover-search button:hover { color: var(--color-text); background: var(--color-surface-strong); }
.discover-topics { display: flex; gap: 7px; margin: 0 0 14px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: none; }
.discover-topics::-webkit-scrollbar { display: none; }
.discover-topics button { flex: 0 0 auto; min-height: 36px; padding: 0 13px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-soft); background: var(--color-surface); font-size: 12px; font-weight: 720; cursor: pointer; }
.discover-topics button:hover { border-color: var(--color-sky); color: white; background: rgb(22 139 255 / 0.1); }
.privacy-note { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 24px; padding: 12px 14px; border: 1px solid rgb(86 184 255 / 0.16); border-radius: var(--radius-md); color: var(--color-text-soft); background: rgb(22 139 255 / 0.065); }
.privacy-note .icon { flex: 0 0 auto; width: 20px; color: var(--color-sky); }
.privacy-note p { margin: 0; font-size: 12px; }
.privacy-note strong { color: var(--color-text); }
.result-summary { margin: -8px 0 22px; color: var(--color-text-muted); font-size: 13px; }
.discover-groups { display: grid; gap: 34px; }
.discover-group > header { margin-bottom: 13px; }
.discover-group h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -0.02em; }
.destination-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.destination-card { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; min-height: 88px; padding: 13px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 14px; color: inherit; background: var(--color-surface); text-align: left; cursor: pointer; }
.destination-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent, var(--color-sky)); }
.destination-card:hover { transform: translateY(-1px); border-color: rgb(86 184 255 / 0.48); background: var(--color-surface-raised); box-shadow: var(--shadow-1); }
.destination-card.accent-magenta { --accent: var(--color-magenta); }
.destination-card.accent-cyan { --accent: #42d9d0; }
.destination-card.accent-silver { --accent: var(--color-silver); }
.destination-card.accent-violet { --accent: #9b73ff; }
.destination-card.accent-pink { --accent: #ff73b1; }
.destination-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--accent, var(--color-sky)); background: color-mix(in srgb, var(--accent, var(--color-sky)) 13%, transparent); }
.destination-icon .icon { width: 22px; height: 22px; }
.destination-card strong, .destination-card small { display: block; }
.destination-card strong { font-size: 14px; }
.destination-card small { margin-top: 3px; color: var(--color-text-muted); font-size: 12px; }
.destination-card em { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; color: var(--color-text-soft); background: var(--color-surface-raised); font-size: 9px; font-style: normal; font-weight: 700; white-space: nowrap; }
.destination-card em .icon { width: 12px; height: 12px; }
.destination-arrow { width: 17px; color: var(--color-text-muted); }

/* Ecosystem Menu */
.menu-safety-note, .family-private-note { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; padding: 13px 14px; border: 1px solid rgb(86 184 255 / 0.18); border-radius: 13px; color: var(--color-text-soft); background: rgb(22 139 255 / 0.06); }
.menu-safety-note > .icon, .family-private-note > .icon { flex: 0 0 auto; width: 20px; color: var(--color-sky); }
.menu-safety-note p, .family-private-note p { margin: 0; font-size: 12px; line-height: 1.5; }
.menu-safety-note strong, .family-private-note strong { color: var(--color-text); }
.navigation-customizer { margin-bottom: 30px; overflow: hidden; padding: 20px; background: radial-gradient(circle at 92% 4%, rgb(22 139 255 / 0.16), transparent 20rem), var(--color-surface); }
.navigation-customizer > header { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; }
.navigation-customizer-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgb(86 184 255 / 0.25); border-radius: 14px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.navigation-customizer h2 { margin: 3px 0 4px; font-family: var(--font-display); font-size: 22px; }
.navigation-customizer header p:last-child { margin: 0; color: var(--color-text-soft); font-size: 12px; line-height: 1.5; }
.current-shortcut { display: grid; grid-template-columns: 26px auto; gap: 1px 8px; align-items: center; min-width: 126px; padding: 10px 12px; border: 1px solid rgb(86 184 255 / 0.28); border-radius: 12px; color: var(--color-sky); background: rgb(22 139 255 / 0.09); }
.current-shortcut > .icon { grid-row: 1 / 3; width: 24px; height: 24px; }
.current-shortcut small { color: var(--color-text-muted); font-size: 9px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.current-shortcut strong { color: var(--color-text); font-size: 13px; }
.navigation-fallback { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; color: var(--color-text-soft); background: rgb(232 44 120 / 0.09); font-size: 12px; }
.navigation-fallback .icon { width: 17px; color: var(--color-magenta); }
.shortcut-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.shortcut-option { position: relative; display: grid; min-height: 84px; place-items: center; gap: 5px; padding: 9px 5px; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-text-soft); background: var(--color-navy-soft); cursor: pointer; }
.shortcut-option:hover { border-color: rgb(86 184 255 / 0.5); color: var(--color-text); background: var(--color-surface-raised); }
.shortcut-option:disabled { cursor: wait; opacity: 0.68; }
.shortcut-option > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.shortcut-option > span .icon { width: 20px; height: 20px; }
.shortcut-option > strong { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-option > .icon { position: absolute; top: 7px; right: 7px; width: 15px; height: 15px; color: var(--color-sky); }
.shortcut-option.selected { border-color: var(--color-sky); color: white; background: rgb(22 139 255 / 0.12); box-shadow: inset 0 0 0 1px rgb(86 184 255 / 0.16); }
.navigation-customizer > footer { display: flex; gap: 7px; align-items: center; margin-top: 13px; color: var(--color-text-muted); font-size: 11px; }
.navigation-customizer > footer .icon { width: 15px; height: 15px; }
.ecosystem-menu { display: grid; gap: 32px; }
.menu-section > header { margin-bottom: 12px; }
.menu-section h2 { margin: 3px 0 0; font-family: var(--font-display); font-size: 21px; }

/* Domain contextual surfaces */
.context-section-body { margin-top: 16px; }
/* Bee (2026-10-11): listings are a clean list, not boxes — one list style site-wide. */
.marketplace-list { margin-top: 14px; padding: 6px; }
.listing-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-bottom: 1px solid var(--color-border-soft); }
.listing-row:last-child { border-bottom: 0; }
.listing-row-main { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto 20px; gap: 12px; align-items: center; width: 100%; padding: 12px 4px 12px 10px; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.listing-row-main.as-static { cursor: default; }
button.listing-row-main:hover { background: var(--color-surface-raised); }
.listing-thumb { position: relative; display: grid; width: 64px; height: 64px; place-items: center; overflow: hidden; border-radius: 14px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
.listing-thumb .icon { width: 26px; height: 26px; }
.listing-thumb-art.accent-magenta { color: #ff89bc; background: rgb(232 44 120 / 0.12); }
.listing-thumb-art.accent-cyan { color: #73e5e6; background: rgb(62 201 204 / 0.14); }
.listing-thumb .featured-chip { position: absolute; top: 4px; left: 4px; }
.listing-main { min-width: 0; }
.listing-main strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.listing-main small { display: block; margin-top: 3px; overflow: hidden; color: var(--color-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.listing-price { color: var(--color-text); font-size: 15px; white-space: nowrap; }
.listing-chevron { width: 18px; color: var(--color-text-muted); }
.listing-save { display: grid; width: 36px; height: 36px; place-items: center; border: 0; border-radius: 50%; color: var(--color-sky); background: rgb(22 139 255 / 0.1); cursor: pointer; }
.listing-save .icon { width: 18px; height: 18px; }
.selling-summary { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 19px; }
.selling-summary > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; color: var(--color-sky); background: rgb(22 139 255 / 0.12); }
.selling-summary h2 { margin: 3px 0; font-family: var(--font-display); font-size: 21px; }
.selling-summary p:last-child { margin: 0; color: var(--color-text-soft); font-size: 12px; }
.commerce-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.commerce-stat-grid article { padding: 16px; }
.commerce-stat-grid small, .commerce-stat-grid strong, .commerce-stat-grid span { display: block; }
.commerce-stat-grid small { color: var(--color-text-muted); font-size: 10px; }
.commerce-stat-grid strong { margin: 6px 0; font-size: 24px; }
.commerce-stat-grid span { color: var(--color-text-soft); font-size: 10px; }
.family-tree-preview { display: grid; min-height: 420px; place-items: center; align-content: center; padding: 26px; background: radial-gradient(circle at 50% 30%, rgb(62 201 204 / 0.1), transparent 18rem), var(--color-surface); }
.family-person { display: grid; min-width: 170px; place-items: center; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-navy-soft); text-align: center; }
.family-person .avatar { margin-bottom: 8px; }
.family-person strong, .family-person small { display: block; }
.family-person small { margin-top: 3px; color: var(--color-text-muted); font-size: 9px; }
.family-tree-line { width: 1px; height: 32px; background: var(--color-textile-blue); }
.family-generation { position: relative; display: flex; gap: 36px; margin-bottom: 22px; }
.family-generation::before { content: ""; position: absolute; left: 25%; right: 25%; top: -16px; height: 1px; background: var(--color-textile-blue); }
.family-timeline { padding: 22px; }
.family-timeline article { display: grid; grid-template-columns: 62px 18px 1fr; gap: 12px; min-height: 88px; }
.family-timeline time { color: var(--color-sky); font-weight: 800; }
.family-timeline article > span { position: relative; width: 2px; background: var(--color-border); }
.family-timeline article > span::before { content: ""; position: absolute; left: -5px; width: 12px; height: 12px; border: 3px solid var(--color-world-navy); border-radius: 50%; background: var(--color-magenta); }
.family-timeline strong { display: block; }
.family-timeline p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 11px; }
.dating-discover { display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; align-items: center; min-height: 250px; padding: 24px; background: radial-gradient(circle at 0 100%, rgb(232 44 120 / 0.12), transparent 20rem), var(--color-surface); }
.dating-discover h2 { margin: 4px 0 8px; font-family: var(--font-display); font-size: 26px; }
.dating-discover p:not(.eyebrow) { max-width: 610px; margin: 0; color: var(--color-text-soft); font-size: 13px; line-height: 1.55; }
.dating-profile { padding: 22px; }
.dating-profile > header { display: flex; gap: 12px; align-items: center; }
.dating-profile > header > .icon { width: 32px; color: #ff89bc; }
.dating-profile h2 { margin: 3px 0; font-family: var(--font-display); }
.dating-profile .secondary-button { margin-top: 16px; }

/* You */
.profile-hero { overflow: hidden; }
.profile-cover { position: relative; height: 168px; overflow: hidden; background: radial-gradient(circle at 75% 30%, rgb(86 184 255 / 0.3), transparent 19rem), linear-gradient(135deg, #082b63, #0d1d33 70%); }
.profile-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(transparent, rgb(7 20 38 / 0.55)); }
.profile-cover > img { position: absolute; right: 30px; bottom: -110px; width: 330px; opacity: 0.17; }
.cover-pattern { position: absolute; inset: 0 auto 0 0; width: 13px; background: repeating-linear-gradient(45deg, #168bff 0 7px, #f4f7fb 7px 13px, #e82c78 13px 19px, #0a2d61 19px 28px); }
.profile-info { display: flex; gap: 18px; align-items: flex-start; padding: 0 24px 18px; }
.avatar-large { width: 92px; height: 92px; margin-top: -42px; border: 4px solid var(--color-surface); font-size: 22px; box-shadow: var(--shadow-1); }
.profile-copy { flex: 1; min-width: 0; padding-top: 14px; }
.profile-copy h2 { margin: 0 0 2px; font-family: var(--font-display); font-size: 24px; }
.profile-copy > p { margin: 0 0 9px; color: var(--color-text-muted); font-size: 13px; }
.profile-copy > span { display: block; max-width: 620px; color: var(--color-text-soft); font-size: 14px; }
.language-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.language-row em { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text-soft); font-size: 11px; font-style: normal; }
.language-row .icon { width: 14px; height: 14px; color: var(--color-sky); }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); }
.profile-stats span { display: grid; place-items: center; min-height: 72px; border-right: 1px solid var(--color-border); }
.profile-stats span:last-child { border-right: 0; }
.profile-stats strong, .profile-stats small { display: block; }
.profile-stats strong { font-size: 17px; }
.profile-stats small { color: var(--color-text-muted); font-size: 11px; }
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hub-card { position: relative; display: grid; grid-template-columns: 46px 1fr auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; min-height: 82px; padding: 12px; border: 1px solid var(--color-border); border-radius: 14px; color: inherit; background: var(--color-surface); text-align: left; cursor: pointer; }
.hub-card:hover { border-color: rgb(86 184 255 / 0.45); background: var(--color-surface-raised); }
.hub-card > span { grid-row: 1 / span 2; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--color-sky); background: rgb(22 139 255 / 0.13); }
.hub-card strong { align-self: end; font-size: 14px; }
.hub-card small { align-self: start; color: var(--color-text-muted); font-size: 11px; }
.hub-arrow { grid-column: 3; grid-row: 1 / span 2; width: 17px; color: var(--color-text-muted); }
.safety-grid { display: grid; gap: 10px; }
.safety-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; min-height: 92px; padding: 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); }
.safety-card > span { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--color-success); background: rgb(52 201 139 / 0.1); }
.safety-card h3 { margin: 0 0 3px; font-size: 14px; }
.safety-card p { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.safety-card button { min-height: 36px; padding: 0 10px; border: 0; border-radius: 999px; color: var(--color-sky); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.safety-card button:hover { background: rgb(22 139 255 / 0.1); }
.preferences-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 19px; }
.preferences-row h2 { margin: 4px 0 3px; font-size: 18px; }
.preferences-row > div > p:last-child { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.preferences-row select, .creation-form select, .creation-form input { min-height: 44px; padding: 0 38px 0 13px; border: 1px solid var(--color-border); border-radius: 10px; outline: 0; color: var(--color-text); background: var(--color-surface-raised); }

/* Messages */
.inbox-content { margin-top: 16px; }
.activity-list { overflow: hidden; }
.activity-row { position: relative; display: grid; grid-template-columns: 46px 1fr auto; gap: 12px; align-items: center; width: 100%; min-height: 96px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--color-border); color: inherit; background: transparent; text-align: left; cursor: pointer; }
.activity-row:last-child { border-bottom: 0; }
.activity-row:hover { background: var(--color-surface-raised); }
.activity-row.unread { background: rgb(22 139 255 / 0.06); }
.activity-row small, .activity-row strong, .activity-row em, .activity-row b { display: block; font-style: normal; }
.activity-row small { color: var(--color-sky); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.activity-row strong { margin: 3px 0; font-size: 14px; }
.activity-row em { color: var(--color-text-soft); font-size: 12px; }
.activity-row b { margin-top: 3px; color: var(--color-text-muted); font-size: 10px; font-weight: 620; }
.activity-row time { align-self: start; color: var(--color-text-muted); font-size: 10px; }
.activity-row > i { position: absolute; right: 17px; bottom: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-connection-blue); }
.direct-open-note { display: flex; gap: 8px; align-items: center; margin: 12px 4px 0; color: var(--color-text-muted); font-size: 11px; }
.direct-open-note .icon { width: 17px; color: var(--color-success); }
.messaging-surface { display: grid; grid-template-columns: minmax(290px, 0.38fr) minmax(0, 0.62fr); min-height: 680px; overflow: hidden; }
.conversation-list { border-right: 1px solid var(--color-border); }
.conversation-tools { display: grid; grid-template-columns: 1fr 44px; gap: 8px; padding: 14px; }
.conversation-search { border-radius: 11px; background: var(--color-surface-raised); }
.new-message-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 12px; color: white; background: var(--color-connection-blue); cursor: pointer; }
.new-message-button:hover { background: var(--color-blue-strong); }
.new-message-button .icon { width: 20px; }
.message-tabs { display: flex; gap: 4px; padding: 0 14px 12px; }
.message-tabs button { min-height: 34px; font-size: 12px; }
.message-tabs button span { color: var(--color-magenta); }
.conversation-items { border-top: 1px solid var(--color-border); }
.conversation-item { position: relative; display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; width: 100%; min-height: 76px; padding: 11px 13px; border: 0; border-bottom: 1px solid rgb(36 58 85 / 0.65); color: inherit; background: transparent; text-align: left; cursor: pointer; }
.conversation-item:hover { background: var(--color-surface-raised); }
.conversation-item.active { background: rgb(22 139 255 / 0.1); }
.conversation-item.active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color-connection-blue); }
.conversation-item strong, .conversation-item small { display: block; }
.conversation-item strong { font-size: 13px; }
.conversation-item small { max-width: 230px; margin-top: 3px; overflow: hidden; color: var(--color-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item em { align-self: start; color: var(--color-text-muted); font-size: 10px; font-style: normal; }
.conversation-item b { position: absolute; right: 14px; bottom: 12px; display: grid; min-width: 18px; height: 18px; place-items: center; border-radius: 999px; color: white; background: var(--color-connection-blue); font-size: 9px; }
.conversation-boundary { display: flex; gap: 8px; align-items: flex-start; margin: 12px; padding: 10px; border: 1px solid rgb(86 184 255 / 0.13); border-radius: 10px; color: var(--color-text-muted); background: rgb(22 139 255 / 0.05); font-size: 10px; line-height: 1.45; }
.conversation-boundary .icon { flex: 0 0 auto; width: 16px; color: var(--color-sky); }
.conversation-preview { display: grid; grid-template-rows: auto auto auto 1fr auto; min-width: 0; }
.conversation-preview > header { display: flex; gap: 11px; align-items: center; min-height: 72px; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.conversation-preview > header > div:not(.thread-actions) { flex: 1; min-width: 0; }
.conversation-preview h2 { margin: 0; font-size: 15px; }
.conversation-preview header p { margin: 2px 0 0; color: var(--color-text-muted); font-size: 11px; }
.thread-back { display: none; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; color: var(--color-text); background: transparent; cursor: pointer; }
.thread-back .icon { width: 20px; transform: rotate(180deg); }
.thread-actions { display: flex; gap: 2px; }
.thread-actions .icon-button { min-width: 38px; min-height: 38px; color: var(--color-text-soft); }
.thread-actions .icon { width: 19px; height: 19px; }
.message-context { display: flex; gap: 9px; align-items: flex-start; margin: 12px 16px 0; padding: 10px 12px; border: 1px solid rgb(86 184 255 / 0.15); border-radius: 10px; color: var(--color-text-soft); background: rgb(22 139 255 / 0.06); }
.message-context .icon { flex: 0 0 auto; width: 18px; color: var(--color-sky); }
.message-context p { margin: 0; font-size: 11px; }
.message-context strong { color: var(--color-text); }
/* Conversation safety menu (BUG-27-001): icon list, one clear action per
   row, big touch targets — shared by the Messages thread view and the
   chat dock windows / mobile sheet. */
.safety-menu { display: flex; flex-direction: column; gap: 2px; margin: 10px 16px 0; padding: 8px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-raised); box-shadow: 0 10px 28px rgb(2 8 20 / 0.35); }
.safety-menu-dock { margin: 8px 10px 0; }
.safety-menu-title { margin: 2px 8px 6px; color: var(--color-text-muted); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.safety-menu-item { display: flex; gap: 10px; align-items: center; width: 100%; min-height: 48px; padding: 8px 10px; border: 0; border-radius: 9px; color: var(--color-text); background: transparent; font-size: 14px; text-align: left; cursor: pointer; }
.safety-menu-item:hover, .safety-menu-item:focus-visible { background: rgb(22 139 255 / 0.1); }
.safety-menu-item .icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--color-sky); }
.safety-menu-item span { flex: 1; }
.safety-menu-item small { color: var(--color-text-muted); font-size: 11px; }
.safety-menu-item.danger { color: #ff9d9d; }
.safety-menu-item.danger .icon { color: #ff9d9d; }
.muted-tag { position: absolute; right: 14px; bottom: 12px; padding: 2px 7px; border-radius: 999px; color: var(--color-text-muted); background: var(--color-surface-raised); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.blocked-section { margin: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; }
.blocked-section h3 { margin: 0 0 8px; font-size: 12px; }
.blocked-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.blocked-row .icon { width: 18px; color: var(--color-text-muted); }
.blocked-row span { flex: 1; min-width: 0; }
.blocked-row strong, .blocked-row small { display: block; }
.blocked-row strong { font-size: 13px; }
.blocked-row small { color: var(--color-text-muted); font-size: 11px; }
.chat-attachment { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; margin: 10px 16px 0; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 11px; color: inherit; background: var(--color-surface-raised); text-align: left; cursor: pointer; }
.chat-attachment:hover { border-color: var(--color-sky); }
.chat-attachment > span:first-child { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: var(--color-sky); background: rgb(22 139 255 / 0.12); }
.chat-attachment small, .chat-attachment strong { display: block; }
.chat-attachment small { color: var(--color-sky); font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.chat-attachment strong { margin-top: 2px; font-size: 12px; }
.chat-attachment > .icon { width: 16px; color: var(--color-text-muted); }
.message-thread { display: flex; min-height: 270px; flex-direction: column; justify-content: flex-end; gap: 10px; overflow-y: auto; padding: 20px 18px; }
.date-divider { align-self: center; padding: 3px 8px; border-radius: 999px; color: var(--color-text-muted); background: var(--color-navy-soft); font-size: 10px; }
.bubble { max-width: min(72%, 430px); padding: 10px 12px; border-radius: 15px; font-size: 13px; }
.bubble small { display: block; margin-top: 5px; color: rgb(244 247 251 / 0.58); font-size: 9px; }
.bubble.theirs { align-self: flex-start; border: 1px solid var(--color-border); border-bottom-left-radius: 4px; background: var(--color-surface-raised); }
.bubble.mine { align-self: flex-end; border-bottom-right-radius: 4px; color: white; background: var(--color-blue-strong); }
.message-composer { display: grid; grid-template-columns: 44px 1fr 44px auto; gap: 7px; align-items: center; padding: 12px; border-top: 1px solid var(--color-border); }
.message-composer label { min-width: 0; }
.message-composer .message-attach-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; color: var(--color-sky); background: rgb(22 139 255 / 0.1); cursor: pointer; }
.message-attach-button:hover { background: rgb(22 139 255 / 0.18); }
.message-attach-button:focus-within { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.file-input { position: absolute; width: 1px !important; height: 1px; min-height: 0 !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }
.message-composer input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 999px; outline: 0; color: var(--color-text); background: var(--color-surface-raised); }
.message-composer input:focus { border-color: var(--color-sky); }
.voice-message-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; color: var(--color-sky); background: transparent; cursor: pointer; }
.voice-message-button:hover { background: rgb(22 139 255 / 0.1); }
.send-message-button { min-height: 42px; padding: 0 15px; border: 0; border-radius: 999px; color: white; background: var(--color-connection-blue); font-weight: 740; cursor: pointer; }
.send-message-button:hover { background: var(--color-blue-strong); }

/* Membership, Trust, Family Safety, Wallet, and Privacy */
.platform-nav {
  display: flex;
  gap: 5px;
  margin: 8px 0 22px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: rgb(13 29 51 / 0.72);
  scrollbar-width: none;
}
.platform-nav::-webkit-scrollbar { display: none; }
.platform-nav a { flex: 1 0 auto; min-height: 38px; padding: 9px 14px; border-radius: 10px; color: var(--color-text-muted); font-size: 12px; font-weight: 760; text-align: center; }
.platform-nav a:hover { color: var(--color-text); background: var(--color-surface-raised); }
.platform-nav a.active { color: white; background: linear-gradient(135deg, var(--color-blue-strong), #225da7); box-shadow: 0 7px 18px rgb(8 123 234 / 0.2); }
.platform-status { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; margin-bottom: 18px; padding: 15px; }
.platform-status > .icon { display: grid; width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--color-sky); background: rgb(22 139 255 / 0.12); }
.platform-status strong, .platform-status p { display: block; margin: 0; }
.platform-status p { margin-top: 3px; color: var(--color-text-muted); font-size: 11px; }
.platform-status > span { padding: 5px 9px; border: 1px solid rgb(52 201 139 / 0.24); border-radius: 999px; color: var(--color-success); background: rgb(52 201 139 / 0.08); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.platform-status > button { white-space: nowrap; }
.billing-toggle { display: flex; width: fit-content; gap: 3px; margin: 0 0 13px auto; padding: 4px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-navy-soft); }
.billing-toggle button { min-height: 34px; padding: 0 16px; border: 0; border-radius: 999px; color: var(--color-text-muted); background: transparent; font-size: 11px; font-weight: 780; cursor: pointer; }
.billing-toggle button.active { color: white; background: var(--color-surface-strong); box-shadow: var(--shadow-1); }
.membership-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.membership-card { position: relative; display: flex; min-width: 0; min-height: 390px; flex-direction: column; padding: 20px; overflow: hidden; }
.membership-card.current { border-color: rgb(86 184 255 / 0.55); background: linear-gradient(155deg, rgb(22 139 255 / 0.1), var(--color-surface) 45%); }
.membership-card.current::before { content: ""; position: absolute; top: -60px; right: -55px; width: 150px; height: 150px; border: 1px solid rgb(86 184 255 / 0.2); border-radius: 50%; box-shadow: 0 0 48px rgb(22 139 255 / 0.14); }
.membership-card header { position: relative; }
.membership-card header > span { color: var(--color-sky); font-size: 9px; font-weight: 850; letter-spacing: 0.09em; }
.membership-card h2 { margin: 8px 0 2px; font-family: var(--font-display); font-size: 25px; }
.membership-card header p { min-height: 43px; margin: 0; color: var(--color-text-muted); font-size: 12px; }
.membership-price { display: flex; align-items: baseline; gap: 5px; min-height: 62px; margin: 15px 0 10px; padding-bottom: 13px; border-bottom: 1px solid var(--color-border-soft); }
.membership-price strong { font-family: var(--font-display); font-size: 28px; letter-spacing: -0.04em; }
.membership-price small { color: var(--color-text-muted); font-size: 10px; }
.membership-card ul { display: grid; gap: 9px; margin: 0 0 20px; padding: 0; list-style: none; }
.membership-card li { display: flex; gap: 8px; color: var(--color-text-soft); font-size: 11px; }
.membership-card li .icon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--color-success); }
.membership-card > button { width: 100%; margin-top: auto; }
.membership-card > button:disabled { opacity: 0.7; cursor: default; }
.platform-section { margin-top: 28px; }
.entitlement-table, .ledger-table, .access-decision-list { overflow: hidden; }
.entitlement-table > div { display: flex; gap: 14px; align-items: center; justify-content: space-between; min-height: 62px; padding: 12px 15px; border-bottom: 1px solid var(--color-border-soft); }
.entitlement-table > div:last-child { border-bottom: 0; }
.entitlement-table strong, .entitlement-table small { display: block; }
.entitlement-table strong { font-size: 12px; }
.entitlement-table small { margin-top: 2px; color: var(--color-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.entitlement-table em { flex: 0 0 auto; max-width: 45%; color: var(--color-success); font-size: 10px; font-style: normal; font-weight: 770; text-align: right; }
.entitlement-table em.restricted { color: var(--color-warning); }
.platform-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 15px; }
.policy-card { display: grid; grid-template-columns: 42px 1fr; gap: 12px; min-height: 190px; padding: 18px; }
.policy-card > .icon { width: 40px; height: 40px; padding: 9px; border-radius: 12px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.policy-card h2 { margin: 5px 0 7px; font-family: var(--font-display); font-size: 19px; }
.policy-card p:not(.eyebrow), .policy-card strong { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.policy-card strong { display: block; margin-top: 11px; color: var(--color-text-soft); }
.wallet-balance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wallet-balance { position: relative; min-height: 185px; padding: 18px; overflow: hidden; }
.wallet-balance > span { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 14px; border-radius: 12px; color: var(--color-sky); background: rgb(22 139 255 / 0.12); }
.wallet-balance > span .icon { width: 20px; }
.wallet-balance small, .wallet-balance strong { display: block; }
.wallet-balance small { color: var(--color-text-muted); font-size: 10px; font-weight: 740; }
.wallet-balance strong { margin-top: 3px; font-family: var(--font-display); font-size: 25px; letter-spacing: -0.03em; }
.wallet-balance p { margin: 11px 0 0; color: var(--color-text-muted); font-size: 10px; }
.ledger-head, .ledger-table > div:not(.ledger-head) { display: grid; grid-template-columns: minmax(190px, 1.4fr) 1fr 90px 100px; gap: 12px; align-items: center; padding: 11px 15px; }
.ledger-head { min-height: 39px; color: var(--color-text-muted); background: var(--color-navy-soft); font-size: 9px; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; }
.ledger-table > div:not(.ledger-head) { min-height: 62px; border-top: 1px solid var(--color-border-soft); color: var(--color-text-soft); font-size: 10px; }
.ledger-table strong, .ledger-table small { display: block; }
.ledger-table strong { color: var(--color-text); font-size: 11px; }
.ledger-table small { margin-top: 3px; color: var(--color-text-muted); }
.ledger-table b { text-align: right; }
.ledger-table b.credit { color: var(--color-success); }
.ledger-table b.debit { color: var(--color-text-soft); }
.ledger-status { width: fit-content; padding: 4px 7px; border-radius: 999px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.ledger-status.posted { color: var(--color-success); background: rgb(52 201 139 / 0.1); }
.ledger-status.pending { color: var(--color-warning); background: rgb(244 185 66 / 0.1); }
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gift-card { display: grid; justify-items: start; min-height: 170px; padding: 17px; color: inherit; text-align: left; cursor: pointer; }
.gift-card:hover { transform: translateY(-2px); border-color: var(--color-sky); }
.gift-card > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(232 44 120 / 0.18); border-radius: 14px; color: #ff79ac; background: rgb(232 44 120 / 0.1); }
.gift-card > span .icon { width: 21px; }
.gift-card strong { margin-top: 12px; }
.gift-card small { color: var(--color-text-muted); }
.gift-card em { align-self: end; margin-top: 12px; color: var(--color-sky); font-size: 10px; font-style: normal; font-weight: 760; }
.points-use-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.points-use-grid span { display: flex; gap: 8px; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 11px; color: var(--color-text-soft); background: var(--color-surface); font-size: 10px; }
.points-use-grid .icon { flex: 0 0 auto; width: 16px; color: var(--color-success); }
.platform-footnote { margin: 12px 2px 0; color: var(--color-text-muted); font-size: 11px; }
.trust-summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 140px; padding: 22px; border-color: rgb(52 201 139 / 0.23); background: linear-gradient(135deg, rgb(52 201 139 / 0.08), var(--color-surface) 60%); }
.trust-summary h2 { display: flex; gap: 8px; align-items: center; margin: 6px 0 2px; font-family: var(--font-display); font-size: 24px; }
.trust-summary h2 .icon { width: 22px; color: var(--color-success); }
.trust-summary p:not(.eyebrow) { margin: 0; color: var(--color-text-muted); font-size: 12px; }
.trust-summary > span { display: inline-flex; gap: 7px; align-items: center; padding: 8px 11px; border-radius: 999px; color: var(--color-success); background: rgb(52 201 139 / 0.09); font-size: 10px; font-weight: 780; }
.trust-summary > span .icon { width: 16px; }
.verification-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.verification-card { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; min-height: 130px; padding: 15px; }
.verification-card > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--color-success); background: rgb(52 201 139 / 0.09); }
.verification-card > span .icon { width: 18px; }
.verification-card small, .verification-card strong { display: block; }
.verification-card small { color: var(--color-text-muted); font-size: 9px; font-weight: 760; text-transform: uppercase; }
.verification-card strong { margin-top: 3px; font-size: 12px; text-transform: capitalize; }
.verification-card p { margin: 6px 0 0; color: var(--color-text-muted); font-size: 10px; }
.access-decision-list > div { display: flex; align-items: center; justify-content: space-between; min-height: 55px; padding: 10px 14px; border-bottom: 1px solid var(--color-border-soft); }
.access-decision-list > div:last-child { border-bottom: 0; }
.access-decision-list span { display: inline-flex; gap: 9px; align-items: center; }
.access-decision-list span .icon { width: 17px; color: var(--color-sky); }
.access-decision-list strong { font-size: 12px; }
.access-decision-list em { padding: 5px 8px; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 790; text-transform: capitalize; }
.access-decision-list em.allowed { color: var(--color-success); background: rgb(52 201 139 / 0.09); }
.access-decision-list em.blocked { color: var(--color-warning); background: rgb(244 185 66 / 0.09); }
.dating-field-policy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.dating-field-policy > div { min-height: 115px; padding: 17px; }
.dating-field-policy > div + div { border-left: 1px solid var(--color-border-soft); }
.dating-field-policy strong { color: var(--color-sky); font-size: 11px; }
.dating-field-policy > div + div strong { color: var(--color-warning); }
.dating-field-policy p { margin: 8px 0 0; color: var(--color-text-muted); font-size: 10px; text-transform: capitalize; }
.family-relationship { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 12px; align-items: center; padding: 18px; }
.family-relationship > div { display: flex; gap: 11px; align-items: center; min-width: 0; }
.family-relationship > .icon { width: 18px; color: var(--color-sky); }
.family-relationship small, .family-relationship strong, .family-relationship em { display: block; }
.family-relationship small { color: var(--color-text-muted); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; }
.family-relationship strong { margin-top: 2px; }
.family-relationship em { color: var(--color-sky); font-size: 10px; font-style: normal; }
.family-transparency { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 13px; border: 1px solid rgb(86 184 255 / 0.18); border-radius: 12px; color: var(--color-text-soft); background: rgb(22 139 255 / 0.06); }
.family-transparency .icon { flex: 0 0 auto; width: 18px; color: var(--color-sky); }
.family-transparency p { margin: 0; font-size: 11px; }
.family-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.family-control { display: grid; grid-template-columns: 40px 1fr 18px; gap: 10px; align-items: center; min-height: 84px; padding: 13px; color: inherit; text-align: left; cursor: pointer; }
.family-control:hover { border-color: var(--color-sky); }
.family-control > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.family-control > span:first-child .icon { width: 19px; }
.family-control small, .family-control strong, .family-control em { display: block; }
.family-control small { color: var(--color-text-muted); font-size: 8px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.family-control strong { margin-top: 2px; font-size: 12px; }
.family-control em { margin-top: 2px; color: var(--color-sky); font-size: 9px; font-style: normal; }
.family-control > .icon { width: 16px; color: var(--color-text-muted); }
.hard-restrictions { margin-top: 24px; padding: 18px; border-color: rgb(255 93 108 / 0.22); }
.hard-restrictions header { display: flex; gap: 11px; align-items: flex-start; }
.hard-restrictions header > .icon { width: 25px; color: var(--color-danger); }
.hard-restrictions h2 { margin: 3px 0 0; font-family: var(--font-display); font-size: 21px; }
.hard-restrictions > div { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.hard-restrictions > div span { display: inline-flex; gap: 5px; align-items: center; padding: 7px 9px; border-radius: 999px; color: #ffadb5; background: rgb(255 93 108 / 0.08); font-size: 9px; font-weight: 740; text-transform: capitalize; }
.hard-restrictions > div .icon { width: 13px; }
.hard-restrictions > p { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.transition-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 17px; list-style: none; counter-reset: transition; }
.transition-steps li { display: flex; gap: 9px; min-height: 60px; align-items: center; padding: 8px 12px; border-right: 1px solid var(--color-border-soft); }
.transition-steps li:nth-child(3n) { border-right: 0; }
.transition-steps li > span { display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-sky); font-size: 10px; }
.transition-steps strong { font-size: 10px; }
.privacy-summary { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; min-height: 145px; padding: 20px; }
.privacy-summary > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.privacy-summary > span .icon { width: 27px; }
.privacy-summary h2 { margin: 5px 0 3px; font-family: var(--font-display); font-size: 21px; }
.privacy-summary p:not(.eyebrow) { margin: 0; color: var(--color-text-muted); font-size: 11px; }
.privacy-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }
.privacy-card { display: grid; grid-template-columns: 40px 1fr 18px; gap: 10px; align-items: center; min-height: 100px; padding: 14px; color: inherit; text-align: left; cursor: pointer; }
.privacy-card:hover { border-color: var(--color-sky); }
.privacy-card > span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.privacy-card > span:first-child .icon { width: 19px; }
.privacy-card small, .privacy-card strong, .privacy-card em { display: block; }
.privacy-card strong { font-size: 12px; }
.privacy-card small { margin-top: 2px; color: var(--color-text-muted); font-size: 10px; }
.privacy-card em { margin-top: 5px; color: var(--color-sky); font-size: 9px; font-style: normal; font-weight: 740; }
.privacy-card > .icon { width: 16px; color: var(--color-text-muted); }
.privacy-count { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 17px; }
.privacy-count > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: var(--color-sky); background: rgb(22 139 255 / 0.1); }
.privacy-count > span .icon { width: 21px; }
.privacy-count strong, .privacy-count small { display: block; }
.privacy-count strong { font-family: var(--font-display); font-size: 24px; }
.privacy-count small { color: var(--color-text-muted); }
.privacy-count button { margin-top: 5px; padding: 0; border: 0; color: var(--color-sky); background: none; font-size: 10px; font-weight: 740; cursor: pointer; }
.access-blocked { display: grid; min-height: 440px; place-items: center; padding: 36px; text-align: center; }
.access-blocked > .icon { width: 48px; height: 48px; margin-bottom: 8px; color: var(--color-warning); }
.access-blocked h1 { margin: 3px 0 7px; font-family: var(--font-display); font-size: 29px; }
.access-blocked > p:not(.eyebrow) { max-width: 590px; margin: 0 0 20px; color: var(--color-text-soft); }
.meet-entitlement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 16px 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-border); }
.meet-entitlement > span { padding: 11px 13px; background: var(--color-navy-soft); }
.meet-entitlement small, .meet-entitlement strong { display: block; }
.meet-entitlement small { color: var(--color-text-muted); font-size: 8px; font-weight: 820; letter-spacing: 0.07em; }
.meet-entitlement strong { margin-top: 3px; font-size: 11px; }
.meet-time { display: grid; width: min(100%, 520px); grid-template-columns: 1fr auto; gap: 12px; align-items: center; margin: 14px 0; padding: 12px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-navy-soft); }
.meet-time small, .meet-time strong { display: block; }
.meet-time small { color: var(--color-text-muted); font-size: 8px; font-weight: 800; letter-spacing: 0.06em; }
.meet-time strong { margin-top: 2px; }
.meet-time > div { display: flex; gap: 5px; }
.meet-time button { min-height: 32px; padding: 0 9px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-sky); background: var(--color-surface-raised); font-size: 9px; font-weight: 760; cursor: pointer; }
.mutual-connect-note { display: flex; gap: 7px; align-items: center; max-width: 560px; margin: 0; color: var(--color-text-muted); font-size: 10px; }
.mutual-connect-note .icon { flex: 0 0 auto; width: 16px; color: var(--color-magenta); }

/* Create dialog */
.modal-layer { position: fixed; z-index: 120; inset: 0; display: grid; place-items: end center; visibility: hidden; }
.modal-layer.visible { visibility: visible; }
.modal-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(1 8 18 / 0.78); backdrop-filter: blur(6px); }
.create-sheet { position: relative; width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 860px); padding: 24px; overflow: auto; border: 1px solid var(--color-border); border-bottom: 0; border-radius: 24px 24px 0 0; background: var(--color-surface); box-shadow: var(--shadow-2); animation: sheet-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-in { from { transform: translateY(36px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.create-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.create-header h2 { margin: 4px 0 0; font-family: var(--font-display); font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; }
.create-intro { margin: 14px 0 18px; color: var(--color-text-soft); font-size: 14px; }
.role-tabs { display: flex; gap: 5px; margin-bottom: 16px; }
.create-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.create-grid > button { position: relative; display: grid; grid-template-columns: 48px 1fr auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; min-height: 80px; padding: 12px; border: 1px solid var(--color-border); border-radius: 14px; color: inherit; background: var(--color-surface-raised); text-align: left; cursor: pointer; }
.create-grid > button:hover { transform: translateY(-1px); border-color: var(--color-sky); background: var(--color-surface-strong); }
.create-grid > button > span { grid-row: 1 / span 2; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: var(--color-sky); background: rgb(22 139 255 / 0.13); }
.create-grid strong { align-self: end; font-size: 14px; }
.create-grid small { align-self: start; color: var(--color-text-muted); font-size: 11px; }
.create-arrow { grid-column: 3; grid-row: 1 / span 2; width: 17px; color: var(--color-text-muted); }
.mock-disclosure { margin: 16px 2px 0; color: var(--color-text-muted); font-size: 11px; }
.back-button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: 10px 0 14px; padding: 0 8px; border: 0; border-radius: 8px; color: var(--color-sky); background: transparent; font-weight: 690; cursor: pointer; }
.back-button:hover { background: rgb(22 139 255 / 0.1); }
.back-button .icon { width: 18px; transform: rotate(180deg); }
.creation-form { display: grid; gap: 16px; }
.creation-form label { display: grid; gap: 7px; }
.creation-form label > span { color: var(--color-text-soft); font-size: 12px; font-weight: 700; }
.creation-form textarea { width: 100%; min-height: 140px; resize: vertical; padding: 13px; border: 1px solid var(--color-border); border-radius: 12px; outline: 0; color: var(--color-text); background: var(--color-surface-raised); }
.creation-form textarea:focus, .creation-form select:focus, .creation-form input:focus { border-color: var(--color-sky); box-shadow: 0 0 0 3px rgb(86 184 255 / 0.11); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-note { display: flex; gap: 10px; align-items: flex-start; padding: 11px; border: 1px solid rgb(52 201 139 / 0.18); border-radius: 10px; color: var(--color-text-soft); background: rgb(52 201 139 / 0.06); }
.form-note .icon { flex: 0 0 auto; width: 19px; color: var(--color-success); }
.form-note p { margin: 0; font-size: 12px; }
.creation-form footer { display: flex; justify-content: flex-end; gap: 10px; }

/* States and notifications */
.loading-view { display: grid; gap: 16px; padding-top: 36px; }
.skeleton { overflow: hidden; border-radius: 14px; background: var(--color-surface); }
.skeleton::after { content: ""; display: block; width: 45%; height: 100%; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.055), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(230%); } }
.skeleton-title { width: 56%; height: 58px; }
.skeleton-card { height: 360px; }
.skeleton-card.short { height: 220px; }
.empty-state, .error-state, .feature-unavailable { display: grid; place-items: center; min-height: 340px; padding: 34px; text-align: center; }
.empty-state > .icon, .error-state > .icon, .feature-unavailable > .icon { width: 46px; height: 46px; margin-bottom: 10px; color: var(--color-sky); }
.empty-state h2, .error-state h1, .feature-unavailable h1, .feature-unavailable h2 { margin: 5px 0 7px; font-family: var(--font-display); font-size: 25px; }
.empty-state p, .error-state > p:not(.eyebrow), .feature-unavailable p { max-width: 510px; margin: 0 0 18px; color: var(--color-text-soft); }
.error-state > div { display: flex; gap: 10px; }
.degradation-note { margin: 12px 0; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--color-sky) 32%, transparent); border-radius: var(--radius-md); color: var(--color-text-soft); background: color-mix(in srgb, var(--color-sky) 8%, transparent); }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 30px)); min-height: 48px; padding: 10px 14px; transform: translate(-50%, 24px); opacity: 0; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); background: rgb(13 29 51 / 0.96); box-shadow: var(--shadow-2); transition: opacity 180ms ease, transform 180ms ease; backdrop-filter: blur(12px); }
.toast-visible { transform: translate(-50%, 0); opacity: 1; }
.toast .icon { flex: 0 0 auto; width: 19px; color: var(--color-sky); }
.toast-success .icon { color: var(--color-success); }
.toast span { font-size: 13px; }
.no-script { display: grid; width: min(640px, calc(100% - 32px)); min-height: 80vh; place-content: center; margin: auto; text-align: center; }
.no-script img { width: min(500px, 100%); margin: 0 auto; }

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

@media (max-width: 1280px) {
  .topbar { grid-template-columns: 224px minmax(260px, 520px) 310px; }
  .product-shell { grid-template-columns: 230px minmax(0, 820px); max-width: 1080px; }
  .product-shell.messages-layout { grid-template-columns: 230px minmax(0, 820px); max-width: 1090px; }
  .context-rail { display: none; }
  .watch-feature { grid-template-columns: 1.1fr 0.9fr; }
  .top-action-label { display: none; }
  .messages-button { padding: 0; }
  .top-create-button { padding: 0; }
}

@media (max-width: 920px) {
  :root { --header-height: 60px; }
  body { padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }
  .topbar { grid-template-columns: 1fr auto; min-height: var(--header-height); padding: max(5px, env(safe-area-inset-top)) 12px 5px; }
  .brand { width: auto; }
  .brand-wide, .global-search, .profile-button span:not(.avatar), .search-hint { display: none; }
  .brand-mark, .mobile-search-button { display: block; }
  /* Bee (2026-10-11): one search — on mobile the icon expands the field below the bar. */
  .topbar.search-open .global-search { display: flex; position: absolute; top: 100%; left: 0; right: 0; z-index: 70; margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--color-border); border-radius: 0; background: rgb(7 20 38 / 0.98); }
  .topbar.search-open .mobile-search-button { color: var(--color-sky); background: rgb(22 139 255 / 0.14); }
  /* Bee (2026-10-11): Messages gets a top-bar shortcut on mobile (with unread
     badge); notifications stay in the More sheet to avoid clutter. */
  .notification-button { display: none; }
  .notification-button.mobile-context-notification { display: grid; }
  /* Bee (2026-10-11): settings gear lives top-right on desktop; on mobile
     Settings is in the More sheet. */
  .settings-button { display: none; }
  .brand-mark { width: 43px; height: 43px; }
  .profile-button { padding: 2px; }
  .profile-button .avatar { width: 38px; height: 38px; }
  .messages-button .count-badge { position: absolute; top: 0; right: -1px; border: 2px solid var(--color-world-navy); }
  .product-shell, .product-shell.messages-layout { display: block; width: 100%; max-width: none; padding: 14px 12px 28px; }
  .desktop-rail { display: none; }
  .page-heading { min-height: 0; margin: 7px 3px 18px; }
  .page-heading h1 { font-size: 32px; }
  .page-heading > div:first-child > p:last-child { font-size: 14px; }
  .page-actions { display: none; }
  .bottom-nav { position: fixed; z-index: 70; inset: auto 0 0; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); padding: 5px 2px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); background: rgb(7 20 38 / 0.95); box-shadow: 0 -12px 32px rgb(0 0 0 / 0.2); backdrop-filter: blur(20px); }
  .bottom-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 54px; padding: 3px 1px; border: 0; color: var(--color-text-muted); background: transparent; font-size: 10px; font-weight: 680; cursor: pointer; }
  .bottom-link .icon { width: 23px; height: 23px; }
  .bottom-link.active { color: var(--color-sky); }
  .bottom-link.active::before { content: ""; position: absolute; top: -6px; width: 30px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--color-sky), var(--color-magenta)); }
  .bottom-badge { position: absolute; top: 2px; left: calc(50% + 7px); display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border: 2px solid var(--color-world-navy); border-radius: 999px; color: white; background: var(--color-magenta); font-size: 9px; font-style: normal; }
  /* Bee (2026-10-11): uniform bottom nav — all tabs render as plain
     .bottom-link. Orb styles retired. */
  .feed-tools { margin-top: 15px; }
  .feed-tools > p { display: none; }
  .tab-strip { margin-inline: -1px; }
  .watch-feature { grid-template-columns: 1fr; }
  .feature-stage { min-height: 390px; }
  .feature-info { padding: 22px; }
  .shorts-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .short-card { scroll-snap-align: start; }
  .room-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; scroll-snap-type: x mandatory; }
  .room-card { scroll-snap-align: start; }
  .rooms-hero { grid-template-columns: 58px 1fr; }
  .provider-note { grid-column: 1 / -1; }
  .participant-grid { grid-template-columns: repeat(2, 1fr); }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .destination-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shortcut-options { grid-template-columns: repeat(5, minmax(72px, 1fr)); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .shortcut-option { scroll-snap-align: start; }
  .forum-followed-row { grid-template-columns: repeat(3, minmax(170px, 1fr)); overflow-x: auto; }
  .forum-followed-chip { scroll-snap-align: start; }
  .forum-category-hero { grid-template-columns: 64px 1fr; }
  .forum-category-actions { grid-column: 1 / -1; }
  .forum-tools { grid-template-columns: 1fr auto; }
  .forum-tools .forum-search { grid-column: 1 / -1; }
  .platform-nav { margin-top: 0; }
  .membership-grid, .wallet-balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .membership-card:last-child, .wallet-balance:last-child { grid-column: 1 / -1; }
  .verification-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .messaging-surface { grid-template-columns: 300px 1fr; }
  .conversation-item small { max-width: 160px; }
  .create-sheet { width: 100%; padding: 20px 14px calc(24px + env(safe-area-inset-bottom)); border-right: 0; border-left: 0; border-radius: 22px 22px 0 0; }
  /* More sheet — mobile "on top" menu (Bee 2026-10-11). Tapping the More tab
     slides this bottom sheet up OVER the current screen (Instagram-style)
     instead of navigating to a /menu page. Desktop never sees it: the bottom
     nav (and this sheet) only exist at or below 920px. */
  .more-sheet-layer { z-index: 130; transition: visibility 0s linear 380ms; }
  .more-sheet-layer.visible { transition-delay: 0s; }
  .more-sheet-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgb(1 8 18 / 0.62); opacity: 0; transition: opacity 300ms ease; backdrop-filter: blur(4px); cursor: pointer; }
  .more-sheet-layer.visible .more-sheet-backdrop { opacity: 1; }
  .more-sheet { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; border-top: 1px solid var(--color-border); border-radius: 22px 22px 0 0; background: var(--color-surface); box-shadow: 0 -18px 60px rgb(0 0 0 / 0.45); transform: translateY(105%); transition: transform 340ms cubic-bezier(0.32, 0.72, 0, 1); }
  .more-sheet-layer.visible .more-sheet { transform: translateY(0); }
  .more-sheet-grip { flex: 0 0 auto; padding: 10px 0 4px; touch-action: none; cursor: grab; }
  .more-sheet-grip::before { content: ""; display: block; width: 42px; height: 5px; margin: 0 auto; border-radius: 3px; background: rgb(255 255 255 / 0.22); }
  .more-sheet-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 8px 10px 16px; }
  .more-sheet-head .eyebrow { margin: 0; }
  .more-sheet-head h2 { margin: 2px 0 0; font-size: 21px; letter-spacing: -0.02em; }
  .more-sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 14px calc(20px + env(safe-area-inset-bottom)); }
  .more-sheet-body .menu-quick { margin-top: 2px; }
  /* App-like touch feel on the mobile tab bar */
  .bottom-link { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .toast { bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 10px); }
}

@media (max-width: 640px) {
  .top-actions { gap: 2px; }
  .room-type-filter { align-items: flex-start; flex-direction: column; }
  .room-type-filter .tab-strip { width: 100%; }
    .selling-summary { grid-template-columns: 46px 1fr; }
  .selling-summary > span { width: 44px; height: 44px; }
  .selling-summary .primary-button { grid-column: 1 / -1; width: 100%; }
  .commerce-stat-grid { grid-template-columns: 1fr; }
  .dating-discover { grid-template-columns: 60px 1fr; padding: 18px 15px; }
  .dating-discover .connect-orb { width: 56px; height: 56px; }
  .dating-discover .primary-button { grid-column: 1 / -1; width: 100%; }
  .family-generation { width: 100%; gap: 10px; }
  .family-person { min-width: 0; width: 100%; padding-inline: 8px; }
  .post-header { padding: 15px 14px 10px; }
  .post-body { padding: 0 14px 13px; }
  .post-body h3 { font-size: 19px; }
  .post-visual { grid-template-columns: 8px 1fr; min-height: 220px; margin-inline: 14px; }
  .visual-copy { max-width: 82%; padding: 21px 17px; }
  .visual-copy strong { font-size: 29px; }
  .post-context { padding-inline: 15px; }
  .post-actions span { display: none; }
  .post-actions button { gap: 0; }
  .post-actions .icon { width: 22px; height: 22px; }
  .play-button { right: 17px; bottom: 16px; width: 48px; height: 48px; }
  .watch-feature { min-height: 0; }
  .feature-stage { min-height: 370px; }
  .feature-stage > img { width: 250px; }
  .feature-info h2 { margin-top: 20px; }
  .shorts-grid { grid-template-columns: repeat(3, 72vw); }
  .watch-mode-intro { grid-template-columns: 46px 1fr; padding: 14px; }
  .watch-mode-intro > span { width: 44px; height: 44px; border-radius: 12px; }
  .watch-mode-intro h2 { font-size: 18px; }
  .continue-card { grid-template-columns: 42px 1fr auto; padding: 13px; }
  .continue-card em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .room-grid { grid-template-columns: repeat(3, 76vw); }
  .rooms-hero { grid-template-columns: 48px 1fr; padding: 15px; }
  .rooms-hero-mark { width: 46px; height: 46px; border-radius: 14px; }
  .rooms-hero-mark .icon { width: 23px; }
  .rooms-hero h2 { font-size: 18px; }
  .rooms-connect-grid, .hosting-grid { grid-template-columns: 1fr; }
    .room-lobby { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .room-lobby-copy > .eyebrow { margin-top: 24px; }
  .room-lobby h1 { font-size: 36px; }
  .active-room-header { display: grid; align-items: start; }
  .active-room-header > div:last-child { width: 100%; }
  .active-room-header > div:last-child > * { flex: 1; }
  .text-room-layout, .voice-room-layout { grid-template-columns: 1fr; }
  .room-members, .speaker-queue { border-top: 1px solid var(--color-border); border-left: 0; }
  .room-messages { min-height: 280px; }
  .room-composer { grid-template-columns: 1fr 42px; }
  .room-composer .primary-button { grid-column: 1 / -1; }
  .voice-stage { padding: 14px; }
  .participant-grid { min-height: auto; margin: 20px 0; }
  .participant { min-height: 135px; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .video-tile { min-height: 180px; }
  .video-room-layout { padding: 9px; }
  .connect-panel { min-height: 0; padding: 19px 14px; }
  .connect-panel > header { grid-template-columns: 50px 1fr; }
  .connect-panel > header > span { width: 48px; height: 48px; border-radius: 14px; }
  .connect-panel h1 { font-size: 28px; }
  .connect-modes button { min-height: 58px; flex-direction: column; gap: 3px; font-size: 10px; }
  .connect-state { min-height: 250px; padding-inline: 0; }
  .matched-person { min-width: 0; width: 100%; }
  .connect-actions { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .connect-actions > * { width: 100%; }
  .meet-entitlement { grid-template-columns: 1fr; }
  .meet-time { grid-template-columns: 1fr; }
  .meet-time > div { overflow-x: auto; }
  .platform-nav { margin-inline: -2px; }
  .platform-nav a { padding-inline: 12px; }
  .platform-status { grid-template-columns: 38px 1fr; }
  .platform-status > span, .platform-status > button { grid-column: 2; justify-self: start; }
  .billing-toggle { margin-left: 0; }
  .membership-grid, .wallet-balance-grid, .gift-grid, .platform-two-column, .verification-grid, .family-control-grid, .privacy-grid { grid-template-columns: 1fr; }
  .points-use-grid, .dating-field-policy { grid-template-columns: 1fr; }
  .dating-field-policy > div + div { border-top: 1px solid var(--color-border-soft); border-left: 0; }
  .membership-card:last-child, .wallet-balance:last-child { grid-column: auto; }
  .membership-card { min-height: 0; }
  .membership-card header p { min-height: 0; }
  .ledger-head { display: none; }
  .ledger-table > div:not(.ledger-head) { grid-template-columns: 1fr auto; gap: 6px 12px; padding: 13px; }
  .ledger-table > div:not(.ledger-head) > span:first-child { grid-column: 1 / -1; }
  .ledger-table > div:not(.ledger-head) > span:nth-child(2) { text-transform: capitalize; }
  .ledger-table > div:not(.ledger-head) > b { grid-column: 2; grid-row: 2; }
  .trust-summary { display: grid; }
  .trust-summary > span { justify-self: start; }
  .family-relationship { grid-template-columns: 1fr; }
  .family-relationship > .icon { margin-left: 20px; transform: rotate(90deg); }
  .transition-steps { grid-template-columns: 1fr; }
  .transition-steps li, .transition-steps li:nth-child(3n) { border-right: 0; border-bottom: 1px solid var(--color-border-soft); }
  .transition-steps li:last-child { border-bottom: 0; }
  .privacy-summary { grid-template-columns: 48px 1fr; }
  .privacy-summary > span { width: 46px; height: 46px; }
  .privacy-summary > a { grid-column: 2; justify-self: start; }
  .entitlement-table > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .entitlement-table em { max-width: 100%; text-align: left; }
  .live-row { grid-template-columns: 46px 1fr auto; }
  .live-row > .icon { display: none; }
  .destination-grid { grid-template-columns: 1fr; }
  .destination-card { min-height: 84px; }
  .navigation-customizer { padding: 16px 14px; }
  .navigation-customizer > header { grid-template-columns: 42px 1fr; }
  .navigation-customizer-icon { width: 40px; height: 40px; }
  .current-shortcut { grid-column: 1 / -1; width: 100%; }
  .shortcut-options { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .shortcut-option { grid-template-columns: 36px minmax(0, 1fr); min-height: 62px; place-items: center start; padding: 9px 12px; }
  .shortcut-option > strong { overflow: visible; text-align: left; text-overflow: clip; white-space: normal; }
  .forum-hero { grid-template-columns: 1fr; padding: 20px 16px; }
  .forum-hero-actions { grid-template-columns: 1fr; }
  .forum-stat-strip { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .forum-stat-strip span { padding: 0 9px; border-right: 1px solid var(--color-border-soft); border-bottom: 0; }
  .forum-stat-strip span:first-child { padding-left: 0; }
  .forum-stat-strip span:last-child { padding-right: 0; border-right: 0; }
  .forum-continue { grid-template-columns: 40px 1fr 14px; padding: 12px; }
  .forum-continue em { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .forum-category-hero { grid-template-columns: 52px 1fr; padding: 16px; }
  .forum-category-icon.large { width: 50px; height: 50px; border-radius: 15px; }
  .forum-category-hero h1 { font-size: 26px; }
  .forum-category-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .forum-tools { grid-template-columns: 1fr; }
  .forum-tools .forum-search { grid-column: auto; }
  .forum-filter-tabs { overflow-x: auto; }
  .forum-sort { justify-content: flex-end; }
  .forum-thread-row { grid-template-columns: 38px minmax(0, 1fr) 58px 20px; min-height: 84px; padding: 11px; }
  .forum-thread-row .avatar { width: 38px; height: 38px; }
  .forum-thread-stats { display: none; }
  .forum-last-reply { grid-column: 3; }
  .forum-thread-head { padding: 18px 15px; }
  .forum-thread-head h1 { font-size: 27px; }
  .forum-thread-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .forum-thread-actions .secondary-button { min-width: 0; padding-inline: 6px; font-size: 9px; }
  .forum-post { grid-template-columns: 1fr; }
  .forum-post-author { display: grid; grid-template-columns: 40px 1fr auto; grid-template-rows: auto auto; gap: 0 9px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--color-border-soft); text-align: left; }
  .forum-post-author .avatar { grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; }
  .forum-post-author strong { align-self: end; }
  .forum-post-author small { align-self: start; }
  .forum-post-author span { grid-column: 3; grid-row: 1 / span 2; align-self: center; margin: 0; }
  .forum-post-body { padding: 12px; }
  .forum-post-body > p { min-height: 0; }
  .forum-reply-composer form > div { align-items: flex-start; flex-direction: column; }
  .forum-reply-composer form > div .primary-button { width: 100%; }
  .forum-rules button { flex: 0 0 auto; }
  .profile-cover { height: 138px; }
  .profile-info { display: block; padding: 0 16px 16px; }
  .avatar-large { width: 78px; height: 78px; margin-top: -36px; }
  .profile-copy { padding-top: 8px; }
  .hub-grid { grid-template-columns: 1fr; }
  .safety-card { grid-template-columns: 42px 1fr; }
  .safety-card > span { width: 42px; height: 42px; }
  .safety-card button { grid-column: 2; justify-self: start; padding: 0; }
  .preferences-row { display: grid; }
  .preferences-row select { width: 100%; }
  .messaging-surface { display: block; min-height: 0; }
  .conversation-list { border-right: 0; }
  .conversation-item small { max-width: calc(100vw - 130px); }
  .conversation-preview { display: none; }
  .messaging-surface.thread-open .conversation-list { display: none; }
  .messaging-surface.thread-open .conversation-preview { display: grid; min-height: calc(100dvh - 220px); }
  .thread-back { display: grid; flex: 0 0 auto; }
  .conversation-preview > header { padding-inline: 10px; }
  .conversation-preview > header .avatar { width: 38px; height: 38px; }
  .thread-actions .icon-button { min-width: 36px; min-height: 36px; }
  .message-context, .chat-attachment { margin-inline: 11px; }
  .message-thread { min-height: 300px; padding-inline: 13px; }
  .message-composer { padding-inline: 8px; }
  .create-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .creation-form footer { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
  .product-shell, .product-shell.messages-layout { padding-inline: 9px; }
  .page-heading { margin-inline: 2px; }
  .page-heading h1 { font-size: 29px; }
  .composer { padding: 11px; }
  .composer .avatar { width: 38px; height: 38px; }
  .composer-prompt { padding-inline: 12px; font-size: 14px; }
  .post-context { display: grid; }
  .viewer-count { display: none; }
  .bottom-link { font-size: 9px; }
  /* Bee (2026-10-11): 7 tabs must fit a 360px phone — tighter icons/labels,
     44px+ tap targets kept via min-height. */
  .bottom-link .icon { width: 21px; height: 21px; }
  .bottom-link span { line-height: 1.15; }
}
:root { --account-content-width: 44rem; }
.account-card { max-width: var(--account-content-width); padding: clamp(20px, 4vw, 32px); margin: 20px 0; }
.account-card h2 { margin: 16px 0 10px; }
.account-card p { line-height: 1.65; color: var(--color-text-secondary, #b6c4d9); margin-bottom: 20px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.account-card fieldset { border: 0; padding: 0; display: grid; gap: 14px; min-width: 0; }
.account-card input { width: 100%; min-height: 48px; }
.account-notice { padding: 16px; border: 1px solid #466582; background: #122a43; color: #e7effa; border-radius: 12px; line-height: 1.6; }
.account-fine-print { font-size: .85rem; margin-top: 22px; }
.account-sessions { list-style: none; padding: 0; overflow-wrap: anywhere; }
.account-sessions li { display: grid; gap: 8px; padding: 16px 0; border-bottom: 1px solid #30435c; }
.account-sessions span { color: #b6c4d9; font-size: .85rem; }
.account-card [aria-pressed="true"] { border-color: #69b7ff; }

/* ---------------------------------------------------------------------------
   Floating chat dock (Facebook Messenger-style) + mobile chat sheet.
   Desktop: windows dock bottom-right; the user keeps browsing behind them.
   Mobile: the chat is a slide-up sheet that feels like a layer on top.
   --------------------------------------------------------------------------- */

#chat-dock {
  position: fixed;
  z-index: 100;
  right: 16px;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
#chat-dock > * { pointer-events: auto; }
.chat-dock-windows { display: flex; align-items: flex-end; gap: 12px; }

.chat-window {
  width: 322px;
  max-width: calc(100vw - 32px);
  height: 442px;
  max-height: calc(100dvh - 140px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--color-surface);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.38);
}
.chat-window-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}
.chat-window-header .avatar { width: 36px; height: 36px; flex: 0 0 auto; }
.chat-window-title { flex: 1; min-width: 0; }
.chat-window-title strong { display: block; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.chat-window-title small { display: block; overflow: hidden; color: var(--color-text-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-window-actions { display: flex; gap: 2px; }
.chat-window-actions button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
}
.chat-window-actions button:hover { color: var(--color-text); background: var(--color-surface); }
.chat-window-actions .icon { width: 20px; height: 20px; }
.chat-min { transform: rotate(90deg); }
.chat-window-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 14px 12px;
}
.chat-window-composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-top: 1px solid var(--color-border);
}
.chat-window-composer label { flex: 1; min-width: 0; }
.chat-window-composer input {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  outline: 0;
  color: var(--color-text);
  background: var(--color-surface-raised);
}
.chat-window-composer input:focus { border-color: var(--color-sky); }

.chat-dock-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.chat-dock-bar[hidden] { display: none; }
.chat-dock-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}
.chat-dock-tab .avatar { width: 32px; height: 32px; }
.chat-dock-tab b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: #e5484d;
  font-size: 11px;
}
.chat-dock-overflow {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.chat-dock-overflow:hover { color: var(--color-text); }

/* Single-window mode toggle (dock bar) */
.chat-dock-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.chat-dock-mode:hover { color: var(--color-text); }
.chat-dock-mode .icon { width: 18px; height: 18px; }

/* Conversation switcher: title button in the window/sheet header */
.chat-window-switcher-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 2px 4px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.chat-window-switcher-btn:hover { background: var(--color-surface); }
.chat-window-switcher-btn .avatar { width: 36px; height: 36px; flex: 0 0 auto; }
.chat-window-switcher-btn .chat-window-title { flex: 1; min-width: 0; }
.chat-switcher-chevron { width: 20px; height: 20px; flex: 0 0 auto; color: var(--color-text-muted); transition: transform 0.2s; }
.chat-window-switcher-btn[aria-expanded="true"] .chat-switcher-chevron,
.chat-sheet-switcher-btn[aria-expanded="true"] .chat-switcher-chevron { transform: rotate(180deg); }

/* The picker panel: expanding in-flow section under the header */
.chat-switcher {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}
.chat-switcher-heading {
  margin: 8px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.chat-switcher-heading:first-child { margin-top: 4px; }
.chat-switcher-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
}
.chat-switcher-row:hover { background: var(--color-surface-raised); }
.chat-switcher-row.active { background: var(--color-surface-raised); }
.chat-switcher-select {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  padding: 8px 10px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}
.chat-switcher-select .avatar { width: 34px; height: 34px; flex: 0 0 auto; }
.chat-switcher-select > span { flex: 1; min-width: 0; }
.chat-switcher-select strong { display: block; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.chat-switcher-select small { display: block; overflow: hidden; color: var(--color-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-switcher-select b {
  display: grid;
  min-width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: #e5484d;
  font-size: 11px;
}
.chat-switcher-add,
.chat-switcher-remove {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 10px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
}
.chat-switcher-add:hover,
.chat-switcher-remove:hover { color: var(--color-text); background: var(--color-surface-raised); }
.chat-switcher-add .icon,
.chat-switcher-remove .icon { width: 18px; height: 18px; }
.chat-switcher-empty { padding: 14px; color: var(--color-text-muted); font-size: 13px; text-align: center; }

/* Sheet header switcher button (mobile) */
.chat-sheet-switcher-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 2px 4px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.chat-sheet-switcher-btn .avatar { width: 40px; height: 40px; flex: 0 0 auto; }
.chat-sheet-switcher-btn .chat-sheet-title { flex: 1; min-width: 0; }

/* Mobile chat sheet */
#chat-sheet { position: fixed; inset: 0; z-index: 140; visibility: hidden; }
#chat-sheet.open { visibility: visible; }
.chat-sheet-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); opacity: 0; transition: opacity 0.25s; }
#chat-sheet.open .chat-sheet-backdrop { opacity: 1; }
.chat-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: 92dvh;
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: var(--color-surface);
  transform: translateY(102%);
  transition: transform 0.3s ease;
}
#chat-sheet.open .chat-sheet-panel { transform: translateY(0); }
.chat-sheet-handle { display: grid; place-items: center; padding: 10px 0 4px; cursor: pointer; touch-action: pan-y; }
.chat-sheet-handle span { width: 44px; height: 5px; border-radius: 999px; background: var(--color-border); }
.chat-sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 12px;
  border-bottom: 1px solid var(--color-border);
}
.chat-sheet-header .avatar { width: 40px; height: 40px; }
.chat-sheet-header button {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
}
.chat-sheet-header button:hover { color: var(--color-text); background: var(--color-surface-raised); }
.chat-back { transform: rotate(180deg); }
.chat-sheet-title { flex: 1; min-width: 0; }
.chat-sheet-title strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.chat-sheet-title small { color: var(--color-text-muted); font-size: 12px; }
/* Bee (2026-10-11): Messages popup — conversation list inside the sheet. */
.chat-sheet-list-title { flex: 1; min-width: 0; margin: 0; font-size: 18px; }
.chat-sheet-convs { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.chat-sheet-conv { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); background: transparent; text-align: left; cursor: pointer; }
.chat-sheet-conv .avatar { width: 46px; height: 46px; flex: 0 0 auto; }
.chat-sheet-conv-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-sheet-conv-body strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.chat-sheet-conv-body small { overflow: hidden; color: var(--color-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-sheet-conv > em { flex: 0 0 auto; color: var(--color-text-muted); font-size: 11px; font-style: normal; }
.chat-sheet-unread { display: grid; min-width: 20px; height: 20px; flex: 0 0 auto; place-items: center; padding: 0 6px; border-radius: 999px; color: white; background: var(--color-magenta); font-size: 11px; font-style: normal; font-weight: 700; }
.chat-sheet-empty { padding: 32px 16px; color: var(--color-text-muted); text-align: center; }

/* Desktop Messages popup (Bee 2026-10-12): Facebook-Messenger-style dropdown
   panel with the conversation list. Desktop only — mobile uses the sheet. */
#chat-popup { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
#chat-popup[hidden] { display: none; }
.chat-popup-panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  max-height: min(520px, calc(100dvh - 120px));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.38);
  pointer-events: auto;
}
.chat-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 8px;
}
.chat-popup-header h2 { margin: 0; font-size: 20px; }
.chat-popup-header button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
}
.chat-popup-header button:hover { color: var(--color-text); background: var(--color-surface-raised); }
.chat-popup-list { overflow-y: auto; padding: 0 6px 6px; }
.chat-popup-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  color: var(--color-text);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.chat-popup-row:hover { background: var(--color-surface-raised); }
.chat-popup-row .avatar { width: 46px; height: 46px; flex: 0 0 auto; }
.chat-popup-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-popup-row-body strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.chat-popup-row-body small { overflow: hidden; color: var(--color-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.chat-popup-row > em { flex: 0 0 auto; color: var(--color-text-muted); font-size: 11px; font-style: normal; }
.chat-popup-unread { display: grid; min-width: 20px; height: 20px; flex: 0 0 auto; place-items: center; padding: 0 6px; border-radius: 999px; color: white; background: var(--color-magenta); font-size: 11px; font-style: normal; font-weight: 700; }
.chat-popup-empty { padding: 28px 16px; color: var(--color-text-muted); text-align: center; }
.chat-popup-footer { border-top: 1px solid var(--color-border); padding: 6px; }
.chat-popup-footer button {
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  color: var(--color-accent, #4d7cff);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.chat-popup-footer button:hover { background: var(--color-surface-raised); }
.chat-sheet-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
  padding: 16px 14px;
}
.chat-sheet-composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.chat-sheet-composer label { flex: 1; min-width: 0; }
.chat-sheet-composer input {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  outline: 0;
  color: var(--color-text);
  background: var(--color-surface-raised);
  font-size: 15px;
}
.chat-sheet-composer input:focus { border-color: var(--color-sky); }
body.sheet-open { overflow: hidden; }

/* Inbox page: list-only layout (threads live in the dock/sheet now) and the
   pop-out full-thread view. */
.messaging-surface.list-only { display: block; }
.messaging-surface.full-thread-view { display: block; }
.full-thread-top { padding: 4px 8px 0; }
.full-thread-view .conversation-preview { min-height: 60dvh; }

@media (max-width: 920px) {
  #chat-dock { display: none; }
}

/* ---- Real media upload form (Bee 2026-10-11) ---- */
.creation-form .form-hint { font-size: 12px; color: var(--text-dim, #8a93a6); margin: -6px 0 10px; }
.media-preview { margin: 4px 0 12px; text-align: center; }
.upload-progress { margin: 12px 0; }
.upload-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.upload-fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, #7c5cff, #e14eca); transition: width .2s ease; }
.upload-pct { font-size: 12px; color: var(--text-dim, #8a93a6); margin: 6px 0 0; text-align: center; }

/* ---- Family lineage extensions (Bee 2026-10-12): tree builder, migration, stories, health ---- */
.family-lineage-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.family-lineage-facts > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 99px; font-size: 12px; color: var(--color-text-soft); background: var(--color-navy-soft); }
.family-lineage-facts .icon { width: 14px; height: 14px; }
.family-demo-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-sky); background: rgb(86 184 255 / .12); border: 1px dashed rgb(86 184 255 / .4); }
.family-fieldset { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; margin: 12px 0; }
.family-fieldset > legend { display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--color-text-soft); }
.family-fieldset .icon { width: 14px; height: 14px; }
.family-migration header, .family-stories header, .family-health header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.family-migration h4, .family-stories h4, .family-health h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.family-migration h4 .icon, .family-stories h4 .icon, .family-health h4 .icon { width: 16px; height: 16px; color: var(--color-sky); }
.family-empty-note { color: var(--color-text-muted); font-size: 13px; margin: 6px 0; }
.family-mig-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.family-mig-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-navy-soft); }
.family-mig-route { font-weight: 700; font-size: 13px; }
.family-mig-list small { color: var(--color-sky); font-weight: 700; }
.family-mig-list em { display: block; width: 100%; color: var(--color-text-muted); font-size: 12px; font-style: normal; }
.family-mig-slot { border: 1px dashed var(--color-border); border-radius: 10px; padding: 10px; margin: 8px 0; }
.family-mig-slot > legend { padding: 0 6px; font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.family-story { padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; margin: 8px 0; background: var(--color-navy-soft); }
.family-story h5 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.family-story p { margin: 6px 0; font-size: 13px; line-height: 1.55; }
.family-story a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-sky); font-size: 13px; }
.family-health-privacy { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid rgb(224 122 95 / .3); border-radius: 10px; background: rgb(224 122 95 / .06); font-size: 12px; line-height: 1.5; color: var(--color-text-soft); margin: 0 0 12px; }
.family-health-privacy .icon { flex: 0 0 auto; width: 16px; color: #e07a5f; margin-top: 2px; }
.family-health-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px; margin: 10px 0; background: var(--color-navy-soft); }
.family-health-card > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.family-health-cat { padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: rgb(224 122 95 / .14); color: #e07a5f; }
.family-health-card strong { font-size: 14px; }
.family-health-access { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-muted); }
.family-health-access .icon { width: 12px; height: 12px; }
.family-health-card p { margin: 6px 0; font-size: 13px; }
.family-health-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.family-health-shares { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--color-border); }
.family-health-shares h6 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); }
.family-health-shares ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.family-health-shares li { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.family-consent-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.5; padding: 10px; border-radius: 10px; background: rgb(86 184 255 / .08); border: 1px solid rgb(86 184 255 / .2); }
.family-consent-note .icon { flex: 0 0 auto; width: 16px; color: var(--color-sky); }
.family-consent-check { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 10px; font-size: 13px; }
.family-consent-check input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex: 0 0 auto; }

/* ---- Avatar creator + shop (Bee: avatar creator with Hmong designs) ---- */
.avatar-creator { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.avatar-preview-pane { position: sticky; top: 76px; padding: 16px; text-align: center; }
.avatar-preview-figure { display: flex; justify-content: center; padding: 8px 0; }
.avatar-preview-figure svg { max-width: 100%; height: auto; }
.avatar-hp-note { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; color: var(--color-text-soft); margin: 10px 0; }
.avatar-hp-note .icon { width: 16px; height: 16px; color: #e8b34b; }
.avatar-notice { font-size: 13px; color: var(--color-sky); margin: 8px 0; }
.avatar-preview-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.avatar-step-tabs { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; }
.avatar-step-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-navy-soft); font-size: 14px; font-weight: 600; white-space: nowrap; }
.avatar-step-tab .icon { width: 18px; height: 18px; }
.avatar-step-tab.active { border-color: var(--color-sky); background: rgb(86 184 255 / .12); }
.avatar-step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-sky); color: #fff; font-size: 12px; }
.avatar-step-body { padding: 16px; }
.avatar-options { border: 0; margin: 0 0 18px; padding: 0; }
.avatar-options legend { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); margin-bottom: 8px; }
.avatar-option-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-option { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-navy-soft); font-size: 14px; min-height: 44px; }
.avatar-option.selected { border-color: var(--color-sky); background: rgb(86 184 255 / .12); }
.avatar-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .25); display: inline-block; }
.avatar-face-word { font-weight: 600; }
.avatar-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.avatar-filter { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--color-border); background: var(--color-navy-soft); font-size: 13px; font-weight: 600; min-height: 40px; }
.avatar-filter.active { border-color: var(--color-sky); background: rgb(86 184 255 / .12); }
.avatar-slot-section { margin-bottom: 22px; }
.avatar-slot-section h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 10px; }
.avatar-slot-section h3 .icon { width: 18px; height: 18px; color: var(--color-sky); }
.avatar-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.avatar-item-card { border: 1px solid var(--color-border); border-radius: 12px; padding: 10px; background: var(--color-navy-soft); display: flex; flex-direction: column; gap: 8px; }
.avatar-item-card.equipped { border-color: var(--color-sky); }
.avatar-item-preview { display: flex; justify-content: center; background: rgb(255 255 255 / .03); border-radius: 8px; padding: 6px; }
.avatar-item-preview svg { max-width: 100%; height: auto; }
.avatar-item-info h3 { margin: 0; font-size: 14px; }
.avatar-item-info p { margin: 4px 0 0; font-size: 12px; color: var(--color-text-soft); }
.tradition-tag { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tradition-green { background: rgb(46 139 87 / .16); color: #4cc38a; }
.tradition-white { background: rgb(232 180 75 / .14); color: #e8b34b; }
.tradition-pan { background: rgb(86 184 255 / .12); color: #56b8ff; }
.tradition-modern { background: rgb(122 79 208 / .14); color: #a885e8; }
.avatar-item-desc { line-height: 1.45; }
.avatar-item-action { margin-top: auto; }
.avatar-item-action .primary-button, .avatar-item-action .secondary-button { width: 100%; }
.avatar-item-action .primary-button[disabled] { opacity: .45; }
/* figure inside circular avatar frames */
.avatar-figure { overflow: hidden; padding: 0; }
.avatar-figure svg { width: 100%; height: 100%; display: block; }
@media (max-width: 860px) {
  .avatar-creator { grid-template-columns: 1fr; }
  .avatar-preview-pane { position: static; order: -1; }
  .avatar-preview-figure svg { max-height: 300px; }
}