:root {
  --lb-bg-deep: #070a12;
  --lb-card-bg: rgba(10, 14, 24, 0.86);
  --lb-card-bg-strong: rgba(10, 15, 27, 0.94);
  --lb-white: #f7f5ff;
  --lb-muted: rgba(227, 233, 252, 0.7);
  --lb-soft: rgba(200, 210, 240, 0.58);
  --lb-pink: #ff4fbf;
  --lb-blue: #4f66ff;
  --lb-teal: #00e0d3;
  --font-ui: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Space Grotesk", serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

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

body {
  font-family: var(--font-ui);
  font-size: var(--text-base, 16px);
  line-height: var(--leading-normal, 1.55);
  letter-spacing: var(--tracking-normal, -0.01em);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--lb-bg-deep);
  color: var(--lb-white);
}

.lb-profile-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  padding: 12px;
}

.lb-profile-page__stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 78% 16%, rgba(255, 255, 255, 0.24), transparent),
    radial-gradient(1.1px 1.1px at 82% 74%, rgba(255, 255, 255, 0.2), transparent),
    radial-gradient(1px 1px at 24% 82%, rgba(255, 255, 255, 0.22), transparent);
  opacity: 0.42;
}

.lb-profile-page__glow {
  position: fixed;
  pointer-events: none;
}

.lb-profile-page__glow--pink {
  width: min(64vw, 540px);
  height: min(44vw, 380px);
  left: -10%;
  top: 16%;
  background: radial-gradient(circle, rgba(255, 79, 191, 0.14), transparent 72%);
}

.lb-profile-page__glow--blue {
  width: min(62vw, 500px);
  height: min(48vw, 360px);
  right: -8%;
  bottom: 20%;
  background: radial-gradient(circle, rgba(79, 102, 255, 0.13), transparent 74%);
}

.lb-profile-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.lb-profile-topbar {
  position: sticky;
  top: 12px;
  z-index: 12;
  min-height: 62px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(rgba(10, 14, 24, 0.84), rgba(10, 14, 24, 0.84)) padding-box,
    linear-gradient(118deg, rgba(255, 79, 191, 0.26), rgba(79, 102, 255, 0.22), rgba(0, 224, 211, 0.2)) border-box;
  box-shadow: 0 10px 22px rgba(4, 8, 14, 0.45);
  display: flex;
  align-items: center;
  padding: 8px 10px;
}

.lb-profile-topbar__iconBtn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(11, 16, 27, 0.88);
  color: rgba(245, 243, 255, 0.9);
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.lb-icon-menu {
  width: 16px;
  height: 12px;
  position: relative;
  display: inline-block;
}

.lb-icon-menu::before,
.lb-icon-menu::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.lb-icon-menu::before {
  top: 1px;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}

.lb-profile-topbar__brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 168px;
  display: inline-flex;
  align-items: center;
}

.lb-profile-topbar__brand img {
  width: 100%;
  height: auto;
  display: block;
}

.lb-profile-topbar__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-profile-topbar__bellBtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(14, 18, 30, 0.82);
  color: rgba(247, 244, 255, 0.94);
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  transition: border-color .18s ease, box-shadow .2s ease, transform .16s ease;
}

.lb-profile-topbar__bellBadge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(112deg, rgba(255,79,191,.96), rgba(132,89,255,.94));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  padding: 0 4px;
  box-shadow: 0 0 8px rgba(255,79,191,.4);
  pointer-events: none;
}

.lb-icon-bell {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lb-profile-topbar__signalBtn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 18, 30, 0.88);
  color: rgba(247, 244, 255, 0.92);
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lb-icon-youup {
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.lb-icon-youup__moon {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: linear-gradient(140deg, rgba(255, 79, 191, 0.96), rgba(79, 102, 255, 0.9));
  box-shadow: 0 0 10px rgba(255, 79, 191, 0.34), 0 0 8px rgba(79, 102, 255, 0.3);
}

.lb-icon-youup__moon::after {
  content: "";
  position: absolute;
  left: -2px;
  top: 1px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(14, 18, 30, 0.96);
}

.lb-icon-youup__sparkle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #00E0D3;
  box-shadow: 0 0 8px rgba(0, 224, 211, 0.46);
}

.lb-icon-youup__sparkle--a {
  right: 1px;
  top: 0;
}

.lb-icon-youup__sparkle--b {
  left: 2px;
  bottom: 0;
  width: 3px;
  height: 3px;
}

.lb-profile-header {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--lb-card-bg-strong);
  padding: 10px;
  display: grid;
  gap: 12px;
}

.lb-profile-header__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.lb-profile-header__identity {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.lb-profile-header__nameRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 4px;
}

.lb-profile-header__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.14;
  letter-spacing: -0.024em;
  overflow-wrap: normal;
  word-break: normal;
}

.lb-profile-header__availChip {
  flex-shrink: 0;
  align-self: center;
}

.lb-profile-availability--open {
  color: var(--lb-pink, #ff72cc);
  background: rgba(255, 79, 191, 0.08);
  box-shadow: 0 0 12px rgba(255, 79, 191, 0.12);
}

.lb-profile-availability--closed {
  color: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.16);
}

.lb-profile-header__metaLine {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.lb-profile-header__metaSubline {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(197, 206, 235, 0.62);
}

.lb-profile-header__metaUsername {
  color: rgba(247, 244, 255, 0.96);
  font-weight: 630;
}

.lb-profile-header__metaDot {
  color: rgba(247, 244, 255, 0.28);
  padding: 0 5px;
}

.lb-profile-header__bio {
  margin: 2px 0 0;
  color: rgba(247, 244, 255, 0.72);
  font-size: 15px;
  line-height: 1.5;
  max-width: 58ch;
  white-space: pre-wrap;
}

.lb-profile-header__avatarWrap {
  width: 64px;
  height: 64px;
  margin-top: 4px;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(132deg, #ff4fbf, #b46dff 52%, #4f66ff);
  box-shadow: 0 0 14px rgba(255, 79, 191, 0.18);
}

.lb-profile-header__avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
  position: relative;
  overflow: hidden;
  /* Now a <button> (was a <span>) so the photo is keyboard/click reachable
     -- these reset the default button chrome so it stays visually
     identical to the previous plain span. */
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background:
    radial-gradient(circle at 48% 18%, rgba(255, 255, 255, 0.3), transparent 50%),
    linear-gradient(145deg, rgba(255, 79, 191, 0.55), rgba(79, 102, 255, 0.58));
}

.lb-profile-header__avatar.has-photo {
  background-color: rgba(12, 16, 27, 0.92);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.lb-profile-header__avatar::before {
  content: "";
  position: absolute;
  width: 34%;
  height: 34%;
  border-radius: 999px;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(247, 250, 255, 0.9);
}

.lb-profile-header__avatar::after {
  content: "";
  position: absolute;
  width: 58%;
  height: 40%;
  border-radius: 999px 999px 44% 44%;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  background: rgba(247, 250, 255, 0.88);
}

.lb-profile-header__avatar.has-photo::before,
.lb-profile-header__avatar.has-photo::after {
  display: none;
}

.lb-profile-header__romance {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.lb-profile-header__snapshots {
  display: block;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  color: #ffffff;
}

/* V11/V12 visual port (2026-08-30): the four snapshot facts must render as
   one inline text line with colored dot separators, never as bordered
   capsules/chips (founder-locked rule). Each fact keeps its existing
   .lb-romance-chip element/class (same JS, same DOM-building loop in both
   profile.js and public-profile.js) -- only the visual treatment changes,
   from a pill shape to plain inline text, with a colored " · " injected
   between siblings via ::after so the JS never needs to build separator
   elements itself. */
.lb-romance-chip {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  white-space: normal;
}

.lb-romance-chip:not(:last-child)::after {
  font-weight: 700;
}

.lb-romance-chip:nth-child(1):not(:last-child)::after {
  content: ' · ';
  color: #ff4fbf;
}

.lb-romance-chip:nth-child(2):not(:last-child)::after {
  content: ' · ';
  color: #cf57e8;
}

.lb-romance-chip:nth-child(3):not(:last-child)::after {
  content: ' · ';
  color: #4f66ff;
}

.lb-romance-chip--social {
  border-color: rgba(0, 224, 211, 0.34);
  background: rgba(10, 14, 24, 0.72);
  color: rgba(247, 244, 255, 0.9);
}

.lb-romance-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 140, 205, 0.42);
  background: #0c101b;
  box-shadow: 0 0 10px rgba(255, 79, 191, 0.08);
  color: rgba(247, 244, 255, 0.92);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.lb-romance-pill:hover {
  background: #10141f;
  border-color: rgba(255, 140, 205, 0.6);
  box-shadow: 0 0 12px rgba(255, 79, 191, 0.14);
}

.lb-profile-header__links {
  margin-top: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-link-pill {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 16, 27, 0.88);
  color: rgba(247, 245, 255, 0.9);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lb-link-pill--tip {
  cursor: pointer;
  font-weight: 600;
  color: #f7f4ff;
  background:
    linear-gradient(#0b101b, #0b101b) padding-box,
    linear-gradient(105deg, rgba(255, 79, 191, 0.85), rgba(207, 87, 232, 0.6) 60%, rgba(79, 102, 255, 0.4)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 14px rgba(255, 79, 191, 0.12);
}

.lb-profile-header__stats {
  margin: 0;
  color: rgba(226, 233, 253, 0.83);
  font-size: 14px;
  font-weight: 550;
}

.lb-profile-header__stats span {
  color: rgba(247, 244, 255, 0.3);
  margin: 0 6px;
}

.lb-profile-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-profile-btn {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 18px;
  font: 620 13px/1 var(--font-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
}

.lb-profile-btn--primary {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 16, 27, 0.82);
  color: rgba(247, 245, 255, 0.9);
}

.lb-profile-btn--secondary {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 16, 27, 0.82);
  color: rgba(247, 245, 255, 0.9);
}

.lb-profile-tabs {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #0B0C13;
  padding: 8px 10px 12px;
}

.lb-profile-tabs__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.lb-profile-datingCard {
  position: relative;
  padding: 0 0 8px;
}

.lb-profile-datingCard__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 24, 0.88);
  color: rgba(247, 244, 255, 0.82);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.14s ease, border-color 0.14s ease;
}

.lb-profile-datingCard__close:hover {
  background: rgba(20, 26, 44, 0.96);
  border-color: rgba(255, 255, 255, 0.26);
}


.lb-profile-datingCard__frame {
  width: 100%;
  height: 700px;
  border: 0;
  border-radius: 24px;
  display: block;
}

.lb-profile-datingCard--highlight {
  border-radius: 24px;
  box-shadow: 0 0 0 2px rgba(255, 79, 191, 0.52), 0 0 24px rgba(255, 79, 191, 0.18), 0 0 24px rgba(79, 102, 255, 0.14);
  transition: box-shadow 0.6s ease;
}

/* Own Profile's "create post" launcher is now the exact canonical Feed
   .lb-user-entry component (feed.css, loaded on this page) -- normalized
   2026-08-30 so the two never drift again. No profile-specific rules here
   on purpose; see feed.css for the single source of truth (including its
   own hover/focus-visible and responsive step-downs, which now apply here
   too automatically). */

.lb-profile-tabs__tab {
  min-height: 42px;
  border: none;
  background: transparent;
  color: rgba(247, 244, 255, 0.44);
  font: 600 13.5px/1 var(--font-ui);
  cursor: pointer;
  position: relative;
}

.lb-profile-tabs__tab.is-active {
  color: rgba(246, 247, 255, 0.96);
}

.lb-profile-tabs__tab.is-active::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(105deg, #ff4fbf, #cf57e8 40%, #4f66ff 70%, #00e0d3);
}

.lb-profile-tabs__panel {
  padding: 14px 4px 4px;
}

/* Was `.lb-profile-tabs__panel p` (any bare <p> inside a tab panel). That
   compound specificity (class + type) silently beat every content-copy
   class's own single-class color rule -- .lb-post-card__body,
   .lb-view-byte-item__text/__meta/__type/__context-label/-preview,
   .lb-profile-replyCard__text/__meta/__contextLine/__contextPreview,
   .lb-thread-comment__text -- whenever that content happened to be a bare
   <p> inside Posts/Replies/Saved (all three qualify). A real,
   previously-invisible bug, not a style choice: found 2026-08-31 while
   verifying the canonical-white content-copy fix via computed styles.
   Every one of those classes already carries its own correct color, so the
   fix is to stop this rule from reaching them at all rather than chase it
   with an ever-growing :not() list -- narrowed to the one element that
   actually has no color of its own without it. */
.lb-profile-tabs__empty {
  margin: 0;
  color: var(--lb-muted);
  font-size: 15px;
  line-height: 1.5;
}

.lb-view-byte {
  display: grid;
  gap: 10px;
}

.lb-view-byte__empty {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #0F1119;
  padding: 18px 14px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 7px;
}

.lb-view-byte__emptyGlyph {
  width: 22px;
  height: 22px;
  fill: rgba(247, 244, 255, 0.5);
  opacity: 0.6;
}

.lb-view-byte__empty h3 {
  margin: 0;
  color: rgba(244, 247, 255, 0.94);
  font: 670 18px/1.2 var(--font-display);
}

.lb-view-byte__empty p {
  margin: 0;
  color: rgba(229, 235, 252, 0.72);
  font-size: 14px;
  line-height: 1.45;
  max-width: 32ch;
}

.lb-view-byte__backBtn {
  width: max-content;
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(11, 16, 27, 0.86);
  color: rgba(241, 246, 255, 0.9);
  font: 620 12px/1 var(--font-ui);
  padding: 0 12px;
  cursor: pointer;
}

.lb-view-byte__list {
  display: grid;
  gap: 10px;
}

.lb-view-byte-item {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #0F1119;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.lb-view-byte-item__type {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(247, 244, 255, 0.38);
  font: 600 9.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.01em;
}

.lb-view-byte-item__typeGlyph {
  font-size: 11px;
  filter: grayscale(1);
  opacity: 0.7;
}

.lb-view-byte-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lb-view-byte-item__head--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.lb-view-byte-item__head--link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.24);
  border-radius: 6px;
}
.lb-view-byte-item__head--link .lb-view-byte-item__handle {
  text-decoration: none;
}

/* Canonical clickable-identity underline -- one shared treatment, applied
   only to the glyph run after "@" (never the "@" itself) so the line sits
   tight under the letters with no floating gap. The "@" + this span sit
   inside one <a>, so the whole "@handle" stays a single click target; only
   the visible underline is scoped narrower than the link. Same gradient
   feed.css's .lb-post-card__handle uses -- one canonical identity-link
   treatment, not a separate Saved/Replies approximation.
   Scoped to `a .lb-identity-underline`, never bare `.lb-identity-underline`
   -- an unresolved mention (rendered as a plain <span>, no href) must never
   grow a fake-link underline it can't act on. */
a .lb-identity-underline {
  background-image: linear-gradient(105deg, #FF4FBF, #CF57E8 40%, #4F66FF 70%, #00E0D3);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 1px;
}

.lb-view-byte-item__avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 48% 20%, rgba(255, 255, 255, 0.3), transparent 51%),
    linear-gradient(142deg, rgba(255, 79, 191, 0.52), rgba(79, 102, 255, 0.56));
  background-size: cover;
  background-position: center;
}

.lb-view-byte-item__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(132deg, #FF4FBF, #B46DFF 52%, #4F66FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.lb-view-byte-item__meta {
  margin: 0;
  min-width: 0;
  flex: 1;
  color: rgba(197, 206, 235, 0.62);
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-view-byte-item__handle {
  color: rgba(247, 244, 255, 0.96);
  font-weight: 630;
}

.lb-view-byte-item__dot {
  color: rgba(247, 244, 255, 0.28);
}

.lb-view-byte-item__text {
  margin: 0;
  /* User-authored content copy is canonical primary white everywhere
     (2026-08-31) -- same #FFFFFF as .lb-post-card__body, the known-good
     reference. Covers Saved post/comment/reply/Ghost body uniformly since
     all three renderers share this one class. */
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.45;
}

.lb-view-byte-item__context {
  margin: 0;
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #090A11;
  padding: 10px;
  display: grid;
  gap: 3px;
}

.lb-view-byte-item__context-label {
  margin: 0;
  color: rgba(247, 244, 255, 0.5);
  font-size: 12px;
  line-height: 1.4;
}

.lb-view-byte-item__context-handle {
  font-weight: 630;
  color: rgba(247, 244, 255, 0.9);
}

a.lb-view-byte-item__context-handle {
  text-decoration: none;
}

.lb-view-byte-item__context-preview {
  margin: 0;
  /* This is a quoted excerpt of someone's actual words (the saved item's
     source thread/post), not a label -- user-authored content copy is
     canonical primary white everywhere (2026-08-31). The context LABEL
     above it (.lb-view-byte-item__context-label) stays muted on purpose. */
  color: #FFFFFF;
  font-size: 13px;
  font-style: italic;
  line-height: 1.45;
}

.lb-view-byte-item__thumb {
  width: 68px;
  height: 68px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  object-fit: cover;
}

.lb-view-byte-item__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lb-view-byte-item__viewBtn {
  min-height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 211, 0.34);
  background: rgba(11, 16, 27, 0.86);
  color: rgba(171, 255, 246, 0.95);
  font: 620 12px/1 var(--font-ui);
  padding: 0 11px;
  cursor: pointer;
}

.lb-view-byte-item__saveBtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(11, 16, 27, 0.86);
  color: rgba(228, 236, 255, 0.84);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lb-view-byte-item__saveBtn svg {
  width: 16px;
  height: 16px;
}

.lb-view-byte-item__saveBtn.is-active {
  color: rgba(243, 247, 255, 0.96);
  border-color: rgba(255, 79, 191, 0.44);
  box-shadow: 0 0 0 1px rgba(0, 224, 211, 0.24), 0 0 11px rgba(79, 102, 255, 0.24);
}

.lb-profile-replies {
  display: grid;
  gap: 10px;
}

.lb-profile-replies__empty {
  margin: 0;
  color: rgba(227, 233, 252, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

.lb-profile-replies__list {
  display: grid;
  gap: 10px;
}

.lb-profile-replyCard {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: #0F1119;
  padding: 12px;
  display: grid;
  gap: 8px;
  cursor: default;
}

.lb-profile-replyCard__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.lb-profile-replyCard__avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 30%, rgba(247, 244, 255, 0.9) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 78%, rgba(247, 244, 255, 0.9) 0 30%, transparent 31%),
    linear-gradient(140deg, rgba(255, 79, 191, 0.58), rgba(79, 102, 255, 0.58));
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.lb-profile-replyCard__avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 1.5px;
  background: linear-gradient(132deg, #FF4FBF, #B46DFF 52%, #4F66FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.lb-profile-replyCard__meta {
  margin: 0;
  min-width: 0;
  flex: 1;
  color: rgba(197, 206, 235, 0.62);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-profile-replyCard__metaName {
  color: rgba(247, 244, 255, 0.96);
  font-weight: 630;
}

a.lb-profile-replyCard__metaName {
  text-decoration: none;
}

.lb-profile-replyCard__dot {
  color: rgba(247, 244, 255, 0.28);
  padding: 0 5px;
}

.lb-profile-replyCard__text {
  margin: 0;
  /* User-authored content copy is canonical primary white everywhere
     (2026-08-31) -- same #FFFFFF as .lb-post-card__body, the known-good
     reference. */
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lb-profile-replyCard__text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lb-profile-replyCard__thumb {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  object-fit: cover;
  display: block;
}

.lb-profile-replyCard__context {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: #090A11;
  padding: 10px 10px 10px 12px;
  display: grid;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.lb-profile-replyCard__context::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  /* Same canonical brand gradient as .lb-post-card__handle's underline and
     .lb-crush-btn--primary (feed.css) -- oriented vertically since this is
     an edge, not a line, but the color stops are the one canonical set,
     not a separate approximation. */
  background: linear-gradient(180deg, #FF4FBF, #CF57E8 40%, #4F66FF 70%, #00E0D3);
}

.lb-profile-replyCard__contextLine {
  margin: 0;
  color: rgba(247, 244, 255, 0.34);
  font: 600 9.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.01em;
}

.lb-profile-replyCard__contextHandle {
  text-transform: none;
  letter-spacing: 0.02em;
  font: 630 12px/1.3 var(--font-ui);
  color: rgba(247, 244, 255, 0.9);
}

a.lb-profile-replyCard__contextHandle {
  text-decoration: none;
}

.lb-profile-replyCard__contextPreview {
  margin: 0;
  /* This is a quoted excerpt of the original post's actual words, not a
     label -- user-authored content copy is canonical primary white
     everywhere (2026-08-31). The "Original post by @handle" label above it
     (.lb-profile-replyCard__contextLine) stays muted/contextual on purpose. */
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lb-profile-replyCard__contextThumb {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  object-fit: cover;
}

.lb-profile-replyCard__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lb-profile-replyCard__viewThread,
.lb-profile-replyCard__readMore {
  border: 0;
  background: transparent;
  color: rgba(173, 255, 247, 0.92);
  font: 600 12px/1.2 var(--font-ui);
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(0, 224, 211, 0.38);
  text-underline-offset: 3px;
}

.lb-profile-replyCard__save {
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(11, 16, 27, 0.86);
  color: rgba(232, 239, 255, 0.84);
  font: 600 12px/1 var(--font-ui);
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.lb-profile-replyCard__saveIcon {
  width: 14px;
  height: 14px;
}

.lb-profile-replyCard__saveCount {
  color: rgba(241, 247, 255, 0.88);
  font-size: 11px;
}

.lb-profile-replyCard__save.is-active {
  border-color: rgba(255, 79, 191, 0.44);
  box-shadow: 0 0 0 1px rgba(0, 224, 211, 0.22), 0 0 10px rgba(79, 102, 255, 0.2);
  color: rgba(247, 250, 255, 0.96);
}

.lb-profile-replyCard__viewThread:focus-visible,
.lb-profile-replyCard__readMore:focus-visible,
.lb-profile-replyCard__save:focus-visible,
.lb-view-byte__backBtn:focus-visible,
.lb-view-byte-item__viewBtn:focus-visible,
.lb-view-byte-item__saveBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.24);
  border-radius: 6px;
}

.lb-profile-replyCard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.24);
}

.lb-profile-postsList {
  display: grid;
  gap: 10px;
}

.lb-profile-feedPost {
  position: relative;
}

.lb-profile-feedPost.is-pinned::before {
  content: "📌";
  position: absolute;
  top: 0;
  left: 14px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(0, 224, 211, 0.44);
  background:
    linear-gradient(rgba(10, 14, 24, 0.96), rgba(10, 14, 24, 0.96)) padding-box,
    linear-gradient(120deg, rgba(255, 79, 191, 0.35), rgba(79, 102, 255, 0.3), rgba(0, 224, 211, 0.28)) border-box;
  box-shadow: 0 8px 14px rgba(5, 8, 14, 0.4), 0 0 10px rgba(79, 102, 255, 0.2);
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  z-index: 3;
}

.lb-profile-feedPost__headActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-profile-feedPost__menuWrap {
  position: relative;
}

.lb-profile-feedPost__menuBtn {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 14, 24, 0.8);
  color: rgba(235, 241, 255, 0.9);
  font: 700 16px/1 var(--font-ui);
  cursor: pointer;
}

.lb-profile-feedPost__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 8;
  min-width: 136px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 24, 0.96);
  box-shadow: 0 14px 30px rgba(4, 8, 15, 0.52);
  padding: 6px;
  display: grid;
  gap: 4px;
}

.lb-profile-feedPost__menuItem {
  min-height: 34px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: rgba(245, 248, 255, 0.93);
  font: 600 13px/1 var(--font-ui);
  text-align: left;
  padding: 0 9px;
  cursor: pointer;
}

.lb-profile-feedPost__menuItem:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lb-profile-feedPost__menuItem--danger {
  color: rgba(255, 185, 211, 0.96);
}

.lb-profile-feedPost__menuBtn:focus-visible,
.lb-profile-feedPost__menuItem:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.24);
}

.lb-profile-feedPost__media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.lb-profile-feedPost__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lb-profile-compose {
  position: fixed;
  inset: 0;
  z-index: 44;
}

.lb-profile-compose__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.62);
  backdrop-filter: blur(4px);
}

.lb-profile-compose__sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 560px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(rgba(15, 19, 32, 0.96), rgba(15, 19, 32, 0.96)) padding-box,
    linear-gradient(112deg, rgba(255, 79, 191, 0.34), rgba(79, 102, 255, 0.3) 55%, rgba(0, 224, 211, 0.26)) border-box;
  box-shadow: 0 18px 42px rgba(5, 8, 16, 0.58), 0 0 18px rgba(79, 102, 255, 0.12), 0 0 14px rgba(255, 79, 191, 0.1);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.lb-profile-compose__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.lb-profile-compose__cancel,
.lb-profile-compose__post {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: rgba(11, 16, 27, 0.86);
  color: rgba(247, 244, 255, 0.92);
  font: 620 13px/1 var(--font-ui);
  padding: 0 12px;
  cursor: pointer;
}

.lb-profile-compose__post:not(:disabled) {
  border-color: transparent;
  background: linear-gradient(105deg, #ff4fbf 0%, #d95ce0 42%, #4f66ff 100%);
  color: #fff;
}

.lb-profile-compose__post:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.lb-profile-compose__title {
  margin: 0;
  text-align: center;
  font: 700 18px/1.2 var(--font-display);
}

.lb-profile-compose__identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-profile-compose__avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 211, 0.34);
  background:
    radial-gradient(circle at 48% 18%, rgba(255, 255, 255, 0.3), transparent 50%),
    linear-gradient(145deg, rgba(255, 79, 191, 0.55), rgba(79, 102, 255, 0.58));
  position: relative;
  overflow: hidden;
}

.lb-profile-compose__avatar::before {
  content: "";
  position: absolute;
  width: 36%;
  height: 36%;
  border-radius: 999px;
  top: 24%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(247, 250, 255, 0.9);
}

.lb-profile-compose__avatar::after {
  content: "";
  position: absolute;
  width: 60%;
  height: 42%;
  border-radius: 999px 999px 44% 44%;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  background: rgba(247, 250, 255, 0.88);
}

.lb-profile-compose__avatar.has-photo,
.lb-compose__avatar.has-photo {
  background-color: rgba(12, 16, 27, 0.92);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.lb-profile-compose__avatar.has-photo::before,
.lb-profile-compose__avatar.has-photo::after {
  display: none;
}

.lb-profile-compose__handle {
  margin: 0;
  color: rgba(184, 202, 255, 0.94);
  font-size: 13px;
  font-weight: 620;
}

.lb-profile-compose__field textarea {
  width: 100%;
  min-height: 120px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(11, 16, 27, 0.88);
  color: rgba(247, 244, 255, 0.95);
  font: 500 16px/1.5 var(--font-ui);
  padding: 12px;
  resize: vertical;
}

.lb-profile-compose__field textarea::placeholder {
  color: rgba(247, 244, 255, 0.52);
}

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

.lb-profile-compose__toolButtons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-profile-compose__toolBtn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(13, 18, 31, 0.86);
  color: rgba(247, 244, 255, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lb-profile-compose__toolBtn:hover {
  border-color: rgba(0, 224, 211, 0.42);
}

.lb-profile-compose__toolBtn.is-active {
  border-color: rgba(255, 79, 191, 0.48);
  color: rgba(255, 224, 244, 0.98);
}

.lb-profile-compose__cancel:focus-visible,
.lb-profile-compose__post:focus-visible,
.lb-profile-compose__field textarea:focus-visible,
.lb-profile-compose__toolBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.24), 0 0 0 4px rgba(0, 224, 211, 0.1);
}

.lb-profile-compose__meta {
  margin: 0;
  color: rgba(247, 244, 255, 0.58);
  font-size: 12px;
}

.lb-profile-compose__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lb-profile-compose__toolHint {
  margin: 0;
  color: rgba(247, 244, 255, 0.54);
  font-size: 12px;
}

.lb-profile-compose__error {
  margin: 0;
  color: rgba(255, 178, 230, 0.92);
  font-size: 12px;
  min-height: 16px;
}

.lb-profile-compose__preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.lb-profile-topbar__iconBtn:hover,
.lb-profile-topbar__signalBtn:hover,
.lb-profile-btn:hover,
.lb-link-pill:hover {
  filter: brightness(1.08);
}

.lb-profile-topbar__bellBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(0,224,211,.45);
  box-shadow: 0 0 12px rgba(0,224,211,.18), 0 0 10px rgba(79,102,255,.16);
}

.lb-profile-topbar__iconBtn:focus-visible,
.lb-profile-topbar__signalBtn:focus-visible,
.lb-profile-btn:focus-visible,
.lb-profile-tabs__tab:focus-visible,
.lb-link-pill:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.28), 0 0 0 4px rgba(0, 224, 211, 0.12);
}

.lb-profile-topbar__bellBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,224,211,.24), 0 0 0 4px rgba(0,224,211,.12);
}

@media (max-width: 620px) {
  .lb-profile-page {
    padding: 10px;
  }

  .lb-profile-shell {
    gap: 10px;
  }

  .lb-profile-topbar {
    top: 10px;
    min-height: 58px;
    border-radius: 14px;
  }

  .lb-profile-topbar__bellBtn {
    width: 36px;
    height: 36px;
  }

  .lb-profile-topbar__brand {
    max-width: 152px;
  }

  .lb-profile-header__identity {
    gap: 6px;
  }

  .lb-profile-header__bio {
    margin-top: 0;
  }

  .lb-profile-header__avatarWrap {
    justify-self: end;
    align-self: start;
  }

  .lb-profile-header__links {
    margin-top: 4px;
    gap: 7px;
  }

  .lb-profile-header__actions {
    gap: 7px;
  }

  .lb-profile-tabs {
    padding: 8px 8px 11px;
  }

}

/* V11/V12 320px worst-case step-down (2026-08-30) — narrowest supported
   width, per the visual reference's own "worst case" annotation. Only
   these two properties step down; everything else in the header keeps its
   390px-reference sizing down to this width. */
@media (max-width: 360px) {
  .lb-profile-header__name {
    font-size: 20px;
  }

  .lb-profile-header__avatarWrap {
    width: 56px;
    height: 56px;
  }

  /* Saved + Replies (V13) 320px worst case — same step-down policy as the
     header above: only padding, avatar size, and type size move. */
  .lb-profile-tabs__tab {
    font-size: 12.5px;
  }

  .lb-view-byte-item,
  .lb-profile-replyCard {
    padding: 10px;
    gap: 7px;
  }

  .lb-view-byte-item__avatar,
  .lb-profile-replyCard__avatar {
    width: 28px;
    height: 28px;
  }

  .lb-view-byte-item__type {
    font-size: 9px;
  }

  .lb-view-byte-item__meta,
  .lb-profile-replyCard__meta {
    font-size: 12px;
  }

  .lb-author-snapshot {
    font-size: 11.5px;
  }

  .lb-view-byte-item__text,
  .lb-profile-replyCard__text {
    font-size: 14px;
  }

  .lb-view-byte-item__context {
    padding: 9px;
  }

  .lb-view-byte-item__context-label {
    font-size: 11.5px;
  }

  .lb-view-byte-item__context-preview {
    font-size: 12.5px;
  }

  .lb-profile-replyCard__context {
    padding: 9px 9px 9px 11px;
    gap: 5px;
  }

  .lb-profile-replyCard__contextLine {
    font-size: 9px;
  }

  .lb-profile-replyCard__contextPreview {
    font-size: 12.5px;
  }

  .lb-profile-replyCard__contextThumb {
    width: 40px;
    height: 40px;
  }
}

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

.lb-mini-toast {
  position: fixed;
  left: 50%;
  /* Raised from 16px so the toast lands within the eye's natural resting
     point after closing a modal/card action, instead of at the screen edge. */
  bottom: calc(88px + env(safe-area-inset-bottom));
  transform: translate(-50%, 8px);
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 211, 0.3);
  background: rgba(9, 14, 24, 0.9);
  color: rgba(173, 255, 247, 0.96);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.lb-mini-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.lb-compose__icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  color: currentColor;
}

.lb-compose__icon--image {
  background:
    linear-gradient(currentColor, currentColor) 2px 15px / 14px 2px no-repeat,
    radial-gradient(circle at 6px 6px, currentColor 0 2px, transparent 2.5px),
    linear-gradient(145deg, transparent 45%, currentColor 46% 54%, transparent 55%) 2px 8px / 14px 8px no-repeat;
  border: 1.6px solid currentColor;
  border-radius: 4px;
}

.lb-compose__icon--emoji {
  border: 1.6px solid currentColor;
  border-radius: 999px;
  box-shadow: inset 0 -6px 0 -5px currentColor;
  position: relative;
}

.lb-compose__icon--emoji::before,
.lb-compose__icon--emoji::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 2px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.lb-compose__icon--emoji::before { left: 5px; }
.lb-compose__icon--emoji::after { right: 5px; }

.lb-compose__icon--tag {
  width: 17px;
  height: 13px;
  border: 1.6px solid currentColor;
  border-radius: 3px;
  transform: rotate(-12deg);
  position: relative;
}

.lb-compose__icon--tag::before {
  content: "";
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 999px;
  background: currentColor;
  left: 2px;
  top: 4px;
}

.lb-notifications {
  position: fixed;
  inset: 0;
  z-index: 46;
}

.lb-tip-modal {
  position: fixed;
  inset: 0;
  z-index: 47;
}

.lb-tip-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.62);
  backdrop-filter: blur(4px);
}

.lb-tip-modal__sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 430px);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(rgba(14, 18, 31, 0.96), rgba(14, 18, 31, 0.96)) padding-box,
    linear-gradient(112deg, rgba(255, 79, 191, 0.3), rgba(79, 102, 255, 0.28) 56%, rgba(0, 224, 211, 0.24)) border-box;
  box-shadow: 0 18px 40px rgba(5, 8, 16, 0.58);
  padding: 14px;
  display: grid;
  gap: 10px;
}

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

.lb-tip-modal__title {
  margin: 0;
  color: rgba(247, 244, 255, 0.96);
  font: 700 18px/1.2 var(--font-display);
}

.lb-tip-modal__close {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 27, 0.84);
  color: rgba(247, 244, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.lb-tip-modal__copy,
.lb-tip-modal__note {
  margin: 0;
  color: rgba(227, 233, 252, 0.78);
  font-size: 13px;
  line-height: 1.45;
}

.lb-tip-modal__note {
  font-size: 12px;
  color: rgba(227, 233, 252, 0.66);
}

.lb-tip-modal__sub {
  margin: 0;
  color: rgba(227, 233, 252, 0.72);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}

.lb-tip-modal__empty {
  display: grid;
  gap: 4px;
}

.lb-tip-modal__emptyTitle {
  margin: 0;
  color: rgba(227, 233, 252, 0.88);
  font-size: 13px;
  font-weight: 600;
}

.lb-tip-modal__emptyCopy {
  margin: 0;
  color: rgba(227, 233, 252, 0.6);
  font-size: 12px;
  line-height: 1.45;
}

.lb-tip-modal__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.lb-tip-modal__option {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(rgba(9, 13, 22, 0.94), rgba(9, 13, 22, 0.94)) padding-box,
    linear-gradient(105deg, #ff4fbf, #cf57e8, #4f66ff, #00e0d3) border-box;
  color: #fff;
  font: 700 14px/1 var(--font-ui);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 5px 0 rgba(255, 79, 191, 0.32),
    0 0 18px rgba(207, 87, 232, 0.22),
    0 0 12px rgba(79, 102, 255, 0.16);
  transition: box-shadow .16s ease, transform .12s ease;
}

.lb-tip-modal__option:disabled {
  cursor: not-allowed;
  opacity: .5;
  filter: grayscale(.4);
  box-shadow: none;
  transform: none;
}

.lb-tip-modal__option:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 7px 0 rgba(255, 79, 191, 0.4),
    0 0 26px rgba(207, 87, 232, 0.3),
    0 0 18px rgba(79, 102, 255, 0.22);
}

.lb-notifications__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.62);
  backdrop-filter: blur(4px);
}

.lb-notifications__sheet {
  position: absolute;
  right: clamp(12px, 4vw, 24px);
  top: clamp(66px, 11vh, 92px);
  width: min(92vw, 360px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(rgba(14, 18, 31, 0.96), rgba(14, 18, 31, 0.96)) padding-box,
    linear-gradient(112deg, rgba(255, 79, 191, 0.3), rgba(79, 102, 255, 0.28) 56%, rgba(0, 224, 211, 0.24)) border-box;
  box-shadow: 0 18px 40px rgba(5, 8, 16, 0.58);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.lb-notifications__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lb-notifications__head h3 {
  margin: 0;
  color: rgba(247, 244, 255, 0.96);
  font: 700 16px/1.2 var(--font-display);
}

.lb-notifications__head button {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 27, 0.84);
  color: rgba(247, 244, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.lb-notifications__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.lb-notifications__list li {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(10, 14, 24, 0.68);
  padding: 10px;
  color: rgba(247, 244, 255, 0.86);
  font-size: 13px;
  line-height: 1.45;
}

.lb-notifications__list li.lb-notif-item--unread {
  color: rgba(247, 244, 255, 0.97);
  font-weight: 500;
  border-color: transparent;
  background:
    linear-gradient(rgba(14, 18, 31, 0.88), rgba(14, 18, 31, 0.88)) padding-box,
    linear-gradient(135deg, rgba(255, 79, 191, 0.5), rgba(79, 102, 255, 0.45)) border-box;
  box-shadow: 0 0 12px rgba(255, 79, 191, 0.07);
}

.lb-notifications__crush {
  border: 1px solid rgba(255, 79, 191, 0.3);
  border-radius: 12px;
  background: rgba(255, 79, 191, 0.08);
  padding: 12px;
  color: rgba(247, 244, 255, 0.92);
  font-size: 13px;
  line-height: 1.45;
  transition: opacity 0.3s;
}

.lb-notifications__crush--handled {
  opacity: 0.45;
}

.lb-notifications__crushActions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.lb-notifications__crushBtn {
  flex: 1;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  line-height: 1;
}

.lb-notifications__crushBtn--accept {
  background: #ff4fbf;
  color: #fff;
}

.lb-notifications__crushBtn--decline {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(247, 244, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lb-notifications__crushAssurance {
  margin-top: 6px;
  font-size: 11px;
  color: rgba(247, 244, 255, 0.4);
}

.lb-signal {
  position: fixed;
  inset: 0;
  z-index: 45;
}

.lb-signal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.62);
  backdrop-filter: blur(4px);
}

.lb-signal__sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 580px);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(rgba(15, 19, 32, 0.96), rgba(15, 19, 32, 0.96)) padding-box,
    linear-gradient(112deg, rgba(255, 79, 191, 0.34), rgba(79, 102, 255, 0.3) 55%, rgba(0, 224, 211, 0.26)) border-box;
  box-shadow: 0 18px 42px rgba(5, 8, 16, 0.58), 0 0 18px rgba(79, 102, 255, 0.12), 0 0 14px rgba(255, 79, 191, 0.1);
  padding: 18px;
  display: grid;
  gap: 12px;
  max-height: min(88vh, 760px);
  overflow: auto;
}

.lb-signal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 2px;
}

.lb-signal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  letter-spacing: -0.01em;
  color: rgba(247, 244, 255, 0.98);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lb-signal__titleBadge {
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 211, 0.36);
  color: rgba(173, 255, 247, 0.96);
  background: rgba(0, 224, 211, 0.08);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.lb-signal__cancelTop {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 16, 27, 0.84);
  color: rgba(247, 244, 255, 0.9);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lb-signal__intro {
  display: grid;
  gap: 10px;
  max-width: 52ch;
}

.lb-signal__copy {
  margin: 0;
  color: rgba(247, 244, 255, 0.84);
  font-size: 14px;
  line-height: 1.6;
}

.lb-signal__example {
  margin: 0;
  color: rgba(247, 244, 255, 0.64);
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(10, 14, 24, 0.64);
  padding: 10px 11px;
}

.lb-signal__field textarea {
  width: 100%;
  min-height: 124px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(11, 16, 27, 0.86);
  color: rgba(247, 244, 255, 0.95);
  font: 500 16px/1.5 var(--font-ui);
  padding: 13px;
  resize: vertical;
}

.lb-signal__field textarea::placeholder {
  color: rgba(247, 244, 255, 0.54);
}

.lb-signal__field textarea:focus-visible,
.lb-signal__send:focus-visible,
.lb-signal__cancel:focus-visible,
.lb-signal__cancelTop:focus-visible,
.lb-signal__toolBtn:focus-visible,
.lb-tip-modal__option:focus-visible,
.lb-tip-modal__close:focus-visible,
.lb-notifications__head button:focus-visible,
.lb-menu__close:focus-visible,
.lb-menu__item:focus-visible,
.lb-menu__subitem:focus-visible,
.lb-menu-screen__back:focus-visible,
.lb-menu-linkBtn:focus-visible,
.lb-menu-btn:focus-visible,
.lb-menu-field input:focus-visible,
.lb-menu-field select:focus-visible,
.lb-menu-field textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.24), 0 0 0 4px rgba(0, 224, 211, 0.1);
}

.lb-signal__field textarea:focus-visible {
  border-color: rgba(255, 79, 191, 0.58);
}

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

/* ── Crush Confirmation Modal ───────────────────────────────────────────── */
.lb-crush-modal {
  position: fixed;
  inset: 0;
  z-index: 48;
}

.lb-crush-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, 0.68);
  backdrop-filter: blur(4px);
}

.lb-crush-modal__sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 420px);
  border-radius: 18px;
  border: 1px solid rgba(255, 79, 191, 0.28);
  background:
    linear-gradient(rgba(14, 18, 31, 0.97), rgba(14, 18, 31, 0.97)) padding-box,
    linear-gradient(112deg, rgba(255, 79, 191, 0.4), rgba(79, 102, 255, 0.3) 56%, rgba(0, 224, 211, 0.24)) border-box;
  box-shadow: 0 20px 48px rgba(5, 8, 16, 0.65);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.lb-crush-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.lb-crush-modal__title {
  margin: 0;
  color: rgba(247, 244, 255, 0.96);
  font: 700 18px/1.2 var(--font-display, sans-serif);
}

.lb-crush-modal__close {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 27, 0.84);
  color: rgba(247, 244, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lb-crush-modal__close:hover {
  background: rgba(255, 79, 191, 0.14);
}

.lb-crush-modal__card {
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.lb-crush-modal__card--slim {
  height: auto;
  overflow: visible;
}

.lb-crush-modal__frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Crush-review Dating Card body (public-profile.js renderCrushReviewContent).
   Scoped with :has() so the existing 420px/hidden-overflow sizing above is
   completely untouched for the modal's other states (blocked, eligible-info
   dynamic content) -- only widen/scroll when the actual card is mounted.
   Same lb-crush-card-modal__* structure/values as Feed's own Crush review
   (feed page/index.html), ported here as its own copy, not a shared file. */
/* Root cause of the scroll cutoff: the base sheet above has no height
   budget of its own (display:grid with implicit auto/auto/auto rows,
   centered via position:absolute + transform with nothing capping total
   height). The head+foot are fixed-size, but the card region's own
   max-height was capped independently of them, so head+card+foot could
   together exceed the viewport with no way to reach the footer. Feed never
   has this problem because its actions live INSIDE the same single
   scrollable region, not in a separate sibling footer.
   Fix: give the sheet itself a viewport-relative height ceiling, and let
   the card be the one grid row (1fr) that absorbs/scrolls whatever content
   doesn't fit -- head and foot are never part of that scrolling budget, so
   they can never be pushed off-screen. */
.lb-crush-modal__sheet:has([data-crush-modal-review]) {
  width: min(92vw, 680px);
  max-height: min(90dvh, 820px);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lb-crush-modal__card:has([data-crush-modal-review]) {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* Confirm/cooldown step: the review Dating Card is gone by this point (see
   showCrushEligibleInfo/showCrushModalContent, which remove
   [data-crush-modal-review] before injecting [data-crush-modal-dynamic]),
   so the card must also drop the base 420px height here -- otherwise the
   short confirm content leaves a large empty gap above the footer buttons. */
.lb-crush-modal__card:has([data-crush-modal-dynamic]) {
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.lb-crush-card-modal__card {
  display: grid;
  grid-template-columns: minmax(260px, 0.92fr) minmax(280px, 1.08fr);
  align-items: start;
  border: 1px solid rgba(0, 224, 211, 0.24);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(12, 18, 34, 0.96), rgba(12, 16, 29, 0.9));
  overflow: hidden;
}

.lb-crush-card-modal__media {
  min-height: 460px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 117, 214, 0.2), transparent 34%),
    radial-gradient(circle at 70% 75%, rgba(0, 224, 211, 0.16), transparent 36%),
    rgba(8, 12, 24, 0.92);
}

.lb-crush-card-modal__carousel {
  position: relative;
  min-height: 380px;
  flex: 1;
  overflow: hidden;
}

.lb-crush-card-modal__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.lb-crush-card-modal__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lb-crush-card-modal__photo {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.lb-crush-card-modal__photoPlaceholder {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 3.2rem;
}

.lb-crush-card-modal__carouselControls {
  min-height: 66px;
  padding: 10px 16px 14px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lb-crush-card-modal__arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  font-size: 1.3rem;
}

.lb-crush-card-modal__carouselMeta {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(235, 231, 249, 0.64);
  font-size: 0.82rem;
  font-weight: 700;
}

.lb-crush-card-modal__dots {
  display: flex;
  gap: 6px;
}

.lb-crush-card-modal__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.24);
  padding: 0;
  cursor: pointer;
}

.lb-crush-card-modal__dot.is-active {
  background: linear-gradient(135deg, #ff79d7, #4f7cff);
  box-shadow: 0 0 12px rgba(112, 130, 255, 0.72);
}

.lb-crush-card-modal__details {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb-crush-card-modal__identity h4 {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.05;
}

.lb-crush-card-modal__identity p {
  margin: 6px 0 0;
  color: rgba(180, 190, 220, 0.78);
  font-size: 0.9rem;
}

.lb-crush-card-modal__scroller {
  position: relative;
  display: grid;
  gap: 8px;
}

.lb-crush-card-modal__chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 0 6px;
}

.lb-crush-card-modal__chips::-webkit-scrollbar { display: none; }

.lb-crush-card-modal__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border: 1px solid rgba(0, 224, 211, 0.24);
  border-radius: 999px;
  padding: 7px 10px;
  color: rgba(246, 243, 255, 0.92);
  background: rgba(6, 12, 24, 0.62);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.lb-crush-card-modal__scrollerHint {
  margin: 0;
  color: rgba(247, 244, 255, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
}

.lb-crush-card-modal__scrollerHintArrow {
  color: #FF8AD4;
}

.lb-crush-card-modal__scrollerIndicator {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}

.lb-crush-card-modal__scrollerThumb {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  /* Same brand gradient as the canonical card's own scroller thumb
     (dating-card-v2.css .lb-dcv2-scroller__indicatorThumb), itself matched
     to Feed's .lb-week-tabs__indicatorThumb (2026-08-31 final tidy-up). */
  background: linear-gradient(105deg, rgba(255, 79, 191, 0.84), rgba(207, 87, 232, 0.84) 40%, rgba(79, 102, 255, 0.84) 70%, rgba(0, 224, 211, 0.84));
  box-shadow: 0 0 8px rgba(79, 102, 255, 0.24), 0 0 6px rgba(255, 79, 191, 0.2);
}

.lb-crush-card-modal__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.lb-crush-card-modal__stat {
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(246, 243, 255, 0.88);
  font-size: 0.88rem;
  font-weight: 700;
}

.lb-crush-card-modal__statIcon {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
}

.lb-crush-card-modal__prompts {
  display: grid;
  gap: 10px;
}

.lb-crush-card-modal__prompt {
  border: 1px solid rgba(255, 117, 214, 0.18);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.lb-crush-card-modal__promptLabel {
  margin: 0 0 5px;
  color: rgba(214, 208, 255, 0.86);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lb-crush-card-modal__promptAnswer {
  margin: 0;
  color: rgba(246, 243, 255, 0.9);
  line-height: 1.45;
}

.lb-crush-card-modal__lightbox {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(3, 5, 12, 0.9);
}

.lb-crush-card-modal__lightbox[hidden] { display: none !important; }

.lb-crush-card-modal__lightboxImg {
  max-width: min(94vw, 960px);
  max-height: 88vh;
  border-radius: 18px;
  object-fit: contain;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.74);
}

.lb-crush-card-modal__lightboxClose {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(10, 14, 24, 0.9);
  color: white;
  cursor: pointer;
}

@media (max-width: 760px) {
  .lb-crush-card-modal__card { grid-template-columns: 1fr; }
  .lb-crush-card-modal__media,
  .lb-crush-card-modal__carousel,
  .lb-crush-card-modal__photo,
  .lb-crush-card-modal__photoPlaceholder { min-height: 300px; }
  .lb-crush-card-modal__details { padding: 18px; }
}

.lb-crush-modal__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Send Crush / Not yet are styled purely by the shared .lb-crush-btn /
   --primary / --secondary classes (feed.css) now — literally the same
   base class as Accept and the Match-modal CTA, not a same-looking
   lookalike. .lb-crush-modal__confirm/__notyet remain on the markup only
   as layout/identity hooks; width/max-width here just fits them to this
   modal's footer. */
.lb-crush-modal__confirm,
.lb-crush-modal__notyet {
  width: 100%;
  max-width: 360px;
}

.lb-crush-modal__notyet[hidden] { display: none !important; }

.lb-crush-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 224, 211, 0.24), 0 0 0 4px rgba(0, 224, 211, 0.1);
}

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

.lb-signal__toolBtn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(13, 18, 31, 0.86);
  color: rgba(247, 244, 255, 0.78);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lb-signal__toolBtn:hover {
  border-color: rgba(0, 224, 211, 0.42);
}

.lb-signal__toolBtn.is-active {
  border-color: rgba(255, 79, 191, 0.48);
  color: rgba(255, 224, 244, 0.98);
}

.lb-signal__metaCount {
  margin: 0;
  color: rgba(247, 244, 255, 0.58);
  font-size: 12px;
  letter-spacing: 0.02em;
}

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

.lb-signal__toolHint {
  margin: 0;
  color: rgba(247, 244, 255, 0.54);
  font-size: 12px;
}

.lb-signal__error {
  margin: 0;
  color: rgba(255, 178, 230, 0.92);
  font-size: 12px;
  min-height: 16px;
}

.lb-signal__preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

.lb-signal__thumbWrap {
  position: relative;
}

.lb-signal__thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.lb-signal__thumbRemove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 12, 20, 0.84);
  color: rgba(247, 244, 255, 0.94);
  cursor: pointer;
}

.lb-signal__labelChip {
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 211, 0.28);
  background: rgba(0, 224, 211, 0.09);
  color: rgba(173, 255, 247, 0.95);
  font-size: 12px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lb-signal__removeLabel {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

.lb-signal__metaBlock {
  display: grid;
  gap: 8px;
}

.lb-signal__meta,
.lb-signal__time {
  margin: 0;
  color: rgba(247, 244, 255, 0.66);
  font-size: 12px;
}

.lb-signal__expiry {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 79, 191, 0.28);
  background: rgba(255, 79, 191, 0.08);
  color: rgba(255, 178, 230, 0.94);
  font-size: 12px;
}

.lb-signal__expiryMoon {
  color: #00e0d3;
  font-size: 11px;
}

.lb-signal__time {
  color: rgba(173, 255, 247, 0.82);
}

.lb-signal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.lb-signal__send,
.lb-signal__cancel {
  min-height: 42px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.lb-signal__send {
  min-width: 136px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(18, 22, 34, 0.84);
  color: rgba(247, 244, 255, 0.76);
  cursor: not-allowed;
  opacity: 0.88;
}

.lb-signal__send:not(:disabled) {
  cursor: pointer;
  color: #fff;
  border-color: transparent;
  background: linear-gradient(105deg, #ff4fbf 0%, #d95ce0 42%, #4f66ff 100%);
  box-shadow: 0 8px 20px rgba(255, 79, 191, 0.24), 0 8px 20px rgba(79, 102, 255, 0.22);
}

.lb-signal__cancel {
  min-width: 96px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 16, 27, 0.8);
  color: rgba(247, 244, 255, 0.9);
}

.lb-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
}

.lb-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 15, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.lb-menu__drawer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(88vw, 420px);
  border-right: 1px solid transparent;
  background:
    linear-gradient(rgba(14, 18, 30, 0.96), rgba(14, 18, 30, 0.96)) padding-box,
    linear-gradient(132deg, rgba(255, 79, 191, 0.32), rgba(79, 102, 255, 0.28) 58%, rgba(0, 224, 211, 0.28)) border-box;
  box-shadow: 10px 0 28px rgba(5, 8, 16, 0.56), 0 0 18px rgba(79, 102, 255, 0.16), 0 0 14px rgba(255, 79, 191, 0.12);
  transform: translateX(-102%);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  border-radius: 0 20px 20px 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 14px 12px;
}

.lb-menu.is-open .lb-menu__backdrop {
  opacity: 1;
}

.lb-menu.is-open .lb-menu__drawer {
  transform: translateX(0);
}

.lb-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 4px 10px;
}

.lb-menu__brand {
  display: grid;
  gap: 4px;
}

.lb-menu__brand img {
  height: 20px;
  width: auto;
  display: block;
}

.lb-menu__brand p {
  margin: 0;
  color: rgba(247, 244, 255, 0.6);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lb-menu__close {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 27, 0.84);
  color: rgba(247, 244, 255, 0.9);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lb-menu__list {
  display: grid;
  gap: 8px;
  align-content: start;
}

.lb-menu__section {
  display: grid;
  gap: 8px;
}

.lb-menu__item {
  min-height: 48px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 16, 27, 0.78);
  color: rgba(247, 244, 255, 0.92);
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  transform: translateX(-8px);
}

.lb-menu__item:hover,
.lb-menu__close:hover {
  transform: translateX(2px);
  border-color: rgba(0, 224, 211, 0.44);
  box-shadow: 0 0 10px rgba(0, 224, 211, 0.16), 0 0 8px rgba(79, 102, 255, 0.14);
}

.lb-menu__itemLabel {
  font-size: 14px;
  line-height: 1.25;
}

.lb-menu__item--toggle[aria-expanded="true"] {
  border-color: rgba(255, 79, 191, 0.38);
  background:
    linear-gradient(rgba(13, 18, 30, 0.88), rgba(13, 18, 30, 0.88)) padding-box,
    linear-gradient(120deg, rgba(255, 79, 191, 0.42), rgba(79, 102, 255, 0.38)) border-box;
  box-shadow: 0 0 0 1px rgba(255, 79, 191, 0.12), 0 0 14px rgba(79, 102, 255, 0.16);
}

.lb-menu__chevron {
  color: rgba(247, 244, 255, 0.5);
  font-size: 18px;
  margin-left: 4px;
  transition: transform 0.18s ease;
}

.lb-menu__item--toggle[aria-expanded="true"] .lb-menu__chevron {
  transform: rotate(90deg);
}

.lb-menu__itemIcon {
  width: 18px;
  height: 18px;
  display: inline-block;
  color: #00e0d3;
}

.lb-menu__itemIcon--settings {
  border: 1.6px solid currentColor;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(12, 16, 27, 0.8);
}

.lb-menu__itemIcon--help {
  border: 1.6px solid currentColor;
  border-radius: 999px;
  position: relative;
}

.lb-menu__itemIcon--help::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.lb-menu__itemIcon--rules {
  border: 1.6px solid currentColor;
  border-radius: 4px;
  position: relative;
}

.lb-menu__itemIcon--rules::before,
.lb-menu__itemIcon--rules::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  height: 1.6px;
  background: currentColor;
}

.lb-menu__itemIcon--rules::before { top: 5px; }
.lb-menu__itemIcon--rules::after { top: 10px; }

.lb-menu__itemIcon--logout {
  border: 1.6px solid currentColor;
  border-radius: 4px;
  position: relative;
}

.lb-menu__itemIcon--logout::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 1.8px;
  background: currentColor;
  right: -4px;
  top: 7px;
}

.lb-menu__itemIcon--logout::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  transform: rotate(45deg);
  right: -4px;
  top: 6px;
}

.lb-menu__foot {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 12px;
  padding-top: 12px;
  opacity: 0;
  transform: translateX(-8px);
}

.lb-menu__item--logout,
.lb-menu__item--logout .lb-menu__itemIcon {
  color: rgba(255, 178, 230, 0.96);
}

.lb-menu__submenu {
  padding-left: 8px;
  margin-top: -2px;
  display: grid;
  gap: 6px;
}

.lb-menu__subitem {
  min-height: 40px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(10, 14, 24, 0.64);
  color: rgba(247, 244, 255, 0.84);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  padding: 0 12px 0 16px;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.lb-menu__subitem::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgba(0, 224, 211, 0.82);
}

.lb-menu__subitem:hover {
  transform: translateX(2px);
  border-color: rgba(0, 224, 211, 0.32);
}

.lb-menu__drawer.is-subscreen .lb-menu__list,
.lb-menu__drawer.is-subscreen .lb-menu__foot {
  display: none;
}

.lb-menu-screen {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.lb-menu-screen__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 12px;
}

.lb-menu-screen__back {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(12, 16, 27, 0.84);
  color: rgba(247, 244, 255, 0.9);
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.lb-menu-screen__title {
  margin: 0;
  color: rgba(247, 244, 255, 0.98);
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.01em;
}

.lb-menu-screen__body {
  overflow: auto;
  padding-right: 2px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.lb-menu-view {
  display: grid;
  gap: 12px;
}

.lb-menu-form {
  display: grid;
  gap: 10px;
}

.lb-menu-group,
.lb-menu-card,
.lb-menu-empty {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(12, 16, 27, 0.72);
  padding: 12px;
}

.lb-menu-group {
  display: grid;
  gap: 10px;
}

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

.lb-menu-group__title,
.lb-menu-card__label {
  margin: 0;
  color: rgba(247, 244, 255, 0.95);
}

.lb-menu-group__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.lb-menu-group__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 224, 211, 0.32);
  color: rgba(173, 255, 247, 0.92);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(0, 224, 211, 0.08);
}

.lb-menu-card--toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.lb-menu-card__copy,
.lb-menu-hint,
.lb-menu-empty p {
  margin: 0;
  color: rgba(247, 244, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.lb-menu-empty h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: rgba(247, 244, 255, 0.95);
}

.lb-menu-field {
  display: grid;
  gap: 6px;
}

.lb-menu-field__titleRow {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.lb-menu-lockPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 178, 230, 0.32);
  color: rgba(255, 178, 230, 0.9);
  background: rgba(255, 79, 191, 0.08);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lb-menu-field > span {
  color: rgba(247, 244, 255, 0.82);
  font-size: 12px;
  letter-spacing: 0.03em;
}

.lb-menu-lockedInputWrap {
  position: relative;
}

.lb-menu-lockIcon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
}

.lb-menu-field input,
.lb-menu-field select,
.lb-menu-field textarea {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 14, 24, 0.82);
  color: rgba(247, 244, 255, 0.95);
  font: 500 16px/1.4 var(--font-ui);
  padding: 10px 12px;
}

.lb-menu-field textarea {
  min-height: 84px;
  resize: vertical;
}

.lb-menu-field--locked input[readonly] {
  background: rgba(18, 22, 34, 0.88);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(247, 244, 255, 0.86);
  padding-right: 32px;
}

.lb-menu-linkBtn {
  justify-self: start;
  border: 0;
  background: transparent;
  color: rgba(0, 224, 211, 0.92);
  font-size: 13px;
  padding: 2px 0;
  cursor: pointer;
}

.lb-menu-switch {
  position: relative;
  width: 46px;
  height: 28px;
  display: inline-block;
}

.lb-menu-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.lb-menu-switch__ui {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(8, 12, 21, 0.84);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lb-menu-switch__ui::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  top: 3px;
  left: 3px;
  background: rgba(247, 244, 255, 0.9);
  transition: transform 0.2s ease;
}

.lb-menu-switch input:checked + .lb-menu-switch__ui {
  border-color: rgba(255, 79, 191, 0.44);
  background: linear-gradient(115deg, rgba(255, 79, 191, 0.48), rgba(79, 102, 255, 0.5));
}

.lb-menu-switch input:checked + .lb-menu-switch__ui::after {
  transform: translateX(18px);
}

.lb-menu-btn {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(108deg, #ff4fbf 0%, #be61eb 44%, #4f66ff 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

.lb-menu-note {
  margin: 0;
  color: rgba(173, 255, 247, 0.84);
  font-size: 12px;
  min-height: 14px;
}

.lb-menu.is-open .lb-menu__item,
.lb-menu.is-open .lb-menu__foot {
  animation: lbMenuItemIn 0.28s ease forwards;
}

.lb-menu.is-open .lb-menu__item:nth-child(1) {
  animation-delay: 0.06s;
}

.lb-menu.is-open .lb-menu__item:nth-child(2) {
  animation-delay: 0.1s;
}

.lb-menu.is-open .lb-menu__item:nth-child(3) {
  animation-delay: 0.14s;
}

.lb-menu.is-open .lb-menu__foot {
  animation-delay: 0.18s;
}

@keyframes lbMenuItemIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ── Match modal ── */
.lb-match-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 7, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lb-match-modal[hidden] {
  display: none;
}

.lb-match-modal__card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: #0b0b0f;
  border: 1px solid rgba(255, 79, 191, 0.22);
  border-radius: 20px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 0 60px rgba(255, 79, 191, 0.15), 0 24px 48px rgba(0, 0, 0, 0.6);
  animation: lb-match-modal-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lb-match-modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.lb-match-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: rgba(247, 244, 255, 0.7);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.lb-match-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.lb-match-modal__avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.lb-match-modal__avatarCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.lb-match-modal__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
}

.lb-match-modal__avatarName {
  font-size: 11px;
  font-weight: 600;
  color: rgba(247, 244, 255, 0.6);
  letter-spacing: 0.02em;
}

.lb-match-modal__heart {
  width: 54px;
  height: 54px;
  background: linear-gradient(135deg, #FF4FBF, #4F66FF);
  flex-shrink: 0;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>') no-repeat center / contain;
  animation: lb-heart-pulse 2s ease-in-out infinite;
}

@keyframes lb-heart-pulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 10px rgba(255, 79, 191, 0.4)); }
  50%       { transform: scale(1.1); filter: drop-shadow(0 0 24px rgba(79, 102, 255, 0.8)); }
}

.lb-match-modal__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff4fbf;
  margin: 0 0 10px;
}

.lb-match-modal__title {
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-family: 'Bricolage Grotesque', 'Space Grotesk', serif;
}

.lb-match-modal__body {
  color: #a0a0a5;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.lb-match-modal__body:last-of-type {
  margin-bottom: 20px;
}

.lb-match-modal__cta {
  width: 100%;
  background: transparent;
  color: #fff;
  border: 2px solid #FF4FBF;
  border-radius: 999px;
  padding: 13px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms ease, filter 140ms ease;
}

.lb-match-modal__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.lb-match-modal__cta:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* ── Match notification ── */
.lb-notifications__match {
  border: 1px solid rgba(255, 79, 191, 0.22);
  border-radius: 12px;
  background: rgba(255, 79, 191, 0.06);
  padding: 12px;
  color: rgba(247, 244, 255, 0.92);
  font-size: 13px;
  line-height: 1.45;
}

.lb-notifications__matchCopy {
  margin: 0 0 8px;
}

.lb-notifications__matchCtaBtn {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(255, 79, 191, 0.5);
  border-radius: 999px;
  color: #FF4FBF;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.lb-notifications__matchCtaBtn:hover {
  background: rgba(255, 79, 191, 0.1);
  border-color: #FF4FBF;
}

.lb-post-card__body {
  white-space: pre-wrap;
}

/* ── Seeded thread comments on profile posts ── */
.lb-thread-comments {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.lb-thread-comments[hidden] { display: none; }

.lb-thread-comments__title {
  margin: 0;
  color: rgba(247,244,255,.98);
  font: 700 16px/1.2 var(--font-display, sans-serif);
}

.lb-thread-comments__list {
  display: grid;
  gap: 10px;
}

.lb-profile-seededComments {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.lb-thread-comment {
  --lb-thread-avatar-size: 36px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(11,16,27,.84);
  padding: 10px;
  display: grid;
  gap: 9px;
  position: relative;
}

.lb-thread-comment--standout {
  border-color: rgba(255,79,191,.44);
  box-shadow: 0 0 12px rgba(255,79,191,.12);
}

.lb-thread-comment__row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px;
  align-items: start;
}

/* Comment/reply avatar ring normalized (2026-08-31) to the one canonical
   Loverbyte ring — .lb-post-card__avatar::before's masked gradient, no teal
   — per the avatar-ring dependency contract. Previously a flat teal
   box-shadow, independently drifted at a different opacity than feed.css's
   own copy of this same rule; both now converge on the identical
   technique/values. */
.lb-thread-comment__avatar {
  position: relative;
  width: var(--lb-thread-avatar-size);
  height: var(--lb-thread-avatar-size);
  border-radius: 999px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 50% 30%, rgba(247,244,255,.9) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 78%, rgba(247,244,255,.9) 0 30%, transparent 31%),
    linear-gradient(140deg, rgba(255,79,191,.58), rgba(79,102,255,.58));
  background-size: cover;
  background-position: center;
}

.lb-thread-comment__avatar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(132deg, #FF4FBF, #B46DFF 52%, #4F66FF);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.lb-thread-comment__meta {
  margin: 0;
  color: rgba(247,244,255,.78);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lb-thread-comment__user {
  color: rgba(247,244,255,.96);
  font-weight: 700;
}

.lb-thread-comment__dot { color: rgba(247,244,255,.42); }
.lb-thread-comment__time { color: rgba(247,244,255,.6); }

.lb-thread-comment__text {
  margin: 4px 0 0;
  /* User-authored content copy is canonical primary white everywhere
     (2026-08-31) -- same #FFFFFF as .lb-post-card__body, the known-good
     reference. */
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lb-author-snapshot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 5px;
  margin-top: 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(247, 244, 255, 0.72);
  letter-spacing: 0.01em;
}

.lb-author-snapshot__chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
  white-space: nowrap;
  color: inherit;
}

.lb-author-snapshot__chip--open,
.lb-author-snapshot__chip--closed {
  font-weight: 600;
  color: #F7F4FF;
}

.lb-author-snapshot__chip--meta {
  font-weight: 400;
  color: rgba(247, 244, 255, 0.72);
}

.lb-author-snapshot__chip--meta::before {
  content: "·";
  margin-right: 5px;
  font-weight: 700;
  color: rgba(247, 244, 255, 0.28);
}

.lb-author-snapshot__chip--meta:nth-of-type(3)::before { color: #FF4FBF; }
.lb-author-snapshot__chip--meta:nth-of-type(4)::before { color: #CF57E8; }
.lb-author-snapshot__chip--meta:nth-of-type(5)::before { color: #4F66FF; }

@keyframes lb-crush-highlight-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,79,191,0), inset 0 0 0 0 rgba(255,79,191,0); background-color: transparent; }
  15%  { box-shadow: 0 0 0 3px rgba(255,79,191,.55), inset 0 0 12px rgba(255,79,191,.12); background-color: rgba(255,79,191,.07); }
  65%  { box-shadow: 0 0 0 3px rgba(255,79,191,.55), inset 0 0 12px rgba(255,79,191,.12); background-color: rgba(255,79,191,.07); }
  100% { box-shadow: 0 0 0 0 rgba(255,79,191,0), inset 0 0 0 0 rgba(255,79,191,0); background-color: transparent; }
}
.lb-crush-source-highlight {
  animation: lb-crush-highlight-pulse 8s ease-out forwards;
  border-radius: 12px;
  transition: background-color 0.3s ease;
}

/* ── Private Room notification mark ──────────────────────────────────────
   48px canonical envelope-heart. The tile is contrast only: it gives the
   white envelope an edge against the dark drawer without turning the
   transparent artwork into a coloured badge. */
.lb-feed-notif__roomIcon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.lb-feed-notif__roomIcon img {
  display: block;
  width: 48px;
  height: 31px;
  object-fit: contain;
}

/* Profile Header avatar full-screen photo viewer (2026-08-30) — the one
   canonical profile-photo viewer, shared verbatim by profile.js and
   public-profile.js. Deliberately distinct from .lb-sticker-modal (a
   small centered card, used elsewhere for reaction stickers): this is a
   full-viewport takeover with a blurred/darkened copy of the same photo
   behind a sharp, non-cropped foreground image. */
.lb-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb-photo-viewer__backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(28px);
  transform: scale(1.08);
  opacity: 0.35;
}

.lb-photo-viewer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.88);
}

.lb-photo-viewer__img {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 900px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 8px;
}

.lb-photo-viewer__close {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  left: calc(16px + env(safe-area-inset-left));
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10, 11, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(247, 244, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lb-feed-notif__item--room {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.lb-feed-notif__item--room .lb-feed-notif__body {
  flex: 1 1 0;
  min-width: 0;
}

/* CENTER mark for the Private Room milestone -- replaces the Match heart in
   this modal only, so the composition reads as Private Room. */
.lb-milestone-modal__roomIcon {
  flex: 0 0 auto;
  display: block;
  width: 72px;
  height: 46px;
  align-self: center;
  object-fit: contain;
}