:root {
  --bg: #120a2a;
  --bg-elevated: #1b1139;
  --surface: #221845;
  --surface-soft: #2a1d52;
  --line: rgba(255, 255, 255, .10);
  --ink: #ffffff;
  --muted: #b7a8d4;
  --purple: #8b5cf6;
  --purple-deep: #5b21b6;
  --purple-soft: rgba(139, 92, 246, .18);
  --pink: #ff4fb2;
  --pink-strong: #e0298a;
  --accent: #812DE2;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;
  --shadow: none;
  --shadow-sm: none;
  --radius: 20px;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); color-scheme: dark; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.eyebrow { color: var(--pink); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; }
.lucide-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; stroke: currentColor; fill: none; }
.gpage-cover-art .lucide-icon,
.gpage-cover-lucide { width: 2.6rem; height: 2.6rem; color: #fff; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.gpage-rail-thumb .lucide-icon { width: 1.15rem; height: 1.15rem; color: #d8b4fe; }
.ddash-group-emoji .lucide-icon,
.oboard-group-emoji .lucide-icon,
.mpro-group-emoji .lucide-icon,
.mpro-face-emoji .lucide-icon,
.group-hero-emoji .lucide-icon,
.global-search-emoji .lucide-icon,
.test-card-emoji .lucide-icon,
.personality-emoji .lucide-icon,
.result-emoji .lucide-icon,
.personality-badge-ico .lucide-icon,
.mpro-type-ico .lucide-icon { width: 1.25rem; height: 1.25rem; }
.group-emoji-opt span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; }
.group-emoji-opt .lucide-icon { width: 1.15rem; height: 1.15rem; }
.wall-react-emojis .lucide-icon,
.wall-comment-reacts .lucide-icon,
.reaction-pick .lucide-icon,
.wall-action-btn .lucide-icon { width: .95rem; height: .95rem; }
i.fa-solid, i.fa-regular { line-height: 1; }

.btn { border: 0; border-radius: 999px; padding: .82rem 1.15rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; transition: opacity .15s ease, background-color .15s ease; }
.btn:hover { opacity: .92; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { color: white; background: var(--accent); box-shadow: none; }
.btn-primary:hover { background: #6d28d9; filter: none; opacity: 1; }
.btn-secondary { color: white; background: var(--surface-soft); border: 1px solid var(--line); }
.btn-ghost { color: white; background: transparent; border: 1px solid rgba(255,255,255,.28); }
.btn-danger { color: white; background: #b91c1c; }
.btn-sm { min-height: 36px; padding: .55rem .85rem; font-size: .86rem; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: white; display: grid; place-items: center; }

.field { display: grid; gap: .45rem; }
.field label { font-weight: 750; font-size: .9rem; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: .85rem .95rem; background: var(--bg-elevated); color: var(--ink); outline: none; }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 79, 178, .18); }
.field input::placeholder, .field textarea::placeholder { color: #7d6f99; }

/* Premium animated selects */
.fancy-select {
  position: relative;
  width: 100%;
  z-index: 1;
}
.fancy-select.is-open { z-index: 40; }
.fancy-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background-image: none !important;
}
.fancy-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .85rem .95rem;
  background: var(--bg-elevated);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  outline: none;
  transition:
    border-color .28s cubic-bezier(.22, 1, .36, 1),
    box-shadow .28s cubic-bezier(.22, 1, .36, 1),
    background-color .28s ease,
    transform .28s cubic-bezier(.22, 1, .36, 1);
}
.fancy-select-trigger:hover {
  border-color: color-mix(in srgb, var(--pink) 45%, var(--line));
}
.fancy-select-trigger:focus-visible,
.fancy-select.is-open .fancy-select-trigger {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 79, 178, .18);
}
.fancy-select-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: -.01em;
}
.fancy-select-chevron {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #7d6f99);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), color .28s ease;
}
.fancy-select-chevron i { font-size: .75rem; }
.fancy-select.is-open .fancy-select-chevron {
  transform: rotate(180deg);
  color: var(--pink, #ff4fb2);
}
.fancy-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .4rem);
  max-height: min(280px, 50vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .35rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--bg-elevated, #1a122e);
  box-shadow:
    0 18px 40px rgba(10, 4, 28, .28),
    0 4px 12px rgba(10, 4, 28, .12);
  transform-origin: top center;
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  pointer-events: none;
  transition:
    opacity .26s cubic-bezier(.22, 1, .36, 1),
    transform .32s cubic-bezier(.22, 1, .36, 1),
    box-shadow .32s ease;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.fancy-select-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
body > .fancy-select-menu.fancy-select-menu--ported {
  position: fixed;
  z-index: 10040;
  transform: none;
  max-width: calc(100vw - 20px);
}
body > .fancy-select-menu.fancy-select-menu--ported:not(.is-open) {
  opacity: 0;
  pointer-events: none;
}
body > .fancy-select-menu.fancy-select-menu--ported.is-open {
  opacity: 1;
  pointer-events: auto;
}
body > .mpro-menu.mpro-menu--ported {
  position: fixed !important;
  z-index: 10040 !important;
  display: grid !important;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: calc(100vw - 20px);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.fancy-select-option {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 10px;
  padding: .72rem .85rem;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s cubic-bezier(.22, 1, .36, 1);
}
.fancy-select-option:hover:not(:disabled),
.fancy-select-option:focus-visible:not(:disabled) {
  background: rgba(255, 79, 178, .1);
  outline: none;
}
.fancy-select-option.is-selected {
  background: rgba(255, 79, 178, .16);
  color: var(--pink, #ff4fb2);
}
.fancy-select-option.is-disabled,
.fancy-select-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.field:has(.fancy-select.is-open),
.form-row:has(.fancy-select.is-open),
.profile-section:has(.fancy-select.is-open),
.profile-page:has(.fancy-select.is-open) {
  overflow: visible;
  position: relative;
  z-index: 5;
}
.profile-page .fancy-select-trigger {
  border-radius: 10px;
  background: #faf9fc;
  border: 1px solid #ebe6f2;
  color: #1a1523;
  min-height: 46px;
  box-sizing: border-box;
  font-size: .95rem;
  line-height: 1.25;
  padding: .85rem .95rem;
  box-shadow: none;
}
.profile-page .fancy-select-trigger:focus-visible,
.profile-page .fancy-select.is-open .fancy-select-trigger {
  border-color: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
}
.profile-page .fancy-select-menu {
  border-radius: 12px;
  border: 1px solid #ebe6f2;
  background: #fff;
  color: #1a1523;
  box-shadow:
    0 16px 36px rgba(26, 21, 35, .12),
    0 2px 8px rgba(26, 21, 35, .06);
}
.profile-page .fancy-select-option:hover:not(:disabled),
.profile-page .fancy-select-option:focus-visible:not(:disabled) {
  background: rgba(124, 58, 237, .08);
}
.profile-page .fancy-select-option.is-selected {
  background: rgba(124, 58, 237, .12);
  color: #6d28d9;
}
.modal .fancy-select-trigger,
#modal-root .fancy-select-trigger {
  background: #2a1d52 !important;
  border: 1px solid rgba(192, 132, 252, .35) !important;
  color: #fff !important;
}
.modal .fancy-select-trigger:focus-visible,
.modal .fancy-select.is-open .fancy-select-trigger,
#modal-root .fancy-select-trigger:focus-visible,
#modal-root .fancy-select.is-open .fancy-select-trigger {
  border-color: rgba(216, 180, 254, .7) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .22) !important;
}
.modal .fancy-select-menu,
#modal-root .fancy-select-menu {
  background: #241845 !important;
  border: 1px solid rgba(192, 132, 252, .35) !important;
  color: #efe8ff !important;
  box-shadow: 0 20px 44px rgba(8, 2, 28, .45) !important;
}
.modal .fancy-select-option:hover:not(:disabled),
#modal-root .fancy-select-option:hover:not(:disabled) {
  background: rgba(192, 132, 252, .14) !important;
}
.modal .fancy-select-option.is-selected,
#modal-root .fancy-select-option.is-selected {
  background: rgba(192, 132, 252, .22) !important;
  color: #e9d5ff !important;
}
@media (prefers-reduced-motion: reduce) {
  .fancy-select-trigger,
  .fancy-select-chevron,
  .fancy-select-menu,
  .fancy-select-option {
    transition: none !important;
  }
}
.password-wrap { position: relative; }
.password-wrap input { padding-right: 3rem; }
.password-toggle {
  position: absolute;
  right: .45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.password-toggle:hover { color: var(--pink); background: rgba(255, 79, 178, .1); }
.password-toggle i,
.password-toggle .lucide-icon { font-size: 1.05rem; width: 1.05rem; height: 1.05rem; }
.form-grid { display: grid; gap: 1rem; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.checkbox-row { display: flex; gap: .65rem; flex-wrap: wrap; }
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip span { display: inline-flex; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-weight: 700; }
.check-chip input:checked + span { background: white; color: #120a2a; border-color: white; }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; background: var(--bg); }
.auth-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #1a0b36, #2d1260); padding: clamp(2rem, 6vw, 5rem); color: white; display: flex; align-items: center; min-height: 100vh; }
.auth-hero-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,10,42,.88) 12%, rgba(18,10,42,.45) 48%, rgba(18,10,42,.12) 100%); }
.auth-hero-photo { background-size: cover; background-position: center right; }
.auth-panel { position: relative; padding: 2rem; display: grid; place-items: center; background: var(--bg); }
.auth-page:has(#waitlist-signup) .auth-hero {
  align-items: flex-start;
  padding: 1.75rem clamp(1.5rem, 4vw, 3rem) 2.5rem;
}
.auth-page:has(#waitlist-signup) .auth-panel {
  place-items: start center;
  align-content: start;
  padding-top: 1.75rem;
  padding-bottom: 2rem;
}

.btn-block { width: 100%; }
.onboard-page { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; padding: 1rem 1.15rem 1.5rem; max-width: 520px; margin: 0 auto; }
.onboard-bg { display: none; }
.onboard-panel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.onboard-page--welcome .onboard-hero-side {
  display: block;
  padding: 0;
  margin: 0 0 1rem;
  border-radius: 22px;
  overflow: hidden;
  min-height: 220px;
}
.onboard-full-photo {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center right;
}
.onboard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.brand-logo { height: 28px; width: auto; display: block; object-fit: contain; }
.onboard-brand .brand-logo { height: 32px; }
.topbar-brand .brand-logo { height: 24px; }
.sidebar .brand { display: flex; align-items: center; gap: .55rem; }
.sidebar .brand .brand-logo { height: 30px; }
.brand-admin { font-size: .72rem; color: var(--pink); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.onboard-brand { display: inline-flex; align-items: center; }
.onboard-skip { border: 0; background: transparent; color: var(--muted); font-weight: 700; }
.onboard-progress { display: flex; gap: .4rem; justify-content: center; margin: .4rem 0 1rem; }
.onboard-progress span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.onboard-progress span.active { background: var(--pink); width: 22px; border-radius: 999px; }
.onboard-body { flex: 1; display: flex; flex-direction: column; gap: 1.1rem; }
.onboard-hero-visual { display: grid; place-items: center; padding: 1rem 0 0.5rem; }
.onboard-orbit { position: relative; width: min(280px, 78vw); height: min(280px, 78vw); }
.onboard-circle-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 4px solid var(--line); display: block; }
.onboard-float { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--purple); box-shadow: var(--shadow-sm); }
.onboard-float.f1 { top: 8%; left: -4%; }
.onboard-float.f2 { top: -2%; right: 6%; width: 56px; height: 56px; background: linear-gradient(135deg, #ff58b8, #c026d3); color: white; border: 0; }
.onboard-float.f3 { bottom: 18%; right: -6%; }
.onboard-copy { text-align: center; padding: 0 .4rem; }
.onboard-copy h1, .onboard-step-head h1 { font-size: clamp(1.7rem, 5vw, 2.35rem); line-height: 1.15; letter-spacing: -.03em; margin: 0 0 .7rem; }
.onboard-copy h1 span, .onboard-step-head h1 span { color: var(--pink); }
.onboard-copy p, .onboard-step-head p { margin: 0; color: var(--muted); line-height: 1.55; }
.onboard-step-head { text-align: center; }
.onboard-banner { width: 100%; height: 140px; object-fit: cover; object-position: center right; border-radius: 22px; margin-bottom: 1rem; border: 1px solid var(--line); }
.onboard-chips { display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; }
.onboard-chip { border: 1px solid var(--line); background: var(--surface); color: #efe8ff; border-radius: 999px; padding: .72rem .95rem; font-weight: 750; display: inline-flex; align-items: center; gap: .45rem; }
.onboard-chip i { color: var(--pink); }
.onboard-chip.active { background: white; color: #120a2a; border-color: white; }
.onboard-chip.active i { color: var(--pink-strong); }
.intent-chips .onboard-chip { min-width: min(100%, 220px); justify-content: flex-start; }
.onboard-actions { margin-top: auto; display: grid; gap: .7rem; padding-top: 1rem; }
.onboard-login-link { text-align: center; color: var(--muted); margin: 0; }
.onboard-login-link button { border: 0; background: transparent; color: var(--pink); font-weight: 800; }
.auth-forgot-row {
  margin: -.35rem 0 0;
  text-align: right;
}
.auth-forgot-row button {
  border: 0;
  background: transparent;
  color: var(--pink);
  font-weight: 750;
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
}
.onboard-form { text-align: left; }

.city-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid var(--line);
  color: #efe8ff;
  font-weight: 800;
  font-size: .82rem;
  margin-bottom: .85rem;
}
.city-badge i { color: var(--pink); }
.city-badge--onboard { align-self: center; }
.city-badge--hero { margin-bottom: 1rem; }

.landing-page {
  position: relative;
  min-height: 100vh;
  color: white;
  overflow-x: hidden;
  background: transparent;
}

.landing-nav,
.landing-hero-banner,
.landing-social,
.landing-cities {
  position: relative;
  z-index: 1;
}

html.landing-active,
html.landing-active body {
  background:
    radial-gradient(ellipse 95% 75% at 72% 42%, rgba(168, 85, 247, 0.55) 0%, rgba(124, 58, 237, 0.22) 34%, transparent 68%),
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(236, 72, 153, 0.2) 0%, transparent 62%),
    radial-gradient(ellipse 130% 90% at 50% 105%, rgba(109, 40, 217, 0.4) 0%, transparent 58%),
    linear-gradient(155deg, #23124f 0%, #18103a 42%, #0d0618 100%);
}

.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 75% at 72% 42%, rgba(168, 85, 247, 0.55) 0%, rgba(124, 58, 237, 0.22) 34%, transparent 68%),
    radial-gradient(ellipse 60% 50% at 12% 8%, rgba(236, 72, 153, 0.2) 0%, transparent 62%),
    radial-gradient(ellipse 130% 90% at 50% 105%, rgba(109, 40, 217, 0.4) 0%, transparent 58%),
    linear-gradient(155deg, #23124f 0%, #18103a 42%, #0d0618 100%);
}

.landing-nav {
  position: relative;
  z-index: 30;
  background: transparent;
  border-bottom: 0;
}
.landing-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}
.landing-logo { display: inline-flex; align-items: center; text-decoration: none; }
.landing-logo .brand-logo { height: 34px; }
.landing-menu {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  flex-wrap: wrap;
}
.landing-menu a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-weight: 650;
  font-size: .92rem;
}
.landing-menu a:hover { color: white; }
.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.landing-link-btn {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font-weight: 700;
  padding: .5rem .2rem;
}
.landing-invite-btn {
  padding: .72rem 1.15rem;
  min-height: 42px;
  font-size: .88rem;
  white-space: nowrap;
}

.landing-hero-banner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) 1.25rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}
.landing-invite-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .82rem;
  border-radius: 999px;
  border: 1px solid rgba(167, 139, 250, .45);
  background: rgba(91, 33, 182, .18);
  color: #ddd6fe;
  font-size: .78rem;
  font-weight: 800;
  margin-bottom: 1.15rem;
}
.landing-invite-tag i { color: #c084fc; font-size: .72rem; }
.landing-hero-copy h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.65rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  margin: 0 0 1rem;
  max-width: 620px;
  font-weight: 800;
}
.landing-hero-copy h1 span {
  background: linear-gradient(90deg, #ff58b8, #c026d3 45%, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.landing-lead {
  color: rgba(255, 255, 255, .78);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 0 1.5rem;
  font-size: clamp(.98rem, 1.5vw, 1.06rem);
}
.landing-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2rem;
}
.btn-lg {
  padding: .95rem 1.35rem;
  min-height: 50px;
  font-size: .95rem;
}
.landing-play-btn i { color: white; opacity: .92; }

.landing-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 640px;
}
.landing-trust-item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}
.landing-trust-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 88, 184, .28), rgba(124, 58, 237, .35));
  border: 1px solid rgba(255, 255, 255, .28);
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 auto;
  box-shadow: 0 0 22px rgba(236, 72, 153, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.landing-trust-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.landing-trust-item strong {
  display: block;
  font-size: .82rem;
  line-height: 1.25;
  margin-bottom: .12rem;
  color: rgba(255, 255, 255, .95);
}
.landing-trust-item span {
  display: block;
  color: rgba(255, 255, 255, .52);
  font-size: .72rem;
  line-height: 1.35;
}

.landing-hero-phones {
  position: relative;
  min-height: 460px;
  display: grid;
  place-items: center;
  padding-right: .5rem;
}
.landing-hero-phones::before {
  content: '';
  position: absolute;
  width: min(520px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 38, 211, .45) 0%, rgba(124, 58, 237, .18) 42%, transparent 70%);
  top: 48%;
  left: 52%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.landing-hero-phones::after {
  content: '';
  position: absolute;
  width: min(460px, 82%);
  aspect-ratio: 1;
  top: 48%;
  left: 52%;
  transform: translate(-50%, -50%) rotate(-22deg);
  border: 2px solid rgba(236, 72, 153, .45);
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: rgba(168, 85, 247, .2);
  box-shadow: 0 0 36px rgba(192, 38, 211, .22);
  pointer-events: none;
  z-index: 0;
}
.landing-hero-phones img {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  max-width: none;
  filter: drop-shadow(0 28px 50px rgba(0, 0, 0, .4));
}

.landing-social {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1rem 1.25rem 2.5rem;
  text-align: center;
}
.landing-social > p {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, .58);
  font-size: .88rem;
}
.landing-city-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}
.landing-city-pill {
  display: inline-flex;
  align-items: center;
  padding: .58rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-weight: 700;
  font-size: .86rem;
}
.landing-city-pill.is-active {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  color: white;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.landing-city-pill-more { color: rgba(255, 255, 255, .55); }

.landing-cities {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  scroll-margin-top: 2rem;
}
.landing-cities-head h2 {
  margin: 0 0 .35rem;
  letter-spacing: -.03em;
}
.landing-cities-head p { margin: 0 0 1.2rem; }
.landing-city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .85rem;
}
.landing-province-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.landing-province-entry {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255, 255, 255, .55) !important;
  font-size: .74rem !important;
}
.landing-province-entry i { color: var(--pink); font-size: .68rem; }
@media (max-width: 1100px) {
  .landing-province-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .landing-province-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.landing-city-card {
  display: grid;
  gap: .25rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: white;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease;
}
.landing-city-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .22);
}
.landing-city-card i { color: var(--pink); }
.landing-city-card span { font-weight: 800; font-size: 1.05rem; }
.landing-city-card small { color: var(--muted); font-size: .78rem; }
.landing-city-status {
  font-style: normal;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin-top: .15rem;
}
.landing-city-card.is-live .landing-city-status { color: #86efac; }
.landing-city-card.is-soon { opacity: .88; }
.landing-city-card.is-soon .landing-city-status { color: #fbbf24; }

.coming-soon-page {
  min-height: 100vh;
  background: var(--bg);
  color: white;
  padding: 1rem clamp(1rem, 4vw, 3rem) 3rem;
  max-width: 760px;
  margin: 0 auto;
}
.coming-soon-card {
  margin-top: 2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
.coming-soon-card h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 .85rem;
}
.coming-soon-card p {
  line-height: 1.65;
  margin: 0 auto 1.4rem;
  max-width: 520px;
}
.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .35);
  color: #fcd34d;
  font-weight: 800;
  font-size: .82rem;
  margin-bottom: 1rem;
}
.coming-soon-actions {
  display: grid;
  gap: .75rem;
  max-width: 360px;
  margin: 0 auto;
}
.waitlist-form {
  display: grid;
  gap: .75rem;
  text-align: left;
  margin: 0 auto 1rem;
  max-width: 420px;
}
.waitlist-form .field { margin: 0; }
.waitlist-form label {
  display: block;
  margin-bottom: .35rem;
  font-size: .86rem;
  font-weight: 700;
  color: #efe8ff;
}
.waitlist-form select option:disabled {
  color: #8b849c;
}
.waitlist-login-hint {
  margin: .35rem 0 0;
  color: #a39bb8;
  font-size: .88rem;
}
.waitlist-login-hint button {
  border: 0;
  background: none;
  color: #fbbf24;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.coming-soon-logo {
  display: flex;
  justify-content: center;
  margin-bottom: .85rem;
}

/* —— Waitlist split layout —— */
.waitlist-page {
  min-height: 100vh;
  background:
    radial-gradient(90% 70% at 12% 0%, rgba(129, 45, 226, .28), transparent 55%),
    radial-gradient(70% 60% at 100% 20%, rgba(255, 79, 178, .16), transparent 50%),
    #0b0a15;
  color: #fff;
  padding: clamp(1rem, 3vw, 2rem);
  box-sizing: border-box;
}
.waitlist-layout {
  max-width: 1100px;
  margin: 0 auto;
  min-height: calc(100vh - 2rem);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}
.waitlist-story {
  order: 1;
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.waitlist-panel {
  order: 2;
  background: rgba(21, 18, 37, .92);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 28px;
  padding: clamp(1.25rem, 3vw, 1.85rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  text-align: center;
}
.waitlist-panel h2 {
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.waitlist-panel > .muted {
  margin: 0 auto 1rem;
  color: #a39bb8;
  line-height: 1.5;
  max-width: 28rem;
}
.waitlist-panel .coming-soon-badge {
  margin-left: auto;
  margin-right: auto;
}
.waitlist-panel .waitlist-form {
  margin: 0;
  max-width: none;
  text-align: left;
}
.waitlist-visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  aspect-ratio: 1 / 1;
  background: #151225;
  max-width: 520px;
}
.waitlist-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.waitlist-visual-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: clamp(1rem, 4vw, 1.75rem);
  background: linear-gradient(180deg, transparent 35%, rgba(11, 10, 21, .88) 100%);
  box-sizing: border-box;
}
.waitlist-brand { margin-top: .15rem; }
.waitlist-kicker {
  margin: 0 0 .55rem;
  color: #f9a8d4;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.waitlist-story h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}
.waitlist-lead {
  margin: 0;
  color: #f3eefc;
  font-size: clamp(.88rem, 2.2vw, 1rem);
  line-height: 1.5;
  max-width: 22rem;
  text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
.waitlist-usps {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
.auth-copy .waitlist-usps {
  margin-top: 1.35rem;
  max-width: 520px;
}
.waitlist-usps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .7rem;
  align-items: flex-start;
  padding: .7rem .8rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
}
.waitlist-usp-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 79, 178, .16);
  color: #ff7ad9;
  flex-shrink: 0;
  font-size: 1.15rem;
}
.waitlist-usp-ico .babbelhuis-ico {
  width: 1.35rem;
  height: 1.35rem;
  background-color: #ff7ad9;
}
.waitlist-usps strong {
  display: block;
  font-size: .92rem;
  margin-bottom: .15rem;
}
.waitlist-usps small {
  display: block;
  color: #a39bb8;
  font-size: .8rem;
  line-height: 1.4;
}
.waitlist-faq {
  margin-top: 1.5rem;
  max-width: 520px;
}
.waitlist-faq-title {
  margin: 0 0 .85rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff7ad9;
}
.waitlist-faq-list {
  display: grid;
  gap: .55rem;
}
.waitlist-faq-item {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12, 8, 28, .72);
  backdrop-filter: blur(8px);
  overflow: hidden;
  transition: border-color .2s ease, background .2s ease;
}
.waitlist-faq-item.is-open {
  border-color: rgba(255, 122, 217, .28);
  background: rgba(12, 8, 28, .86);
}
.waitlist-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .85rem 1rem;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.waitlist-faq-trigger span:first-child {
  flex: 1;
  color: #fff;
}
.waitlist-faq-chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 79, 178, .14);
  color: #ff7ad9;
  font-size: .75rem;
  transition: transform .22s ease, background .2s ease;
}
.waitlist-faq-chevron::before {
  content: '';
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}
.waitlist-faq-item.is-open .waitlist-faq-chevron {
  transform: rotate(180deg);
  background: rgba(255, 79, 178, .22);
}
.waitlist-faq-panel {
  padding: 0 1rem .95rem;
}
.waitlist-faq-panel p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.waitlist-faq-panel p strong {
  font-weight: 800;
  color: #fff;
}
.waitlist-faq-panel p a {
  color: #ff9de0;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .12em;
}
.auth-copy .waitlist-faq-title { color: #ff7ad9; }
.auth-copy .waitlist-faq-trigger { color: #fff; }
.auth-copy .waitlist-faq-panel p { color: rgba(255,255,255,.88); }
.admin-ga-snippet {
  width: 100%;
  min-height: 9.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  color: #d8d0ef;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: .85rem 1rem;
  resize: vertical;
}
.waitlist-share-box {
  margin-top: 1.1rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  display: grid;
  gap: .75rem;
}
.waitlist-share-box strong {
  font-size: 1rem;
  letter-spacing: -.01em;
}
.waitlist-share-box p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: .92rem;
}
.waitlist-scroll-cta {
  display: none;
  position: fixed;
  left: 50%;
  bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1200;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1.35rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: .92rem;
  color: #fff;
  cursor: pointer;
  background: var(--accent);
  box-shadow: none;
  transition: opacity .15s ease;
}
.waitlist-scroll-cta.is-visible {
  display: inline-flex;
}
.waitlist-scroll-cta:active {
  opacity: .9;
}
@media (min-width: 821px) {
  .waitlist-scroll-cta { display: none !important; }
}
@media (max-width: 860px) {
  .waitlist-layout {
    grid-template-columns: 1fr;
    align-items: stretch;
    min-height: auto;
  }
  .waitlist-panel { order: 1; }
  .waitlist-story { order: 2; }
  .waitlist-visual { max-height: 280px; }
}

@media (max-width: 1024px) {
  .landing-nav-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .landing-menu { display: none; }
  .landing-hero-banner {
    grid-template-columns: 1fr;
  }
  .landing-hero-phones {
    min-height: 280px;
  }
  .landing-trust {
    grid-template-columns: 1fr;
    gap: .85rem;
  }
}

@media (max-width: 640px) {
  .landing-nav-actions .landing-invite-btn { display: none; }
  .landing-hero-ctas { flex-direction: column; }
  .landing-hero-ctas .btn { width: 100%; }
}

@media (max-width: 899px) {
  .city-badge--onboard { align-self: flex-start; }
}

@media (min-width: 900px) {
  .onboard-page--welcome {
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
    background: var(--bg);
  }

  .onboard-page--welcome .onboard-top {
    grid-column: 2;
    grid-row: 1;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem) 0;
    margin-bottom: 0;
  }

  .onboard-page--welcome .onboard-hero-side {
    grid-column: 1;
    grid-row: 1 / -1;
    display: block;
    padding: 0;
    margin: 0;
    min-height: 100vh;
    border-radius: 0;
    overflow: hidden;
  }

  .onboard-page--welcome .onboard-full-photo {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    object-fit: cover;
    object-position: center right;
  }

  .onboard-page--welcome .onboard-panel {
    grid-column: 2;
    grid-row: 2;
    padding: 0 clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
    justify-content: center;
  }

  .onboard-page--welcome .onboard-copy {
    text-align: left;
  }

  .onboard-page--welcome .onboard-copy h1 {
    font-size: clamp(2rem, 3.2vw, 3rem);
  }

  .onboard-page--welcome .onboard-actions {
    max-width: 420px;
  }

  .onboard-page--steps {
    max-width: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
    background: var(--bg);
  }

  .onboard-page--steps .onboard-bg {
    display: block;
    position: relative;
    min-height: 100vh;
    background-image: var(--onboard-photo);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
  }

  .onboard-page--steps .onboard-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 10, 42, .08) 0%, rgba(18, 10, 42, .62) 100%);
  }

  .onboard-page--steps .onboard-panel {
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.5rem);
    min-height: 100vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    max-width: 640px;
  }

  .onboard-page--steps .onboard-banner { display: none; }

  .onboard-page--steps .onboard-copy,
  .onboard-page--steps .onboard-step-head { text-align: left; }

  .onboard-page--steps .onboard-chips { justify-content: flex-start; }

  .onboard-page--steps .onboard-progress { justify-content: flex-start; }

  .onboard-page--steps .onboard-actions { max-width: 420px; }

  .onboard-page--steps .intent-chips .onboard-chip { min-width: min(100%, 260px); }
}
.auth-copy { position: relative; z-index: 1; width: min(620px, 100%); }
.auth-logo { width: min(480px, 90%); border-radius: 28px; margin-left: -2rem; }
.auth-copy h1 { font-size: clamp(2.5rem, 6vw, 5rem); line-height: .98; margin: 1rem 0 1.25rem; letter-spacing: -.04em; }
.auth-copy h1 span { color: var(--pink); }
.auth-copy h1.waitlist-title,
.auth-copy .waitlist-title { color: #fff; }
.auth-copy p { font-size: 1.08rem; line-height: 1.7; color: #fff; max-width: 560px; }
.auth-copy .waitlist-usps strong { color: #fff; }
.auth-copy .waitlist-usps small { color: rgba(255,255,255,.88); }
.waitlist-province {
  position: relative;
  z-index: 1;
}
.waitlist-province.is-open {
  z-index: 40;
}
.waitlist-province-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .85rem .95rem;
  background: var(--bg-elevated);
  color: #fff;
  text-align: left;
  font-weight: 700;
}
.waitlist-province.is-open .waitlist-province-trigger {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 79, 178, .18);
}
.waitlist-province-trigger i {
  color: rgba(255,255,255,.7);
  transition: transform .18s ease;
  flex: none;
}
.waitlist-province.is-open .waitlist-province-trigger i {
  transform: rotate(180deg);
}
.waitlist-province-current {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.waitlist-province-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .45rem);
  z-index: 50;
  width: 100%;
  max-height: min(280px, 45vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .4rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: #1a1235;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  display: grid;
  gap: .15rem;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}
.waitlist-province-menu[hidden] {
  display: none !important;
}
.waitlist-province-menu.is-fixed {
  position: fixed;
  right: auto;
  margin: 0;
}
.waitlist-province-menu::-webkit-scrollbar {
  width: 6px;
}
.waitlist-province-menu::-webkit-scrollbar-track {
  background: transparent;
}
.waitlist-province-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.28);
  border-radius: 999px;
}
.waitlist-province-opt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  border: 0;
  border-radius: 12px;
  padding: .8rem .85rem;
  background: transparent;
  color: #fff;
  text-align: left;
  font-weight: 700;
  min-width: 0;
}
.waitlist-province-opt:hover,
.waitlist-province-opt.is-selected {
  background: rgba(255,255,255,.08);
}
.waitlist-province-name {
  min-width: 0;
  flex: 1 1 auto;
  color: #fff;
  font-size: .95rem;
  line-height: 1.3;
}
.waitlist-province-name em {
  font-style: normal;
  font-weight: 650;
  color: rgba(255,255,255,.72);
}
.waitlist-province-soon {
  flex: none;
  font-size: .62rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .22rem .45rem;
  white-space: nowrap;
}
.waitlist-province-live {
  flex: none;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #86efac;
  background: rgba(52, 211, 153, .12);
  border: 1px solid rgba(52, 211, 153, .22);
  border-radius: 999px;
  padding: .22rem .45rem;
  white-space: nowrap;
}
.auth-panel:has(.waitlist-province.is-open),
.auth-card:has(.waitlist-province.is-open),
.waitlist-form:has(.waitlist-province.is-open),
.field:has(.waitlist-province.is-open) {
  overflow: visible;
}
.auth-badges { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.auth-badge { border: 1px solid var(--line); background: rgba(255,255,255,.06); padding: .68rem .9rem; border-radius: 999px; font-weight: 750; display: inline-flex; align-items: center; gap: .5rem; }
.auth-panel { position: relative; padding: 2rem; display: grid; place-items: center; background: var(--bg); }
.auth-skip {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  z-index: 3;
}
.auth-page--welcome .auth-card p.muted {
  margin: .35rem 0 0;
  line-height: 1.55;
}

/* Welcome: premium layout + reveal */
@keyframes welcome-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.auth-page--welcome .welcome-top,
.auth-page--welcome .welcome-copy > *,
.auth-page--welcome .auth-card > * {
  opacity: 0;
  animation: welcome-rise .9s cubic-bezier(.22, 1, .36, 1) forwards;
}
.auth-page--welcome .welcome-top { animation-delay: .06s; }
.auth-page--welcome .welcome-copy > *:nth-child(1) { animation-delay: .18s; }
.auth-page--welcome .welcome-copy > *:nth-child(2) { animation-delay: .3s; }
.auth-page--welcome .welcome-copy > *:nth-child(3) { animation-delay: .4s; }
.auth-page--welcome .auth-card > *:nth-child(1) { animation-delay: .48s; }
.auth-page--welcome .auth-card > *:nth-child(2) { animation-delay: .56s; }
.auth-page--welcome .auth-card > *:nth-child(3) { animation-delay: .64s; }
.auth-page--welcome .auth-card > *:nth-child(4) { animation-delay: .74s; }
.auth-page--welcome .auth-card > *:nth-child(5) { animation-delay: .84s; }
.auth-page--welcome .welcome-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  width: 100%;
  text-align: center;
}
.auth-page--welcome .welcome-top .onboard-brand {
  display: inline-flex;
  justify-content: center;
  width: auto;
  margin: 0 auto;
}
.auth-page--welcome .welcome-top .city-badge,
.auth-page--welcome .welcome-top .eyebrow { margin: 0; }
.auth-page--welcome .welcome-copy {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.auth-page--welcome .welcome-copy h1 {
  margin: 0 auto 1rem;
  max-width: 16rem;
  width: 100%;
  text-align: center;
  text-wrap: balance;
}
.auth-page--welcome .welcome-copy p {
  margin: 0 auto;
  max-width: 19rem;
  width: 100%;
  text-align: center;
  text-wrap: balance;
}
.auth-page--welcome .welcome-sub {
  margin-top: .85rem !important;
  color: rgba(255, 255, 255, .72) !important;
  font-size: .98rem !important;
  font-weight: 650;
  max-width: 17rem !important;
}
.auth-page--welcome .auth-card {
  text-align: center;
}
.auth-page--welcome .auth-card .btn-block { margin-top: 1.35rem; }
.auth-page--welcome .auth-card .onboard-login-link { margin-top: 1.05rem; }
.auth-page--welcome .auth-card > .muted {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
  .auth-page--welcome .welcome-top,
  .auth-page--welcome .welcome-copy > *,
  .auth-page--welcome .auth-card > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.auth-card { width: min(520px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow); padding: clamp(1.3rem, 4vw, 2.5rem); }
.auth-card h2 { margin: .25rem 0 .4rem; font-size: 2rem; letter-spacing: -.03em; }
.waitlist-mobile-brand { display: none; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-elevated); padding: .3rem; border-radius: 999px; margin: 1.4rem 0; }
.auth-tab { border: 0; border-radius: 999px; padding: .72rem; background: transparent; color: var(--muted); font-weight: 800; }
.auth-tab.active { background: white; color: #120a2a; }
.demo-box { display: none !important; }

.ad-rotate {
  position: relative;
  margin: 1rem 0;
  min-height: 72px;
}
.ad-rotate--sidebar {
  margin: .75rem 0 0;
}
.ad-rotate-slide {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
}
.ad-rotate-slide.is-active {
  position: relative;
  inset: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
  animation: ad-rotate-in .35s ease;
}
.ad-rotate .ad-slot {
  margin: 0;
}
.clist-ad .ad-rotate,
.chat-ad .ad-rotate,
.mpro-ad .ad-rotate {
  margin: 0;
}
@keyframes ad-rotate-in {
  from { opacity: .35; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.ad-slot {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: .9rem;
  align-items: center;
  margin: 1rem 0;
  padding: 1rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .18);
  color: inherit;
  text-decoration: none;
  position: relative;
}
.ad-slot-label {
  position: absolute;
  top: .65rem;
  right: .75rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.ad-slot img {
  width: 96px;
  height: 72px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--bg-elevated);
}
.ad-slot:not(:has(img)):not(.ad-slot-video):not(.ad-slot-script) {
  grid-template-columns: 1fr;
}
.ad-slot-video,
.ad-slot-script {
  grid-template-columns: 1fr;
  align-items: stretch;
}
.ad-slot-media video {
  width: 100%;
  max-height: 280px;
  border-radius: 16px;
  background: #000;
  display: block;
}
.ad-slot-frame {
  width: 100%;
  min-height: 180px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  display: block;
}
.ad-slot-body strong { display: block; margin-bottom: .15rem; }
.ad-slot-body small { color: var(--muted); }
.ad-slot-body p { margin: .35rem 0 .55rem; color: rgba(255,255,255,.72); font-size: .9rem; line-height: 1.45; }
.ad-slot-cta {
  display: inline-flex;
  color: var(--pink);
  font-weight: 800;
  text-decoration: none;
  font-size: .86rem;
}
.upload-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .55rem;
  align-items: center;
}
.upload-row input { width: 100%; }
.ad-media-block { margin-bottom: .25rem; }

:root { --app-sidebar-w: 260px; }
.app-shell {
  --app-sidebar-w: 260px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--app-sidebar-w) minmax(0, 1fr);
  background: var(--bg);
}
.sidebar { position: sticky; top: 0; height: 100vh; padding: 1.25rem 1rem; background: var(--bg-elevated); border-right: 1px solid var(--line); color: white; display: flex; flex-direction: column; z-index: 20; min-width: 0; overflow-x: hidden; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sidebar-close { display: none; }
.mobile-menu-btn { display: none; flex: none; }
.mobile-menu-backdrop { display: none; }
.brand { display: flex; align-items: center; gap: .75rem; padding: .35rem .35rem .15rem; }
.brand-icon { width: 46px; height: 46px; border-radius: 15px; object-fit: cover; }
.brand strong { font-size: 1.55rem; letter-spacing: -.04em; }
.invite-pill { margin: 0 .4rem 1.1rem; padding: .68rem .8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: .82rem; color: var(--muted); display: flex; gap: .65rem; align-items: flex-start; }
.invite-pill i { color: var(--pink); margin-top: .15rem; }
.sidebar-city-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  margin: -.1rem .55rem .85rem;
}
.sidebar-city-row .sidebar-city {
  margin: 0;
}
.sidebar-tip-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  border-radius: 999px;
  padding: .42rem .72rem;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: -.01em;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}
.sidebar-tip-btn i,
.sidebar-tip-btn svg {
  width: .85rem;
  height: .85rem;
}
.sidebar-tip-btn:hover {
  filter: brightness(1.08);
}
.sidebar-city {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: -.1rem .55rem .85rem;
  padding: 0;
  color: #fff;
  font-weight: 750;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.sidebar-city i { color: #fff; font-size: .85rem; }
.sidebar-profile {
  margin: 0 .25rem .85rem;
}
.nav { display: grid; gap: .2rem; flex: 1; }
.nav button {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 14px;
  padding: .78rem .9rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 750;
  text-align: left;
}
.nav button:hover {
  background: rgba(255, 255, 255, .04);
  color: #fff;
}
.nav button.active {
  background: rgba(129, 45, 226, .18) !important;
  border-color: rgba(196, 181, 253, .28) !important;
  color: #efe8ff !important;
  box-shadow: none !important;
}
.nav button.active .nav-icon { color: #efe8ff !important; }
.nav .nav-icon { width: 1.5rem; text-align: center; color: inherit; display: inline-grid; place-items: center; }
.babbelhuis-ico {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url('/assets/babbelhuis.png') center / contain no-repeat;
  mask: url('/assets/babbelhuis.png') center / contain no-repeat;
}
.nav .nav-icon .babbelhuis-ico {
  width: 1.35rem;
  height: 1.35rem;
  vertical-align: 0;
}
.auth-badge .babbelhuis-ico {
  width: 1.05em;
  height: 1.05em;
}
.sidebar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  max-width: 100%;
  margin: .55rem 0 .45rem;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1rem;
  font-weight: 800;
  font-size: .95rem;
  color: #fff;
  cursor: pointer;
  background: var(--accent);
  box-shadow: none;
  flex: none;
}
.sidebar-cta:active { opacity: .9; }
.sidebar-plus-cta {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  max-width: 100%;
  margin: .55rem 0 .2rem;
  border: 1px solid rgba(196, 181, 253, .35);
  border-radius: 14px;
  padding: .65rem .75rem;
  text-align: left;
  cursor: pointer;
  color: #efe8ff;
  background: linear-gradient(135deg, rgba(129, 45, 226, .42), rgba(76, 29, 149, .55));
  box-shadow: 0 8px 20px rgba(76, 29, 149, .22);
  font: inherit;
  overflow: visible;
}
.sidebar-plus-cta > .fa-crown,
.sidebar-plus-cta > i:first-child {
  flex: 0 0 1.85rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .12);
  color: #f5e9ff;
}
.sidebar-plus-copy {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1 1 auto;
  min-width: 0;
}
.sidebar-plus-copy strong {
  display: block;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #efe8ff;
  line-height: 1.2;
}
.sidebar-plus-copy small {
  display: block;
  color: rgba(239, 232, 255, .82);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.25;
}
.sidebar-plus-cta.is-plus {
  display: flex;
  align-items: center;
  gap: .8rem;
  width: 100%;
  max-width: 100%;
  margin: .15rem 0 .1rem;
  border: 0;
  border-radius: 14px;
  padding: .78rem .9rem;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.sidebar-plus-cta.is-plus:hover {
  background: rgba(255, 255, 255, .04);
  color: #fff;
}
.sidebar-plus-cta.is-plus > .fa-crown,
.sidebar-plus-cta.is-plus > i:first-child {
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: auto;
  border-radius: 0;
  display: inline-grid;
  place-items: center;
  background: none;
  color: inherit;
  font-size: 1rem;
}
.sidebar-plus-cta.is-plus span {
  font-weight: 750;
  font-size: inherit;
}
.sidebar-links {
  display: grid;
  gap: .1rem;
  margin: .15rem 0 .5rem;
}
.sidebar-links button,
.sidebar-link-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 14px;
  padding: .78rem .9rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}
.sidebar-links button:hover,
.sidebar-links button.active,
.sidebar-link-btn:hover {
  background: var(--surface);
  color: #fff;
}
.sidebar-links .install-tip {
  display: none;
}
.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: .25rem;
  padding-top: .15rem;
  min-width: 0;
  max-width: 100%;
}
.ad-slot--sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .4rem;
  padding: 0;
  margin: -.15rem 0 0;
  border-radius: 0;
  background: none;
  border: 0;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  text-align: center;
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: visible;
}
.ad-slot--sidebar .ad-slot-media {
  position: relative;
  width: 135px;
  height: 135px;
  max-width: 135px;
  flex: none;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 auto;
}
.ad-slot--sidebar .ad-slot-label {
  position: absolute;
  top: auto;
  left: auto;
  right: .35rem;
  bottom: .3rem;
  z-index: 2;
  display: block;
  width: auto;
  max-width: calc(100% - .7rem);
  margin: 0;
  padding: 0;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  pointer-events: none;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.ad-slot--sidebar img {
  width: 135px;
  height: 135px;
  border-radius: 14px;
  object-fit: cover;
  flex: none;
  display: block;
}
.ad-slot--sidebar .ad-slot-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  width: 100%;
  min-width: 0;
}
.ad-slot--sidebar .ad-slot-body strong {
  font-size: .81rem;
  line-height: 1.3;
  margin: 0;
}
.ad-slot--sidebar .ad-slot-body small {
  font-size: .65rem;
  color: var(--muted);
}
.ad-slot--sidebar .ad-slot-body p {
  display: none;
}
.ad-slot--sidebar .ad-slot-cta {
  display: inline-flex;
  justify-content: center;
  font-size: .74rem;
  margin-top: .28rem;
}
.ad-slot--sidebar.ad-slot-script,
.ad-slot--sidebar.ad-slot-video {
  align-items: stretch;
}
.ad-slot--sidebar .ad-slot-frame {
  min-height: 135px;
  border-radius: 12px;
}
.ad-slot--sidebar .ad-slot-media video {
  width: 135px;
  height: 135px;
  max-height: 135px;
  object-fit: cover;
  border-radius: 14px;
}
/* Discover: full-width horizontal banner */
.ad-slot--banner {
  display: block;
  width: 100%;
  max-width: none;
  margin: .75rem 0 1rem;
  padding: 0;
  overflow: hidden;
  border-style: solid;
  border-color: rgba(255, 255, 255, .14);
  background: color-mix(in srgb, var(--bg-elevated) 92%, #0b0b12);
}
.ad-slot--banner .ad-slot-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #0b0b12;
  max-height: 110px;
}
.ad-slot--banner img {
  width: 100%;
  height: 110px;
  max-height: 110px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  display: block;
}
.ad-slot--banner .ad-slot-label {
  position: absolute;
  top: .4rem;
  left: .4rem;
  right: auto;
  bottom: auto;
  z-index: 2;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 8, 20, .62);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .18rem .45rem;
  text-shadow: none;
  pointer-events: none;
  max-width: calc(100% - .8rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ad-slot--banner .ad-slot-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .45rem .65rem;
  padding: .4rem .75rem;
  min-height: 0;
  min-width: 0;
}
.ad-slot--banner .ad-slot-body strong {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .86rem;
  line-height: 1.25;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ad-slot--banner .ad-slot-body small {
  display: none;
}
.ad-slot--banner .ad-slot-body p {
  display: none;
}
.ad-slot--banner .ad-slot-cta {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: .8rem;
  line-height: 1.2;
  white-space: nowrap;
}
.ad-slot--banner.ad-slot-video,
.ad-slot--banner.ad-slot-script {
  display: block;
}
.ad-slot--banner .ad-slot-frame {
  min-height: 90px;
  max-height: 110px;
  border-radius: 0;
}
.ad-slot--banner .ad-slot-media video {
  width: 100%;
  height: 110px;
  max-height: 110px;
  object-fit: cover;
  border-radius: 0;
}
.user-mini { display: flex; align-items: center; gap: .7rem; padding: .75rem; border-radius: 16px; background: var(--surface); }
.user-mini-btn {
  width: 100%;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background .15s ease, transform .15s ease;
}
.user-mini-btn:hover { background: var(--surface-soft); transform: translateY(-1px); }
.user-mini-chevron { margin-left: auto; opacity: .45; font-size: .85rem; }
.privacy-toggles { display: grid; gap: .65rem; margin-top: .55rem; }
.privacy-toggles .toggle-text { display: grid; gap: .15rem; }
.privacy-toggles .toggle-text strong { font-size: .92rem; }
.privacy-toggles .toggle-text small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.profile-edit-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.profile-edit-label { color: var(--muted); font-size: .86rem; font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.event-invite-form { display: grid; gap: 1rem; }
.event-invite-list { display: grid; gap: .55rem; max-height: min(50vh, 360px); overflow: auto; padding-right: .15rem; }
.event-invite-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}
.event-invite-row input { position: absolute; opacity: 0; pointer-events: none; }
.event-invite-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line);
  display: grid; place-items: center;
  color: transparent;
  font-size: .75rem;
}
.event-invite-row input:checked + .event-invite-check {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
}
.event-invite-copy { display: grid; gap: .15rem; min-width: 0; }
.event-invite-copy strong { font-size: .95rem; }
.event-invite-copy small { color: var(--muted); font-size: .8rem; }
.mpro-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: white; font-weight: 900; flex: 0 0 auto; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); overflow: hidden; position: relative; box-sizing: border-box; }
.avatar:has(.avatar-founder),
.avatar:has(.avatar-birthday) { overflow: visible; }
.avatar-founder {
  position: absolute;
  right: -3px;
  bottom: -3px;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #120a2a;
  border: 1.5px solid rgba(255,255,255,.7);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
}
.avatar-birthday {
  position: absolute;
  right: -4px;
  top: -4px;
  z-index: 3;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff7ad9, #a855f7);
  border: 1.5px solid rgba(255,255,255,.85);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
  color: #fff;
}
.avatar-birthday-ico {
  width: 11px;
  height: 11px;
  display: block;
}
.avatar-founder .mpro-founder-ico {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}
.founder-badge,
.mpro-founder-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-left: .2rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: .72em;
  font-weight: 750;
  letter-spacing: -.01em;
  vertical-align: middle;
  color: #c4b5fd;
  line-height: 1;
  white-space: nowrap;
}
.founder-badge .mpro-founder-ico,
.mpro-founder-badge .mpro-founder-ico {
  width: 14px;
  height: 14px;
}
.avatar-brand {
  box-shadow: 0 0 0 2px #0f0b1c, 0 0 0 4px #812DE2, 0 0 14px rgba(129, 45, 226, .35);
}
.avatar-photo.avatar-brand {
  padding: 2px;
  background: linear-gradient(135deg, #ff4fb2, #812DE2 55%, #6d28d9);
  box-shadow: 0 0 14px rgba(129, 45, 226, .28);
}
.avatar-photo.avatar-brand img {
  border-radius: 50%;
  background: var(--avatar-fallback, #151225);
}
.avatar.topbar-av { width: 36px; height: 36px; font-size: .72rem; }
.avatar-photo img,
.avatar-photo .avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: inherit;
}
.avatar-photo.avatar-brand img,
.avatar-photo.avatar-brand .avatar-img {
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}
.avatar-btn { border: 0; background: transparent; padding: 0; cursor: pointer; }
.name-link { border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; padding: 0; cursor: pointer; text-align: left; }
.name-link:hover { color: var(--pink); }
.avatar-lg { width: 96px !important; height: 96px !important; font-size: 2rem; }
.avatar-xl { width: 112px !important; height: 112px !important; font-size: 2.2rem; }
.profile-public { display: grid; gap: 1rem; max-width: 860px; }
.profile-hero-top { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.profile-hero-top h2 { margin: 0; font-size: 1.4rem; letter-spacing: -.02em; }
@media (max-width: 480px) {
  .profile-hero-top { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .personality-match { flex-direction: column; text-align: center; }
}
.profile-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
.profile-media { display: block; border-radius: 16px; overflow: hidden; background: var(--bg-elevated); aspect-ratio: 1; }
.profile-media img, .profile-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.media-edit-grid { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .55rem; }
.media-thumb { position: relative; width: 88px; height: 88px; border-radius: 14px; overflow: hidden; background: var(--bg-elevated); }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.media-remove { position: absolute; top: .25rem; right: .25rem; width: 26px; height: 26px; border: 0; border-radius: 999px; background: rgba(0,0,0,.65); color: white; display: grid; place-items: center; padding: 0; cursor: pointer; }
.user-mini small { display: block; color: var(--muted); }

.main { min-width: 0; background: var(--bg); }
.topbar { height: 82px; position: sticky; top: 0; z-index: 15; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 3vw, 2.2rem); background: rgba(18, 10, 42, .92); border-bottom: 0; backdrop-filter: blur(12px); }
.topbar h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.03em; }
.top-actions { display: flex; align-items: center; gap: .7rem; }
.city-pill { display: inline-flex; align-items: center; gap: .45rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .62rem .85rem; font-weight: 750; }
.content { width: min(1320px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 2.3rem); padding-bottom: 110px; }

.membership-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; margin-bottom: 1.25rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.membership-banner strong { display: block; }
.membership-banner.expired { background: #3b1220; border-color: rgba(248, 113, 113, .35); }
.paywall { text-align: center; padding: 3rem 1.2rem; background: var(--surface); border-radius: 28px; border: 1px solid var(--line); }
.paywall .price { font-size: 3rem; font-weight: 950; color: white; letter-spacing: -.055em; }

.hero-card { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 24px; color: white; background: linear-gradient(135deg, #3b0a78, #6d28d9); border: 1px solid rgba(255,255,255,.08); overflow: hidden; position: relative; }
.hero-card h2 { font-size: clamp(1.8rem, 4vw, 3rem); margin: .2rem 0 .7rem; letter-spacing: -.04em; max-width: 720px; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.hero-card h2 i { font-size: .72em; color: #ffb4e0; }
.hero-card p { color: #e8dbff; max-width: 720px; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.hero-card .chip { background: white; color: #1f1830; border-color: transparent; }
.hero-card .chip i { color: var(--pink-strong); }
.searchbar { margin-top: 1.3rem; display: flex; align-items: center; gap: .75rem; background: var(--surface); border: 1px solid var(--line); padding: .85rem 1rem; border-radius: 999px; max-width: 650px; }
.searchbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: white; }
.searchbar input::placeholder { color: var(--muted); }

.section { margin-top: 1.6rem; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.section-head h2, .section-head h3 { margin: 0; letter-spacing: -.03em; }
.grid { display: grid; gap: 1rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.card-hover { transition: transform .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); box-shadow: var(--shadow); }

.interest-cloud { display: flex; flex-wrap: wrap; gap: .65rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; padding: .57rem .75rem; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); color: #efe8ff; font-size: .84rem; font-weight: 750; }
.chip i { color: var(--pink); }
.chip.highlight { color: #120a2a; background: white; border-color: white; }
.chip.pink { color: white; background: rgba(255, 79, 178, .18); border-color: rgba(255, 79, 178, .35); }
.nav button.active .nav-icon { color: #efe8ff !important; }
.city-pill i { color: var(--pink); }
.profile-summary p i { color: var(--pink); }

.person-card { display: flex; flex-direction: column; gap: .9rem; min-height: 240px; }
.person-top { display: flex; align-items: center; gap: .85rem; }
.person-top .avatar { width: 58px; height: 58px; font-size: 1.15rem; }
.person-card h3 { margin: 0; }
.person-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.person-card .actions { margin-top: auto; display: flex; gap: .6rem; flex-wrap: wrap; }
.match-score { margin-left: auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bg-elevated); color: white; font-size: .75rem; font-weight: 900; text-align: center; border: 1px solid var(--line); }

.post-card { display: grid; gap: .85rem; }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.post-author { display: flex; align-items: center; gap: .6rem; }
.post-author .avatar { width: 38px; height: 38px; font-size: .82rem; }
.post-card h3 { margin: 0; font-size: 1.14rem; }
.post-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.post-actions { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-wrap: wrap; }

.toolbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar select, .toolbar input { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: .72rem .9rem; color: white; }
.toolbar .grow { flex: 1; min-width: 200px; }

.messages-layout {
  display: grid;
  grid-template-columns: minmax(380px, 420px) minmax(0,1fr);
  min-height: 420px;
  height: calc(100vh - 88px);
  height: calc(100dvh - 88px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}
.messages-ad-strip { display: none !important; }
.messages-layout > .conversation-list {
  min-height: 0;
}
.messages-layout > .chat {
  min-height: 0;
}
.conversation-list { border-right: 1px solid var(--line); background: var(--bg-elevated); display: flex; flex-direction: column; min-height: 0; }
.conversation-list header { flex: none; }
.conversation-list header, .chat header { padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
#conversation-items {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 181, 253, .28) transparent;
}
#conversation-items::-webkit-scrollbar { width: 4px; }
#conversation-items::-webkit-scrollbar-track { background: transparent; }
#conversation-items::-webkit-scrollbar-thumb {
  background: rgba(196, 181, 253, .28);
  border-radius: 999px;
}
.conversation-item { width: 100%; max-width: 100%; min-width: 0; border: 0; background: transparent; display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; text-align: left; border-bottom: 0; color: white; position: relative; overflow: hidden; box-sizing: border-box; }
.conversation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.conversation-row.is-active,
.conversation-row:hover { background: var(--surface); }
.conversation-row .conversation-item:hover,
.conversation-row .conversation-item.active { background: transparent; }
.conversation-delete-btn {
  flex: none;
  align-self: center;
  width: 34px;
  height: 34px;
  margin-right: .55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c4b5fd;
  opacity: .55;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.conversation-row:hover .conversation-delete-btn,
.conversation-row.is-active .conversation-delete-btn {
  opacity: .9;
}
.conversation-delete-btn:hover {
  opacity: 1;
  color: #fda4af;
  background: rgba(244, 63, 94, .12);
}
.chat-header-delete {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  font-size: .95rem;
  opacity: .75;
  cursor: pointer;
}
.chat-header-delete:hover {
  opacity: 1;
  color: #fda4af;
  background: rgba(244, 63, 94, .12);
}
.bubble-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  margin-top: .22rem;
  width: 100%;
  flex: 1 1 100%;
}
.bubble-meta small {
  display: block;
  margin: 0;
  opacity: .7;
  font-size: .68rem;
}
.bubble-meta-actions {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  margin-left: auto;
}
.bubble-delete {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  opacity: .45;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: .7rem;
  margin-left: auto;
}
.bubble.mine .bubble-delete { color: #fff; }
.bubble-delete:hover {
  opacity: 1;
  background: rgba(0, 0, 0, .18);
}
/* Smile op de bubble-hoek — plat, zonder bolletje / achtergrond */
.bubble-react-btn {
  position: absolute;
  right: -.2rem;
  bottom: -.15rem;
  z-index: 3;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #9ca3af;
  opacity: .95;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: .95rem;
  line-height: 1;
  box-shadow: none !important;
}
.bubble-react-btn i,
.bubble-react-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.bubble.mine .bubble-react-btn {
  right: auto;
  left: -.2rem;
  background: transparent !important;
  border: 0 !important;
  color: rgba(255,255,255,.88);
}
.bubble-react-btn:hover {
  opacity: 1;
  background: transparent !important;
  color: #e5e7eb;
  transform: scale(1.1);
}
.bubble.mine .bubble-react-btn:hover {
  background: transparent !important;
  color: #fff;
}
.bubble-react-btn.is-active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff;
  font-size: 1.15rem;
  opacity: 1;
}
.bubble.mine .bubble-react-btn.is-active {
  background: transparent !important;
  border: 0 !important;
}
.bubble-react-btn-emoji {
  display: block;
  line-height: 1;
  transform: translateY(.02em);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
/* Andermans reacties: ook plat, alleen emoji (+ optioneel count) */
.bubble-react-chip {
  display: inline-flex;
  align-items: center;
  gap: .12rem;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  border: 0 !important;
  background: transparent !important;
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: none !important;
}
.bubble-react-chip span {
  font-size: .7rem;
  font-weight: 700;
  opacity: .85;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.bubble-react-chip.is-mine {
  border: 0 !important;
  background: transparent !important;
}
@media (hover: hover) {
  .bubble-delete { opacity: 0; }
  .bubble:hover .bubble-delete { opacity: .7; }
  .bubble:hover .bubble-delete:hover { opacity: 1; }
}
.bubble {
  position: relative;
  padding-right: 1.15rem;
  overflow: visible;
}
.bubble.mine {
  padding-right: .85rem;
  padding-left: 1.15rem;
}
.bubble.has-reacts {
  margin-bottom: .35rem;
}
.bubble.has-reacts .bubble-react-btn:not(.is-active) {
  display: none;
}
.bubble-reacts {
  position: absolute;
  right: 1.15rem;
  bottom: -.15rem;
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  z-index: 2;
}
.bubble.mine .bubble-reacts {
  right: auto;
  left: 1.15rem;
}
.bubble.has-reacts:not(:has(.bubble-react-btn.is-active)) .bubble-reacts {
  right: -.2rem;
}
.bubble.mine.has-reacts:not(:has(.bubble-react-btn.is-active)) .bubble-reacts {
  left: -.2rem;
}
.bubble-react-picker {
  display: none;
  grid-template-columns: repeat(4, 2.35rem);
  gap: .2rem .15rem;
  justify-content: center;
  justify-items: center;
  align-items: center;
  padding: .4rem .45rem;
  border-radius: 16px;
  background: rgba(16, 12, 28, .98);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
  z-index: 120;
  width: max-content;
  max-width: calc(100vw - 1.25rem);
  box-sizing: border-box;
}
.bubble-react-picker[hidden] { display: none !important; }
.bubble-react-picker.is-open {
  display: grid;
}
@media (min-width: 821px) {
  .bubble-react-picker.is-open {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .15rem;
  }
}
.bubble-react-pick {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 1.28rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease, background .12s ease;
  flex: none;
}
.bubble-react-pick-emoji {
  font-size: 1.28rem;
  line-height: 1;
}
.bubble-react-pick:hover,
.bubble-react-pick.is-active {
  background: rgba(255,255,255,.1);
  transform: scale(1.12);
}
.conversation-item:hover, .conversation-item.active { background: var(--surface); }
.conversation-item.unread strong { font-weight: 900; }
.conversation-item.unread .conversation-preview { color: var(--ink); font-weight: 600; }
.conversation-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; min-width: 0; width: 100%; }
.conversation-item-top strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item-top time { flex: none; font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.conversation-item-body { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.conversation-item .conversation-preview { display: block; color: var(--muted); font-size: .84rem; margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.conversation-unread-dot { flex: none; min-width: 20px; height: 20px; padding: 0 .3rem; border-radius: 999px; background: var(--pink-strong); color: #fff; font-size: .68rem; font-weight: 800; display: grid; place-items: center; }
.chat { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); position: relative; overflow: hidden; }
.chat > .chat-jump { grid-row: 2; }
.chat > .chat-top-stack { grid-row: 1; min-width: 0; }
.chat > .chat-messages { grid-row: 2; min-height: 0; }
.chat > .chat-compose { grid-row: 3; }
.chat > .chat-voice-bar { grid-row: 3; }
.chat > .chat-ad,
.chat > .empty-state { grid-row: 1; }
.chat header, .chat-top { display: flex; align-items: center; gap: .55rem; }
.chat-back { display: none; flex: none; background: transparent; border: 0; width: 34px; height: 34px; border-radius: 999px; align-items: center; justify-content: center; color: inherit; font-size: 1rem; }
.chat-header-person { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 0; color: inherit; cursor: pointer; }
.chat-header-copy { min-width: 0; display: grid; gap: .05rem; }
.chat-header-person strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-header-info {
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  opacity: .85;
  cursor: pointer;
}
.chat-header-info:hover { opacity: 1; background: rgba(255,255,255,.06); }
.chat-messages { padding: 1rem; overflow-y: auto; max-height: 520px; display: flex; flex-direction: column; gap: .3rem; background: var(--bg); }
.chat-day-sep { display: flex; align-items: center; justify-content: center; margin: .9rem 0 .5rem; }
.chat-day-sep span { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; }
.bubble { max-width: min(78%, 560px); border-radius: 18px 18px 18px 5px; padding: .55rem .85rem; background: var(--surface); align-self: flex-start; line-height: 1.45; margin-top: .5rem; }
.bubble.grouped { margin-top: .12rem; border-radius: 10px 18px 18px 5px; }
.bubble.mine { align-self: flex-end; color: white; background: var(--accent); border-radius: 18px 18px 5px 18px; }
.bubble.mine.grouped { border-radius: 18px 10px 5px 18px; }
.bubble.pending { opacity: .6; }
.bubble-text { display: block; white-space: pre-wrap; word-break: break-word; }
.bubble.has-media { padding: .4rem; }
.bubble.has-media .bubble-text { padding: .35rem .45rem .1rem; }
.bubble.has-media .bubble-meta { padding: 0 .45rem .2rem; }
.bubble-media {
  display: block;
  width: 100%;
  max-width: 280px;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}
.bubble-media img,
.bubble-media video {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  background: #0b0814;
}
.bubble-media--video { cursor: default; }
.bubble-media--audio {
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: min(280px, 100%);
  padding: .45rem .55rem;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  cursor: default;
}
.bubble.mine .bubble-media--audio { background: rgba(255,255,255,.12); }
.bubble-audio-ico {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
}
.bubble-media--audio audio {
  flex: 1;
  min-width: 0;
  height: 32px;
}
.bubble-audio-dur {
  flex: none;
  font-size: .72rem;
  opacity: .8;
  font-variant-numeric: tabular-nums;
}
.chat-attach-wrap {
  position: relative;
  flex: none;
}
.chat-attach-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  min-width: 180px;
  display: grid;
  gap: .15rem;
  padding: .4rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: #16122a;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  z-index: 50;
}
.chat-attach-menu[hidden] { display: none !important; }
.chat-attach-menu button {
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: .72rem .8rem;
  border-radius: 10px;
  font-weight: 750;
  font-size: .88rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  white-space: nowrap;
}
.chat-attach-menu button:hover { background: rgba(129, 45, 226, .28); }
.chat-voice-bar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--bg-elevated);
}
.chat-voice-bar[hidden] { display: none !important; }
.chat-voice-cancel,
.chat-voice-send {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.chat-voice-cancel {
  background: rgba(248, 113, 113, .15);
  color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, .3);
}
.chat-voice-send {
  background: #812DE2;
  color: #fff;
}
.chat-voice-timer {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 3rem;
}
.chat-voice-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
}
.chat-voice-wave span {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: #ff4fb2;
  animation: chat-voice-pulse 1s ease-in-out infinite;
}
.chat-voice-wave span:nth-child(2) { animation-delay: .15s; height: 18px; }
.chat-voice-wave span:nth-child(3) { animation-delay: .3s; height: 24px; }
.chat-voice-wave span:nth-child(4) { animation-delay: .45s; height: 14px; }
@keyframes chat-voice-pulse {
  0%, 100% { transform: scaleY(.55); opacity: .65; }
  50% { transform: scaleY(1); opacity: 1; }
}
.bubble small { display: block; margin-top: .22rem; opacity: .7; font-size: .68rem; }
.bubble.bubble-enter {
  animation: bubble-slide-in .34s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--bubble-delay, 0ms);
}
.bubble.mine.bubble-enter {
  animation-name: bubble-slide-in-mine;
}
@keyframes bubble-slide-in {
  from { opacity: 0; transform: translate3d(-18px, 8px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes bubble-slide-in-mine {
  from { opacity: 0; transform: translate3d(18px, 8px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes chat-panel-slide-in {
  from { opacity: .35; transform: translate3d(28%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes chat-panel-slide-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: .2; transform: translate3d(18%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.bubble-enter,
  .messages-layout.is-chat-open .chat.chat-enter,
  .messages-layout .chat.chat-exit {
    animation: none !important;
  }
}
.chat-jump button { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: var(--bg-elevated); color: var(--ink); border-radius: 999px; padding: .5rem 1rem; font-size: .78rem; font-weight: 700; box-shadow: var(--shadow-sm); }
.chat-compose { display: flex; align-items: flex-end; gap: .7rem; padding: .8rem 1rem; border-top: 1px solid var(--line); background: var(--bg-elevated); }
.chat-compose[hidden],
.chat.is-voice-recording > .chat-compose {
  display: none !important;
}
.chat.is-voice-recording > .chat-voice-bar {
  display: flex !important;
}
.chat-compose-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: .15rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  padding: .2rem .35rem .2rem .2rem;
  min-height: 48px;
}
.chat-compose textarea {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  padding: .72rem .55rem .72rem .35rem;
  outline: none;
  background: transparent;
  resize: none;
  max-height: 120px;
  min-height: 44px;
  line-height: 1.45;
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  box-shadow: none;
}
.chat-compose textarea:focus { outline: none; box-shadow: none; }
.chat-emoji-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.15rem;
  align-self: flex-end;
  margin-bottom: .1rem;
}
.chat-emoji-btn:hover,
.chat-emoji-btn[aria-expanded="true"] {
  color: #fff;
  background: rgba(129, 45, 226, .22);
}
.chat-emoji-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  padding: .55rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: #16122a;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  max-height: 220px;
  overflow: auto;
}
.chat-emoji-panel[hidden] { display: none !important; }
.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .2rem;
}
.chat-emoji-item {
  border: 0;
  background: transparent;
  border-radius: 8px;
  aspect-ratio: 1;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.chat-emoji-item:hover { background: rgba(129, 45, 226, .28); }
.chat-send { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; }
@media (max-width: 820px) {
  .chat-compose {
    gap: .45rem;
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    align-items: flex-end;
  }
  .chat-compose-field {
    border-radius: 24px;
    min-height: 52px;
    padding: .28rem .4rem .28rem .22rem;
  }
  .chat-compose textarea {
    font-size: 16px; /* voorkomt iOS zoom + leesbaar als WhatsApp */
    line-height: 1.4;
    min-height: 48px;
    max-height: 160px;
    padding: .85rem .55rem .85rem .3rem;
  }
  .chat-emoji-btn {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
  .chat-compose-ico {
    width: 44px;
    height: 44px;
    font-size: .95rem;
  }
  .chat-send {
    width: 48px;
    height: 48px;
  }
  .chat-messages {
    padding: .85rem .75rem 1rem;
    gap: .35rem;
  }
  .bubble {
    max-width: min(86%, 560px);
    font-size: 1.02rem;
    line-height: 1.45;
    padding: .7rem .95rem;
  }
  .bubble small {
    font-size: .72rem;
  }
  .chat-emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .chat-emoji-panel { max-height: 200px; }
}
@media (max-width: 640px) {
  .chat-emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .chat-emoji-panel { max-height: 180px; }
}
.empty-state { min-height: 320px; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--muted); }
.empty-state i { font-size: 1.8rem; color: var(--pink); margin-bottom: .6rem; }

.profile-grid { display: grid; grid-template-columns: 330px minmax(0,1fr); gap: 1.2rem; align-items: start; }
.profile-summary { position: sticky; top: 102px; text-align: center; }
.profile-summary .avatar { width: 96px; height: 96px; margin: 0 auto 1rem; font-size: 2rem; }
.profile-summary h2 { margin: 0; }
.profile-summary p { color: var(--muted); line-height: 1.55; }

.profile-page {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0;
}
.profile-edit-bar {
  margin-bottom: .75rem;
}
.profile-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .25rem 0 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: .35rem;
}
.profile-avatar-btn {
  position: relative;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  border-radius: 14px;
}
.profile-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
}
.profile-points-badge {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 3;
  border: 1.5px solid rgba(251, 191, 36, .55);
  background: rgba(12, 8, 24, .92);
  color: #fff;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.05;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .25s ease, box-shadow .28s ease;
}
.profile-points-badge:active {
  transform: scale(.94);
}
.profile-points-badge strong {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.profile-points-badge span {
  font-size: .52rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  text-transform: lowercase;
}
.profile-points-badge.is-open,
.profile-points-badge[aria-expanded="true"] {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, .22), 0 4px 14px rgba(0, 0, 0, .35);
  transform: scale(1.04);
}
.profile-engage-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
  pointer-events: none;
  transition:
    grid-template-rows .42s cubic-bezier(.22, 1, .36, 1),
    opacity .32s ease,
    margin .42s cubic-bezier(.22, 1, .36, 1);
}
.profile-engage-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.profile-engage-panel .engage-card {
  transform: translateY(-10px) scale(.985);
  opacity: .55;
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    opacity .32s ease;
}
.profile-engage-panel.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: .35rem 0 1rem;
  pointer-events: auto;
}
.profile-engage-panel.is-open .engage-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.profile-engage-panel[hidden] {
  display: none;
}
.profile-engage-panel.is-animating[hidden] {
  display: grid !important;
}
@media (prefers-reduced-motion: reduce) {
  .profile-points-badge,
  .profile-engage-panel,
  .profile-engage-panel .engage-card {
    transition: none !important;
  }
}
.profile-avatar-btn .avatar,
.profile-avatar-btn .avatar.avatar-xl {
  width: 112px !important;
  height: 112px !important;
  border-radius: 14px !important;
  overflow: hidden;
  aspect-ratio: 1;
}
.profile-avatar-btn .avatar-photo.avatar-brand {
  padding: 3px;
  box-sizing: border-box;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ff4fb2, #812DE2 55%, #6d28d9);
}
.profile-avatar-btn .avatar-photo img,
.profile-avatar-btn .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 11px !important;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.profile-avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #1b1139;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: .85rem;
  box-shadow: 0 4px 12px rgba(18, 10, 42, .25);
  z-index: 2;
}
.profile-top-copy { min-width: 0; flex: 1; }
.profile-top-copy h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: -.03em;
  color: #1a1523;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem .65rem;
  line-height: 1.15;
}
.profile-top-name { min-width: 0; }
.profile-invite-inline {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  color: #a78bfa;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
}
.profile-invite-inline i { font-size: .72rem; }
.profile-invite-inline:hover { color: #c4b5fd; text-decoration: underline; }
.profile-top-meta,
.profile-top-zodiac {
  margin: .3rem 0 0;
  color: #7a7189;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .28rem;
  line-height: 1.35;
}
.profile-top-zodiac { margin-top: .15rem; }
.profile-zodiac-ico {
  display: inline-flex;
  align-items: center;
  color: #fbbf24;
  line-height: 0;
}
.profile-zodiac-ico svg,
.profile-zodiac-svg {
  width: 15px;
  height: 15px;
  display: block;
}
.profile-age-hidden {
  display: inline-flex;
  align-items: center;
  color: #a39bb8;
  margin-left: .15rem;
}
.profile-age-hidden i { font-size: .78rem; }
.profile-top-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.profile-form { display: grid; gap: 1rem; }
.profile-section {
  padding: 1.25rem 0;
  border-bottom: 1px solid #f0ebf6;
  display: grid;
  gap: 1rem;
}
.profile-section h3 {
  margin: 0;
  font-size: 1.05rem;
  color: #1a1523;
  letter-spacing: -.02em;
}
.profile-section .form-row { gap: 1rem 1.1rem; }
.profile-hint { margin: -.35rem 0 0; color: #7a7189; font-size: .9rem; }
.profile-page .field input,
.profile-page .field textarea,
.profile-page .field select {
  border-radius: 10px;
  background: #faf9fc;
  border: 1px solid #ebe6f2;
  color: #1a1523;
  min-height: 46px;
  box-sizing: border-box;
  font-size: .95rem;
  line-height: 1.25;
  box-shadow: none;
}
.profile-page .field textarea.profile-bio,
.profile-page .field .profile-bio {
  min-height: 160px;
  line-height: 1.45;
  resize: vertical;
}
.profile-page .field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6280' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 12px 8px;
  padding-right: 2.4rem;
}
.profile-page .field input:focus,
.profile-page .field textarea:focus,
.profile-page .field select:focus {
  border-color: #c4b5fd;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
  outline: none;
}
.gender-custom-wrap {
  display: none;
  margin-top: .55rem;
}
.gender-custom-wrap.is-open { display: block; }
.gender-custom-wrap input {
  width: 100%;
}

.toggle-field { display: inline-flex; align-items: center; gap: .55rem; margin-top: .7rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.toggle-field input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.toggle-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #e4dff2; transition: background .18s ease; }
.toggle-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(24,19,31,.28); transition: transform .18s ease; }
.toggle-field input:checked + .toggle-switch { background: #812DE2; }
.toggle-field input:checked + .toggle-switch::after { transform: translateX(16px); }
.toggle-field input:focus-visible + .toggle-switch { outline: 2px solid var(--pink); outline-offset: 2px; }
.toggle-text { font-size: .84rem; font-weight: 650; color: #5b5370; }
.toggle-field-block { display: flex; width: 100%; padding: .9rem 1rem; border: 1px solid #ebe6f2; border-radius: 14px; background: #faf9fc; margin-top: 0; }

.personality-card { position: relative; overflow: hidden; border: 1px solid #ebe6f2; border-radius: 16px; padding: 1.1rem; background: #faf9fc; }
.personality-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--pcolor, #7c3aed); }
.personality-card-head { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .3rem; }
.personality-emoji { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 1.7rem; box-shadow: 0 2px 8px rgba(24,19,31,.08); }
.personality-card-head strong { display: block; font-size: 1.05rem; color: #1a1523; letter-spacing: -.01em; }
.personality-card-head p { margin: .2rem 0 0; color: #7a7189; font-size: .86rem; line-height: 1.45; }
.personality-card-actions { display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #f0ebf6; }
.personality-card-actions .toggle-field { margin-top: 0; }

.personality-invite { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; border-radius: 16px; background: linear-gradient(135deg, rgba(255,88,184,.08), rgba(124,58,237,.1)); border: 1px solid #ecdcf7; }
.personality-invite-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: #fff; display: grid; place-items: center; font-size: 1.25rem; color: #c026d3; box-shadow: 0 2px 10px rgba(124,58,237,.15); }
.personality-invite-copy strong { display: block; color: #1a1523; font-size: 1rem; }
.personality-invite-copy p { margin: .3rem 0 0; color: #7a7189; font-size: .86rem; line-height: 1.45; }
.personality-invite .btn { flex: none; margin-left: auto; }

.trait-bars { display: grid; gap: .95rem; }
.trait-bar-label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .84rem; font-weight: 700; color: #5b5370; margin-bottom: .4rem; }
.trait-bar-label strong { color: #1a1523; font-variant-numeric: tabular-nums; }
.trait-bar-track { height: 10px; border-radius: 999px; background: #ece7f5; overflow: hidden; }
.trait-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #812DE2, #ff4fb2); min-width: 2px; transition: width .35s ease; }

.personality-badge { display: inline-flex; align-items: center; gap: .4rem; margin-top: .6rem; padding: .38rem .75rem; border-radius: 999px; background: #f3eeff; border: 1px solid #ecdcf7; font-weight: 800; font-size: .82rem; color: #1a1523; }
.personality-badge { background: color-mix(in srgb, var(--pcolor, #7c3aed) 14%, white); border-color: color-mix(in srgb, var(--pcolor, #7c3aed) 32%, white); }
.personality-badge-emoji { font-size: 1rem; line-height: 1; }

.personality-match { margin-top: 1rem; padding: .9rem 1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(255,88,184,.1), rgba(124,58,237,.12)); border: 1px solid #ecdcf7; display: flex; align-items: center; gap: .9rem; }
.personality-match-value { flex: none; font-size: 1.5rem; font-weight: 900; color: #1a1523; }
.personality-match span:last-child { font-size: .84rem; color: #5b21b6; font-weight: 650; line-height: 1.35; }

.quiz-page { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; min-height: calc(100vh - 260px); padding: .4rem 0 2rem; color: #fff; }
.quiz-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem; }
.quiz-head .icon-btn { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #efe8ff; flex: none; }
.quiz-head-result { justify-content: flex-end; }
.quiz-progress { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.quiz-progress-fill { display: block; height: 100%; border-radius: 999px; background: #812DE2; transition: width .3s ease; }
.quiz-counter { flex: none; font-size: .8rem; font-weight: 800; color: #a39bb8; min-width: 42px; text-align: right; }
.quiz-body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 1rem 0 1.5rem; text-align: center; }
.quiz-body .eyebrow { justify-content: center; display: flex; color: #ff7ad9; }
.quiz-question { margin: .7rem 0 2rem; font-size: 1.45rem; line-height: 1.35; color: #fff; letter-spacing: -.02em; }
.quiz-scale { display: flex; justify-content: center; gap: .6rem; margin-bottom: .9rem; flex-wrap: wrap; }
.quiz-scale-btn { border: 0; background: transparent; padding: .3rem; cursor: pointer; }
.quiz-scale-dot { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #cfc7e2; font-weight: 800; font-size: 1.05rem; transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.quiz-scale-btn:hover .quiz-scale-dot { border-color: #c4b5fd; }
.quiz-scale-btn.active .quiz-scale-dot { background: #812DE2; border-color: transparent; color: #fff; transform: scale(1.08); box-shadow: 0 6px 16px rgba(129,45,226,.35); }
.quiz-scale-labels { display: flex; justify-content: space-between; font-size: .76rem; color: #a39bb8; font-weight: 700; width: min(380px, 100%); margin: 0 auto; }
.quiz-footer { display: flex; justify-content: space-between; gap: .8rem; padding-top: 1rem; flex-wrap: wrap; }
.quiz-footer .btn {
  flex: 1;
  min-width: 140px;
  border-radius: 10px;
  font-weight: 700;
}
.quiz-footer .btn-ghost,
.quiz-footer .btn-secondary {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  box-shadow: none;
}
.quiz-footer .btn-primary {
  background: rgba(129, 45, 226, .22);
  border: 1px solid rgba(196, 181, 253, .35);
  color: #efe8ff;
  box-shadow: none;
}
.quiz-page .toggle-field-block {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: #efe8ff;
}
.quiz-page .toggle-field-block .toggle-text {
  color: #efe8ff;
  font-weight: 650;
}
.quiz-page .toggle-switch {
  background: rgba(255,255,255,.18);
}
.result-hero { text-align: center; padding: 1.7rem 1.2rem 1.9rem; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); margin-bottom: 1.3rem; }
.result-hero .eyebrow { color: #ff7ad9; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
.result-emoji { display: grid; place-items: center; width: 64px; height: 64px; margin: .55rem auto .45rem; border-radius: 18px; background: color-mix(in srgb, var(--pcolor, #812DE2) 22%, transparent); color: var(--pcolor, #ff7ad9); }
.result-emoji .lucide-icon { width: 1.85rem !important; height: 1.85rem !important; stroke-width: 2; }
.result-emoji > i,
.result-emoji .fa-solid {
  font-size: 1.85rem;
  line-height: 1;
  color: inherit;
}
.personality-emoji > i,
.personality-emoji .fa-solid,
.personality-badge-ico > i,
.personality-badge-ico .fa-solid,
.mpro-type-ico > i,
.mpro-type-ico .fa-solid {
  font-size: 1.35rem;
  line-height: 1;
  color: inherit;
}
.result-hero h2 { margin: .2rem 0; font-size: 1.6rem; color: #fff; letter-spacing: -.02em; }
.result-hero p { margin: .5rem auto 0; max-width: 440px; color: #a39bb8; line-height: 1.5; }
.result-traits { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.15rem 1.2rem; margin-bottom: 1.3rem; }
.result-traits h3 { margin: 0 0 1rem; font-size: .95rem; color: #fff; }
.result-traits .trait-bar-label { color: #cfc7e2; }
.result-traits .trait-bar-label strong { color: #fff; }
.result-traits .trait-bar-track { height: 12px; background: rgba(255,255,255,.12); }
.result-traits .trait-bar-fill { background: linear-gradient(90deg, var(--pcolor, #812DE2), #ff4fb2); }
@media (max-width: 460px) {
  .personality-invite { flex-direction: column; text-align: center; }
  .personality-invite .btn { margin-left: 0; }
  .quiz-scale { gap: .35rem; }
  .quiz-scale-dot { width: 42px; height: 42px; font-size: .92rem; }
  .quiz-question { font-size: 1.25rem; }
}

.intent-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid #ddd6fe;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.intent-tab {
  position: relative;
  margin: 0;
  cursor: pointer;
  min-width: 0;
}
.intent-tab input { position: absolute; opacity: 0; pointer-events: none; }
.intent-tab span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 48px;
  padding: .65rem .45rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 750;
  color: #6b6280;
  background: #fff;
  border-right: 1px solid #ebe6f2;
  border-bottom: 1px solid #ebe6f2;
  line-height: 1.2;
}
.intent-tab:nth-child(3n) span { border-right: 0; }
.intent-tab:nth-last-child(-n+3) span { border-bottom: 0; }
.intent-tab i { color: #a78bfa; font-size: .85rem; }
.intent-tab.active span,
.intent-tab input:checked + span {
  background: #f3eeff;
  color: #5b21b6;
}
.intent-tab.active i,
.intent-tab input:checked + span i { color: #c026d3; }
.interest-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin-top: .65rem;
  align-items: stretch;
}
.interest-pick-chip {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #e8e4f0;
  border-radius: 10px;
  padding: .55rem .5rem;
  font-weight: 650;
  font-size: .8rem;
  line-height: 1;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  min-height: 2.35rem;
  box-sizing: border-box;
  text-align: center;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.interest-pick-chip .lucide-icon,
.interest-pick-chip svg,
.interest-pick-chip i {
  color: #b0a8c2;
  width: .9rem !important;
  height: .9rem !important;
  flex: 0 0 .9rem;
  display: block;
  margin: 0;
  vertical-align: middle;
  stroke-width: 2;
}
.interest-pick-chip:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
}
.interest-pick-chip.active {
  background: rgba(255, 79, 178, .14);
  border-color: rgba(255, 79, 178, .45);
  color: #fff;
}
.interest-pick-chip.active .lucide-icon,
.interest-pick-chip.active svg,
.interest-pick-chip.active i { color: #ff8ec8; }
.interest-pick-chip i.chip-remove {
  color: rgba(255,255,255,.55);
  opacity: 1;
  font-size: .72em;
  margin-left: .12rem;
}
.interest-pick-custom {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 10px;
  padding: .28rem .28rem .28rem .65rem;
  min-height: 34px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 420px) {
  .interest-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.interest-pick-custom input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: .8rem;
  font-weight: 600;
  color: #efe8ff;
  width: 118px;
  min-width: 0;
  line-height: 1.2;
}
.interest-pick-custom input::placeholder { color: #8b849c; font-weight: 550; }
.interest-pick-add {
  border: 0;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.interest-pick-add:hover { background: rgba(255, 79, 178, .35); }
.profile-upload-panel {
  display: grid;
  justify-items: start;
  gap: .75rem;
}
.profile-dropzone {
  position: relative;
  border: 1.5px dashed rgba(196, 181, 253, .55);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  width: 100%;
  max-width: 280px;
  min-height: 140px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  color: #d6d0e6;
}
.profile-dropzone.has-photo {
  width: 148px;
  height: 148px;
  min-height: 0;
  max-width: none;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: transparent;
  padding: 0;
}
.profile-dropzone img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.profile-dropzone-edit {
  position: absolute;
  inset: auto 0 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .45rem .5rem .55rem !important;
  background: linear-gradient(180deg, transparent, rgba(8,4,20,.78));
  border-radius: 0 0 13px 13px;
  color: #fff;
  font-size: .72rem;
  font-weight: 750;
  width: 100%;
}
.profile-dropzone-edit i { font-size: .8rem !important; color: #fff !important; }
.profile-dropzone span {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: 1.2rem;
  text-align: center;
}
.profile-dropzone strong { font-size: .95rem; color: #fff; }
.profile-dropzone small { color: #a39bb8; font-weight: 600; }
.profile-dropzone i { font-size: 1.4rem; color: #c4b5fd; }
.profile-photo-pick { justify-self: start; }
.media-add {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  border: 1.5px dashed #c4b5fd;
  background: #faf8ff;
  color: #5b21b6;
  display: grid;
  place-items: center;
  gap: .15rem;
  font-size: .75rem;
  font-weight: 750;
}
.profile-save-bar {
  position: sticky;
  top: 82px;
  z-index: 14;
  display: grid;
  gap: .35rem;
  margin: 0 0 1rem;
  padding: .65rem 0 .55rem;
  background: linear-gradient(180deg, rgba(18, 10, 42, .98) 40%, rgba(18, 10, 42, .88) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.profile-save-bar .btn { width: 100%; }
.profile-save-status {
  min-height: 1em;
  font-size: .78rem;
  font-weight: 650;
  color: rgba(255,255,255,.55);
  text-align: center;
}
.profile-save-status[data-kind="ok"] { color: #86efac; }
.profile-save-status[data-kind="pending"] { color: #c4b5fd; }
.profile-save-status[data-kind="error"] { color: #fca5a5; }
.profile-save-status[data-kind="saving"] { color: #ddd6fe; }
.profile-page--edit {
  padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
}

.stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 1rem; }
.stat { padding: 1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); text-align: left; color: inherit; width: 100%; }
.admin-stats .stat { cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.admin-stats .stat:hover { border-color: rgba(255,255,255,.25); transform: translateY(-2px); }
.admin-ad-stats .stat { cursor: default; }
.rev-kpis .stat { cursor: default; }
.rev-kpis .stat:hover { transform: none; }
.admin-subscriptions .stats .stat { cursor: default; }
.admin-subscriptions .stats .stat:hover { transform: none; }
.admin-subscriptions {
  display: grid;
  gap: 1.25rem;
}
.admin-sub-stats {
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-sub-table {
  margin-top: .25rem;
}
.admin-sub-table table {
  min-width: 920px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.admin-sub-table th,
.admin-sub-table td {
  padding: .95rem 1rem;
  vertical-align: middle;
}
.admin-sub-table th {
  padding-top: 1rem;
  padding-bottom: .75rem;
}
.admin-sub-user {
  display: grid;
  gap: .2rem;
  min-width: 12rem;
}
.admin-sub-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  min-width: 17rem;
}
.admin-sub-plan {
  flex: 1 1 11.5rem;
  min-width: 11.5rem;
  max-width: 16rem;
  margin: 0;
  padding: .55rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0b0a15;
  color: #f5f3ff;
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.3;
  color-scheme: dark;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #c7c0d8 50%),
    linear-gradient(135deg, #c7c0d8 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 3px),
    calc(100% - 11px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.admin-sub-plan:focus {
  outline: none;
  border-color: rgba(129, 45, 226, .65);
  box-shadow: 0 0 0 3px rgba(129, 45, 226, .22);
}
.admin-sub-plan option {
  background: #12101f;
  color: #f5f3ff;
}
@media (max-width: 900px) {
  .admin-sub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.rev-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 1.25rem;
}
.rev-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .85rem;
}
.rev-kpi strong {
  display: block;
  margin-top: .35rem;
  font-size: 1.45rem;
  letter-spacing: -.03em;
}
.rev-kpi--main {
  grid-column: span 1;
  background: linear-gradient(145deg, rgba(124, 58, 237, .22), rgba(15, 23, 42, .55));
  border-color: rgba(167, 139, 250, .35);
}
.rev-chart-card { margin-top: 1rem; }
.rev-chart {
  display: flex;
  align-items: flex-end;
  gap: .35rem;
  min-height: 180px;
  padding: 1rem .25rem .35rem;
  border-top: 1px solid var(--line);
  margin-top: .85rem;
  overflow-x: auto;
}
.rev-bar {
  flex: 1 1 0;
  min-width: 18px;
  max-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 160px;
  gap: .35rem;
}
.rev-bar-stack {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
  min-height: 4px;
  background: rgba(255,255,255,.04);
}
.rev-seg { display: block; width: 100%; min-height: 0; }
.rev-seg--ads { background: #a78bfa; }
.rev-seg--tips { background: #34d399; }
.rev-seg--plus { background: #60a5fa; }
.rev-bar-label {
  font-size: .62rem;
  color: var(--muted, #94a3b8);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rev-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: .85rem;
}
.rev-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.rev-dot {
  width: .65rem;
  height: .65rem;
  border-radius: 999px;
  display: inline-block;
}
.rev-dot--ads { background: #a78bfa; }
.rev-dot--tips { background: #34d399; }
.rev-dot--plus { background: #60a5fa; }
@media (max-width: 900px) {
  .rev-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .rev-kpis { grid-template-columns: 1fr; }
}

.admin-personality-profiles {
  display: grid;
  gap: 1.5rem;
}
.admin-personality-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.admin-personality-stats .stat {
  cursor: default;
  padding: 1.1rem 1.15rem;
}
.admin-personality-stats .stat:hover { transform: none; }
.admin-personality-stats .stat strong {
  display: block;
  margin-top: .35rem;
  font-size: 1.55rem;
  letter-spacing: -.03em;
}
.admin-personality-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
}
.admin-chart-card {
  padding: 1.15rem 1.2rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.admin-chart-head h3 {
  margin: 0 0 .25rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.admin-chart-head p { margin: 0; }
.admin-chart-body {
  display: grid;
  gap: .7rem;
}
.admin-chart-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) 44px;
  gap: .65rem;
  align-items: center;
}
.admin-chart-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  font-size: .86rem;
  font-weight: 650;
}
.admin-chart-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-chart-label strong { font-weight: 800; }
.admin-chart-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.admin-chart-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  min-width: 0;
  transition: width .35s ease;
}
.admin-chart-pct {
  text-align: right;
  font-size: .78rem;
  font-weight: 750;
  color: var(--muted);
}
.admin-gender-balance {
  display: grid;
  gap: .55rem;
}
.admin-gender-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.admin-gender-man,
.admin-gender-vrouw {
  display: block;
  height: 100%;
  min-width: 0;
}
.admin-gender-man { background: #60a5fa; }
.admin-gender-vrouw { background: #f472b6; }
.admin-gender-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.1rem;
  font-size: .8rem;
  font-weight: 650;
  color: var(--muted);
}
.admin-gender-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .35rem;
  vertical-align: middle;
}
.admin-personality-table {
  margin-top: .25rem;
}
@media (max-width: 900px) {
  .admin-personality-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-personality-charts {
    grid-template-columns: 1fr;
  }
  .admin-chart-row {
    grid-template-columns: minmax(0, 1fr) 40px;
    grid-template-areas:
      "label pct"
      "track track";
  }
  .admin-chart-label { grid-area: label; }
  .admin-chart-track { grid-area: track; }
  .admin-chart-pct { grid-area: pct; }
}
.admin-ad-stats .stat:hover { transform: none; }
.stat strong { display: block; font-size: 1.65rem; color: white; margin: .2rem 0; }
.admin-quick { display: grid; gap: .65rem; margin-top: 1rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .4rem; position: relative; overflow: visible; }
.admin-row-menu {
  position: relative;
  display: inline-block;
}
.admin-row-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  user-select: none;
}
.admin-row-menu > summary::-webkit-details-marker { display: none; }
.admin-row-menu > summary::marker { content: ''; }
.admin-row-menu-btn i {
  font-size: .72rem;
  opacity: .75;
  transition: transform .15s ease;
}
.admin-row-menu[open] > .admin-row-menu-btn i {
  transform: rotate(180deg);
}
.admin-row-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 168px;
  display: grid;
  gap: .2rem;
  padding: .4rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: #1a1233;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  z-index: 40;
}
.admin-row-menu-item {
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: .72rem .8rem;
  border-radius: 9px;
  font-weight: 750;
  font-size: .86rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  cursor: pointer;
  width: 100%;
}
.admin-row-menu-item:hover { background: rgba(255,255,255,.08); }
.admin-row-menu-item.is-danger { color: #fca5a5; }
.admin-row-menu-item.is-danger:hover { background: rgba(248, 113, 113, .12); }
.admin-user-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 14rem;
}
.admin-user-cell-main {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex: 1;
}
.admin-user-meta {
  min-width: 0;
}
.admin-user-meta strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-av-btn {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
}
.admin-user-avatar,
.admin-user-av-btn .avatar {
  width: 42px;
  height: 42px;
  font-size: .78rem;
  border-radius: 50%;
}
.admin-user-av-btn .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.admin-users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.admin-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: rgba(255,255,255,.88);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.admin-filter-chip input {
  accent-color: #22c55e;
  width: 14px;
  height: 14px;
  margin: 0;
}
.admin-filter-chip:has(input:checked) {
  border-color: rgba(34, 197, 94, .55);
  background: rgba(34, 197, 94, .12);
  color: #fff;
}
.admin-users-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  margin-left: .45rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  font-size: .72em;
  font-weight: 800;
  letter-spacing: 0;
  vertical-align: middle;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 79, 178, .9), rgba(124, 58, 237, .95));
  box-shadow: 0 4px 14px rgba(124, 58, 237, .35);
}
.admin-online-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .22);
}
.admin-waitlist-remove {
  color: #f87171;
  border-color: rgba(248, 113, 113, .35);
  background: rgba(248, 113, 113, .1);
}
.admin-waitlist-remove:hover {
  color: #fff;
  background: #b91c1c;
  border-color: #b91c1c;
}
.toolbar-search { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: .72rem .9rem; color: white; min-width: 220px; }
.admin-shell .bottom-nav { grid-template-columns: repeat(5, 1fr); }
.admin-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.admin-section-head .toolbar-search {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 360px;
}
.admin-groups-list {
  display: grid;
  gap: .75rem;
}
.admin-group-card {
  display: grid;
  gap: .85rem;
  padding: 1rem;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  min-width: 0;
}
.admin-group-card-title {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  text-align: left;
  color: #f5a3d4;
  line-height: 1.3;
  word-break: break-word;
}
.admin-group-card-meta {
  margin: .25rem 0 0;
  line-height: 1.4;
  word-break: break-word;
}
.admin-group-card-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: .55rem;
}
.admin-group-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.admin-groups-empty {
  margin: 0;
  padding: 1rem;
}
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; -webkit-overflow-scrolling: touch; }
.table-wrap--menus { overflow: visible; }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th, td { padding: .8rem .9rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .88rem; }
th { color: var(--muted); background: var(--bg-elevated); }
.status { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .4rem .62rem; font-size: .76rem; font-weight: 800; }
.status.active { color: #065f46; background: #a7f3d0; }
.status.trial { color: #5b21b6; background: #ddd6fe; }
.status.inactive, .status.banned { color: #991b1b; background: #fecaca; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(8, 4, 20, .72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 1rem; }
.lightbox-backdrop {
  background: rgba(4, 2, 12, .92) !important;
  padding: .5rem !important;
  z-index: 200 !important;
  overscroll-behavior: none;
  align-content: center;
}
.modal.modal--lightbox {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: min(960px, 100%) !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
}
.lightbox {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(70dvh, 520px);
  width: 100%;
  max-height: 100dvh;
}
.lightbox-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: min(50dvh, 420px);
  max-height: calc(100dvh - 2rem);
}
.lightbox-img,
.lightbox-media {
  max-width: 100%;
  max-height: min(82dvh, 860px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  background: #0b0814;
  -webkit-user-drag: none;
  user-select: none;
  touch-action: pinch-zoom;
}
.lightbox-video {
  width: min(960px, 100%);
  max-height: min(82dvh, 860px);
  background: #000;
}
@media (max-width: 820px) {
  .lightbox-backdrop {
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .modal.modal--lightbox {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    display: grid;
    place-items: center;
  }
  .lightbox {
    min-height: 100%;
    max-height: 100%;
    width: 100%;
    padding: env(safe-area-inset-top, 0) .5rem env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
  }
  .lightbox-stage {
    min-height: 0;
    max-height: calc(100dvh - 5rem);
  }
  .lightbox-img,
  .lightbox-media,
  .lightbox-video {
    max-height: calc(100dvh - 5.5rem);
    max-width: calc(100vw - 1rem);
    border-radius: 8px;
  }
}
.lightbox-close {
  position: fixed;
  top: calc(.75rem + env(safe-area-inset-top, 0px));
  right: calc(.75rem + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(18, 10, 42, .85);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(18, 10, 42, .8);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
}
.lightbox-prev { left: .25rem; }
.lightbox-next { right: .25rem; }
.lightbox-pos {
  position: absolute;
  bottom: .35rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(8, 6, 18, .75);
  color: #efe8ff;
  font-size: .78rem;
  font-weight: 700;
}
.modal {
  width: min(680px, 100%);
  max-height: 90vh;
  overflow-x: hidden;
  overflow-y: auto;
  background: #151225;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.15rem 1.55rem 1.3rem;
  color: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 181, 253, .35) rgba(255, 255, 255, .04);
}
.modal::-webkit-scrollbar { width: 8px; }
.modal::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .04);
  border-radius: 999px;
  margin: .6rem 0;
}
.modal::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 122, 217, .45), rgba(129, 45, 226, .5));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 122, 217, .65), rgba(129, 45, 226, .7));
  background-clip: padding-box;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.modal-head h2 { margin: 0; color: #fff; }
.modal .eyebrow { color: #ff7ad9; }
.modal .muted { color: #a39bb8; }
.modal--confirm {
  width: min(420px, 100%);
  padding: 1.15rem 1.1rem 1.25rem;
}
.confirm-modal-msg {
  margin: 0 0 1.1rem;
  line-height: 1.45;
  font-size: .95rem;
}
.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: flex-end;
  margin-top: .35rem;
}
.confirm-actions .btn {
  min-height: 42px;
  min-width: 7.5rem;
  justify-content: center;
}
@media (max-width: 520px) {
  .modal--confirm { width: 100%; }
  .confirm-actions {
    flex-direction: column-reverse;
  }
  .confirm-actions .btn {
    width: 100%;
    min-width: 0;
  }
}
.modal .field > label { color: #efe8ff; }
.modal,
#modal-root {
  color-scheme: dark;
}
.modal .field input,
.modal .field textarea,
.modal .field select,
#modal-root .field select,
#modal-root select {
  background: #2a1d52 !important;
  border: 1px solid rgba(192, 132, 252, .35) !important;
  color: #fff !important;
  color-scheme: dark;
  appearance: none;
  -webkit-appearance: none;
}
.modal .field select,
#modal-root .field select,
#modal-root select {
  background-color: #2a1d52 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23e9d5ff' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .95rem center !important;
  background-size: 12px 8px !important;
  padding-right: 2.4rem !important;
}
.modal .field select option,
.modal select option,
#modal-root select option,
#modal-root .field select option {
  background-color: #2a1d52 !important;
  color: #efe8ff !important;
}
.modal .ad-choice-row,
#modal-root .ad-choice-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: .45rem;
}
.modal .ad-choice-row .doel-chip span,
#modal-root .ad-choice-row .doel-chip span {
  padding: .65rem .85rem !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: #efe8ff !important;
  box-shadow: none !important;
}
.modal .ad-choice-row .doel-chip input:checked + span,
#modal-root .ad-choice-row .doel-chip input:checked + span {
  background: rgba(129,45,226,.35) !important;
  border-color: #812DE2 !important;
  color: #fff !important;
}
#modal-root select {
  background: #2a1d52 !important;
  color: #fff !important;
  color-scheme: dark;
}
#modal-root select option {
  background: #2a1d52 !important;
  color: #efe8ff !important;
}
.clist-ad,
.chat-ad {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 3;
  min-height: 88px;
}
.clist-ad {
  flex: none;
  padding: .65rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0, 0, 0, .18);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* Desktop berichten: ad altijd zichtbaar onder zoekbalk */
body.view-messages .clist-ad {
  display: block !important;
  visibility: visible !important;
  min-height: 96px;
}
body.view-messages .clist-ad .ad-slot {
  display: grid !important;
}
.clist-ad-fallback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 72px;
  padding: .7rem .9rem;
  border-radius: 14px;
  border: 1px dashed rgba(255,159,208,.35);
  background: #16122b;
  color: #efe8ff;
  font-size: .86rem;
  font-weight: 700;
}
.clist-ad-fallback span { color: #a39bb8; font-weight: 600; font-size: .78rem; }
.clist-ad .ad-rotate,
.chat-ad .ad-rotate {
  min-height: 72px;
}
.clist-ad .ad-slot--banner {
  margin: 0;
  border-radius: 14px;
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.14);
  background: #16122b;
  max-width: 100%;
  overflow: hidden;
}
.clist-ad .ad-slot--banner img,
.clist-ad .ad-slot--banner .ad-slot-media video {
  max-height: 100px;
  min-height: 56px;
}
.clist-ad .ad-slot--banner .ad-slot-label,
.chat-ad .ad-slot--banner .ad-slot-label,
.mpro-ad-rail .ad-slot--banner .ad-slot-label {
  display: none;
}
.clist-ad .ad-slot--banner .ad-slot-body,
.chat-ad .ad-slot--banner .ad-slot-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .55rem .8rem;
  min-width: 0;
  overflow: hidden;
}
.clist-ad .ad-slot--banner .ad-slot-body strong,
.chat-ad .ad-slot--banner .ad-slot-body strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
  white-space: normal;
  font-size: .82rem;
  line-height: 1.25;
}
.clist-ad .ad-slot--banner .ad-slot-body small,
.chat-ad .ad-slot--banner .ad-slot-body small {
  display: none !important;
}
.clist-ad .ad-slot--banner .ad-slot-cta,
.chat-ad .ad-slot--banner .ad-slot-cta {
  flex: 0 0 auto;
  margin-left: 0;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 800;
}
.chat-top-stack {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
  min-width: 0;
  overflow: hidden;
}
.chat-top-stack .chat-top,
.chat-top-stack .chat header {
  border-bottom: 0;
}
.chat-ad {
  display: block;
  padding: .65rem .85rem .55rem;
  background: rgba(0, 0, 0, .18);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.chat-ad .ad-slot--banner {
  margin: 0;
  border-radius: 14px;
  min-height: 78px;
  border: 1px solid rgba(255,255,255,.14);
  background: #16122b;
  max-width: 100%;
  overflow: hidden;
}
.chat-ad .ad-slot--banner img,
.chat-ad .ad-slot--banner .ad-slot-media video {
  max-height: 110px;
  min-height: 56px;
}
.mpro-ad {
  margin: 0;
  width: 100%;
  min-width: 0;
}
.mpro-ad .ad-slot--banner {
  margin: 0;
}
.mpro-ad-rail {
  display: none;
}
.mpro-ad-mobile {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: .15rem 0 .35rem;
  box-sizing: border-box;
}
.mpro-ad-rail .ad-slot--banner {
  border-radius: 18px;
  overflow: hidden;
}
.mpro-ad-rail .ad-slot--placeholder {
  min-height: 110px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.14);
  color: #8b849c;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mpro-ad-rail .ad-slot--banner img,
.mpro-ad-rail .ad-slot--banner .ad-slot-media video {
  max-height: 120px;
}
.mpro-ad-mobile .ad-slot--sidebar {
  margin: 0 auto;
}
.modal .field input::placeholder,
.modal .field textarea::placeholder { color: #8b849c; }
.modal .icon-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  color: #efe8ff;
}

/* Slide-out drawer (Nieuwe oproep) */
.drawer-backdrop {
  display: block;
  padding: 0;
  background: rgba(6, 3, 16, .55);
}
.drawer-backdrop .drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(720px, 100vw);
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.1);
  padding: 0;
  overflow: hidden;
  background: #120a2a;
  transform: translateX(100%);
  transition: transform .28s ease;
  box-shadow: -24px 0 60px rgba(0,0,0,.45);
}
.drawer-backdrop.is-open .drawer-panel { transform: translateX(0); }
.drawer-backdrop.is-full { background: rgba(6, 3, 16, .72); }
.drawer-backdrop .drawer-panel--full {
  width: 100vw;
  max-width: 100vw;
  border-left: 0;
  background: #0b0a15;
}
.drawer-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.group-create-sheet .drawer-head {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  align-items: flex-start;
}
.drawer-head .drawer-close,
.group-create-sheet .drawer-close {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  max-width: 42px;
  max-height: 42px;
  padding: 0;
  flex: 0 0 42px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  align-self: flex-start;
  box-sizing: border-box;
}
.group-create-form .drawer-body,
.group-create-form .drawer-foot {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
.group-rules {
  margin-top: .35rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  background: rgba(129, 45, 226, .12);
  border: 1px solid rgba(216, 180, 254, .22);
}
.group-rules h3 {
  margin: 0 0 .45rem;
  font-size: .98rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.group-rules h3 i { color: #d8b4fe; }
.group-rules > p {
  margin: 0 0 .65rem;
  color: #b7aec9;
  font-size: .86rem;
  line-height: 1.45;
}
.group-rules ul {
  margin: 0 0 .9rem;
  padding: 0 0 0 1.1rem;
  color: #efe8ff;
  font-size: .9rem;
  line-height: 1.55;
  display: grid;
  gap: .28rem;
}
.group-rules-accept {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  cursor: pointer;
  color: #efe8ff;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.4;
}
.group-rules-accept input {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #812DE2;
  flex: none;
}
.group-create-form .group-emoji-pick {
  gap: .55rem;
}
.group-create-form .group-emoji-opt span {
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
  color: #ff7ad9;
}
.group-create-form .group-emoji-opt span i {
  font-size: 1.2rem;
  color: inherit;
  line-height: 1;
}
.group-create-form .group-emoji-opt input:checked + span {
  color: #fff;
}
.group-create-form .interest-pick-chip i {
  color: #ff7ad9;
}
.group-create-form .drawer-foot .btn-primary .group-leader-ico {
  background-color: #fff;
  width: 1.15em;
  height: 1.15em;
  margin-right: .15rem;
}
.group-age-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}
.group-age-row input[type="number"] {
  width: 7.5rem;
  max-width: 100%;
}
.group-audience-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  margin-top: .45rem;
  color: #d8cfff;
  font-size: .82rem;
  font-weight: 650;
}
.group-audience-meta span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.group-audience-meta i { color: #ff7ad9; }
.group-banner-field { width: 100%; }
.group-banner-edit {
  display: grid;
  gap: .65rem;
  width: 100%;
}
.group-banner-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1530;
  border: 1px solid rgba(255,255,255,.12);
}
.group-banner-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.group-banner-frame .media-remove {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 2;
}
.group-banner-empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 140px;
  border-radius: 16px;
  border: 1.5px dashed rgba(216, 180, 254, .35);
  background: rgba(255,255,255,.04);
  color: #efe8ff;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .35rem;
  cursor: pointer;
  padding: 1rem;
  font: inherit;
}
.group-banner-empty i {
  font-size: 1.45rem;
  color: #ff7ad9;
}
.group-banner-empty span {
  font-weight: 750;
  font-size: .95rem;
}
.group-banner-empty small {
  color: #8b829e;
  font-size: .78rem;
}
.group-banner-edit .btn-secondary {
  justify-self: start;
}
/* Override oproep-drawer 88px cover height for group banner */
.group-create-form.oproep-drawer-form .post-cover-thumb,
.group-create-form.oproep-drawer-form .post-cover-add {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex: none;
}
.drawer-head h2 { margin: .15rem 0 .25rem; font-size: 1.45rem; letter-spacing: -.02em; }
.drawer-lead { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.oproep-drawer-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.drawer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.25rem 1.2rem;
  display: grid;
  gap: .85rem;
  align-content: start;
}
.drawer-foot {
  flex: none;
  padding: .85rem 1.25rem calc(.95rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(18,10,42,.6), #120a2a);
}
.drawer-foot .btn-primary {
  border-radius: 999px;
  background: var(--accent);
  border: 0;
  box-shadow: none;
}
.cat-chips.doel-row,
.cat-chips.doel-row-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .55rem !important;
}
.cat-chips .cat-chip span {
  justify-content: flex-start;
  min-height: 48px;
  text-align: left;
}
.cat-chips .cat-chip i {
  color: #ff7ad9;
  font-size: .95rem;
  width: 1.1rem;
  text-align: center;
}
.cat-chips .cat-chip input:checked + span i {
  color: #ff7ad9;
}
.event-invite-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin: 0 0 1rem;
}
.event-invite-tab {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #d6d0e6;
  border-radius: 12px;
  padding: .7rem .75rem;
  font-weight: 750;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  cursor: pointer;
}
.event-invite-tab.is-on {
  background: #812DE2;
  border-color: #812DE2;
  color: #fff;
}
.event-invite-tab:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.event-invite-panel[hidden] { display: none !important; }
.doel-row-compact {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem !important;
}
.doel-row-compact .doel-chip span { padding: .7rem .8rem; }
.oproep-when-field {
  display: grid;
  gap: .45rem;
  position: relative;
  z-index: 2;
}
.oproep-when-field.is-picking {
  z-index: 120;
}
.post-body-field {
  position: relative;
  z-index: 1;
}
.oproep-when-row {
  display: grid;
  grid-template-columns: 1.35fr .9fr;
  gap: .55rem;
  align-items: start;
}
.nl-datepicker,
.nl-timepicker {
  position: relative;
  min-width: 0;
}
.nl-datepicker-trigger,
.nl-timepicker-trigger {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(8, 6, 18, .45);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  padding: .55rem .75rem;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.nl-datepicker-trigger i,
.nl-timepicker-trigger i { color: #c4b5fd; }
.nl-datepicker-label,
.nl-timepicker-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nl-datepicker-panel,
.nl-timepicker-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 130;
  padding: .75rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: #161225;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  isolation: isolate;
}
.nl-datepicker-panel.is-floating,
.nl-timepicker-panel.is-floating {
  position: fixed !important;
  right: auto !important;
  background: #161225 !important;
  opacity: 1 !important;
  z-index: 6000 !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .65);
}
form.is-when-picking .post-body-field,
form.is-when-picking .rich-toolbar,
form.is-when-picking .rich-editor {
  pointer-events: none;
}
.nl-datepicker-panel[hidden],
.nl-timepicker-panel[hidden] { display: none !important; }
.nl-timepicker-panel {
  min-width: 168px;
  right: 0;
  left: auto;
  width: max(168px, 100%);
}
.nl-time-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  max-height: 220px;
}
.nl-time-col {
  overflow: auto;
  display: grid;
  gap: .15rem;
  padding: .15rem;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  max-height: 220px;
  scrollbar-width: thin;
}
.nl-time-opt {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 750;
  padding: .45rem .2rem;
  cursor: pointer;
}
.nl-time-opt:hover { background: rgba(167,139,250,.18); }
.nl-time-opt.is-selected {
  background: #812DE2;
  color: #fff;
}
.nl-time-foot {
  display: flex;
  justify-content: space-between;
  margin-top: .55rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.nl-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .55rem;
}
.nl-cal-head-center {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  text-align: center;
}
.nl-cal-head.is-birth .nl-cal-head-center {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem .45rem;
}
.nl-cal-month {
  font-size: .92rem;
  text-transform: capitalize;
  letter-spacing: -.01em;
}
.nl-cal-year {
  appearance: none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,6,18,.55);
  color: #fff;
  border-radius: 10px;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  padding: .28rem .55rem;
  max-width: 7.5rem;
  cursor: pointer;
}
.nl-cal-day.is-disabled {
  opacity: .28;
  cursor: not-allowed;
  pointer-events: none;
}
.birth-datepicker {
  width: 100%;
}
.nl-cal-title {
  font-size: .92rem;
  text-transform: capitalize;
  letter-spacing: -.01em;
}
.nl-cal-nav {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.nl-cal-nav:hover { background: rgba(167,139,250,.2); }
.nl-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .15rem;
  margin-bottom: .25rem;
}
.nl-cal-weekdays span {
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8b849c;
  padding: .2rem 0;
}
.nl-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .15rem;
}
.nl-cal-day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.nl-cal-day:hover { background: rgba(167,139,250,.18); }
.nl-cal-day.is-muted { color: #6b6580; }
.nl-cal-day.is-today { box-shadow: inset 0 0 0 1px rgba(196,181,253,.55); }
.nl-cal-day.is-selected {
  background: #812DE2;
  color: #fff;
  box-shadow: none;
}
.nl-cal-foot {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .55rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.nl-cal-link {
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
  padding: .2rem 0;
}
.nl-cal-link:hover { color: #fff; }
.oproep-when-hint {
  margin: 0;
  font-size: .78rem;
  font-weight: 650;
  color: #c4b5fd;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .oproep-when-row {
    grid-template-columns: 1fr 1fr;
  }
}
.oproep-media-stack {
  display: grid;
  gap: 1rem;
  width: 100%;
}
.oproep-media-cover {
  display: grid;
  gap: .55rem;
  width: 100%;
  min-width: 0;
}
.oproep-media-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  width: 100%;
}
.oproep-media-extra {
  min-width: 0;
}
.oproep-media-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: .75rem;
}
.oproep-drawer-form .media-add {
  width: 72px;
  height: 72px;
}
.oproep-drawer-form textarea { min-height: 84px; resize: vertical; }
@media (max-width: 720px) {
  .drawer-backdrop .drawer-panel { width: 100vw; }
  .oproep-media-row { grid-template-columns: 1fr; }
  .doel-row-compact { grid-template-columns: 1fr; }
}
.toast-root {
  position: fixed;
  left: 50%;
  right: auto;
  top: calc(16px + env(safe-area-inset-top, 0px));
  bottom: auto;
  transform: translateX(-50%);
  z-index: 200;
  display: grid;
  gap: .45rem;
  width: min(420px, calc(100vw - 2rem));
  pointer-events: none;
}
@media (max-width: 820px) {
  .toast-root {
    top: calc(70px + env(safe-area-inset-top, 0px));
    width: min(420px, calc(100vw - 1.5rem));
  }
  .toast-root.is-points {
    top: calc(70px + env(safe-area-inset-top, 0px));
  }
  .toast {
    min-width: 0;
    font-size: .92rem;
  }
}
.toast-root.is-points {
  left: auto;
  right: max(.75rem, env(safe-area-inset-right, 0px));
  top: calc(12px + env(safe-area-inset-top, 0px));
  bottom: auto;
  transform: none;
  width: min(320px, calc(100vw - 1.5rem));
  justify-items: end;
}
.toast-root .toast { pointer-events: auto; width: 100%; max-width: none; }
.toast {
  min-width: 260px;
  max-width: 420px;
  padding: .9rem 1rem;
  border-radius: 15px;
  background: rgba(11, 6, 24, .78);
  color: white;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: toast-in .22s ease;
}
.toast.error { background: rgba(127, 29, 29, .78); border-color: rgba(252, 165, 165, .28); }
.toast.success { background: rgba(6, 95, 70, .78); border-color: rgba(110, 231, 183, .28); }
.toast.points {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  width: auto;
  max-width: 100%;
  min-width: 0;
  padding: .7rem .85rem;
  background: linear-gradient(135deg, rgba(76, 29, 149, .82), rgba(131, 24, 67, .82));
  border-color: rgba(251, 191, 36, .35);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  animation: toast-in-right .32s cubic-bezier(.22, 1, .36, 1);
}
.toast.points strong { display: block; font-size: .88rem; letter-spacing: -.01em; }
.toast.points small { display: block; margin-top: .15rem; color: rgba(255,255,255,.78); font-size: .76rem; font-weight: 600; }
.toast-points-ico {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(251, 191, 36, .2);
  color: #fbbf24;
  font-size: .85rem;
}
@keyframes toast-in { from { transform: translateY(-10px); opacity: 0; } }
@keyframes toast-in-right {
  from { transform: translateX(110%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.bottom-nav { display: none; }
.install-tip { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.user-topbar { justify-content: space-between; gap: .6rem; display: flex; align-items: center; }
.user-topbar .topbar-brand { justify-self: start; display: none; }
.user-topbar .topbar-alerts { margin-left: auto; }
.topbar-brand { display: inline-flex; align-items: center; }
.admin-view-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar:has(.admin-view-title) {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.topbar:has(.admin-view-title) .topbar-brand {
  display: inline-flex;
  flex: none;
}
.topbar:has(.admin-view-title) .admin-view-title {
  flex: 1;
}
.topbar:has(.admin-view-title) .top-actions {
  margin-left: auto;
  flex: none;
}
.topbar-alerts {
  display: flex;
  align-items: center;
  gap: .45rem;
  position: relative;
}
.app-guide-btn {
  color: #e9d5ff !important;
  border-color: rgba(216, 180, 254, .35) !important;
  background: rgba(129, 45, 226, .18) !important;
}
.app-guide-btn:hover {
  background: rgba(129, 45, 226, .32) !important;
  color: #fff !important;
}

/* Pagina-uitleg: vaste dock — altijd in beeld (geen scroll nodig) */
.page-tip--dock {
  position: fixed;
  z-index: 85;
  left: 50%;
  bottom: 1.35rem;
  transform: translateX(-50%);
  width: min(520px, calc(100vw - 2rem));
  max-height: min(46vh, 380px);
  margin: 0;
  padding: .9rem 1rem;
  overflow: auto;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(28, 16, 58, .97), rgba(18, 10, 42, .98));
  border: 1px solid rgba(255, 159, 208, .32);
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  -webkit-overflow-scrolling: touch;
}
.page-tip-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: start;
}
.page-tip-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #812DE2, #D641E7);
  color: #fff;
  font-size: 1rem;
  flex: none;
}
.page-tip-kicker {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffb4db;
  margin-bottom: .15rem;
}
.page-tip-copy strong {
  display: block;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  margin-bottom: .2rem;
}
.page-tip-copy p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: .88rem;
  line-height: 1.4;
  font-weight: 600;
}
.page-tip-close {
  flex: none;
  margin-top: -.1rem;
}
.page-tip-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.page-tip .btn-sm {
  min-height: 40px;
  padding: .45rem .9rem;
  font-size: .84rem;
  flex: 1 1 auto;
  justify-content: center;
  max-width: 11rem;
}
body.page-tip-open .content {
  padding-bottom: calc(110px + min(46vh, 380px));
}
@media (max-width: 899px) {
  .page-tip--dock {
    left: .55rem;
    right: .55rem;
    width: auto;
    transform: none;
    bottom: calc(66px + env(safe-area-inset-bottom, 0px));
    max-height: min(40vh, 320px);
    padding: .8rem .85rem;
    border-radius: 16px;
  }
  .page-tip-inner {
    grid-template-columns: auto 1fr;
    column-gap: .6rem;
  }
  .page-tip-close {
    grid-column: 2;
    justify-self: end;
    margin-top: -2rem;
  }
  .page-tip-copy {
    padding-right: 1.9rem;
  }
  .page-tip-actions {
    flex-wrap: nowrap;
  }
  .page-tip .btn-sm {
    max-width: none;
    min-width: 0;
  }
  body.page-tip-open .content,
  body.page-tip-open .user-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + min(40vh, 320px) + .75rem) !important;
  }
}
.topbar-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 36px;
  padding: 0 .85rem;
  border: 0;
  border-radius: 999px;
  background: #812DE2;
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .12s ease;
}
.topbar-invite-btn:hover { background: #6d24c0; }
.topbar-invite-btn:active { transform: scale(.97); }
.topbar-invite-btn i { font-size: .85rem; }
@media (max-width: 520px) {
  .topbar-invite-btn span { display: none; }
  .topbar-invite-btn { width: 36px; padding: 0; justify-content: center; border-radius: 12px; }
}
.profile-top-actions .topbar-alerts { margin-left: 0; }

.user-topbar--profile {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.global-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.profile-top-search {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .7rem 1rem;
}
.profile-top-search i { color: #9ca3af; flex-shrink: 0; }
.profile-top-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font: inherit;
}
.profile-top-search input::placeholder { color: #8b849c; }
.profile-top-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
}
.global-search-panel {
  position: absolute;
  top: calc(100% + .45rem);
  left: 0;
  right: 0;
  z-index: 80;
  max-height: min(70vh, 420px);
  overflow: auto;
  background: #16122b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem;
  padding: .55rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.global-search-group + .global-search-group { margin-top: .45rem; }
.global-search-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8b849c;
  padding: .35rem .55rem;
}
.global-search-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-align: left;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: .75rem;
  padding: .55rem .65rem;
  cursor: pointer;
  font: inherit;
}
.global-search-item:hover,
.global-search-item:focus-visible {
  background: rgba(255,255,255,.06);
  outline: none;
}
.global-search-item .avatar {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0;
}
.global-search-item strong {
  display: block;
  font-size: .92rem;
  font-weight: 650;
}
.global-search-item small {
  display: block;
  color: #9ca3af;
  font-size: .78rem;
  margin-top: .1rem;
}
.global-search-emoji {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  flex-shrink: 0;
  font-size: 1rem;
}
.global-search-empty {
  margin: 0;
  padding: .85rem .7rem;
  color: #9ca3af;
  font-size: .9rem;
}

.notify-wrap { position: relative; }
.notify-btn,
.friend-req-btn,
.header-chat-btn {
  position: relative;
  background: var(--surface);
  border-color: var(--line);
  color: white;
}
.user-topbar .notify-btn,
.user-topbar .friend-req-btn,
.user-topbar .header-chat-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: #efe8ff;
}
.friend-req-btn,
.header-chat-btn,
.notify-btn {
  overflow: visible;
}
.friend-req-btn .notify-badge {
  background: #ff4fb2;
}
.notify-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ef4444;
  color: white;
  font-size: .65rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0 4px;
  pointer-events: none;
}
.notify-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(6, 3, 16, .62);
  cursor: pointer;
}
.notify-backdrop[hidden] { display: none !important; }
.notify-portal {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
}
.notify-portal .notify-panel {
  pointer-events: auto;
}
.notify-wrap {
  position: relative;
}
body.notify-open .topbar,
body.notify-open .user-topbar {
  z-index: 90;
}
.notify-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(360px, calc(100vw - 1.5rem));
  max-height: min(70vh, 480px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #16122b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
  z-index: 95;
  padding: .75rem;
}
.notify-panel[hidden] { display: none !important; }
.notify-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .65rem;
  padding: 0 .15rem .55rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky;
  top: 0;
  background: #16122b;
  z-index: 1;
}
.notify-panel-head strong { color: #fff; font-size: .95rem; }
.notify-panel-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.notify-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #efe8ff !important;
  flex: none;
}
@media (max-width: 820px) {
  .notify-panel,
  .notify-panel.notify-panel--ported {
    position: fixed;
    left: 1rem;
    right: 1rem;
    top: calc(68px + env(safe-area-inset-top, 0px));
    width: auto;
    max-height: min(72dvh, 520px);
    z-index: 96;
    transform: translateZ(0);
  }
  .notify-portal {
    z-index: 96;
  }
}
html.body-scroll-locked,
body.body-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}
body.body-scroll-locked {
  touch-action: none;
}
body.lightbox-open .lightbox-backdrop {
  overscroll-behavior: none;
}
.notify-group { margin-bottom: .55rem; }
.notify-group-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8b849c;
  margin: .35rem 0 .4rem .15rem;
}
.notify-item {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: .65rem;
  align-items: start;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: .55rem .45rem;
  border-radius: 14px;
  cursor: pointer;
}
.notify-item.is-unread { background: rgba(255,79,178,.08); }
.notify-item:hover { background: rgba(255,255,255,.05); }
.notify-item .avatar { width: 40px; height: 40px; font-size: .75rem; }
.notify-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(124,58,237,.25);
  color: #d8b4fe;
}
.notify-item-body strong {
  display: block;
  color: #fff;
  font-size: .86rem;
  line-height: 1.3;
}
.notify-item-body small {
  display: block;
  margin-top: .15rem;
  color: #a39bb8;
  font-size: .74rem;
}
.notify-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .45rem;
}
.notify-empty {
  margin: .5rem 0;
  padding: .85rem .5rem;
  text-align: center;
  color: #a39bb8;
  font-size: .86rem;
}

.home-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .85rem; align-items: center; }
.home-pill { border: 1px solid var(--line); background: var(--surface); color: white; border-radius: 999px; padding: .62rem .85rem; font-weight: 750; font-size: .78rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; }
.home-pill.accent { background: linear-gradient(135deg, rgba(255,79,178,.18), rgba(124,58,237,.2)); border-color: rgba(255,79,178,.35); color: white; justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.25; flex: 1 1 180px; }
.home-pill.accent i.fa-crown { color: var(--pink); }
.home-pill.danger { background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.35); }
.home-pill--subtle {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fbbf24;
  padding: .2rem .15rem;
  font-size: .8rem;
  font-weight: 700;
  gap: .35rem;
  border-radius: 0;
}
.home-pill--subtle .lucide-icon,
.home-pill--subtle i,
.home-pill--subtle svg {
  color: #fbbf24;
  stroke: #fbbf24;
  opacity: .9;
}
.home-pill--subtle.is-plus { color: #fbbf24; opacity: .85; }
.home-pill--subtle:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.engage-pill {
  border: 1px solid rgba(251, 191, 36, .35);
  background: linear-gradient(135deg, rgba(251,191,36,.16), rgba(124,58,237,.18));
  color: #fff;
  border-radius: 999px;
  padding: .62rem .9rem;
  font-weight: 800;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.engage-pill i { color: #fbbf24; }
.engage-pill strong { font-size: .95rem; letter-spacing: -.02em; }
.engage-pill span { opacity: .75; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.engage-card {
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(251,191,36,.1), rgba(124,58,237,.14));
  border: 1px solid rgba(251,191,36,.28);
  color: #fff;
}
.engage-card.eligible {
  border-color: rgba(74, 222, 128, .45);
  background: linear-gradient(135deg, rgba(74,222,128,.12), rgba(124,58,237,.16));
}
.engage-card-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
}
.engage-card-main {
  min-width: 0;
  flex: 1;
}
.engage-card .eyebrow {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: .28rem;
}
.engage-goal {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.35;
}
.engage-bar-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .55rem;
}
.engage-bar {
  flex: 1;
  min-width: 0;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.engage-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #ff4fb2);
}
.engage-pct {
  flex: none;
  font-size: .78rem;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  min-width: 2rem;
  text-align: right;
}
.engage-ring {
  --pct: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1.05;
  background:
    radial-gradient(circle at center, rgba(18,10,42,.94) 57%, transparent 58%),
    conic-gradient(#fbbf24 calc(var(--pct) * 1%), rgba(255,255,255,.12) 0);
}
.engage-ring strong {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.03em;
}
.engage-ring span {
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  text-transform: lowercase;
}
.engage-howto {
  margin-top: .55rem;
}
.engage-howto > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 750;
  color: rgba(255,255,255,.88);
  user-select: none;
}
.engage-howto > summary::-webkit-details-marker { display: none; }
.engage-howto > summary i {
  font-size: .62rem;
  opacity: .8;
  transition: transform .18s ease;
}
.engage-howto[open] > summary i { transform: rotate(180deg); }
.engage-howto > summary:hover { color: #fff; }
.engage-rates {
  list-style: none;
  margin: .55rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.engage-rates li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .5rem .15rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.engage-rates li:last-child { border-bottom: 0; padding-bottom: .15rem; }
.engage-rate-ico {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(251,191,36,.12);
  color: #fbbf24;
  font-size: .78rem;
}
.engage-rates strong {
  display: block;
  font-size: .84rem;
  font-weight: 750;
  color: rgba(255,255,255,.92);
  line-height: 1.25;
}
.engage-rates strong em {
  font-style: normal;
  font-weight: 800;
  color: #fbbf24;
  margin-left: .25rem;
}
.engage-rates small {
  display: block;
  margin-top: .12rem;
  font-size: .72rem;
  font-weight: 550;
  color: rgba(255,255,255,.55);
  line-height: 1.35;
}
.ipage-howto-details {
  margin-top: 0;
}
.ipage-howto-details > summary {
  color: rgba(255,255,255,.72);
}
.ipage-howto-details > summary:hover { color: #fff; }
.user-shell .ipage-howto-details > summary { color: rgba(255,255,255,.72); }
.user-shell .ipage-howto-details > summary:hover { color: #fff; }
.ipage-rates.engage-rates li {
  border-bottom-color: rgba(255,255,255,.07);
}
.profile-page > .engage-card { margin-bottom: 1.1rem; }
.invite-screen > .engage-card { margin-bottom: 1rem; }
.home-hello h2 { margin: 0 0 .35rem; font-size: 1.55rem; letter-spacing: -.03em; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; line-height: 1.15; }
.home-hello h2 i { color: #ffb4e0; font-size: .95rem; }
.home-hello p { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; line-height: 1.45; }
.home-search { display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .9rem 1rem; margin-bottom: .4rem; }
.home-search i { color: var(--muted); font-size: .95rem; }
.home-search input { flex: 1; border: 0; outline: 0; background: transparent; color: white; font-size: .92rem; }
.home-search input::placeholder { color: #7d6f99; }
.home-section { margin-top: 1.35rem; }
.section-head.tight { margin-bottom: .75rem; align-items: center; display: flex; justify-content: space-between; gap: .75rem; }
.section-head.tight h3 { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.text-link { border: 0; background: transparent; color: var(--pink); font-weight: 800; font-size: .82rem; padding: 0; white-space: nowrap; }
.vibe-row { display: flex; gap: .55rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.vibe-row::-webkit-scrollbar { display: none; }
.vibe-chip { flex: 0 0 auto; border: 0; background: white; color: #1f1830; border-radius: 999px; padding: .58rem .82rem; font-weight: 750; font-size: .82rem; display: inline-flex; align-items: center; gap: .42rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.vibe-chip i { color: var(--pink-strong); font-size: .88rem; }

.people-rail { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: none; }
.people-rail::-webkit-scrollbar { display: none; }
.person-rail-card { flex: 0 0 132px; border: 0; background: transparent; text-align: left; padding: 0; color: inherit; cursor: pointer; }
.person-rail-photo { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; background: #2a1d52; }
.person-rail-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.person-rail-initials { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2rem; font-weight: 900; color: white; letter-spacing: -.04em; }
.online-dot { position: absolute; top: 10px; right: 10px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid rgba(18, 10, 42, .85); z-index: 2; }
.person-rail-overlay { position: absolute; inset: auto 0 0; padding: 2.2rem .65rem .65rem; background: linear-gradient(180deg, rgba(18,10,42,0) 0%, rgba(18,10,42,.55) 38%, rgba(18,10,42,.88) 100%); color: white; text-align: left; }
.person-rail-overlay strong { display: block; font-size: .88rem; font-weight: 800; margin-bottom: .12rem; }
.person-rail-distance { display: flex; align-items: center; gap: .25rem; font-size: .72rem; color: rgba(255,255,255,.88); margin-bottom: .18rem; }
.person-rail-distance i { font-size: .62rem; color: var(--purple); }
.person-rail-interests { display: block; font-size: .68rem; color: rgba(255,255,255,.78); line-height: 1.25; }

.featured-card { display: grid; grid-template-columns: 96px 1fr; gap: .8rem; background: white; color: #1f1830; border-radius: 20px; padding: .8rem; align-items: stretch; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.featured-media { width: 96px; min-height: 96px; border-radius: 16px; overflow: hidden; background: #efe9ff; }
.featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 96px; }
.featured-body { display: flex; flex-direction: column; min-width: 0; }
.featured-body strong { display: flex; align-items: center; gap: .35rem; margin-bottom: .35rem; font-size: .95rem; line-height: 1.2; }
.featured-body strong i { color: #7c3aed; font-size: .82rem; }
.featured-meta { margin: 0 0 .18rem; color: #6b6280; font-size: .76rem; display: flex; align-items: center; gap: .35rem; }
.featured-meta .meta-icon { color: var(--pink-strong); font-size: .72rem; width: .85rem; }
.featured-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .45rem; }
.facepile { display: flex; align-items: center; min-width: 0; }
.facepile .avatar, .facepile-avatar, .facepile-photo { width: 26px; height: 26px; font-size: .58rem; border: 2px solid white; margin-left: -7px; box-shadow: none; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; }
.facepile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.facepile .avatar:first-child, .facepile-avatar:first-child, .facepile-photo:first-child { margin-left: 0; }
.facepile-more { margin-left: .35rem; min-width: 26px; height: 26px; border-radius: 50%; background: #efe9ff; color: #6b6280; font-size: .68rem; font-weight: 800; display: grid; place-items: center; border: 2px solid white; flex-shrink: 0; }
.facepile-label { margin-left: .4rem; font-size: .74rem; font-weight: 800; color: #6b6280; white-space: nowrap; }
.featured-go { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #7c3aed; color: white; display: grid; place-items: center; flex-shrink: 0; font-size: .82rem; }

.oproep-list { display: grid; gap: .7rem; }
.oproep-banner { width: 100%; border: 0; display: grid; grid-template-columns: 52px 1fr auto; gap: .75rem; align-items: center; background: white; color: #1f1830; border-radius: 18px; padding: .85rem .9rem; text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.oproep-banner-icon { width: 52px; height: 52px; border-radius: 14px; background: #dcfce7; color: #16a34a; display: grid; place-items: center; font-size: 1.15rem; }
.oproep-banner-body strong { display: block; font-size: .9rem; line-height: 1.3; margin-bottom: .35rem; }
.oproep-banner-meta { display: flex; flex-wrap: wrap; gap: .65rem; color: #8a829c; font-size: .74rem; font-weight: 650; }
.oproep-banner-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.oproep-banner-meta i { color: #a8a0b8; font-size: .72rem; }
.oproep-banner-chevron { color: #c4bdd4; font-size: .85rem; padding-right: .15rem; }

.cat-chips { width: 100%; }
.cat-chip { cursor: pointer; position: relative; min-width: 0; }
.post-cover {
  margin: -.2rem -.2rem .85rem;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #2a1d52;
}
.post-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: .55rem 0 .75rem;
}
.post-media-item {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #2a1d52;
  display: block;
}
.post-media-item img,
.post-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-media-video { aspect-ratio: 16 / 10; grid-column: span 2; }
.epost-media {
  margin: .75rem 0 1rem;
}
.epost-media .post-media-video {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  justify-self: center;
}
.epost-media--video {
  grid-template-columns: 1fr;
  justify-items: center;
}
.epost-media--video .post-media-video {
  width: min(100%, 720px);
  max-width: 100%;
  aspect-ratio: 16 / 9;
}
.epost-media .post-media-video video {
  object-fit: contain;
  background: #0b0814;
}
.post-cover-edit {
  display: block;
  width: 100%;
  min-width: 0;
}
.banner-search {
  margin: 0;
  display: grid;
  gap: .45rem;
  width: 100%;
}
.banner-search-row {
  display: flex;
  gap: .5rem;
  align-items: stretch;
  width: 100%;
}
.banner-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(8, 6, 18, .45);
  color: #fff;
  font: inherit;
  font-size: .86rem;
  padding: .55rem .8rem;
  box-sizing: border-box;
}
.banner-search-input::placeholder { color: #8b849c; }
.banner-search-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 42px;
}
.banner-search-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin-top: .1rem;
}
.banner-search-nav[hidden] { display: none !important; }
.banner-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.banner-nav-btn:disabled {
  opacity: .35;
  cursor: default;
}
.banner-nav-btn:not(:disabled):hover {
  background: rgba(167, 139, 250, .18);
  border-color: rgba(196, 181, 253, .35);
}
.banner-search-pos {
  font-size: .78rem;
  font-weight: 750;
  color: #c4b5fd;
  min-width: 3.2rem;
  text-align: center;
}
.banner-search-hint {
  margin: 0;
  font-size: .72rem;
  color: #8b849c;
  line-height: 1.4;
}
.banner-search-credit,
.cover-credit,
.cover-credit-host {
  display: none !important;
}
.banner-search-credit a,
.cover-credit a {
  color: #d8b4fe;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.epost-cover-wrap .cover-credit,
.group-hero .cover-credit {
  display: none !important;
}
.post-cover-thumb,
.post-cover-add {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  max-height: none;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  padding: 0;
  margin: 0;
}
.oproep-drawer-form .post-cover-thumb,
.oproep-drawer-form .post-cover-add,
.oproep-drawer-form .media-add.post-cover-add {
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9;
}
.post-cover-add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .3rem;
  color: #c4bdd4;
  cursor: pointer;
  background: rgba(255,255,255,.04);
  font: inherit;
}
.post-cover-add > i { font-size: 1.15rem; color: #c4b5fd; }
.post-cover-add > span { font-weight: 750; color: #fff; font-size: .9rem; }
.post-cover-add > small { font-size: .72rem; color: #8b849c; font-weight: 600; }
.post-cover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-cover-upload-btn {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  z-index: 2;
  border: 0;
  border-radius: 10px;
  padding: .45rem .7rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  color: #fff;
  background: rgba(12, 8, 24, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.post-cover-thumb .media-remove {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 2;
}
.oproep-form .media-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}
.oproep-form .media-thumb img,
.oproep-form .media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.oproep-form .media-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(18,10,42,.85);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .7rem;
}
.oproep-form .media-add {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
  color: #e9d5ff;
}
.doel-row { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.doel-row-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.doel-row-3 .doel-chip span {
  flex-direction: column;
  gap: .28rem;
  padding: .7rem .3rem;
  font-size: .78rem;
  line-height: 1.15;
  text-align: center;
  min-height: 4.1rem;
}
.doel-row-3 .doel-chip span em {
  font-style: normal;
  font-weight: 750;
}
.doel-row-3 .doel-chip i { font-size: .95rem; }
.doel-chip { cursor: pointer; position: relative; }
.doel-chip input { position: absolute; opacity: 0; pointer-events: none; }
.doel-chip span { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-weight: 750; color: #efe8ff; transition: background .15s ease, border-color .15s ease; }
.doel-chip input:checked + span { background: rgba(129,45,226,.28); color: #fff; border-color: #812DE2; box-shadow: 0 0 0 1px rgba(129,45,226,.35); }
.doel-chip i { color: var(--pink); }
.doel-chip input:checked + span i { color: #ff7ad9; }

.nav-create { display: grid; place-items: center; align-self: stretch; position: relative; }
.nav-create-btn { width: 56px; height: 56px; margin-top: -26px; border-radius: 50%; background: #7c3aed; color: white; display: grid; place-items: center; font-size: 1.35rem; box-shadow: 0 8px 20px rgba(124, 58, 237, .35); }
.nav-icon-badge { position: relative; display: inline-grid; place-items: center; }
.nav-badge { position: absolute; top: -6px; right: -10px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff4fb2; color: white; font-size: .62rem; font-weight: 800; display: grid; place-items: center; line-height: 1; }

.invite-screen { max-width: 560px; margin: 0 auto; }
.invite-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: .75rem; }
.invite-head h2 { margin: 0 0 .35rem; font-size: 1.8rem; letter-spacing: -.03em; color: #1a1523; }
.invite-intro { color: #7a7189; line-height: 1.55; margin: 0 0 1.2rem; }
.invite-block { margin-bottom: 1rem; }
.invite-label { display: flex; justify-content: space-between; font-weight: 750; margin-bottom: .5rem; font-size: .9rem; color: #1a1523; }
.invite-emails { background: white; color: #1f1830; border-radius: 12px; padding: .9rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border: 1px solid #ebe6f2; }
.email-chip { display: inline-flex; align-items: center; gap: .4rem; background: #efe8ff; color: #4c1d95; border-radius: 8px; padding: .45rem .7rem; font-weight: 750; font-size: .84rem; }
.email-chip button { border: 0; background: transparent; color: #7c3aed; padding: 0; }
.invite-add-row { width: 100%; display: grid; gap: .45rem; }
.invite-add-row input { width: 100%; border: 1px solid #e7e0f0; border-radius: 10px; padding: .7rem .8rem; background: #faf8ff; color: #1f1830; }
.invite-message { width: 100%; min-height: 110px; border: 1px solid #ebe6f2; border-radius: 12px; padding: 1rem; background: white; color: #1f1830; resize: vertical; }
.invite-tags { display: none; }
.invite-tag { display: none; }
.invite-status { margin-top: 1rem; background: #f7f4fb; border: 1px solid #ebe6f2; border-radius: 16px; padding: .9rem 1rem; display: flex; gap: .7rem; align-items: flex-start; color: #7a7189; font-size: .9rem; }
.invite-status i { color: var(--pink); margin-top: .15rem; }
.invite-history { display: grid; gap: .55rem; }
.invite-history-row { display: flex; justify-content: space-between; gap: .7rem; align-items: center; background: #fff; border: 1px solid #ebe6f2; border-radius: 14px; padding: .75rem .85rem; color: #1a1523; }
.invite-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 1.2rem;
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: #f7f4fb;
  border: 1px solid #ebe6f2;
  color: #1a1523;
}
.invite-summary-main strong {
  display: block;
  font-size: 2rem;
  letter-spacing: -.04em;
  line-height: 1;
  color: #1a1523;
}
.invite-summary-main span {
  display: block;
  margin-top: .35rem;
  color: #7a7189;
  font-size: .9rem;
  font-weight: 650;
}
.invite-summary-meta {
  display: grid;
  gap: .25rem;
  text-align: right;
  color: #5b21b6;
  font-size: .84rem;
  font-weight: 750;
}
.invite-track {
  margin: 0 0 1.35rem;
  padding: 1.15rem 1rem 1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #ebe6f2;
}
.invite-track-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #efe8ff;
  overflow: hidden;
  margin: .35rem .55rem 1.15rem;
}
.invite-track-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4fb2, #7c3aed);
  transition: width .35s ease;
}
.invite-track-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
}
.invite-track-point {
  display: grid;
  justify-items: center;
  gap: .35rem;
  text-align: center;
  color: #7a7189;
}
.invite-track-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f3eeff;
  border: 2px solid #ddd6fe;
  color: #7c3aed;
  font-size: .78rem;
}
.invite-track-point strong {
  font-size: .95rem;
  letter-spacing: -.02em;
  color: #1a1523;
}
.invite-track-point span:last-child {
  font-size: .72rem;
  font-weight: 700;
  color: #7a7189;
  line-height: 1.2;
}
.invite-track-point.earned .invite-track-dot,
.invite-track-point.done .invite-track-dot {
  background: linear-gradient(135deg, #ff58b8, #7c3aed);
  border-color: transparent;
  color: #fff;
}
.invite-track-point.earned strong,
.invite-track-point.earned span:last-child,
.invite-track-point.done strong {
  color: #5b21b6;
}
.invite-track-point.next .invite-track-dot {
  border-color: #ff4fb2;
  box-shadow: 0 0 0 4px rgba(255, 79, 178, .15);
  color: #e0298a;
}
.invite-track-dot-brand {
  background: #fff;
  border-color: #ddd6fe;
  overflow: hidden;
  padding: 6px;
}
.invite-track-dot-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.invite-rewards {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid #f0ebf6;
}
.invite-reward {
  display: grid;
  gap: .2rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  background: #faf8ff;
  border: 1px solid #ebe6f2;
}
.invite-reward.earned {
  background: #f3eeff;
  border-color: #ddd6fe;
}
.invite-reward-badge {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #7c3aed;
}
.invite-reward p {
  margin: 0;
  color: #1a1523;
  font-size: .9rem;
  font-weight: 650;
  line-height: 1.35;
}
.invite-save-fab {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1.1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  border-radius: 999px;
  padding: .85rem 1.15rem;
  background: linear-gradient(135deg, #ff58b8, #7c3aed);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 28px rgba(124, 58, 237, .35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.invite-save-fab:hover { transform: translateY(-1px); }
.invite-save-fab.is-dirty {
  animation: invite-fab-pulse 1.4s ease infinite;
}
.invite-save-fab:not(.is-dirty) {
  background: #1b1139;
  box-shadow: 0 10px 24px rgba(18, 10, 42, .28);
}
.invite-save-fab.is-saving { opacity: .85; }
@keyframes invite-fab-pulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(124, 58, 237, .35); }
  50% { box-shadow: 0 14px 32px rgba(255, 79, 178, .45); }
}
.invite-screen { padding-bottom: 5.5rem; }
.invite-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin: .7rem 0 .4rem;
}
.invite-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(255, 79, 178, .14);
  border: 1px solid rgba(255, 79, 178, .35);
  color: #ffd1ea;
  font-size: .75rem;
  font-weight: 800;
}
.invitee-row { display: flex; align-items: center; gap: .7rem; }
.invitee-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: white;
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .profile-grid { grid-template-columns: 270px minmax(0,1fr); }
}
@media (max-width: 820px) {
  .auth-page { grid-template-columns: 1fr; }
  .auth-page > .auth-hero { order: 1; }
  .auth-page > .auth-panel { order: 2; }
  .auth-hero {
    min-height: auto;
    height: auto;
    overflow: visible;
    padding: 1.25rem 1.25rem 4.5rem;
    justify-content: flex-start;
    text-align: center;
  }
  .auth-hero-photo::before {
    background: linear-gradient(180deg, rgba(18,10,42,.72) 8%, rgba(18,10,42,.82) 55%, rgba(11,10,21,.94) 100%);
  }
  .auth-page:has(#waitlist-signup) .auth-hero-photo {
    background-position: 70% 28%;
  }
  .auth-copy {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .auth-copy .onboard-brand {
    justify-content: center;
    width: 100%;
  }
  .auth-copy .eyebrow {
    display: block;
  }
  .auth-copy h1 { font-size: clamp(2.4rem, 12vw, 3rem); }
  .auth-copy p {
    margin-left: auto;
    margin-right: auto;
  }

  /* Welcome: seamless seam + better text rhythm */
  .auth-page--welcome {
    background: var(--bg);
  }
  .auth-page--welcome > .auth-hero {
    overflow: hidden;
    isolation: isolate;
    min-height: auto;
    padding: 1.25rem 1.35rem 1.35rem;
    background-color: var(--bg);
    background-position: center 18%;
  }
  .auth-page--welcome > .auth-hero.auth-hero-photo::before {
    background:
      linear-gradient(180deg,
        rgba(18, 10, 42, .42) 0%,
        rgba(18, 10, 42, .58) 28%,
        rgba(18, 10, 42, .78) 58%,
        rgba(18, 10, 42, .94) 82%,
        var(--bg) 100%);
  }
  .auth-page--welcome > .auth-hero.auth-hero-photo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 48px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(18, 10, 42, 0), var(--bg) 70%, var(--bg));
  }
  .auth-page--welcome .auth-copy {
    position: relative;
    z-index: 2;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.35rem;
    padding-bottom: 0;
  }
  .auth-page--welcome .welcome-top {
    align-items: center;
    gap: .85rem;
  }
  .auth-page--welcome .welcome-copy h1 {
    font-size: clamp(2.05rem, 9.2vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -.04em;
    margin: 0 auto 1rem;
    max-width: 15.5rem;
  }
  .auth-page--welcome .welcome-copy p {
    max-width: 18.5rem;
    line-height: 1.65;
    font-size: 1.02rem;
    color: rgba(255, 255, 255, .9);
  }
  .auth-page--welcome .welcome-sub {
    margin-top: .85rem !important;
    max-width: 16.5rem !important;
    line-height: 1.55;
  }
  .auth-page--welcome > .auth-panel {
    background: var(--bg);
    margin-top: -2px;
    padding: .35rem 1.15rem 1.25rem;
    border: 0;
    box-shadow: none;
    align-content: start;
    place-items: start center;
  }
  .auth-page--welcome .auth-card .btn-block { margin-top: 1.35rem; }
  .auth-page--welcome .auth-card .onboard-login-link { margin-top: 1rem; }
  .auth-page--welcome .auth-card > .muted {
    max-width: 19rem;
    line-height: 1.6;
  }
  .auth-copy .waitlist-usps {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    text-align: center;
  }
  .auth-copy .waitlist-usps li {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: .55rem;
    padding: .85rem 0;
    border: 0;
    background: transparent;
    backdrop-filter: none;
    border-radius: 0;
  }
  .auth-copy .waitlist-usp-ico {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 1.4rem;
  }
  .auth-copy .waitlist-usp-ico .babbelhuis-ico {
    width: 1.55rem;
    height: 1.55rem;
  }
  .auth-copy .waitlist-usps strong {
    font-size: 1rem;
  }
  .auth-copy .waitlist-faq {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    text-align: left;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
  }
  .auth-copy .waitlist-faq-title {
    text-align: center;
  }
  .auth-copy .waitlist-faq-trigger {
    font-size: .88rem;
    padding: .8rem .9rem;
  }
  .auth-copy .auth-badges {
    justify-content: center;
  }
  .auth-panel {
    padding: 1.35rem 1.15rem .75rem;
    margin-top: 0;
    position: relative;
    z-index: 2;
    background: transparent;
  }
  .auth-panel .auth-card {
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    padding: 0;
    width: 100%;
    color: #fff;
    text-align: center;
  }
  .auth-panel .waitlist-mobile-brand {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    margin: 0 0 1rem;
  }
  .auth-panel .waitlist-mobile-brand .brand-logo {
    height: 36px;
  }
  .auth-panel .auth-card h2 {
    text-align: center;
    margin: 0 0 .55rem;
  }
  .auth-panel .auth-card > .muted {
    text-align: center;
    margin: 0 auto 1.1rem;
    max-width: 28rem;
  }
  .auth-panel .auth-card .waitlist-form,
  .auth-panel .auth-card .form-grid {
    text-align: left;
  }
  .auth-panel .auth-card h2,
  .auth-panel .auth-card .muted,
  .auth-panel .auth-card .muted strong,
  .auth-panel .auth-card .field label,
  .auth-panel .auth-card .field label .muted {
    color: #fff;
  }
  .auth-panel .auth-card .field input,
  .auth-panel .auth-card .field select {
    color: #fff;
  }
  .auth-copy p,
  .auth-copy .waitlist-usps strong,
  .auth-copy .waitlist-usps small {
    color: #fff;
  }
  .app-shell { display: block; }
  .mobile-menu-btn {
    display: grid;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #efe8ff;
  }
  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(5, 3, 14, .72);
    /* no backdrop-filter ? causes flicker/jank on iOS Safari */
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
    touch-action: none;
  }
  .app-shell.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  .sidebar {
    display: flex !important;
    position: fixed;
    left: 0;
    top: 0;
    right: auto;
    bottom: 0;
    width: min(86vw, 310px);
    height: auto;
    max-height: none;
    transform: translate3d(-105%, 0, 0);
    transition: transform .22s ease-out;
    -webkit-transform: translate3d(-105%, 0, 0);
    will-change: transform;
    z-index: 80;
    box-shadow: 18px 0 40px rgba(0,0,0,.35);
    background: #120a2a !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.mobile-menu-open,
  body.mobile-menu-open {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }
  .app-shell.mobile-menu-open .sidebar { transform: translate3d(0, 0, 0); }
  body.mobile-menu-open .bottom-nav,
  body.mobile-menu-open .mpro-cta-bar,
  body.notify-open .mpro-cta-bar,
  body.notify-open .bottom-nav {
    pointer-events: none;
  }
  .sidebar-close {
    display: grid;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: #efe8ff;
  }
  .topbar { height: 68px; }
  .user-topbar {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: 0 .85rem;
  }
  .user-topbar .topbar-brand { display: inline-flex; flex: 1; min-width: 0; justify-content: center; }
  .user-topbar .topbar-brand .brand-logo { height: 26px; }
  .user-topbar--profile .global-search-wrap { flex: 1; min-width: 0; }
  .user-topbar .topbar-alerts { margin-left: 0; gap: .35rem; flex: none; }
  .mobile-menu-btn { width: 40px; height: 40px; border-radius: 12px; }
  .content { padding: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .admin-shell .content,
  .admin-shell #view {
    padding: .85rem 1rem calc(78px + env(safe-area-inset-bottom)) !important;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .admin-shell .main,
  .admin-shell .content > section {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .admin-shell .section-head,
  .admin-shell .admin-section-head {
    flex-direction: column;
    align-items: stretch !important;
    gap: .75rem;
  }
  .admin-shell .toolbar-search,
  .admin-shell .admin-section-head .toolbar-search {
    width: 100%;
    min-width: 0 !important;
    max-width: none;
    box-sizing: border-box;
  }
  .admin-shell .table-wrap {
    width: 100%;
    max-width: 100%;
  }
  .admin-shell table {
    min-width: 640px;
  }
  .admin-group-card-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .bottom-nav {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    width: 100%;
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 0 0 env(safe-area-inset-bottom);
    margin: 0;
    background: #120a2a;
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(0,0,0,.28);
  }
  .bottom-nav button {
    border: 0;
    background: transparent;
    color: #9a91ad;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .15rem;
    font-size: .65rem;
    font-weight: 700;
    padding: .35rem .1rem;
    min-width: 0;
    height: 58px;
  }
  .bottom-nav button span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav button.active { color: #c4b5fd; }
  .bottom-nav .nav-icon { font-size: 1.15rem; line-height: 1; color: inherit; }
  .nav-create { display: grid; place-items: center; background: transparent !important; color: inherit !important; padding: 0 !important; }
  .nav-create-btn {
    width: 46px;
    height: 46px;
    margin: 0;
    border-radius: 14px;
    background: var(--accent);
    color: white;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    box-shadow: none;
  }
  .user-topbar { height: 64px; background: rgba(18, 10, 42, .96); }
  .invite-save-fab { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .user-content { padding: 0 0 calc(72px + env(safe-area-inset-bottom)) !important; }
  .home-dash,
  .invite-screen,
  .profile-page,
  .content > section:not(.messages-layout),
  .content > .card {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .messages-layout,
  body.view-messages .messages-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .profile-page {
    max-width: none;
    padding-top: .85rem;
  }
  .profile-page--edit {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
  .profile-save-bar {
    top: 64px;
    margin-left: -.15rem;
    margin-right: -.15rem;
    padding-left: .15rem;
    padding-right: .15rem;
  }
  .intent-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intent-tab:nth-child(3n) span { border-right: 1px solid #ebe6f2; }
  .intent-tab:nth-child(2n) span { border-right: 0; }
  .intent-tab:nth-last-child(-n+2) span { border-bottom: 0; }
  .messages-layout {
    grid-template-columns: 1fr;
    border-radius: 0;
    height: calc(100vh - 64px - 72px);
    height: calc(100dvh - 64px - 72px - env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }
  body.view-messages .messages-layout {
    height: calc(100vh - 64px - 72px);
    height: calc(100dvh - 64px - 72px - env(safe-area-inset-bottom, 0px));
  }
  .messages-layout > .conversation-list,
  .messages-layout > .chat {
    grid-column: 1;
  }
  .messages-layout:not(.is-chat-open) .chat { display: none; }
  .messages-layout.is-chat-open .conversation-list { display: none; }
  .messages-layout.is-chat-open .chat.chat-enter {
    animation: chat-panel-slide-in .34s cubic-bezier(.22, 1, .36, 1);
  }
  .messages-layout .chat.chat-exit {
    animation: chat-panel-slide-out .22s ease forwards;
  }
  .messages-ad-strip { display: none !important; }
  .conversation-list { border-right: 0; }
  .chat { border-top: 0; }
  .chat-back { display: flex; }
  .chat-messages { max-height: none; }
  .chat-jump { bottom: 84px; }
  #view:has(.messages-layout.is-chat-open) > .home-pills,
  #view:has(.messages-layout.is-chat-open) > .ad-slot {
    display: none;
  }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-summary { position: static; }
  .install-tip,
  .sidebar-links .install-tip { display: flex; }
}
@media (max-width: 620px) {
  .grid-3, .grid-2, .form-row, .stats { grid-template-columns: 1fr; }
  .topbar h1 { font-size: 1.18rem; }
  .city-pill { font-size: .8rem; }
  .membership-banner { align-items: flex-start; flex-direction: column; }
  .hero-card h2 { font-size: 2rem; }
  .auth-logo { margin-left: -1rem; }
  .messages-layout { height: calc(100vh - 88px); height: calc(100dvh - 88px); min-height: 360px; }
  body.view-messages .messages-layout { height: calc(100vh - 80px); height: calc(100dvh - 80px); }
  .chat-jump { bottom: 74px; }
  .modal { padding: 1rem; border-radius: 20px; }
}
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .85rem;
}
/* ?? Groepen page (mockup) ?? */
.gpage { margin-top: 0; color: #fff; }
.gpage-layout { display: block; }
.gpage-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; min-width: 0; }
.gpage-main > * { min-width: 0; }
.gpage-head {
  position: relative;
  display: grid;
  gap: .7rem;
  align-items: start;
  overflow: visible;
}
.gpage-head-top {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
}
.gpage-head-top h1 {
  margin: 0;
  font-size: clamp(1.55rem, 5.5vw, 2.15rem);
  letter-spacing: -.03em;
  color: #fff;
  font-weight: 900;
  line-height: 1.1;
  min-width: 0;
}
.gpage-head-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .9rem;
  margin-top: -.15rem;
}
.gpage-invite-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 750;
  font-size: .88rem;
  color: #fbbf24;
  cursor: pointer;
  white-space: nowrap;
}
.gpage-invite-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gpage-invite-link i,
.gpage-invite-link .lucide-icon {
  color: #fbbf24;
  font-size: .82rem;
}
.page-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(129, 45, 226, .28);
  border: 1px solid rgba(255,255,255,.12);
  color: #ff7ad9;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.page-hero-icon .babbelhuis-ico {
  width: 1.65rem;
  height: 1.65rem;
  background-color: #ff7ad9;
}
.page-hero-icon i,
.page-hero-icon .lucide-icon {
  font-size: 1.15rem;
}
.gpage-head-art { display: none; }
.gpage-eyebrow {
  color: #e879f9;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.gpage-head h1 {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.15rem);
  letter-spacing: -.03em;
  color: #fff;
  font-weight: 900;
}
.gpage-head > p {
  margin: 0;
  color: #a39bb8;
  font-size: .95rem;
  line-height: 1.45;
  max-width: 36rem;
}
.gpage-cta {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  padding: .9rem 1.25rem;
  font: inherit;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  background: var(--accent, #812DE2);
  border: 0;
  box-shadow: none;
}
.gpage-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}
.gpage-search {
  flex: 2 1 170px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: .7rem .9rem;
}
.gpage-search i { color: #8b849c; font-size: .85rem; }
.gpage-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font: inherit;
}
.gpage-search input::placeholder { color: #8b849c; }
.gpage-toolbar select {
  flex: 1 1 7rem;
  min-width: 0;
  max-width: 10rem;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,.1);
  background: #151322;
  color: #efe8ff;
  border-radius: 14px;
  padding: .7rem .6rem;
  font: inherit;
  font-size: .88rem;
  color-scheme: dark;
}
.gpage-toolbar select option,
.gpage-toolbar select optgroup {
  background: #151322;
  color: #efe8ff;
}
.gpage-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.gpage-stat {
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 1rem .9rem .9rem;
}
.gpage-stat-ico { display: block; color: #e879f9; margin-bottom: .6rem; font-size: 1.2rem; line-height: 1; }
.gpage-stat strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1; }
.gpage-stat > span { display: block; margin-top: .35rem; color: #a39bb8; font-size: .78rem; font-weight: 700; }
.gpage-stat > small { display: block; margin-top: .25rem; color: #7c748f; font-size: .68rem; font-weight: 650; }
.gpage-stat > small .text-link { font: inherit; color: #d8b4fe; background: none; border: 0; padding: 0; cursor: pointer; }
.gpage-stat-up { color: #6ee7b7 !important; }
.gpage-mine {
  margin: 0 0 1.1rem;
  padding: 1rem 1.05rem;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(129, 45, 226, .2), rgba(255, 79, 178, .08));
  border: 1px solid rgba(216, 180, 254, .28);
}
.gpage-mine--led {
  background: linear-gradient(135deg, rgba(129, 45, 226, .28), rgba(255, 79, 178, .1));
  border-color: rgba(216, 180, 254, .38);
}
.gpage-mine--empty {
  margin-bottom: .85rem;
}
.gpage-mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.gpage-mine--empty .gpage-mine-head {
  margin-bottom: 0;
}
.gpage-mine-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.gpage-mine-head h2 .group-leader-ico {
  background-color: #fbbf24;
}
.gpage-mine-head p {
  margin: .25rem 0 0;
  color: #cfc6e4;
  font-size: .84rem;
}
.gpage-mine-head .text-link {
  flex: none;
  color: #e9d5ff;
  font-size: .82rem;
  font-weight: 700;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}
.gpage-mine-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 280px);
  gap: .65rem;
  overflow-x: auto;
  padding-bottom: .15rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.gpage-mine-card {
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-align: left;
  padding: .65rem .7rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10, 8, 20, .45);
  color: #fff;
  cursor: pointer;
  font: inherit;
}
.gpage-mine-card:hover {
  border-color: rgba(216, 180, 254, .45);
  background: rgba(129, 45, 226, .22);
}
.gpage-mine-card.is-leader {
  border-color: rgba(251, 191, 36, .35);
}
.gpage-mine-thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(129, 45, 226, .28);
  color: #ff7ad9;
}
.gpage-mine-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gpage-mine-copy {
  min-width: 0;
  flex: 1;
}
.gpage-mine-copy strong {
  display: block;
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gpage-mine-copy small {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .15rem;
  color: #b7aec9;
  font-size: .72rem;
}
.gpage-mine-copy .group-leader-ico {
  width: .9em;
  height: .9em;
  background-color: #fbbf24;
}
.gpage-mine-go {
  color: #d8b4fe;
  flex: none;
}
.gpage-widget--mine .group-leader-ico {
  width: .95em;
  height: .95em;
  background-color: #fbbf24;
  vertical-align: -0.12em;
}
.gpage-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.gpage-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.gpage-section-head h2 i { color: #fbbf24; font-size: .9rem; }
.gpage-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; }
.gpage-card {
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, transform .15s ease;
}
.gpage-card:hover { border-color: rgba(216,180,254,.35); transform: translateY(-1px); }
.gpage-cover {
  position: relative;
  flex: none;
  aspect-ratio: 16 / 9;
  cursor: pointer;
  background: #1a1530;
  overflow: hidden;
}
.gpage-cover--landscape {
  aspect-ratio: 16 / 9;
}
.gpage-cover--square {
  aspect-ratio: 1 / 1;
}
.gpage-cover--portrait {
  aspect-ratio: 3 / 4;
  max-height: 280px;
}
.gpage-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.gpage-cover-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.gpage-cover-art em { font-size: 2.4rem; font-style: normal; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.gpage-cover-badge {
  position: absolute;
  top: .6rem;
  right: .6rem;
  background: #812DE2;
  color: #fff;
  font-size: .66rem;
  font-weight: 850;
  border-radius: 999px;
  padding: .22rem .55rem;
  z-index: 2;
}
.gpage-cover-members {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .4rem;
  background: rgba(12, 8, 24, .72);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  padding: .25rem .6rem .25rem .35rem;
}
.gpage-cover-members > span { font-size: .7rem; font-weight: 750; color: #fff; }
.gpage-cover-members .facepile { gap: 0; }
.gpage-cover-members .facepile .avatar,
.gpage-cover-members .facepile-avatar,
.gpage-cover-members .facepile-photo {
  width: 22px !important;
  height: 22px !important;
  font-size: .55rem !important;
  border: 2px solid rgba(12, 8, 24, .8);
  margin-left: -7px;
  position: relative;
  inset: auto;
  flex-shrink: 0;
}
.gpage-cover-members .facepile .avatar:first-child,
.gpage-cover-members .facepile-avatar:first-child,
.gpage-cover-members .facepile-photo:first-child { margin-left: 0; }
.gpage-cover-members .facepile-photo img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.gpage-card-body { flex: 1; padding: .85rem .95rem 1rem; display: grid; grid-template-rows: auto auto 1fr; gap: .45rem; }
.gpage-card-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.gpage-card-top strong { font-size: 1rem; letter-spacing: -.02em; color: #fff; cursor: pointer; }
.gpage-card-body p {
  margin: 0;
  color: #a39bb8;
  font-size: .84rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gpage-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .2rem;
}
.gpage-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.gpage-tag {
  font-size: .68rem;
  font-weight: 750;
  color: #d8b4fe;
  background: rgba(216,180,254,.12);
  border-radius: 999px;
  padding: .25rem .55rem;
}
.gpage-card-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #efe8ff;
  border-radius: 999px;
  padding: .45rem .9rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.gpage-card-btn.is-join {
  background: linear-gradient(105deg, #ff4fb2, #c026d3);
  border: 0;
  color: #fff;
}
.gpage-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 800;
  color: #e9d5ff;
  background: rgba(129, 45, 226, .22);
  border: 1px solid rgba(196, 181, 253, .35);
  border-radius: 999px;
  padding: .22rem .55rem;
}
.gpage-badge.leader {
  color: #f3e8ff;
}
.gpage-badge.offline,
.group-offline-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 800;
  color: #fda4af;
  background: rgba(244, 63, 94, .14);
  border: 1px solid rgba(251, 113, 133, .35);
  border-radius: 999px;
  padding: .22rem .55rem;
  vertical-align: middle;
}
.group-hero-text h2 .group-offline-pill {
  margin-left: .35rem;
  font-size: .72rem;
}
.group-leader-ico {
  width: 1.05em;
  height: 1.05em;
  display: inline-block;
  vertical-align: -0.18em;
  flex: none;
  background-color: #c084fc;
  -webkit-mask: url('/assets/group-leader.png') center / contain no-repeat;
  mask: url('/assets/group-leader.png') center / contain no-repeat;
}
.group-leader-chip {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(129, 45, 226, .16) !important;
  color: #f3e8ff !important;
  border-radius: 999px !important;
  font-weight: 750;
}
.group-leader-chip .group-leader-ico {
  background-color: #d8b4fe;
}
.gpage-more { text-align: center; }
.gpage-more .text-link {
  background: none;
  border: 0;
  color: #d8b4fe;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.gpage-empty {
  grid-column: 1 / -1;
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 1.6rem 1.4rem;
}
.gpage-empty.soft { text-align: center; padding: 1.2rem; }
.gpage-empty h3 { margin: 0 0 .35rem; color: #fff; font-size: 1.05rem; }
.gpage-empty p { margin: 0 0 1rem; color: #a39bb8; font-size: .92rem; line-height: 1.45; }
.gpage-rail { display: none; }
.gpage-widget {
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: .95rem 1rem 1rem;
}
.gpage-widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.gpage-widget-head h3 {
  margin: 0;
  font-size: .95rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.gpage-widget-head h3 i { color: #fb7185; font-size: .85rem; }
.gpage-rail-list { display: grid; gap: .1rem; }
.gpage-rail-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: .45rem .35rem;
  border-radius: 12px;
  cursor: pointer;
}
.gpage-rail-row:hover { background: rgba(255,255,255,.05); }
.gpage-rail-row > div { min-width: 0; flex: 1; }
.gpage-rail-row strong { display: block; font-size: .86rem; color: #fff; cursor: pointer; }
.gpage-rail-row small { display: block; color: #a39bb8; font-size: .72rem; margin-top: .1rem; }
.gpage-rail-thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(129, 45, 226, .22);
  border: 1px solid rgba(255,255,255,.1);
  color: #d8b4fe;
}
.gpage-rail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gpage-rail-thumb em { font-style: normal; font-size: 1.05rem; }
.gpage-rail-thumb .lucide-icon,
.gpage-rail-thumb svg {
  width: 1.15rem !important;
  height: 1.15rem !important;
  color: #d8b4fe;
  stroke: #d8b4fe;
}
.gpage-rail-delta {
  flex: none;
  font-size: .72rem;
  font-weight: 800;
  color: #6ee7b7;
  display: inline-flex;
  align-items: center;
  gap: .2rem;
}
.gpage-rail-delta i { font-size: .6rem; }
.gpage-rail-add {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: .72rem;
}
.gpage-rail-add:hover { background: linear-gradient(105deg, #ff4fb2, #c026d3); border-color: transparent; }
.gpage-rail-empty { margin: 0; color: #8b849c; font-size: .84rem; }
.gpage-event {
  display: flex;
  gap: .6rem;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: .6rem;
  color: inherit;
  font: inherit;
  cursor: pointer;
  margin-bottom: .45rem;
}
.gpage-event:hover { border-color: rgba(216,180,254,.3); }
.gpage-event > div { min-width: 0; flex: 1; display: grid; gap: .15rem; }
.gpage-event strong { font-size: .84rem; color: #fff; }
.gpage-event small { color: #a39bb8; font-size: .72rem; }
.gpage-event-date {
  flex: none;
  width: 40px;
  border-radius: 12px;
  background: rgba(216,180,254,.12);
  display: grid;
  place-content: center;
  text-align: center;
  padding: .35rem 0;
  align-self: start;
}
.gpage-event-date strong { display: block; font-size: 1rem; color: #fff; line-height: 1; }
.gpage-event-date em { display: block; font-style: normal; font-size: .6rem; font-weight: 800; color: #d8b4fe; letter-spacing: .06em; }
.gpage-widget-btn {
  width: 100%;
  margin-top: .35rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #efe8ff;
  border-radius: 999px;
  padding: .6rem;
  font: inherit;
  font-weight: 750;
  font-size: .82rem;
  cursor: pointer;
}
.gpage-widget-btn:hover { background: rgba(255,255,255,.08); }
@media (min-width: 700px) {
  .gpage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .content:has(.gpage) { max-width: 1400px; }
  .gpage-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.1rem;
    align-items: start;
  }
  .gpage-rail { display: grid; gap: .85rem; position: sticky; top: 1rem; }
  .gpage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .gpage-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .gpage-head {
    gap: .65rem;
  }
  .gpage-head-top {
    gap: .75rem;
  }
  .gpage-head-top h1 {
    font-size: clamp(1.5rem, 6vw, 1.9rem);
  }
  .gpage-head > p {
    font-size: .9rem;
  }
  .gpage-cta {
    width: 100%;
    justify-content: center;
  }
}

@media (min-width: 900px) {
  .gpage-cta {
    width: auto;
    justify-self: start;
    max-width: 280px;
  }
}

.group-card {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #ebe6f2;
  border-radius: 14px;
  padding: 1rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, transform .15s ease;
  width: 100%;
}
.group-card:hover {
  border-color: #c4b5fd;
  transform: translateY(-1px);
}
.group-card-emoji {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, #faf5ff, #fce7f3);
  display: grid;
  place-items: center;
  font-size: 1.45rem;
}
.group-card-body { min-width: 0; flex: 1; }
.group-card-top {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  margin-bottom: .25rem;
}
.group-card-top strong {
  font-size: .98rem;
  letter-spacing: -.02em;
  color: #1b1139;
}
.group-card-body p {
  margin: 0 0 .65rem;
  color: #6b6280;
  font-size: .84rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.group-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.group-kind {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7c3aed;
  background: #f3e8ff;
  border-radius: 6px;
  padding: .18rem .4rem;
}
.group-leader-badge,
.group-member-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 800;
  color: #e9d5ff;
  background: rgba(129, 45, 226, .22);
  border: 1px solid rgba(196, 181, 253, .3);
  border-radius: 999px;
  padding: .25rem .55rem;
}
.group-leader-badge .group-leader-ico {
  background-color: #d8b4fe;
  width: 1.1em;
  height: 1.1em;
}
.group-emoji-pick {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.group-emoji-opt {
  cursor: pointer;
  position: relative;
}
.group-emoji-opt input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.group-emoji-opt span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #efe8ff;
  font-size: 1.2rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.group-emoji-opt .lucide-icon,
.group-emoji-opt svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  stroke: currentColor;
  color: inherit;
}
.group-emoji-opt span i {
  font-size: 1.15rem;
  line-height: 1;
  color: inherit;
}
.group-emoji-opt:hover span {
  border-color: rgba(196, 181, 253, .55);
  background: rgba(129, 45, 226, .18);
}
.group-emoji-opt input:checked + span {
  border-color: #812DE2;
  background: #812DE2;
  color: #fff;
  box-shadow: 0 6px 16px rgba(129, 45, 226, .35);
}
/* Nooit de globale invite-pill op groepdetail */
#view:has(.group-detail) > .home-pills { display: none !important; }
.group-detail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.group-ad {
  margin: 0 0 .85rem;
  padding: 0;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  min-height: 0;
  flex: none;
}
.group-ad .ad-slot,
.group-ad .ad-rotate {
  margin: 0 !important;
  display: block !important;
  width: 100%;
}
.group-ad .ad-slot--banner {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  min-height: 0;
  background: transparent !important;
  display: block !important;
  width: 100%;
  overflow: hidden;
}
.group-ad .ad-slot--banner .ad-slot-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3.2 / 1;
  min-height: 72px;
  max-height: 110px;
  overflow: hidden;
  background: #0b0b12;
}
.group-ad .ad-slot--banner img,
.group-ad .ad-slot--banner .ad-slot-media video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
  display: block;
  background: #0b0b12;
}
.group-ad .ad-slot--banner .ad-slot-label {
  position: absolute;
  top: .45rem;
  left: .45rem;
  right: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: none;
  overflow: visible;
  text-overflow: unset;
  white-space: nowrap;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(10, 8, 20, .72);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: .22rem .55rem;
}
.group-ad .ad-slot--banner .ad-slot-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .35rem .75rem;
  padding: .7rem .85rem .8rem;
  min-width: 0;
}
.group-ad .ad-slot--banner .ad-slot-body strong {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
  font-size: .92rem;
  line-height: 1.35;
  color: #fff;
  white-space: normal;
  text-overflow: unset;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.group-ad .ad-slot--banner .ad-slot-body small {
  display: none;
}
.group-ad .ad-slot--banner .ad-slot-body p {
  display: none;
}
.group-ad .ad-slot--banner .ad-slot-cta {
  flex: 0 0 auto;
  margin-left: 0;
  font-size: .84rem;
  font-weight: 800;
  color: #ff7ad9;
  white-space: nowrap;
}
.group-ad-fallback {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem;
  color: #efe8ff;
  text-decoration: none;
  min-height: 72px;
}
.group-ad-fallback-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #812DE2, #D641E7);
  color: #fff;
  flex: none;
}
.group-ad-fallback strong {
  display: block;
  font-size: .92rem;
}
.group-ad-fallback small {
  display: block;
  margin-top: .15rem;
  color: #a39bb8;
  font-size: .78rem;
}
.group-ad-fallback-cta {
  margin-left: auto;
  flex: none;
  font-size: .8rem;
  font-weight: 800;
  color: #ff7ad9;
}
.group-detail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .75rem;
  flex: none;
}
.group-detail-top .group-offline-pill,
.group-detail-top .group-online-pill {
  flex: none;
}
.group-detail .group-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.group-detail .group-back:hover {
  background: rgba(255,255,255,.08);
}

/* Group detail — banner + overlapping avatar layout */
.gdetail-hero {
  margin: 0 0 1rem;
  flex: none;
}
.gdetail-media {
  position: relative;
  margin: 0 0 .85rem;
}
.gdetail-banner {
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, #812DE2 0%, #D641E7 55%, #ff4fb2 100%);
  border: 1px solid rgba(255,255,255,.08);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.gdetail-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: inherit;
  transform: translateZ(0);
  vertical-align: middle;
}
/* Landscape covers: breed, begrensde hoogte */
.gdetail-banner--landscape {
  max-height: min(280px, 42vw);
}
.gdetail-banner--landscape img {
  width: 100%;
  height: 100%;
  max-height: min(280px, 42vw);
  object-fit: cover;
}
/* Vierkante covers: volledig zichtbaar, gecentreerd, niet te groot op desktop */
.gdetail-banner--square {
  width: min(100%, 420px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  max-height: min(420px, 88vw);
}
.gdetail-banner--square img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Portret: smal, gecentreerd */
.gdetail-banner--portrait {
  width: min(100%, 340px);
  margin-inline: auto;
  max-height: min(440px, 90vw);
}
.gdetail-banner--portrait img {
  width: 100%;
  height: auto;
  max-height: min(440px, 90vw);
  object-fit: contain;
}
.gdetail-banner--fallback {
  display: grid;
  place-items: center;
  color: #fff;
  min-height: 140px;
  aspect-ratio: 16 / 9;
  max-height: 220px;
}
.gdetail-banner--fallback .lucide-icon,
.gdetail-banner--fallback svg,
.gdetail-banner--fallback i {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 2rem;
  color: #fff;
}
.gdetail-avatar {
  position: absolute;
  left: .85rem;
  bottom: -1.05rem;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1530;
  border: 3px solid #0e0b16;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  color: #fff;
}
.gdetail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gdetail-avatar .lucide-icon,
.gdetail-avatar svg,
.gdetail-avatar i {
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1.4rem;
  color: #e9d5ff;
}
.gdetail-title {
  margin: .35rem 0 .65rem;
  font-size: clamp(1.45rem, 4.5vw, 1.95rem);
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.25;
  font-weight: 800;
}
.gdetail-title .group-kind-pill {
  display: inline-flex;
  vertical-align: middle;
  margin-left: .35rem;
  position: relative;
  top: -0.12em;
}
.gdetail-pills {
  display: none;
}
.gdetail-meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .45rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .15rem;
}
.gdetail-meta::-webkit-scrollbar { display: none; }
.gdetail-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  white-space: nowrap;
  padding: .38rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #efe8ff;
  font-size: .8rem;
  font-weight: 700;
}
.gdetail-chip i,
.gdetail-chip .lucide-icon,
.gdetail-chip svg {
  color: #c084fc;
  width: .9rem;
  height: .9rem;
  font-size: .85rem;
}
.group-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .7rem;
  margin: 0 0 .75rem;
  flex: none;
  width: 100%;
}
.group-hero-chat.btn-primary,
.group-detail .group-hero-chat.btn-primary {
  background: var(--accent);
  border: 0;
  box-shadow: 0 8px 22px rgba(214, 65, 231, .28);
  min-height: 48px;
  padding: .75rem 1.15rem;
  border-radius: 999px;
  font-weight: 800;
  width: 100%;
  justify-content: center;
}
.group-detail .group-actions .btn {
  border-radius: 999px;
  min-height: 44px;
  white-space: nowrap;
}
.gdetail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
}
.gdetail-actions--one {
  grid-template-columns: 1fr;
}
.gdetail-action {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  text-align: left;
  padding: .7rem .75rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #fff;
  cursor: pointer;
  min-width: 0;
}
.gdetail-action:hover {
  background: rgba(255,255,255,.07);
}
.gdetail-action-ico {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(192, 132, 252, .16);
  color: #c084fc;
  display: grid;
  place-items: center;
  flex: none;
}
.gdetail-action-ico i,
.gdetail-action-ico svg {
  font-size: .95rem;
  width: 1rem;
  height: 1rem;
}
.gdetail-action-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.gdetail-action-text strong {
  font-size: .86rem;
  font-weight: 800;
  line-height: 1.2;
}
.gdetail-action-text small {
  color: #a39bb8;
  font-size: .72rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gdetail-action-chev {
  color: #8b819f;
  flex: none;
  display: grid;
  place-items: center;
}
.gdetail-leader {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  text-align: left;
  margin: 0 0 .85rem;
  padding: .55rem .15rem;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.gdetail-leader .avatar,
.gdetail-leader .gdetail-leader-av {
  width: 42px;
  height: 42px;
  flex: none;
}
.gdetail-leader-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .08rem;
}
.gdetail-leader-text strong {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 800;
}
.gdetail-leader-text small {
  color: #a39bb8;
  font-size: .8rem;
}
.gdetail-you {
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  color: #ff9fd0;
  background: rgba(255, 122, 217, .14);
  border: 1px solid rgba(255, 122, 217, .3);
  border-radius: 999px;
  padding: .12rem .4rem;
}
.gdetail-about {
  margin: 0 0 1rem;
}
.gdetail-about h3 {
  margin: 0 0 .45rem;
  color: #fff;
  font-size: 1.05rem;
}
.gdetail-about p {
  margin: 0;
  color: #cfc6e4;
  line-height: 1.55;
  font-size: .95rem;
}
.gdetail-leden-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .85rem 0 .65rem;
}
.gdetail-leden-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
}
.gdetail-viewall {
  border: 0;
  background: transparent;
  color: #c084fc;
  font-weight: 750;
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  cursor: pointer;
  padding: 0;
}
.gdetail-leden-strip {
  display: flex;
  align-items: center;
  gap: .55rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .25rem;
  margin: 0 0 1rem;
}
.gdetail-leden-strip::-webkit-scrollbar { display: none; }
.gdetail-leden-av,
.gdetail-leden-add {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: transparent;
  overflow: hidden;
}
.gdetail-leden-av .avatar,
.gdetail-strip-av {
  width: 48px !important;
  height: 48px !important;
}
.gdetail-leden-add {
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.2);
  color: #c084fc;
}
.group-edit-foot {
  display: grid;
  gap: .55rem;
}
.group-edit-foot .is-danger {
  color: #ff8fab !important;
  border-color: rgba(255, 143, 171, .35) !important;
}
.group-online-pill {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 217, .45);
  color: #ff9fd0;
  font-size: .68rem;
  font-weight: 750;
  white-space: nowrap;
}
.group-kind-pill {
  display: inline-flex;
  align-items: center;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4fb2, #D641E7);
  color: #fff;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.group-detail-banner { display: none !important; }
.group-detail > .group-leader-chip {
  display: inline-flex !important;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .35rem;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #d8b4fe !important;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  max-width: 100%;
  border-radius: 0 !important;
  min-height: 0;
  flex: none;
  align-self: flex-start;
}
.group-detail > .group-leader-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-updates-head,
.group-network-head {
  margin-top: 1.15rem !important;
  flex: none;
}
.gmeet-card {
  margin-top: 1.2rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.gmeet-card .field label,
.gfeed-compose .field label,
.gfeed-compose .field small,
.gmeet-card .field small { color: #d8cfff !important; }
.gmeet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .7rem;
}
.gmeet-head h3 {
  margin: 0;
  font-size: 1rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.gmeet-info {
  margin: 0;
  color: #cfc6e4;
  line-height: 1.5;
  white-space: pre-wrap;
}
.gfeed-compose {
  margin: .7rem 0 1.1rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: rgba(129, 45, 226, .12);
  border: 1px solid rgba(216, 180, 254, .22);
  display: grid;
  gap: .75rem;
  color-scheme: dark;
}
.gfeed-compose-head {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.gfeed-compose-head strong { display: block; color: #fff; }
.gfeed-compose-head small { color: #a39bb8; }
.gfeed-compose-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.gfeed-compose .field input,
.gfeed-compose .field textarea,
.gfeed-compose .field select,
.gmeet-card .field input,
.gmeet-card .field textarea,
.gmeet-card .field select {
  background: rgba(10, 8, 20, .72) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: #fff !important;
  color-scheme: dark;
}
.gfeed-compose .field input::placeholder,
.gfeed-compose .field textarea::placeholder,
.gmeet-card .field input::placeholder,
.gmeet-card .field textarea::placeholder {
  color: #7d7394 !important;
}
.gfeed-compose .field input:focus,
.gfeed-compose .field textarea:focus,
.gmeet-card .field input:focus,
.gmeet-card .field textarea:focus {
  border-color: rgba(216, 180, 254, .55) !important;
  box-shadow: 0 0 0 3px rgba(129, 45, 226, .22);
}
.gfeed-compose .field input[type="datetime-local"],
.gmeet-card .field input[type="datetime-local"] {
  color-scheme: dark;
}
.gfeed-compose .field input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.gmeet-card .field input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.7);
}
.gfeed-compose .media-add,
.gfeed-compose .media-thumb {
  background: rgba(10, 8, 20, .72) !important;
  border: 1.5px dashed rgba(216, 180, 254, .4) !important;
  color: #e9d5ff !important;
}
.gfeed-compose .media-add span,
.gfeed-compose .media-add i {
  color: #e9d5ff !important;
}
.gfeed-compose .media-add:hover {
  background: rgba(129, 45, 226, .28) !important;
  border-color: rgba(216, 180, 254, .65) !important;
}
.gfeed-compose .media-edit-grid small,
.gfeed-compose .oproep-media-row small {
  color: #b7aec9 !important;
}
.gfeed-locked,
.gfeed-empty {
  margin: .5rem 0 1rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.16);
  color: #b7aec9;
  text-align: center;
}
.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .4rem;
}
.rich-tool {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #efe8ff;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}
.rich-tool:hover,
.rich-tool[aria-expanded="true"] { border-color: rgba(216,180,254,.5); background: rgba(129,45,226,.28); }
.rich-emoji-panel {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .25rem;
  margin: 0 0 .55rem;
  padding: .45rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8, 6, 18, .72);
  max-height: 148px;
  overflow: auto;
}
.rich-emoji-panel[hidden] { display: none; }
.rich-emoji-btn {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.rich-emoji-btn:hover { background: rgba(129,45,226,.28); }
.rich-editor {
  min-height: 110px;
  padding: .75rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(10, 8, 20, .45);
  color: #fff;
  line-height: 1.5;
  outline: none;
}
.rich-editor--post {
  min-height: 168px;
  font-size: .98rem;
}
.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #7d7394;
}
.rich-editor:focus { border-color: rgba(216,180,254,.55); }
.rich-body { margin: 0; color: inherit; line-height: 1.55; }
.rich-body p { margin: 0 0 .55rem; }
.rich-body p:last-child { margin-bottom: 0; }
.rich-body ul, .rich-body ol { margin: .2rem 0 .7rem 1.1rem; }
.rich-body a { color: #d8b4fe; text-decoration: underline; }
.oboard-card .rich-body,
.epost-card .rich-body.epost-body {
  color: #a39bb8;
  font-size: .95rem;
}
.epost-card .rich-body.epost-body { font-size: 1rem; color: #cfc6e0; }
.gfeed-list { display: grid; gap: .85rem; }
.gfeed-card {
  padding: .95rem 1rem;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.gfeed-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .55rem;
}
.gfeed-author {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.gfeed-author strong { display: block; color: #fff; font-size: .92rem; }
.gfeed-author small { color: #8b829e; font-size: .74rem; }
.gfeed-author .avatar { width: 38px; height: 38px; font-size: .75rem; }
.gfeed-title {
  margin: 0 0 .4rem;
  color: #fff;
  font-size: 1.02rem;
  letter-spacing: -.02em;
}
.gfeed-event {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  margin: 0 0 .55rem;
  color: #e9d5ff;
  font-size: .84rem;
  font-weight: 600;
}
.gfeed-event span { display: inline-flex; align-items: center; gap: .35rem; }
.gfeed-body { color: #d6cfe6; font-size: .95rem; }
.gfeed-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
  margin-top: .7rem;
}
.gfeed-media {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #140f24;
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 4 / 3;
}
.gfeed-media img,
.gfeed-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gfeed-media--vid { aspect-ratio: 16 / 10; }
.gfeed-delete { opacity: .7; }
.gfeed-delete:hover { opacity: 1; color: #fda4af; }
.clist-section-label--groups { color: #e9d5ff; }
.conversation-avatar--group {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(129, 45, 226, .28);
  border: 1px solid rgba(216, 180, 254, .28);
  flex: none;
}
.conversation-avatar--group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.conversation-avatar--group .lucide-icon,
.conversation-avatar--group svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #ff7ad9;
}
.chat-header-avatar--group {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(129, 45, 226, .28);
  border: 1px solid rgba(216, 180, 254, .28);
}
.chat-header-avatar--group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bubble-sender {
  display: block;
  margin: 0 0 .2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
@media (max-width: 620px) {
  .gfeed-compose-meta { grid-template-columns: 1fr; }
}
.group-detail .section-head h3 { color: #fff; }
.group-network-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.group-members-tools {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.group-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.group-view-btn {
  border: 0;
  background: transparent;
  color: #a39bb8;
  border-radius: 999px;
  padding: .38rem .7rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.group-view-btn.is-on {
  background: rgba(129, 45, 226, .35);
  color: #fff;
}
.group-members-list {
  display: grid;
  gap: .45rem;
  margin: .35rem 0 1.2rem;
}
.group-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem .8rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.group-member-person {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.group-member-person .avatar {
  width: 42px;
  height: 42px;
  flex: none;
}
.group-member-person strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .92rem;
  color: #fff;
}
.group-member-person small {
  display: block;
  margin-top: .15rem;
  color: #a39bb8;
  font-size: .76rem;
}
.group-member-leader-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .68rem;
  font-weight: 800;
  color: #f3e8ff;
  background: rgba(129, 45, 226, .28);
  border: 1px solid rgba(216, 180, 254, .3);
  border-radius: 999px;
  padding: .12rem .45rem;
}
.group-member-leader-tag .group-leader-ico {
  width: 12px;
  height: 12px;
  background-color: #fbbf24;
}
.group-member-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.group-member-actions .btn-sm {
  padding: .42rem .7rem;
  font-size: .76rem;
  border-radius: 999px;
  white-space: nowrap;
}
.group-member-hint {
  font-size: .74rem;
  color: #8b849c;
  font-weight: 650;
  max-width: 9.5rem;
  text-align: right;
  line-height: 1.3;
}
@media (max-width: 620px) {
  .group-member-row {
    flex-direction: column;
    align-items: stretch;
  }
  .group-member-actions {
    justify-content: flex-start;
  }
  .group-member-hint {
    max-width: none;
    text-align: left;
  }
}
.group-network-hint {
  font-size: .78rem;
  color: #8b829e;
  font-weight: 500;
}
.group-network {
  position: relative;
  width: 100%;
  min-height: 520px;
  margin: .35rem 0 1.2rem;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(255, 79, 178, .1), transparent 58%),
    radial-gradient(ellipse 80% 70% at 50% 48%, rgba(129, 45, 226, .14), transparent 72%),
    rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  touch-action: manipulation;
}
.gn-more {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  font-size: .78rem;
  font-weight: 700;
  color: #e9d5ff;
  background: rgba(129, 45, 226, .28);
  border: 1px solid rgba(216, 180, 254, .35);
  border-radius: 999px;
  padding: .35rem .7rem;
  cursor: pointer;
  pointer-events: auto;
}
.gn-more:hover {
  background: #812DE2;
  color: #fff;
}
.group-network-glow {
  position: absolute;
  inset: 18% 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 65, 231, .12), transparent 68%);
  pointer-events: none;
  animation: gn-pulse 5.5s ease-in-out infinite;
}
@keyframes gn-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.gn-node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: var(--gn-size, 48px);
  height: var(--gn-size, 48px);
  border-radius: 50%;
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.gn-node.is-leader {
  z-index: 8;
  pointer-events: auto;
}
.gn-node::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  z-index: -1;
}
.gn-node.size-xl { --gn-size: 72px; z-index: 4; }
.gn-node.size-lg { --gn-size: 56px; }
.gn-node.size-md { --gn-size: 48px; }
.gn-node.size-sm { --gn-size: 38px; }
.gn-node .gn-avatar,
.gn-node .avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: calc(var(--gn-size, 48px) * .32);
  font-weight: 700;
  color: #fff;
  box-shadow:
    0 0 0 3px var(--gn-ring, #812DE2),
    0 14px 32px rgba(0, 0, 0, .42),
    0 4px 14px rgba(129, 45, 226, .28);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
  pointer-events: none;
}
.gn-node .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.gn-node.is-leader .gn-avatar,
.gn-node.is-leader .avatar {
  box-shadow:
    0 0 0 4px #fbbf24,
    0 0 0 7px rgba(129, 45, 226, .55),
    0 18px 40px rgba(129, 45, 226, .5),
    0 6px 16px rgba(0, 0, 0, .35);
}
.gn-node:hover,
.gn-node:focus-visible,
.gn-node.is-aim {
  z-index: 20 !important;
  outline: none;
}
.gn-node:hover .gn-avatar,
.gn-node:hover .avatar,
.gn-node:focus-visible .gn-avatar,
.gn-node:focus-visible .avatar,
.gn-node.is-aim .gn-avatar,
.gn-node.is-aim .avatar {
  transform: translateY(-4px) scale(1.12);
  box-shadow:
    0 0 0 3px var(--gn-ring, #812DE2),
    0 0 28px color-mix(in srgb, var(--gn-ring, #812DE2) 55%, transparent),
    0 22px 40px rgba(0, 0, 0, .5);
}
.gn-node.is-aim .gn-tip,
.gn-node:hover .gn-tip,
.gn-node:focus-visible .gn-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.gn-crown {
  position: absolute;
  top: -4px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1b1139;
  border: 1.5px solid rgba(251, 191, 36, .75);
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
.gn-crown .group-leader-ico {
  width: 12px;
  height: 12px;
  background-color: #fbbf24;
}
.gn-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: max-content;
  max-width: 140px;
  padding: .35rem .55rem;
  border-radius: 10px;
  background: rgba(15, 12, 28, .92);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.gn-tip strong {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
}
.gn-tip small {
  display: block;
  margin-top: .12rem;
  font-size: .68rem;
  color: #b7aec9;
}
.gn-node:hover .gn-tip,
.gn-node:focus-visible .gn-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.group-members { display: grid; gap: .45rem; }
.group-members > .group-member-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: .7rem .85rem;
  cursor: pointer;
  color: #fff;
}
.group-members > .group-member-row:hover { border-color: rgba(216,180,254,.4); }
.group-members > .group-member-row .avatar { width: 40px; height: 40px; font-size: .8rem; }
.group-members > .group-member-row strong { display: block; color: #fff; font-size: .92rem; }
.group-members > .group-member-row small { color: #a39bb8; font-size: .78rem; }
.group-members > .group-member-row .group-leader-badge { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .group-network-glow { animation: none; }
}
.group-detail .btn-secondary,
.group-detail .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.group-detail .interest-cloud .chip {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #efe8ff;
}
@media (max-width: 900px) {
  .group-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
  }
  .group-detail .group-actions .btn {
    justify-content: center;
    min-width: 0;
  }
  .group-hero-chat.btn-primary,
  .group-detail .group-hero-chat.btn-primary {
    width: 100%;
    box-shadow: 0 8px 20px rgba(214, 65, 231, .28);
  }
  .gdetail-actions {
    grid-template-columns: 1fr 1fr;
  }
  .groups-page .section-head { flex-direction: column; align-items: stretch; }
}
@media (max-width: 720px) {
  .group-detail {
    padding: .15rem 0 0;
  }
  .group-ad {
    margin: 0 0 .7rem;
  }
  .group-ad .ad-slot--banner .ad-slot-media {
    aspect-ratio: 3 / 1;
    min-height: 64px;
    max-height: 100px;
  }
  .group-ad .ad-slot--banner .ad-slot-body {
    padding: .65rem .8rem .75rem;
  }
  .group-ad .ad-slot--banner .ad-slot-body strong {
    font-size: .88rem;
  }
  .group-ad-fallback {
    padding: .85rem .9rem;
    min-height: 64px;
  }
  .group-detail-top {
    margin-bottom: .65rem;
  }
  .group-detail .group-back {
    padding: .38rem .75rem;
    font-size: .78rem;
  }
  .gdetail-banner {
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
  }
  .gdetail-banner--landscape {
    max-height: min(200px, 48vw);
  }
  .gdetail-banner--landscape img {
    max-height: min(200px, 48vw);
  }
  .gdetail-banner--square {
    width: min(100%, 400px);
    max-height: min(400px, 88vw);
  }
  .gdetail-banner--portrait {
    width: min(100%, 300px);
    max-height: min(420px, 90vw);
  }
  .gdetail-banner img {
    border-radius: inherit;
  }
  .group-detail .group-actions .btn[disabled] {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
    height: auto;
    min-height: 44px;
    padding: .7rem 1rem;
  }
  .gdetail-avatar {
    width: 64px;
    height: 64px;
    left: .7rem;
    bottom: -.95rem;
    border-radius: 14px;
  }
  .gdetail-title {
    font-size: 1.35rem;
  }
  .gdetail-action {
    padding: .6rem .55rem;
  }
  .gdetail-action-text strong {
    font-size: .78rem;
  }
  .gdetail-action-text small {
    font-size: .66rem;
  }
  .gdetail-about p {
    font-size: .9rem;
  }
  .group-detail .group-actions .btn {
    min-height: 44px;
    padding: .55rem .7rem;
    font-size: .88rem;
  }
  .group-detail > .group-leader-chip {
    font-size: .8rem;
  }
  .group-updates-head,
  .group-network-head {
    margin-top: .9rem !important;
  }
  .gfeed-compose {
    margin: .55rem 0 .7rem;
    gap: .55rem;
  }
  .gfeed-compose .rich-editor {
    min-height: 72px;
  }
  .gfeed-empty,
  .gfeed-locked {
    margin: .35rem 0 .75rem;
  }
}
@media (max-width: 620px) {
  .groups-grid { grid-template-columns: 1fr; }
}

.sidebar .sidebar-tests-btn.active {
  background: #812DE2;
  border-color: #812DE2;
  color: #fff;
}
.tests-page {
  color: #fff;
  max-width: 1100px;
}
.tests-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 1.25rem;
  align-items: start;
}
.tests-main { min-width: 0; }
.tests-profile-panel {
  position: sticky;
  top: 1rem;
}
.tests-profile-panel--cta,
.tests-profile-panel--loading {
  min-height: 280px;
}
.tests-profile-cta,
.tests-profile-card {
  background: rgba(129, 45, 226, .14);
  border: 1px solid rgba(129, 45, 226, .32);
  border-radius: 18px;
  padding: 1.15rem 1.2rem;
  color: #fff;
}
.tests-profile-cta-icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 122, 217, .18);
  color: #ff7ad9;
  font-size: 1.1rem;
  margin-bottom: .75rem;
}
.tests-profile-cta h3,
.tests-profile-head h3 {
  margin: 0 0 .45rem;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.tests-profile-cta p {
  margin: 0 0 .65rem;
  color: #a39bb8;
  line-height: 1.45;
  font-size: .88rem;
}
.tests-profile-head .eyebrow {
  color: #ff7ad9;
  margin-bottom: .25rem;
}
.tests-profile-headline {
  margin: 0;
  color: #d8b4fe;
  font-weight: 700;
  line-height: 1.4;
}
.tests-profile-body {
  margin-top: .85rem;
  color: #c4bdd6;
  font-size: .88rem;
  line-height: 1.55;
}
.tests-profile-body p { margin: 0 0 .75rem; }
.tests-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .75rem 0;
}
.tests-profile-block {
  margin: .85rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.tests-profile-block strong {
  display: block;
  margin-bottom: .35rem;
  color: #fff;
  font-size: .82rem;
}
.tests-profile-block ul {
  margin: 0;
  padding-left: 1.1rem;
  color: #a39bb8;
}
.tests-profile-tip {
  margin-top: .85rem;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.tests-profile-tip strong {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .35rem;
  color: #ffb4e0;
  font-size: .82rem;
}
.tests-profile-tip p {
  margin: 0;
  color: #a39bb8;
  font-size: .84rem;
  line-height: 1.45;
}
.tests-profile-rate {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.tests-profile-rate > strong {
  display: block;
  margin-bottom: .25rem;
  font-size: .9rem;
}
.tests-profile-rate-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem;
  margin: .65rem 0 .5rem;
}
.tests-profile-rate-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 10px;
  padding: .45rem 0;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.tests-profile-rate-btn:hover {
  background: rgba(129, 45, 226, .25);
  border-color: rgba(129, 45, 226, .45);
}
.tests-profile-rate-btn.is-active {
  background: #812DE2;
  border-color: #812DE2;
  transform: scale(1.03);
}
.tests-profile-rated { margin: .35rem 0 .65rem; }
.tests-profile-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 220px;
  text-align: center;
  color: #d8b4fe;
}
.tests-profile-loading .lucide-icon { font-size: 1.5rem; color: #ff7ad9; }
.admin-profile-modal { max-height: 70vh; overflow: auto; }
.admin-profile-modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 960px) {
  .tests-layout {
    grid-template-columns: 1fr;
  }
  .tests-profile-panel {
    position: static;
    order: -1;
  }
}
.tests-hero {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.15rem;
}
.tests-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(129, 45, 226, .28);
  border: 1px solid rgba(255,255,255,.12);
  color: #ff7ad9;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.tests-hero-copy {
  min-width: 0;
  flex: 1;
}
.tests-hero h2 {
  margin: 0 0 .45rem;
  letter-spacing: -.03em;
  color: #fff;
  font-size: clamp(1.55rem, 4.5vw, 1.9rem);
  line-height: 1.15;
  font-weight: 800;
}
.tests-hero p {
  margin: 0;
  color: #c4bdd4;
  line-height: 1.55;
  max-width: 42rem;
  font-size: .95rem;
}
.user-topbar--tests {
  display: flex;
  align-items: center;
  gap: .55rem;
}
.user-topbar--tests .topbar-spacer {
  flex: 1;
  min-width: 0;
}
.user-topbar--tests .topbar-alerts {
  margin-left: auto;
}
.tests-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0 0 1rem;
}
.tests-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: #d8b4fe;
  font-size: .78rem;
  font-weight: 750;
}
.tests-meta-row i { color: #ff7ad9; font-size: .78rem; }
.tests-legal {
  margin: 1.5rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: #b8b0c4;
  font-size: .72rem;
  line-height: 1.5;
  text-align: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
.tests-compat-banner {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.tests-compat-banner > i,
.tests-compat-banner .lucide-icon {
  color: #ff7ad9;
  font-size: 1.15rem;
  margin-top: .15rem;
  flex: none;
}
.tests-compat-banner strong {
  display: block;
  margin-bottom: .2rem;
  font-size: .95rem;
  color: #fff;
}
.tests-compat-banner p {
  margin: 0;
  color: #a39bb8;
  font-size: .84rem;
  line-height: 1.4;
}
.tests-progress-card {
  background: rgba(129, 45, 226, .18);
  border: 1px solid rgba(129, 45, 226, .35);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  margin-bottom: .85rem;
  color: #fff;
}
.tests-progress-top {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-weight: 800;
  margin-bottom: .45rem;
}
.tests-progress-top span { color: #ffb4e0; }
.tests-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
  margin-bottom: .55rem;
}
.tests-progress-bar > span {
  display: block;
  height: 100%;
  background: #812DE2;
  border-radius: 999px;
}
.tests-progress-card p {
  margin: 0;
  color: #cfc7e2;
  font-size: .84rem;
  line-height: 1.4;
}
.quiz-choices {
  display: grid;
  gap: .55rem;
  margin-top: .35rem;
}
.quiz-choice {
  text-align: left;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: #efe8ff;
  border-radius: 14px;
  padding: .85rem 1rem;
  font: inherit;
  font-weight: 650;
  line-height: 1.35;
  cursor: pointer;
}
.quiz-choice.active {
  background: #fff;
  color: #120a2a;
  border-color: #fff;
}
.ddash-match-nudge {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(105deg, rgba(129,45,226,.35), rgba(214,65,231,.22));
  color: #fff;
  border-radius: 16px;
  padding: .9rem 1rem;
  margin: 0 0 1rem;
  cursor: pointer;
}
.ddash-match-nudge-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  flex: none;
}
.ddash-match-nudge-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: .15rem;
}
.ddash-match-nudge-copy strong { font-size: .95rem; }
.ddash-match-nudge-copy small { color: #d6d0e6; font-size: .8rem; line-height: 1.35; }
.ddash-match-nudge-pct {
  flex: none;
  font-weight: 900;
  font-size: .9rem;
  color: #ffb4e0;
}
.ddash-block-sub {
  margin: -.35rem 0 .75rem;
  color: #a39bb8;
  font-size: .84rem;
  line-height: 1.4;
}
.ddash-matches {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}
.ddash-match {
  flex: 0 0 168px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.ddash-match-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #1a1530;
  margin-bottom: .55rem;
}
.ddash-match-photo img,
.ddash-match-photo .ddash-person-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.ddash-match-badge {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  background: #812DE2;
  color: #fff;
  font-weight: 850;
  font-size: .72rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  border-radius: 999px;
  padding: .28rem .55rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.ddash-match-meta strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.ddash-match-meta > span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: #a39bb8;
  font-size: .74rem;
  margin-bottom: .35rem;
}
.ddash-match-why {
  display: block;
  margin-top: .35rem;
  color: #c4b5fd;
  font-size: .72rem;
  font-weight: 700;
}
.mpro-smart-match {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-bottom: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mpro-smart-match-score {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #812DE2;
  color: #fff;
  display: grid;
  place-content: center;
  text-align: center;
}
.mpro-smart-match-score strong { font-size: 1.25rem; line-height: 1; }
.mpro-smart-match-score span { font-size: .62rem; font-weight: 800; opacity: .85; }
.mpro-smart-match-copy strong { display: block; margin-bottom: .2rem; }
.mpro-smart-match-copy p { margin: 0 0 .45rem; color: #a39bb8; font-size: .84rem; line-height: 1.4; }
.mpro-smart-signals {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .45rem;
}
.mpro-smart-signals span {
  font-size: .72rem;
  font-weight: 800;
  color: #efe8ff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .28rem .55rem;
}
.tests-meta { margin: 0 0 .65rem; color: #a39bb8; }
.tests-list {
  display: grid;
  gap: .7rem;
}
.test-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .85rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: .95rem 1rem;
  color: #fff;
}
.test-card.is-soon { opacity: .72; }
.test-card-emoji,
.test-card-ico {
  width: auto;
  height: auto;
  min-width: 1.55rem;
  border-radius: 0;
  background: none;
  border: 0;
  color: #ff7ad9;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  flex: 0 0 auto;
  line-height: 1;
}
.test-card-ico i {
  font-size: 1.35rem;
  color: #ff7ad9;
}
.test-card-emoji .lucide-icon {
  width: 1.35rem;
  height: 1.35rem;
  color: #ff7ad9;
  stroke: #ff7ad9;
}
.test-card-body { min-width: 0; }
.test-card-title {
  display: block;
  color: #fff;
  font-size: .98rem;
  letter-spacing: -.02em;
  margin-bottom: .25rem;
}
.test-card-body p {
  margin: 0;
  color: #a39bb8;
  font-size: .84rem;
  line-height: 1.4;
}
.test-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 6.75rem;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: .28rem .55rem;
  white-space: nowrap;
  flex: 0 0 auto;
}
.test-status.ready {
  background: rgba(16, 185, 129, .18);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, .25);
}
.test-status.done {
  background: rgba(129, 45, 226, .28);
  color: #e9d5ff;
  border: 1px solid rgba(216, 180, 254, .3);
}
.test-status.soon {
  background: rgba(255,255,255,.06);
  color: #c4b5fd;
  border: 1px solid rgba(255,255,255,.1);
}
.test-card .btn { flex: 0 0 auto; white-space: nowrap; min-width: 6.5rem; justify-content: center; }
.test-card .btn-secondary,
.test-card .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.test-card .btn-primary {
  background: #812DE2;
  border: 0;
  color: #fff;
}
@media (max-width: 620px) {
  .test-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "icon body"
      "status action";
    row-gap: .65rem;
  }
  .test-card-ico,
  .test-card-emoji { grid-area: icon; }
  .test-card-body { grid-area: body; }
  .test-status {
    grid-area: status;
    justify-self: start;
    min-width: 0;
  }
  .test-card .btn {
    grid-area: action;
    width: 100%;
    min-width: 0;
  }
}

/* Social wall + friends */
.wall-page {
  color: #fff;
  max-width: 1100px;
}
.wall-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
.wall-page-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: .85rem;
  row-gap: .35rem;
  margin-bottom: .95rem;
}
.wall-page-hero-title {
  min-width: 0;
}
.wall-page-hero-side {
  display: grid;
  gap: .55rem;
  justify-items: start;
  align-content: start;
  min-width: 0;
  padding-top: .12rem;
}
.wall-page-hero .eyebrow {
  color: #ff7ad9;
  margin: 0;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}
.wall-page-hero h2 {
  margin: .08rem 0 0;
  font-size: clamp(1.7rem, 6vw, 2rem);
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.05;
  font-weight: 900;
}
.wall-page-hero-side p {
  margin: 0;
  color: #a39bb8;
  line-height: 1.4;
  font-size: .86rem;
  max-width: 18rem;
}
.wall-invite-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(255, 122, 217, .45);
  border-radius: 999px;
  padding: .48rem .9rem;
  background: linear-gradient(135deg, rgba(255,79,178,.18), rgba(129,45,226,.24));
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
}
@media (max-width: 520px) {
  .wall-page-hero {
    column-gap: .7rem;
  }
  .wall-page-hero-side p {
    font-size: .82rem;
    max-width: none;
  }
  .wall-page-hero .wall-invite-btn {
    padding: .42rem .75rem;
    font-size: .74rem;
  }
}
.wall-invite-btn:hover {
  border-color: rgba(255, 122, 217, .55);
  background: linear-gradient(135deg, rgba(255,79,178,.24), rgba(129,45,226,.28));
}
.wall-invite-btn .lucide-icon,
.wall-invite-btn i { color: #ff7ad9; }
.buddy-search {
  margin: 0 0 .85rem;
  display: grid;
  gap: .5rem;
}
.buddy-search-bar {
  display: grid;
  gap: .7rem;
  padding: .95rem 1rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background:
    linear-gradient(145deg, rgba(129, 45, 226, .28), rgba(255, 86, 165, .1) 55%, rgba(255, 255, 255, .03)),
    #151322;
}
.buddy-search-kicker {
  margin: 0;
  font-size: .92rem;
  color: #d6cfff;
  font-weight: 650;
  line-height: 1.3;
  cursor: text;
}
.buddy-search-kicker strong {
  color: #fff;
  font-weight: 800;
}
.buddy-search-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
}
.buddy-search-mark {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: contain;
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
}
.buddy-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(8, 6, 18, .55);
  color: #fff;
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding: .75rem .95rem;
  outline: none;
  caret-color: #ff8fd0;
  -webkit-appearance: none;
  appearance: none;
}
.buddy-input::placeholder { color: #8b849c; font-weight: 550; }
.buddy-input:focus {
  border-color: rgba(255, 122, 217, .55);
  box-shadow: 0 0 0 3px rgba(255, 79, 178, .16);
  background: rgba(8, 6, 18, .72);
}
.buddy-input:disabled {
  opacity: .65;
  cursor: wait;
}
.buddy-ask-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 999px !important;
  justify-content: center;
  font-weight: 800;
  font-size: .95rem;
  background: #812DE2 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.buddy-ask-btn:hover {
  filter: brightness(1.06);
}
.buddy-search-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: .2rem;
}
.buddy-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.buddy-chips-label {
  color: #8b849c;
  font-size: .78rem;
  font-weight: 700;
}
.buddy-chip {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #d8b4fe;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.buddy-chip:hover {
  background: rgba(129, 45, 226, .25);
  color: #fff;
}
.buddy-results {
  display: grid;
  gap: .75rem;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .03);
}
.buddy-results[hidden] {
  display: none !important;
}
.buddy-answer-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .45rem;
}
.buddy-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #ff8fd0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.buddy-mode {
  color: #a39bb8;
  font-size: .78rem;
  font-weight: 650;
}
.buddy-clear { margin-left: auto; }
.buddy-answer p {
  margin: 0;
  color: #efe8ff;
  line-height: 1.45;
  white-space: pre-wrap;
}
.buddy-note {
  margin: 0;
  color: #a39bb8;
  font-size: .86rem;
}
.buddy-block-label {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a39bb8;
  margin-bottom: .4rem;
}
.buddy-people,
.buddy-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.buddy-people-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
.buddy-card {
  display: grid;
  gap: .55rem;
  padding: .55rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.buddy-card--row {
  grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: .7rem;
  padding: .7rem;
}
.buddy-card:hover {
  border-color: rgba(255, 122, 217, .35);
  background: rgba(255, 255, 255, .07);
  transform: translateY(-1px);
}
.buddy-card-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
}
.buddy-card--row .buddy-card-photo {
  width: 72px;
  height: 72px;
  aspect-ratio: auto;
  flex: none;
}
.buddy-card-photo img,
.buddy-card-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.buddy-card-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.35rem;
  color: #fff;
}
.buddy-card--row .buddy-card-fallback {
  font-size: 1.05rem;
}
.buddy-card-photo .online-dot {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: auto;
  width: 10px;
  height: 10px;
  border: 2px solid #1a1428;
}
.buddy-card-match {
  position: absolute;
  left: .45rem;
  bottom: .45rem;
  z-index: 2;
  padding: .28rem .5rem;
  border-radius: 999px;
  background: #812DE2;
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: -.01em;
  white-space: nowrap;
  line-height: 1.1;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.buddy-card-meta {
  display: grid;
  gap: .15rem;
  min-width: 0;
  align-content: start;
}
.buddy-card-meta strong {
  font-size: .88rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buddy-card-meta > span {
  color: #a39bb8;
  font-size: .72rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buddy-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .15rem;
}
.buddy-card-tags em {
  font-style: normal;
  font-size: .65rem;
  font-weight: 700;
  color: #e9d5ff;
  background: rgba(124, 58, 237, .28);
  border-radius: 999px;
  padding: .12rem .4rem;
}
.buddy-card-why {
  display: grid;
  gap: .25rem;
  align-content: start;
  min-width: 0;
  padding: .55rem .65rem;
  border-radius: 12px;
  background: rgba(129, 45, 226, .14);
  border: 1px solid rgba(196, 181, 253, .18);
}
.buddy-card-why em {
  font-style: normal;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c4b5fd;
}
.buddy-card-why p {
  margin: 0;
  color: #efe8ff;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.buddy-person,
.buddy-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  border-radius: 999px;
  padding: .35rem .7rem .35rem .35rem;
  cursor: pointer;
  text-align: left;
}
.buddy-person .avatar { width: 28px; height: 28px; }
.buddy-person span,
.buddy-link span {
  display: grid;
  gap: .05rem;
  min-width: 0;
}
.buddy-person strong,
.buddy-link span {
  font-size: .88rem;
  font-weight: 750;
}
.buddy-person small {
  color: #a39bb8;
  font-size: .72rem;
}
.buddy-link { padding: .45rem .85rem; }
.wall-rail-buddy-session .wall-buddy-q {
  margin: .35rem 0 .55rem;
  font-size: .9rem;
  line-height: 1.35;
  color: #efe8ff;
  font-weight: 650;
}
.wall-buddy-faces {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.wall-buddy-face {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
}
.wall-buddy-face .avatar {
  width: 34px;
  height: 34px;
}
.wall-buddy-hint {
  margin: .55rem 0 0;
  font-size: .72rem;
  color: #a39bb8;
  line-height: 1.35;
}
.buddy-return-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 .65rem;
  padding: .2rem 0 .35rem;
  background: transparent;
}
.buddy-return-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: min(100%, 34rem);
  border: 0;
  background: rgba(16, 12, 28, .88);
  color: rgba(255, 255, 255, .92);
  border-radius: 999px;
  padding: .42rem .95rem .42rem .85rem;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}
.buddy-return-btn:hover {
  background: rgba(24, 18, 42, .95);
  color: #fff;
}
.buddy-return-btn i {
  flex: none;
  font-size: .78rem;
  opacity: .9;
}
.buddy-return-btn strong {
  flex: none;
  font-weight: 750;
  letter-spacing: -.01em;
}
.buddy-return-btn span {
  color: rgba(233, 213, 255, .72);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 720px) {
  .buddy-card--row {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "photo meta"
      "why why";
  }
  .buddy-card--row .buddy-card-photo { grid-area: photo; width: 64px; height: 64px; }
  .buddy-card--row .buddy-card-meta { grid-area: meta; }
  .buddy-card--row .buddy-card-why { grid-area: why; }
}
.wall-compose {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 1.05rem 1.15rem;
  margin-bottom: .95rem;
  color: #fff;
}
.wall-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.avatar.wall-compose-avatar { width: 44px; height: 44px; flex: none; }
.wall-compose-head .wall-invite-btn {
  margin-left: auto;
}
.wall-compose-main { flex: 1; min-width: 0; width: 100%; }
.wall-compose textarea {
  width: 100%;
  border: 0;
  resize: vertical;
  min-height: 56px;
  font: inherit;
  color: #fff;
  background: transparent;
  outline: none;
}
.wall-compose textarea::placeholder { color: #8b849c; }
.wall-compose-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  margin-top: .45rem;
  padding-top: .55rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wall-visibility {
  position: relative;
  display: inline-flex;
}
.wall-vis-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: #efe8ff;
  border-radius: 999px;
  padding: .4rem .75rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.wall-vis-btn .lucide-icon,
.wall-vis-btn svg {
  width: .85em;
  height: .85em;
  opacity: .8;
}
.wall-vis-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 30;
  min-width: 220px;
  padding: .35rem;
  border-radius: 14px;
  background: #161225;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  display: grid;
  gap: .2rem;
}
.wall-vis-menu[hidden] { display: none !important; }
.wall-vis-opt {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .84rem;
  font-weight: 650;
  color: #f5f0ff;
  background: transparent;
  cursor: pointer;
}
.wall-vis-opt:hover,
.wall-vis-opt:focus-visible {
  background: rgba(129, 45, 226, .35);
  color: #fff;
  outline: none;
}
.wall-vis-opt.active {
  background: #812DE2;
  color: #fff;
}
.wall-compose-media {
  border: 0;
  background: transparent;
  color: #d8b4fe;
  font: inherit;
  font-weight: 750;
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  padding: .35rem .4rem;
}
.wall-compose-preview {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.wall-compose-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wall-compose-clear {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: .65rem;
}
.wall-compose-bar .btn { margin-left: auto; background: #812DE2; border: 0; }
.wall-feed { display: grid; gap: .85rem; }
.wall-post {
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 1.15rem 1.15rem 1.1rem;
  color: #fff;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.wall-post-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .55rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.wall-post-head .wall-author {
  min-width: 0;
  flex: 1 1 auto;
}
.wall-post-head .wall-author > div {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.wall-post-tools {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  flex-wrap: wrap;
  max-width: 100%;
}
.wall-post-tools .icon-btn {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #d8b4fe;
}
.wall-post-tools .icon-btn:hover {
  background: rgba(129, 45, 226, .28);
  color: #fff;
}
.wall-post-tools .icon-btn.is-on {
  background: rgba(255, 79, 178, .18);
  border-color: rgba(255, 79, 178, .35);
  color: #ff8fd0;
}
.wall-post.is-pinned {
  border-color: rgba(216, 180, 254, .35);
  background: linear-gradient(180deg, rgba(129, 45, 226, .14), rgba(255,255,255,.04));
}
.wall-pin-label {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-left: .35rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  color: #d8b4fe;
  background: rgba(129, 45, 226, .18);
  border: 1px solid rgba(216, 180, 254, .28);
  vertical-align: middle;
}
.wall-edit-form {
  display: grid;
  gap: .65rem;
}
.wall-edit-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: .75rem .85rem;
  background: rgba(0,0,0,.25);
  color: #fff;
  font: inherit;
  resize: vertical;
  min-height: 110px;
  outline: none;
}
.wall-edit-form textarea:focus {
  border-color: rgba(129, 45, 226, .7);
  box-shadow: 0 0 0 3px rgba(129, 45, 226, .2);
}
.wall-edit-form .wall-compose-bar {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.wall-author {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  min-width: 0;
}
.wall-author .avatar {
  width: 44px;
  height: 44px;
  flex: none;
}
.wall-author strong { display: block; color: #fff; line-height: 1.2; }
.wall-author small { color: #a39bb8; font-size: .75rem; display: block; margin-top: .15rem; }
.wall-post-body {
  margin-top: .85rem;
  padding: 0 .1rem;
}
.wall-post-body p {
  margin: 0;
  white-space: pre-wrap;
  color: #efe8ff;
  line-height: 1.5;
  font-size: .98rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.wall-post-image {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  display: block;
  border-radius: 12px;
  margin-top: .75rem;
}
.wall-react-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wall-react-summary {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .84rem;
  color: #a39bb8;
  font-weight: 700;
}
.wall-action-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: .2rem 0 !important;
  font-weight: 750;
  font-size: .86rem;
  color: #d8b4fe !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  -webkit-appearance: none;
  appearance: none;
}
.wall-action-btn:hover { color: #ff9fd0 !important; background: transparent !important; }
.wall-action-btn.has-reaction {
  background: transparent !important;
  color: #ff7ad9 !important;
}
.wall-post-stats {
  margin-top: .45rem;
  color: #a39bb8;
  font-size: .78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
}
.wall-post-when {
  flex: none;
  color: #a39bb8;
  font-weight: 650;
  white-space: nowrap;
}
.wall-comments {
  display: grid;
  gap: .85rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wall-comment {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  min-width: 0;
}
.wall-comment.is-reply {
  margin-left: 0;
  gap: .4rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.avatar.wall-comment-avatar {
  width: 36px;
  height: 36px;
  font-size: .7rem;
  flex: none;
  margin-top: .1rem;
}
.wall-comment.is-reply .wall-comment-avatar {
  width: 24px;
  height: 24px;
  font-size: .55rem;
}
.wall-comment-body {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: .28rem;
}
.wall-comment-bubble-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}
.wall-comment.is-reply .wall-comment-bubble-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
}
.wall-comment-bubble-wrap.has-reacts {
  margin-bottom: .35rem;
  padding-right: .35rem;
}
.wall-comment-bubble {
  display: inline-block;
  max-width: 100%;
  width: fit-content;
  background: rgba(255,255,255,.08) !important;
  border: 0 !important;
  border-radius: 18px;
  padding: .55rem .85rem .6rem;
  color: #fff !important;
  box-shadow: none !important;
  box-sizing: border-box;
}
.wall-comment.is-reply .wall-comment-bubble {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: .5rem .75rem .55rem;
  border-radius: 16px;
}
.wall-comment-bubble strong {
  display: inline;
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  margin-right: .35rem;
}
.wall-comment-bubble strong .founder-badge {
  font-size: .72em;
}
.wall-comment-bubble p {
  display: inline;
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  color: #efe8ff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}
.wall-comment-reacts {
  position: absolute;
  right: -.15rem;
  bottom: -.55rem;
  display: inline-flex;
  align-items: center;
  gap: .12rem;
  padding: .12rem .35rem .12rem .18rem;
  border-radius: 999px;
  background: #1a142c;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  font-size: .68rem;
  font-weight: 750;
  color: #efe8ff;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}
.wall-comment-react-emoji {
  font-size: .78rem;
  line-height: 1;
}
.wall-comment-react-count {
  font-size: .68rem;
  font-weight: 750;
  color: #c4b5fd;
  margin-left: .05rem;
}
.wall-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .15rem .55rem;
  margin: 0;
  padding: 0 .2rem;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
}
.wall-comment-bubble-wrap.has-reacts + .wall-comment-meta {
  margin-top: .45rem;
  padding-right: 2.2rem;
}
.wall-comment-meta .text-link {
  border: 0;
  background: transparent;
  color: #a39bb8;
  font-weight: 750;
  font-size: .72rem;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
  flex: none;
}
.wall-comment-meta .text-link:hover,
.wall-comment-meta .wall-comment-like.has-reaction {
  color: #d8b4fe;
}
.wall-comment-time {
  font-size: .72rem;
  color: #8b849c;
  font-weight: 650;
}
.wall-comment-meta .text-link.danger { color: #fb7185; }
.wall-react-more-link { display: none !important; }
.wall-replies {
  display: grid;
  gap: .55rem;
  margin-top: .4rem;
  /* Minder diepe nest — reply bijna zo breed als parent (Facebook-stijl) */
  margin-left: calc(-0.35rem - 8px);
  padding-left: 0;
  width: calc(100% + 0.35rem + 8px);
  max-width: none;
  box-sizing: border-box;
}
@media (max-width: 820px) {
  .wall-replies {
    margin-left: calc(-0.25rem - 4px);
    width: calc(100% + 0.25rem + 4px);
  }
}
.wall-comment-form {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.wall-reply-slot:empty { display: none; }
.wall-reply-slot {
  margin-top: .45rem;
  min-width: 0;
}
.wall-reply-form {
  margin-top: 0;
  padding: .35rem 0 0;
  border-top: 0;
  align-items: flex-start;
  gap: .5rem;
}
.wall-comment-edit-form {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-top: .35rem;
  padding: .35rem 0 0;
  border-top: 0;
}
.wall-comment-edit-form .wall-reply-avatar,
.wall-comment-edit-form .avatar.wall-reply-avatar {
  width: 28px;
  height: 28px;
  font-size: .58rem;
  margin-top: .2rem;
}
.wall-comment-edit-form .wall-reply-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: .35rem;
}
.wall-comment-edit-form input[type="text"] {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: .55rem .9rem;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.wall-comment-edit-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(244,114,182,.5);
}
.wall-reply-form .wall-reply-avatar,
.wall-reply-form .avatar.wall-reply-avatar {
  width: 28px;
  height: 28px;
  font-size: .58rem;
  margin-top: .2rem;
}
.wall-reply-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: .35rem;
}
.wall-reply-form input[type="text"] {
  width: 100%;
  border-radius: 14px;
  padding: .55rem .8rem;
}
.wall-reply-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
}
.wall-reply-actions .text-link {
  border: 0;
  background: transparent;
  color: #a39bb8;
  font-weight: 750;
  font-size: .74rem;
  cursor: pointer;
  padding: 0;
}
.wall-reply-actions .text-link:hover { color: #d8b4fe; }
.wall-reply-actions .icon-btn {
  width: 36px;
  height: 36px;
}
.wall-comment-form input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(10, 8, 20, .72) !important;
  border-radius: 999px;
  padding: .55rem .9rem;
  font: inherit;
  color: #fff !important;
  outline: none;
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
}
.wall-comment-form input[type="text"]::placeholder { color: #8b849c !important; }
.wall-comment-form .icon-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #d8b4fe !important;
}
.wall-comment-form input[type="text"]:focus {
  border-color: rgba(216, 180, 254, .45);
  box-shadow: 0 0 0 3px rgba(129, 45, 226, .18);
}
.wall-empty {
  text-align: center;
  padding: 2.2rem 1.2rem;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 18px;
  color: #a39bb8;
}
.wall-empty-ico {
  width: 52px;
  height: 52px;
  margin: 0 auto .75rem;
  border-radius: 16px;
  background: rgba(129,45,226,.22);
  color: #ff7ad9;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}
.wall-empty h3 { margin: 0 0 .35rem; color: #fff; }
.wall-empty p { margin: 0; line-height: 1.45; }
.wall-rail { display: none; }
.wall-rail-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: .95rem;
}
.wall-rail-card h3 {
  margin: 0 0 .7rem;
  font-size: .95rem;
  color: #fff;
}
.wall-rail-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .55rem;
  color: #a39bb8;
  font-size: .84rem;
}
.wall-rail-card li {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.wall-rail-card li i { color: #ff7ad9; }
.wall-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .7rem;
}
.wall-rail-head h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.wall-rail-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(168, 85, 247, .22);
  color: #e9d5ff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}
.wall-rail-friends {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  overflow: visible;
  max-height: none;
}
.wall-rail-friend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  gap: 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: center;
  padding: .1rem;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: .86rem;
  min-height: 0;
  box-sizing: border-box;
}
.wall-rail-friend:hover { background: transparent; filter: brightness(1.08); }
.wall-rail-friend .avatar {
  width: 40px;
  height: 40px;
  font-size: .75rem;
  box-shadow: none !important;
  padding: 0 !important;
  background: var(--avatar-fallback, transparent);
}
.wall-rail-friend .avatar-photo {
  background: transparent !important;
}
.wall-rail-friend .avatar-photo img,
.wall-rail-friend .avatar-photo .avatar-img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50%;
}
.wall-rail-friend .avatar:has(.avatar-birthday),
.wall-rail-friend .avatar:has(.avatar-founder) { overflow: visible; }
.wall-rail-empty { margin: 0; color: #a39bb8; font-size: .84rem; }
.wall-rail-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  background: transparent;
  color: #efe8ff;
  text-align: left;
  padding: .55rem .35rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: .86rem;
}
.wall-rail-link:hover { background: rgba(255,255,255,.05); }
.wall-rail-link i { color: #ff7ad9; width: 1.1rem; }
@media (min-width: 980px) {
  .wall-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
  }
  .wall-rail {
    display: grid;
    gap: .85rem;
    position: sticky;
    top: 1rem;
  }
}
.friend-request-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid #ecdcf7;
  background: linear-gradient(135deg, #fdf4ff, #f5f3ff);
  color: #6b21a8;
  border-radius: 12px;
  padding: .75rem 1rem;
  font-weight: 800;
  margin: 0 0 1rem;
  cursor: pointer;
  text-align: left;
}
.wall-react-emojis { letter-spacing: -2px; display: inline-flex; gap: 1px; }
.reaction-wrap { position: relative; display: inline-flex; align-items: center; overflow: visible; z-index: 5; }
.wall-like-group {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border-radius: 0 !important;
  overflow: visible;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.wall-like-group .wall-action-btn {
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: .2rem 0 !important;
}
.wall-react-more {
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  color: #a39bb8 !important;
  width: 28px;
  cursor: pointer;
  border-radius: 0 !important;
  display: grid;
  place-items: center;
  padding: .2rem 0;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.wall-react-more:hover { background: transparent !important; color: #ff9fd0 !important; }
.reaction-picker {
  display: none;
  position: absolute;
  bottom: calc(100% + 12px);
  left: auto;
  right: .35rem;
  background: #1b1533;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: .45rem .55rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  gap: .25rem;
  z-index: 80;
  align-items: center;
  flex-wrap: nowrap;
  max-width: min(100vw - 2.5rem, 320px);
  box-sizing: border-box;
  margin: 0 .25rem;
}
.reaction-picker.open { display: flex; }
.reaction-pick {
  border: 0;
  background: transparent;
  font-size: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .12s ease;
  color: #fff;
  display: grid;
  place-items: center;
  line-height: 1;
  flex: none;
}
.reaction-emoji { display: block; font-size: 1.25rem; line-height: 1; }
.reaction-pick:hover { transform: scale(1.22); background: rgba(255,255,255,.1); }
.reaction-pick.active { background: rgba(129,45,226,.4); }
.comment-picker-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.comment-picker-wrap .reaction-picker {
  left: 0;
  right: auto;
  bottom: calc(100% + 6px);
}
.wall-react-more-link { font-weight: 800; letter-spacing: .08em; }
.wall-post { overflow: visible; }
.wall-react-row { overflow: visible; position: relative; z-index: 3; }
.wall-react-actions { overflow: visible; position: relative; z-index: 4; }
.comment-picker-wrap .reaction-picker { left: 0; }
.friend-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.friends-page {
  color: #fff;
  max-width: 720px;
  margin: 0 auto;
  padding: .15rem 0 1.25rem;
}
.friends-hero {
  display: grid;
  gap: .7rem;
  margin: 0 0 1rem;
}
.friends-hero-top {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.friends-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(145deg, #a855f7, #812DE2 55%, #db2777);
  border: 0;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  flex: none;
  box-shadow: 0 10px 24px rgba(129, 45, 226, .35);
}
.friends-hero-titles { min-width: 0; }
.friends-hero .eyebrow {
  margin: 0;
  color: #ff7ad9;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.friends-hero h1 {
  margin: .12rem 0 0;
  letter-spacing: -.035em;
  color: #fff;
  font-size: clamp(1.7rem, 5vw, 2rem);
  font-weight: 900;
  line-height: 1.05;
}
.friends-hero-lead {
  margin: 0;
  color: #a39bb8;
  line-height: 1.5;
  font-size: .92rem;
  max-width: 40rem;
}
.friends-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .7rem;
}
.friends-block-head h2 {
  margin: 0;
}
.friends-bulk-btn {
  flex: none;
  width: fit-content;
  max-width: 100%;
  padding: .55rem .85rem;
  font-size: .82rem;
  white-space: nowrap;
}
.friends-bulk-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .friends-block-head { flex-wrap: wrap; }
  .friends-bulk-btn { width: 100%; justify-content: center; white-space: normal; }
}
.friends-invite-nudge {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(135deg, rgba(129, 45, 226, .28), rgba(88, 28, 135, .22));
  color: #fff;
  border-radius: 16px;
  padding: .9rem 1rem;
  margin: 0 0 1.25rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.friends-invite-nudge:hover {
  border-color: rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(129, 45, 226, .36), rgba(88, 28, 135, .28));
}
.friends-invite-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  color: #f0abfc;
  flex: none;
}
.friends-invite-copy {
  display: grid;
  gap: .12rem;
  min-width: 0;
}
.friends-invite-nudge strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
}
.friends-invite-nudge small {
  color: #cfc7e2;
  font-size: .8rem;
}
.friends-invite-arrow {
  margin-left: auto;
  color: #ff7ad9;
  font-size: 1rem;
  flex: none;
}
.friends-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin: 0 0 .85rem;
  padding: .3rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.friends-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: #cfc7e2;
  font: inherit;
  font-weight: 800;
  letter-spacing: -.02em;
  padding: .7rem .8rem;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.friends-tab.is-active {
  background: #812DE2;
  color: #fff;
}
.friends-tab-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: #ff4fb2;
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
}
.friends-tab.is-active .friends-tab-badge {
  background: rgba(255,255,255,.2);
}
.friends-toolbar {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
}
.friends-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  padding: .55rem .9rem;
  color: #8b849c;
}
.friends-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font: inherit;
  font-size: .9rem;
}
.friends-search input::placeholder { color: #8b849c; }
.friends-gender {
  flex: none;
  display: flex;
  gap: .35rem;
}
.friends-gender-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: #cfc7e2;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  padding: .55rem .75rem;
  border-radius: 999px;
  cursor: pointer;
}
.friends-gender-btn.is-on {
  background: #812DE2;
  border-color: transparent;
  color: #fff;
}
@media (max-width: 620px) {
  .friends-toolbar { flex-wrap: wrap; }
  .friends-search { width: 100%; flex: 1 1 100%; }
  .friends-gender { width: 100%; }
  .friends-gender-btn { flex: 1; }
}
.friends-subhead {
  margin: .85rem 0 .45rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #cfc7e2;
}
.friends-subhead:first-child { margin-top: 0; }
.friends-block { margin-bottom: 1.25rem; }
.friends-block h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.friends-list { display: grid; gap: .55rem; }
.friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: .8rem .9rem;
  color: #fff;
}
.friend-row-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  color: inherit;
  flex: 1;
}
.friend-row-user .avatar {
  width: 48px;
  height: 48px;
  flex: none;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, .45);
}
.friend-row-user strong { display: block; color: #fff; font-weight: 800; }
.friend-row-user small { color: #a39bb8; font-size: .78rem; }
.friend-chat-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex: none;
}
.friend-chat-btn:hover { background: rgba(255,255,255,.1); }
.friend-unfriend-btn {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: transparent;
  color: #fff;
  font-weight: 750;
  font-size: .82rem;
  padding: .55rem .9rem;
  min-height: 38px;
  cursor: pointer;
}
.friend-unfriend-btn:hover { background: rgba(255,255,255,.06); }
.friends-page .btn-primary {
  background: #812DE2;
  border: 0;
  color: #fff;
  border-radius: 12px;
}
.friends-page .btn-secondary,
.friends-page .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 12px;
}
.friends-empty {
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 1.1rem;
  color: #a39bb8;
}
.friends-empty p { margin: 0; line-height: 1.45; }
@media (max-width: 620px) {
  .wall-compose-bar .btn { width: 100%; margin-left: 0; }
  .wall-compose-head .wall-invite-btn {
    padding: .4rem .7rem;
    font-size: .72rem;
  }
  .friends-page {
    padding: .1rem .15rem 1rem;
  }
  .friend-row {
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
  }
  .friend-actions {
    justify-content: flex-start;
    padding-left: calc(48px + .65rem);
  }
}

/* ?? Public profile (engaging) ?? */
.pub-profile {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: .85rem;
}
.pub-back {
  justify-self: start;
  border: 1px solid #ebe6f2;
  background: #fff;
  color: #5b21b6;
  border-radius: 999px;
  padding: .55rem 1rem;
  font-weight: 800;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(24, 19, 31, .06);
}
.pub-back:hover { background: #faf8ff; }
.pub-card {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #ebe6f2;
  box-shadow: 0 18px 50px rgba(24, 19, 31, .12);
}
.pub-cover {
  position: relative;
  height: 168px;
  background: linear-gradient(135deg, #7c3aed, #ff4fb2);
}
.pub-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}
.pub-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(18, 10, 42, .45));
  pointer-events: none;
}
.pub-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.15rem;
  align-items: end;
  padding: 0 1.25rem;
  margin-top: -56px;
  position: relative;
  z-index: 1;
}
.pub-avatar-wrap {
  border-radius: 50%;
  padding: 4px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(24, 19, 31, .18);
}
.avatar.pub-avatar {
  width: 108px !important;
  height: 108px !important;
  font-size: 2.1rem;
  box-shadow: none;
}
.pub-identity-text { min-width: 0; padding-bottom: .15rem; }
.pub-identity-text h1 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2rem);
  letter-spacing: -.03em;
  color: #1a1523;
  line-height: 1.15;
}
.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  margin-top: .4rem;
  color: #6b6280;
  font-size: .86rem;
  font-weight: 650;
}
.pub-meta span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.pub-meta span + span::before {
  content: '?';
  margin-right: .55rem;
  color: #c4bdd4;
  font-weight: 900;
}
.pub-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-top: .75rem;
}
.pub-stats > div {
  display: grid;
  gap: .05rem;
  min-width: 64px;
  padding: .45rem .7rem;
  border-radius: 14px;
  background: #f7f4fb;
  border: 1px solid #efeaf6;
}
.pub-stats strong {
  font-size: 1.05rem;
  color: #1a1523;
  letter-spacing: -.02em;
}
.pub-stats span {
  font-size: .72rem;
  font-weight: 700;
  color: #8b849c;
  text-transform: lowercase;
}
.pub-stat-match {
  background: linear-gradient(135deg, rgba(255, 88, 184, .12), rgba(124, 58, 237, .14)) !important;
  border-color: #ecdcf7 !important;
}
.pub-stat-match strong { color: #7c3aed; }
.pub-safety {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: .85rem 1.25rem 0;
}
.pub-safety .btn { color: #8b849c; }
.report-reasons {
  display: grid;
  gap: .5rem;
}
.report-reason-opt {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .78rem .95rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  font-weight: 700;
  color: #efe8ff;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.report-reason-opt:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.report-reason-opt:has(input:checked) {
  border-color: rgba(255, 79, 178, .55);
  background: linear-gradient(135deg, rgba(255, 79, 178, .18), rgba(124, 58, 237, .22));
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 79, 178, .2);
}
.report-reason-opt input {
  appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  background: transparent;
  display: grid;
  place-items: center;
}
.report-reason-opt input::after {
  content: '';
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: transparent;
}
.report-reason-opt:has(input:checked) input {
  border-color: var(--pink);
}
.report-reason-opt:has(input:checked) input::after {
  background: var(--pink);
}
.report-form { gap: .85rem; }
.report-form .btn-block { margin-top: .15rem; }
.admin-report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
}
.admin-report-card { margin-bottom: .75rem; }
.admin-report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem;
  margin-bottom: .55rem;
}
.admin-report-user {
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  background: #f7f4fb;
  border-radius: 14px;
  padding: .45rem .65rem;
  cursor: pointer;
  text-align: left;
}
.admin-report-user strong { display: block; color: #1b1139; }
.admin-report-user small { color: #8b849c; font-size: .75rem; }
.admin-report-details {
  margin: 0 0 .75rem;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: #f7f4fb;
  color: #2a2338;
  white-space: pre-wrap;
  line-height: 1.45;
}
.blocked-section { margin-top: 1.2rem; }
.profile-danger-zone {
  margin-top: .85rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}
.danger-dropdown > summary {
  color: #fecaca;
}
.danger-dropdown > summary span {
  color: #fecaca;
}
.danger-dropdown .blocked-dropdown-body {
  padding: .85rem .95rem;
  border: 1px solid rgba(248, 113, 113, .35);
  border-radius: 14px;
  background: rgba(185, 28, 28, .06);
}
.profile-danger-zone .profile-hint {
  margin-bottom: .65rem;
}
.profile-danger-btn {
  width: auto !important;
  min-height: 36px;
  padding: .5rem .85rem;
  font-size: .84rem;
  box-shadow: none !important;
  filter: none !important;
}
.mpro-menu button.is-danger {
  color: #f87171;
}
.blocked-dropdown > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #1a1523;
  user-select: none;
  padding: .15rem 0;
}
.blocked-dropdown > summary::-webkit-details-marker { display: none; }
.blocked-dropdown > summary span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.blocked-dropdown > summary em {
  font-style: normal;
  font-size: .72rem;
  font-weight: 800;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 79, 178, .16);
  color: #ff4fb2;
}
.blocked-dropdown > summary > i {
  font-size: .75rem;
  opacity: .65;
  transition: transform .18s ease;
}
.blocked-dropdown[open] > summary > i { transform: rotate(180deg); }
.blocked-dropdown-body {
  margin-top: .75rem;
  display: grid;
  gap: .75rem;
}
.blocked-list { display: grid; gap: .55rem; }
.blocked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fff;
  border: 1px solid #ebe6f2;
  border-radius: 14px;
  padding: .65rem .8rem;
}
.pub-match-strip {
  margin: 1.1rem 1.25rem 0;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pcolor, #7c3aed) 12%, white), #fff5fb);
  border: 1px solid #ecdcf7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.pub-type {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
}
.pub-type-emoji {
  font-size: 1.7rem;
  line-height: 1;
  flex: none;
}
.pub-type strong {
  display: block;
  color: #1a1523;
  font-size: 1rem;
}
.pub-type p {
  margin: .2rem 0 0;
  color: #6b6280;
  font-size: .84rem;
  line-height: 1.4;
}
.pub-match-ring {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: #fff;
  border: 3px solid color-mix(in srgb, var(--pcolor, #7c3aed) 55%, #ff4fb2);
  box-shadow: 0 8px 20px rgba(124, 58, 237, .12);
}
.pub-match-ring span {
  font-size: 1.15rem;
  font-weight: 950;
  color: #1a1523;
  line-height: 1;
}
.pub-match-ring small {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pub-block {
  padding: 1.2rem 1.25rem 0;
}
.pub-block:last-child { padding-bottom: 1.4rem; }
.pub-block h3 {
  margin: 0 0 .55rem;
  font-size: 1.02rem;
  color: #1a1523;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.pub-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.45rem;
  height: 1.45rem;
  padding: 0 .4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4fb2, #7c3aed);
  color: #fff;
  font-size: .75rem;
  font-weight: 900;
}
.pub-hint {
  margin: -.25rem 0 .65rem;
  color: #8b849c;
  font-size: .82rem;
  font-weight: 650;
}
.pub-bio {
  margin: 0;
  color: #2a2338;
  line-height: 1.55;
  font-size: .95rem;
  white-space: pre-wrap;
}
.pub-intents {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}
.pub-intents span {
  background: #1a1523;
  color: #fff;
  border-radius: 999px;
  padding: .35rem .7rem;
  font-size: .78rem;
  font-weight: 750;
}
.pub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.pub-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .42rem .72rem;
  border-radius: 999px;
  background: #f4f1f8;
  color: #4c3f66;
  font-size: .82rem;
  font-weight: 750;
  border: 1px solid transparent;
}
.pub-chip.shared {
  background: linear-gradient(135deg, #fff0f8, #f3e8ff);
  color: #6d28d9;
  border-color: #ecdcf7;
}
.pub-chip i { color: #a78bfa; font-size: .85em; }
.pub-chip.shared i { color: #ff4fb2; }
.pub-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}
.pub-media-item {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1;
  background: #f4f1f8;
}
.pub-media-item.featured {
  grid-column: span 2;
  grid-row: span 2;
}
.pub-media-item img,
.pub-media-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.pub-wall {
  display: grid;
  gap: .75rem;
}
.pub-wall .wall-post {
  box-shadow: none;
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
}
.pub-empty {
  text-align: center;
  padding: 1.6rem 1rem;
  border-radius: 16px;
  background: #faf8ff;
  border: 1px dashed #e4dcf0;
  color: #8b849c;
}
.pub-empty i {
  font-size: 1.5rem;
  color: #c4b5fd;
  margin-bottom: .45rem;
}
.pub-empty p { margin: 0; font-size: .9rem; font-weight: 650; }
@media (max-width: 560px) {
  .pub-cover { height: 132px; }
  .pub-identity {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    margin-top: -48px;
  }
  .avatar.pub-avatar { width: 96px !important; height: 96px !important; }
  .pub-meta { justify-content: center; }
  .pub-stats { justify-content: center; }
  .pub-actions { padding-left: 1rem; padding-right: 1rem; }
  .pub-match-strip {
    flex-direction: column;
    text-align: center;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .pub-type { flex-direction: column; align-items: center; }
  .pub-block { padding-left: 1rem; padding-right: 1rem; }
  .pub-media { grid-template-columns: repeat(2, 1fr); }
  .pub-media-item.featured { grid-column: span 2; grid-row: span 1; aspect-ratio: 16/10; }
}

/* Mobile user profile */
.mpro {
  --mpro-gutter: .75rem;
  --mpro-radius: 20px;
  --mpro-pad: 1.1rem 1.2rem;
  max-width: none;
  width: 100%;
  margin: 0;
  display: grid;
  gap: var(--mpro-gutter);
  padding: 0 0 6.5rem;
  box-sizing: border-box;
}
.mpro-main {
  display: grid;
  gap: var(--mpro-gutter);
  min-width: 0;
  align-content: start;
}
.mpro-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.mpro-top-brand .brand-logo { height: 26px; }
.mpro-top-right { display: flex; align-items: center; gap: .35rem; }
.mpro-icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #fff;
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
  cursor: pointer;
}
.mpro-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 2px var(--bg);
}
.mpro-more-wrap { position: relative; z-index: 60; overflow: visible; }
.mpro-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  background: #221845;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: .5rem;
  display: grid;
  gap: .45rem;
  z-index: 120;
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
}
.mpro-cta-bar .mpro-menu,
.mpro-cta-mobile .mpro-menu,
.mpro-hero-actions .mpro-menu {
  top: auto;
  bottom: calc(100% + 8px);
}
.mpro-menu[hidden] { display: none !important; }
.mpro-menu.is-open { display: grid !important; }
.mpro-menu button {
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: .85rem .9rem;
  border-radius: 10px;
  font-weight: 750;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
}
.mpro-menu button:hover { background: rgba(255,255,255,.08); }
.mpro-menu button:disabled { opacity: .45; cursor: not-allowed; }
.mpro-hero-card {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: var(--mpro-gutter);
  padding: var(--mpro-pad);
  border-radius: var(--mpro-radius);
  background: var(--mpro-card, #16122b);
  border: 1px solid var(--mpro-line, rgba(255,255,255,.08));
  overflow: visible;
  position: relative;
  z-index: 5;
}
.mpro-hero-copy {
  position: relative;
  z-index: 6;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
}
@media (min-width: 901px) {
  .mpro-hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title online"
      "loc loc"
      "bio bio"
      "cta cta";
    column-gap: .85rem;
    row-gap: .35rem;
    align-content: start;
  }
  .mpro-hero-copy > .mpro-hero-title { grid-area: title; align-self: center; }
  .mpro-hero-copy > .mpro-visibility-row {
    grid-area: online;
    align-self: start;
    justify-self: end;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    gap: 0;
  }
  .mpro-hero-copy > .mpro-visibility-row .mpro-visibility-copy { display: none; }
  .mpro-hero-copy > .mpro-loc { grid-area: loc; margin: .15rem 0 .1rem; }
  .mpro-hero-copy > .mpro-bio-wrap { grid-area: bio; margin-top: .15rem; }
  .mpro-hero-copy > .mpro-hero-actions {
    grid-area: cta;
    margin-top: auto;
    padding-top: 1rem;
  }
}
.mpro-hero-copy h1 {
  margin: 0;
  font-size: clamp(1.45rem, 5vw, 2rem);
  letter-spacing: -.03em;
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  color: var(--mpro-ink, #fff);
}
.mpro-verified { color: #a78bfa; font-size: .78em; }
.mpro-founder-ico {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  background: url('/assets/icon.png') center/cover no-repeat;
  display: inline-block;
}
.mpro-hero-copy .founder-badge,
.mpro-hero-copy .mpro-founder-badge {
  font-size: .82rem;
  margin-left: .4rem;
}
.mpro-hero-copy .founder-badge .mpro-founder-ico,
.mpro-hero-copy .mpro-founder-badge .mpro-founder-ico {
  width: 16px;
  height: 16px;
}
.mpro-photo-founder {
  position: absolute;
  left: .55rem;
  top: .55rem;
  bottom: auto;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .7rem .32rem .42rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  background: #812DE2;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 6px 16px rgba(129, 45, 226, .35);
  backdrop-filter: none;
  pointer-events: none;
  width: auto;
  height: auto;
  max-width: none;
}
.mpro-photo-founder .mpro-founder-ico {
  width: 14px;
  height: 14px;
}
.mpro-birthday-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-left: .15rem;
  padding: .18rem .5rem .18rem .35rem;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 122, 217, .28), rgba(168, 85, 247, .28));
  border: 1px solid rgba(255, 154, 208, .45);
  color: #ffd6f0;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.mpro-birthday-chip .avatar-birthday-ico {
  width: 12px;
  height: 12px;
  color: #fff;
}
.mpro-photo-birthday {
  position: absolute;
  left: .55rem;
  top: .55rem;
  z-index: 4;
  display: none;
  align-items: center;
  gap: .35rem;
  padding: .32rem .7rem .32rem .42rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #ff7ad9, #a855f7);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 16px rgba(255, 122, 217, .35);
  pointer-events: none;
}
.mpro-photo-birthday .avatar-birthday-ico {
  width: 13px;
  height: 13px;
  color: #fff;
}
.mpro-photo-identity {
  display: none;
}
.mpro-photo-match {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  top: auto;
  right: auto;
  z-index: 4;
  padding: .4rem .65rem;
  border-radius: 999px;
  border: 0;
  background: #812DE2;
  color: #fff;
  font-size: .82rem;
  font-weight: 850;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  line-height: 1.1;
  transition: transform .15s ease, filter .15s ease;
}
.mpro-photo-match:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}
#mpro-match-detail {
  scroll-margin-top: 1.25rem;
}
.mpro-loc {
  margin: .45rem 0 .35rem;
  color: var(--mpro-muted, #b7adc9);
  font-size: .88rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.mpro-loc i { color: var(--mpro-accent, #812DE2); }
.mpro-visibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .85rem;
  padding: .7rem .8rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.mpro-visibility-copy {
  min-width: 0;
  flex: 1;
}
.mpro-visibility-copy strong {
  display: block;
  font-size: .88rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}
.mpro-visibility-copy small {
  display: block;
  margin-top: .15rem;
  font-size: .74rem;
  line-height: 1.3;
  color: rgba(255,255,255,.58);
  font-weight: 550;
}
.mpro-online-toggle,
.mpro-online-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: inherit;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  padding: .18rem .55rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.2;
  pointer-events: auto;
  position: relative;
  z-index: 5;
}
.mpro-online-badge { cursor: default; }
.mpro-online-toggle.is-on,
.mpro-online-badge {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .12);
  color: #86efac;
}
.mpro-online-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #94a3b8;
  flex: none;
}
.mpro-online-toggle.is-on .mpro-online-dot,
.mpro-online-badge .mpro-online-dot,
.mpro-btn-online.is-on .mpro-online-dot {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}
.mpro-online-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #efe8ff;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  padding: .28rem .65rem .28rem .32rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
  pointer-events: auto;
  position: relative;
  z-index: 5;
  max-width: 100%;
  white-space: nowrap;
}
.mpro-online-switch-track {
  position: relative;
  width: 2rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #64748b;
  flex: none;
  transition: background .18s ease;
}
.mpro-online-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.28);
  transition: transform .18s ease;
}
.mpro-online-switch.is-on {
  border-color: rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .14);
  color: #86efac;
}
.mpro-online-switch.is-on .mpro-online-switch-track {
  background: #22c55e;
}
.mpro-online-switch.is-on .mpro-online-switch-knob {
  transform: translateX(.85rem);
}
.mpro-online-switch.is-locked {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.7);
}
.mpro-online-switch.is-locked .mpro-online-switch-track {
  background: #475569;
}
.mpro-online-switch-label {
  font-size: .78rem;
  font-weight: 750;
}
.mpro-visibility-overlay {
  position: absolute;
  top: .65rem;
  left: .65rem;
  right: .65rem;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: calc(100% - 1.3rem);
  width: fit-content;
  margin: 0;
  padding: .4rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(12, 8, 24, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.88);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
  pointer-events: auto;
}
.mpro-visibility-overlay-ico {
  flex: none;
  color: #fbbf24;
  font-size: .72rem;
}
.mpro-visibility-overlay p {
  margin: 0;
  font-size: .72rem;
  line-height: 1.25;
  font-weight: 600;
  color: rgba(255,255,255,.86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-visibility-alert {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: .65rem 0 .85rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.72);
}
.profile-visibility-alert-ico {
  flex: none;
  margin-top: .1rem;
  color: rgba(251, 191, 36, .85);
  font-size: .78rem;
  opacity: .9;
}
.profile-visibility-alert p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.35;
  font-weight: 550;
  color: rgba(255,255,255,.68);
}
.mpro-visibility-alert-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #ddd6fe;
  font: inherit;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mpro-visibility-alert-link:hover {
  color: #fff;
}
@media (max-width: 900px) {
  .mpro-visibility-overlay {
    top: .75rem;
    left: .75rem;
    right: .75rem;
    max-width: none;
    width: auto;
  }
  .mpro-visibility-overlay p {
    white-space: normal;
  }
}
.mpro-btn-online {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.08) !important;
  color: #efe8ff !important;
}
.mpro-btn-online.is-on {
  border-color: rgba(34, 197, 94, .4) !important;
  background: rgba(34, 197, 94, .16) !important;
  color: #86efac !important;
}
.mpro-btn-online .mpro-online-dot {
  background: #94a3b8;
}
.mpro-btn-online:disabled {
  opacity: .65;
  cursor: wait;
}
.mpro-bio-wrap {
  margin: 0 0 .85rem;
}
.mpro-bio {
  margin: 0;
  color: var(--mpro-ink, rgba(255,255,255,.84));
  opacity: .88;
  font-size: .92rem;
  line-height: 1.5;
}
.mpro-bio-wrap.is-collapsible:not(.is-open) .mpro-bio {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mpro-bio-wrap.is-open .mpro-bio {
  display: block;
  overflow: visible;
}
.mpro-bio-more {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-top: .35rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font-size: .84rem;
  font-weight: 750;
  cursor: pointer;
  line-height: 1.2;
}
.mpro-bio-more:hover {
  color: #ddd6fe;
}
.mpro-bio-more i,
.mpro-bio-more svg {
  width: .85rem;
  height: .85rem;
  transition: transform .18s ease;
}
.mpro-bio-wrap.is-open .mpro-bio-more i,
.mpro-bio-wrap.is-open .mpro-bio-more svg {
  transform: rotate(180deg);
}
.mpro-bio-wrap:not(.is-collapsible) .mpro-bio-more {
  display: none;
}
.mpro-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.mpro-tag {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .38rem .72rem;
  border-radius: 999px;
  background: var(--mpro-tag-bg, rgba(255,255,255,.05));
  border: 1px solid var(--mpro-tag-border, rgba(255,255,255,.12));
  font-size: .76rem;
  font-weight: 750;
  color: var(--mpro-tag-ink, #efe8ff);
}
.mpro-tag.shared {
  background: var(--mpro-accent-soft, rgba(129,45,226,.12));
  border-color: rgba(129,45,226,.28);
}
.mpro-tag.muted { color: var(--mpro-muted, #8b849c); }
.mpro-hero-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 240px;
  justify-self: end;
  align-self: stretch;
  display: grid;
  place-items: stretch;
}
.mpro-hero-glow { display: none; }
.mpro-hero-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: none;
  height: 100%;
  border-radius: calc(var(--mpro-radius) - 4px);
  overflow: hidden;
  background: #0f0d1a;
  display: grid;
  place-items: center;
  box-shadow: var(--mpro-hero-shadow, none);
  isolation: isolate;
}
.mpro-hero-photo > img.mpro-hero-img,
.mpro-hero-photo > img:not(.mpro-founder-ico) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 0;
  background: #0f0d1a;
}
.mpro-hero-slide img.mpro-hero-img,
.mpro-hero-slide video.mpro-hero-video,
.mpro-hero-photo > video.mpro-hero-video {
  object-fit: cover;
  object-position: center top;
}
.mpro-hero-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mpro-hero-track::-webkit-scrollbar { display: none; }
.mpro-hero-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: #0f0d1a;
}
.mpro-hero-slide img.mpro-hero-img,
.mpro-hero-slide video.mpro-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #0f0d1a;
}
.mpro-hero-dots {
  position: absolute;
  top: .7rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .4rem;
  border-radius: 999px;
  background: rgba(8, 6, 18, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
}
.mpro-hero-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: width .15s ease, background .15s ease;
}
.mpro-hero-dot.is-on {
  width: .9rem;
  background: #fff;
}
.mpro-hero-photo > video.mpro-hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  min-height: 0;
  background: #0f0d1a;
}
.mpro-video-badge {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 4;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 18, .72);
  color: #fff;
  font-size: .85rem;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.mpro-hero-photo.has-slides .mpro-video-badge {
  top: 2.35rem;
}
.mpro-hero-photo.has-video .mpro-photo-match {
  right: auto;
  left: .55rem;
}
.mpro-hero-photo.is-zoomable {
  cursor: zoom-in;
}
.mpro-hero-photo.is-zoomable .mpro-hero-track,
.mpro-hero-photo.is-zoomable .mpro-hero-slide,
.mpro-hero-photo.is-zoomable .mpro-hero-img,
.mpro-hero-photo.is-zoomable .mpro-hero-video {
  cursor: zoom-in;
}
.mpro-hero-photo.is-zoomable::after {
  content: '';
  position: absolute;
  top: .55rem;
  right: .55rem;
  bottom: auto;
  left: auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(8, 6, 18, .72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px no-repeat;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.mpro-hero-photo.has-slides.is-zoomable::after {
  top: .55rem;
  right: .55rem;
}
.mpro-hero-photo.has-video.is-zoomable::after {
  top: 2.55rem;
}
@media (max-width: 820px) {
  .mpro-hero-photo.is-zoomable::after {
    top: .85rem;
    right: .85rem;
  }
  .mpro-hero-photo.has-video.is-zoomable::after {
    top: 2.85rem;
  }
}
.mpro-block {
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;
  z-index: 1;
  min-width: 0;
}
.mpro-block h2,
.mpro-card h2 {
  margin: 0 0 .45rem;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  letter-spacing: -.01em;
  color: var(--mpro-ink, #fff);
}
.mpro-block h2 i,
.mpro-card h2 i { color: var(--mpro-accent, #812DE2); }
.mpro-card {
  padding: var(--mpro-pad);
  border-radius: var(--mpro-radius);
  background: var(--mpro-card, #16122b);
  border: 1px solid var(--mpro-line, rgba(255,255,255,.08));
  box-shadow: var(--mpro-shadow, none);
  min-width: 0;
}
.mpro-self-tools {
  display: grid;
  gap: .75rem;
  margin: 0 0 1rem;
}
.mpro-self-tools .mpro-toggle {
  margin: 0;
  border-color: var(--mpro-line, rgba(255,255,255,.12)) !important;
  background: rgba(255,255,255,.04) !important;
  color: #fff;
}
.mpro-self-tools .mpro-toggle .toggle-text strong { color: #fff; }
.mpro-self-tools .mpro-toggle .toggle-text small { color: rgba(255,255,255,.62); }
.mpro-self-tools .mpro-views-btn {
  margin: 0;
  border-radius: 999px;
  border-color: var(--mpro-line, rgba(255,255,255,.14));
  background: rgba(255,255,255,.06);
  color: #fff;
}
.mpro-self-tools .mpro-views-btn:hover {
  background: rgba(255,255,255,.1);
}
.mpro-btn-views {
  color: #1a1228 !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  font-weight: 750 !important;
}
.mpro-btn-views:hover {
  background: #f4f0ff !important;
}
.mpro-btn-views i,
.mpro-btn-views svg {
  color: #1a1228 !important;
}
.mpro-intent-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: .45rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.mpro-intent-row.is-odd > .mpro-intent:first-child {
  grid-column: 1 / -1;
}
.mpro-intent {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .4rem;
  min-width: 0;
  padding: .48rem .6rem;
  border-radius: 12px;
  background: var(--mpro-card, #16122b);
  border: 1px solid var(--mpro-line, rgba(255,255,255,.1));
  font-size: .78rem;
  font-weight: 750;
  color: var(--mpro-ink, #fff);
  white-space: normal;
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.25;
  overflow: hidden;
}
.mpro-intent-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.05rem;
}
.mpro-intent i,
.mpro-intent-ico i {
  color: var(--mpro-intent-ico, #e879f9);
  font-size: .82rem;
  flex: none;
  line-height: 1;
}
.mpro-intent-label {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.mpro-match-list { display: grid; gap: .65rem; }
.mpro-match-icon {
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  border-radius: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #d8b4fe;
  flex: 0 0 auto;
  overflow: visible;
  font-size: .95rem;
  line-height: 1;
}
.mpro-match-icon .lucide-icon,
.mpro-match-icon i {
  width: 1rem;
  height: 1rem;
  font-size: .95rem;
  color: inherit;
}
.mpro-match-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: .28rem;
  padding: .7rem .75rem .65rem;
  border-radius: calc(var(--mpro-radius) - 4px);
  background: var(--mpro-card, #16122b);
  border: 1px solid var(--mpro-line, rgba(255,255,255,.1));
  box-shadow: var(--mpro-shadow, none);
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.mpro-match-item:hover {
  border-color: color-mix(in srgb, var(--mpro-accent, #812DE2) 40%, transparent);
}
.mpro-match-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.mpro-match-head strong {
  display: block;
  min-width: 0;
  flex: 1 1 auto;
  font-size: .88rem;
  font-weight: 800;
  color: var(--mpro-ink, #fff);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.interest-people-list { display: grid; gap: .55rem; max-height: min(60vh, 420px); overflow: auto; padding-right: .15rem; }
.interest-people-row {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  text-align: left; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #fff; border-radius: 14px; padding: .7rem .85rem; cursor: pointer; font: inherit;
}
.interest-people-row:hover { border-color: rgba(216,180,254,.4); }
.interest-people-row strong { display: block; }
.interest-people-row small { color: #a39bb8; font-size: .78rem; }
.interest-people-row .text-link { margin-left: auto; color: #d8b4fe; }
.mpro-match-item > div { min-width: 0; }
.mpro-match-item > small,
.mpro-match-item small {
  color: var(--mpro-muted, #9ca3af);
  font-size: .72rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 1.3;
}
.mpro-match-item .mpro-event-faces {
  margin-top: auto;
  padding-top: .35rem;
}
.mpro-match-cta {
  margin-top: auto;
  padding-top: .35rem;
  color: #c4b5fd;
  font-size: .72rem;
  font-weight: 700;
}
.mpro-face-emoji {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2a1d52;
  display: inline-grid;
  place-items: center;
  font-size: .75rem;
  border: 1.5px solid #1b1139;
  margin-left: -6px;
}
.mpro-face-emoji:first-child { margin-left: 0; }
.mpro-btn-primary {
  flex: 1.4;
  color: #fff !important;
  background: var(--mpro-accent, #812DE2) !important;
  box-shadow: none;
  border: 0 !important;
  border-radius: 999px !important;
}
.mpro-btn-ghost,
.mpro-btn-secondary {
  flex: 1 1 auto;
  color: var(--mpro-btn-ghost-ink, #fff) !important;
  background: var(--mpro-btn-ghost-bg, rgba(255,255,255,.06)) !important;
  border: 1px solid var(--mpro-btn-ghost-border, rgba(255,255,255,.22)) !important;
  border-radius: 999px !important;
}
.mpro-trust {
  padding: .35rem 0;
  background: transparent !important;
  border: 0 !important;
}
.mpro-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem 1.25rem;
  justify-content: flex-start;
}
.mpro-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  color: #b7adc9 !important;
  font-size: .8rem;
  font-weight: 700;
}
.mpro-trust-row i { color: #86efac; }
.mpro-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-radius: var(--mpro-radius);
  overflow: hidden;
  border: 1px solid var(--mpro-line, rgba(255,255,255,.08));
  background: var(--mpro-card, #16122b);
  box-shadow: var(--mpro-shadow, none);
  width: 100%;
}
.mpro-stats > div,
.mpro-stats > .mpro-stat-link {
  text-align: center;
  padding: .95rem .45rem;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--mpro-line, rgba(255,255,255,.07));
  display: grid;
  justify-items: center;
  gap: .15rem;
  color: inherit;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.mpro-stats > .mpro-stat-link {
  cursor: pointer;
  transition: background .15s ease;
}
.mpro-stats > .mpro-stat-link:hover,
.mpro-stats > .mpro-stat-link:focus-visible {
  background: rgba(129, 45, 226, .12) !important;
  outline: none;
}
.mpro-stats > div:last-child,
.mpro-stats > .mpro-stat-link:last-child { border-right: 0; }
.mpro-stats > div > i,
.mpro-stats > .mpro-stat-link > i {
  color: var(--mpro-link, #c4b5fd);
  font-size: .9rem;
  margin-bottom: .15rem;
}
.mpro-stats strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--mpro-ink, #fff);
}
.mpro-stats span {
  display: block;
  margin-top: .1rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--mpro-muted, #9ca3af);
}
.mpro-stat-hot {
  background: var(--mpro-stat-hot, rgba(129,45,226,.2)) !important;
}
.mpro-stat-hot > i,
.mpro-stat-hot span { color: var(--mpro-accent, #812DE2) !important; }
.mpro-more-link {
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font-weight: 750;
  font-size: .8rem;
  padding: .45rem 0 0;
  cursor: pointer;
  text-align: left;
}
.mpro-group-emoji {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(124,58,237,.28);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex: none;
}
.mpro-events { display: grid; gap: .55rem; }
.mpro-event {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--mpro-card-soft, rgba(255,255,255,.04));
  border: 1px solid var(--mpro-line, rgba(255,255,255,.06));
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  text-align: left;
  color: inherit;
  cursor: pointer;
  font: inherit;
  box-sizing: border-box;
}
.mpro-event:hover {
  border-color: color-mix(in srgb, var(--mpro-accent, #812DE2) 35%, transparent);
}
.mpro-event-cover {
  flex: none;
  width: 100%;
  min-height: 0;
  border-radius: 0;
  overflow: hidden;
  background: #2a1d52;
  line-height: 0;
}
.mpro-event-cover img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  vertical-align: top;
}
.mpro-event-date {
  flex: none;
  width: 100%;
  min-height: 64px;
  background: var(--mpro-accent, #812DE2);
  border-radius: 0;
  text-align: center;
  padding: .65rem .5rem;
  line-height: 1.1;
  color: #fff;
  display: grid;
  place-content: center;
  box-sizing: border-box;
}
.mpro-event-date strong { display: block; font-size: 1.35rem; font-weight: 850; }
.mpro-event-date span { font-size: .68rem; font-weight: 800; opacity: .9; text-transform: uppercase; }
.mpro-event-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .25rem;
  padding: .75rem .85rem .85rem;
  box-sizing: border-box;
}
.mpro-event-body strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--mpro-ink, #fff);
  line-height: 1.3;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
.mpro-event-body p {
  margin: 0;
  color: var(--mpro-muted, var(--muted));
  font-size: .78rem;
  line-height: 1.35;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.mpro-event-faces {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin-top: .25rem;
}
.mpro-event-faces .facepile-photo,
.mpro-event-faces .avatar {
  width: 22px !important;
  height: 22px !important;
  font-size: .55rem !important;
  border: 1.5px solid #1b1139;
  margin-left: -4px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.mpro-event-faces .facepile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.mpro-event-faces .facepile-photo:first-child,
.mpro-event-faces .avatar:first-child { margin-left: 0; }
.mpro-event-faces span {
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
  margin-left: .25rem;
}
.mpro-personality {
  display: grid;
  gap: .85rem;
  align-items: start;
}
.mpro-type {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-width: 0;
}
.mpro-type span:first-child { font-size: 1.5rem; line-height: 1; }
.mpro-type strong { display: block; }
.mpro-type p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.mpro-match-pct {
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(255,255,255,.05);
  border: 3px solid #a855f7;
}
.mpro-match-pct strong { font-size: 1.15rem; }
.mpro-match-pct span { display: block; font-size: .62rem; color: #c4b5fd; font-weight: 800; }
.mpro-media {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}
.mpro-media a,
.mpro-media div,
.mpro-media-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #2a1d52;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  display: block;
  width: 100%;
}
.mpro-media img,
.mpro-media video,
.mpro-media-thumb img,
.mpro-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.mpro-media-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 18, .28);
  color: #fff;
  font-size: 1.15rem;
  pointer-events: none;
}
.mpro-media-play::before {
  content: '';
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgba(129, 45, 226, .92);
  position: absolute;
}
.mpro-media-play i,
.mpro-media-play svg {
  position: relative;
  z-index: 1;
  margin-left: .12rem;
}
.mpro-wall {
  display: grid;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.mpro-wall-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
  min-width: 0;
}
.mpro-wall-title-row h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.mpro-wall-title-row .wall-pin-label {
  margin: 0;
  flex: none;
}
.mpro-wall .wall-post {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: .15rem 0 .35rem;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}
.mpro-wall .wall-post + .wall-post {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mpro-line, rgba(255,255,255,.08));
}
.mpro-wall .wall-post.is-pinned {
  background: transparent;
  border-color: transparent;
}
.mpro-wall .wall-post-head {
  align-items: center;
  gap: .75rem;
  margin-bottom: .15rem;
}
.mpro-wall .wall-post-body {
  margin-top: .75rem;
  padding: 0;
}
.mpro-wall .wall-author {
  gap: .8rem;
}
.mpro-wall .wall-author .avatar {
  width: 48px;
  height: 48px;
}
.mpro-wall-section {
  padding: 1.1rem 1.05rem 1.15rem !important;
}
.mpro-wall-title-row {
  margin-bottom: 1rem;
}
.mpro-wall .wall-author strong,
.mpro-wall .wall-post-body p { color: #fff; }
.mpro-empty {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  font-weight: 650;
}
.mpro-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .5rem;
  padding: .65rem 1rem;
  background: var(--mpro-page, #0c0818);
  border-top: 1px solid var(--mpro-line, rgba(255,255,255,.08));
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  overflow: visible;
}
.mpro-btn {
  border: 0;
  border-radius: 999px;
  padding: .78rem 1.15rem;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  text-overflow: clip;
  color: #fff;
}
.mpro-btn-primary {
  flex: 1 1 auto;
  color: #fff !important;
  background: var(--mpro-accent, var(--accent));
  box-shadow: none;
}
.mpro-btn-secondary {
  flex: 1 1 auto;
  color: #fff !important;
  background: var(--surface);
  border: 1px solid var(--line);
}
.mpro-cta-more {
  flex: none;
  background: var(--surface-soft);
  border-radius: 10px;
}
.mpro-hero-actions { display: none; }
.mpro-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .7rem;
  min-height: 1.25rem;
}
.mpro-card-head h2 { margin: 0; }
.mpro-card-head .text-link {
  border: 0;
  background: transparent;
  color: #c4b5fd;
  font-weight: 750;
  font-size: .8rem;
  cursor: pointer;
  flex: none;
}
.mpro-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mpro-gutter);
  align-items: stretch;
}
.mpro-match-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 1fr);
}
.mpro-match-grid:has(> :nth-child(3):last-child) > .mpro-match-item:first-child {
  grid-column: 1 / -1;
}
.mpro-group-list { display: grid; gap: .5rem; }
.mpro-friends-mobile-only {
  display: none;
}
.mpro-friends-block .mpro-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .55rem;
}
.mpro-friends-block .mpro-card-head h2 {
  margin: 0;
}
.mpro-friends-block .mpro-empty {
  margin: 0;
}
@media (max-width: 820px) {
  .mpro-friends-mobile-only {
    display: block;
  }
}
.mpro-friends-count {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  color: #a39bb8;
}
.mpro-friends-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .45rem;
}
.mpro-friend-chip {
  display: grid;
  justify-items: center;
  gap: .35rem;
  border: 0;
  background: transparent;
  color: #efe8ff;
  cursor: pointer;
  min-width: 0;
  padding: .15rem;
}
.mpro-friend-chip .avatar,
.mpro-friend-chip .mpro-friend-av {
  width: 44px !important;
  height: 44px !important;
  font-size: .75rem !important;
}
.mpro-friend-chip span {
  font-size: .72rem;
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #d6d0e6;
}
.mpro-card-meta {
  font-size: .8rem;
  font-weight: 700;
  color: #a39bb8;
  flex: none;
}
@media (max-width: 520px) {
  .mpro-friends-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .3rem;
  }
  .mpro-friend-chip .avatar,
  .mpro-friend-chip .mpro-friend-av {
    width: 40px !important;
    height: 40px !important;
  }
}
.mpro-group-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  border: 0;
  background: var(--mpro-card-soft, rgba(255,255,255,.04));
  border: 1px solid var(--mpro-line, rgba(255,255,255,.06));
  border-radius: 14px;
  padding: .6rem .7rem;
  text-align: left;
  color: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.mpro-group-row:hover { background: rgba(255,255,255,.07); }
.mpro-group-emoji {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(124,58,237,.25);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex: none;
}
.mpro-group-row strong { display: block; font-size: .88rem; }
.mpro-group-row small { color: var(--muted); font-size: .74rem; }
.mpro-invite-promo {
  text-align: center;
  background: linear-gradient(160deg, rgba(255,79,178,.14), rgba(124,58,237,.2));
}
.mpro-invite-ico {
  width: 44px;
  height: 44px;
  margin: 0 auto .55rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: #fbbf24;
  font-size: 1.15rem;
}
.mpro-invite-promo strong { display: block; margin-bottom: .3rem; }
.mpro-invite-promo p {
  margin: 0 0 .85rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}
.mpro-invite-promo .mpro-btn { width: 100%; }
.mpro-btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: #fff;
}
.mpro-rail { display: none; }
.mpro-layout { display: block; }
.mpro-events { display: grid; gap: .55rem; }
.mpro-events-row {
  display: grid;
  gap: var(--mpro-gutter);
}
@media (min-width: 1100px) {
  .mpro {
    --mpro-gutter: .7rem;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .mpro-top-mobile { display: none; }
  .mpro-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--mpro-gutter);
    align-items: start;
    width: 100%;
  }
  .mpro-main {
    gap: var(--mpro-gutter);
  }
  .mpro-rail {
    display: grid;
    gap: var(--mpro-gutter);
    position: sticky;
    top: 1rem;
    align-content: start;
    min-width: 0;
  }
  .mpro-ad-rail { display: block; }
  .mpro-ad-mobile { display: none !important; }
  .mpro-hero-card {
    grid-template-columns: minmax(0, 1fr) 230px;
    padding: 1.25rem 1.35rem;
    min-height: 0;
    align-items: stretch;
    gap: 1.25rem;
  }
  .mpro-hero-photo-wrap {
    max-width: 230px;
    width: 230px;
    justify-self: end;
    align-self: stretch;
  }
  .mpro-hero-photo {
    max-height: none;
    aspect-ratio: 3 / 4;
    min-height: 280px;
    border-radius: 18px;
  }
  .mpro-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-top: auto;
    padding-top: 1rem;
    max-width: 100%;
    position: relative;
    z-index: 8;
    overflow: visible;
  }
  .mpro-hero-copy {
    min-height: 280px;
  }
  .mpro-hero-actions .mpro-btn {
    flex: 0 1 auto;
    max-width: 100%;
  }
  .mpro-hero-actions .mpro-btn-primary {
    min-width: 170px;
    flex: 0 0 auto;
    padding: .82rem 1.35rem;
  }
  .mpro-hero-actions .mpro-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
  }
  .mpro-hero-actions .mpro-btn-ghost,
  .mpro-hero-actions .mpro-btn-secondary { flex: 0 1 auto; }
  .mpro-hero-actions .mpro-more-wrap { flex: none; }
  .mpro-cta-mobile { display: none !important; }
  .mpro-match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--mpro-gutter);
    align-items: stretch;
  }
  .mpro-match-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
  .mpro-match-grid:has(> :nth-child(3):last-child) > .mpro-match-item:first-child {
    grid-column: 1 / -1;
  }
  .mpro-match-item {
    padding: .7rem .75rem .65rem;
    border-radius: calc(var(--mpro-radius) - 4px);
    background: var(--mpro-card, #16122b);
    border: 1px solid var(--mpro-line, rgba(255,255,255,.1));
    min-height: 0;
    height: 100%;
  }
  .mpro-events-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .55rem;
    align-items: stretch;
  }
  .mpro-card-events .mpro-events-row {
    display: grid;
  }
  .mpro-events-row .mpro-event {
    min-height: 0;
    height: auto;
  }
  .mpro-bio-wrap.is-collapsible:not(.is-open) .mpro-bio {
    -webkit-line-clamp: 3;
    max-width: 32rem;
  }
  .mpro-bio-wrap {
    max-width: 32rem;
  }
  body.view-user-profile .user-shell .content:has(.mpro-desktop),
  body.view-user-profile .user-shell .user-content:has(.mpro-desktop),
  .content:has(.mpro-desktop) {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.25rem 2rem;
    box-sizing: border-box;
  }
  .mpro-extra { opacity: .95; }
}
@media (min-width: 821px) and (max-width: 1099px) {
  .mpro {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1.25rem 1.5rem;
  }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .mpro-cta-bar {
    position: sticky;
    bottom: 1rem;
    left: auto;
    right: auto;
    width: 100%;
    max-width: none;
    border-radius: 18px;
    background: rgba(18, 10, 42, .88);
    border: 1px solid var(--line);
    backdrop-filter: blur(10px);
    padding-bottom: .65rem;
  }
  .mpro { padding-bottom: 1rem; }
  .mpro-hero-card {
    grid-template-columns: minmax(0, 1.15fr) 210px;
    align-items: stretch;
    padding: 1.15rem 1.2rem;
    gap: 1.1rem;
  }
  .mpro-hero-photo-wrap {
    width: 210px;
    max-width: 210px;
    align-self: stretch;
  }
  .mpro-hero-photo {
    aspect-ratio: 3 / 4;
    min-height: 260px;
    border-radius: 16px;
  }
  .mpro-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: auto;
    padding-top: .9rem;
  }
  .mpro-hero-actions .mpro-btn-primary {
    flex: 0 0 auto;
    min-width: 160px;
  }
  .mpro-cta-mobile { display: none !important; }
}
@media (max-width: 820px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .app-shell,
  .main,
  .content,
  .user-content,
  #view {
    width: 100%;
    max-width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
  }
  .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .bottom-nav button {
    min-width: 0;
    overflow: hidden;
  }
  body.view-user-profile,
  body.view-user-profile .user-shell,
  body.view-user-profile .main,
  body.view-user-profile #view {
    overflow-x: hidden;
    max-width: 100%;
  }
  body.view-user-profile .content > section.mpro,
  body.view-user-profile .user-content > section.mpro,
  .mpro {
    max-width: 100% !important;
    width: 100%;
    margin: 0;
    padding: 0 1rem calc(7.5rem + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  .mpro-layout,
  .mpro-main,
  .mpro-block,
  .mpro-card,
  .mpro-ad,
  .mpro-ad-mobile {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .mpro-rail { display: none !important; }
  .mpro-top-mobile { display: none; }
  .mpro-hero-card {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: .85rem;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    border: 0 !important;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .mpro-hero-photo-wrap {
    order: -1;
    width: calc(100% + 2rem);
    max-width: none;
    margin-left: -1rem;
    margin-right: -1rem;
    justify-self: stretch !important;
    align-self: stretch !important;
    box-sizing: border-box;
  }
  .mpro-hero-photo {
    width: 100%;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    height: min(72dvh, 640px);
    min-height: 420px;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .mpro-hero-photo > img.mpro-hero-img {
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }
  .mpro-hero-photo > video.mpro-hero-video,
  .mpro-hero-slide img.mpro-hero-img,
  .mpro-hero-slide video.mpro-hero-video {
    min-height: 0;
    object-fit: contain;
    object-position: center;
  }
  .mpro-video-badge {
    top: .85rem;
    right: .85rem;
  }
  .mpro-hero-photo.has-slides .mpro-video-badge {
    top: 2.5rem;
  }
  .mpro-hero-dots {
    top: .85rem;
  }
  .mpro-photo-identity {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    gap: .35rem;
    padding: 2.8rem 1rem 1rem;
    background: linear-gradient(180deg, transparent 0%, rgba(10, 8, 20, .55) 35%, rgba(10, 8, 20, .92) 100%);
    color: #fff;
    pointer-events: none;
  }
  .mpro-photo-identity-name {
    display: block;
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: -.03em;
    line-height: 1.15;
    color: #fff;
  }
  .mpro-photo-identity-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-width: 0;
  }
  .mpro-photo-identity-status {
    display: none !important;
  }
  .mpro-photo-identity-founder {
    display: inline-flex;
    flex: none;
    margin: 0;
  }
  .mpro-photo-identity-founder .founder-badge,
  .mpro-photo-identity-founder .mpro-founder-badge {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: .78rem;
    font-weight: 750;
    color: #fff;
  }
  .mpro-photo-identity-loc {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    font-size: .88rem;
    font-weight: 650;
    color: #efe8ff;
  }
  .mpro-photo-identity-loc i { color: #c4b5fd; }
  .mpro-hero-copy .mpro-hero-title,
  .mpro-hero-copy > .mpro-loc {
    display: none !important;
  }
  .mpro-hero-copy > .mpro-visibility-row {
    display: flex;
    margin: .15rem 0 .75rem;
  }
  .mpro-photo-founder {
    display: none !important;
  }
  .mpro-photo-birthday {
    display: inline-flex;
  }
  .mpro-photo-identity-loc .mpro-birthday-chip {
    margin-left: .25rem;
  }
  .mpro-photo-match {
    top: .55rem;
    right: .55rem;
    left: auto;
    bottom: auto;
  }
  .mpro-hero-glow { display: none; }
  .mpro-hero-copy {
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
  }
  .mpro-cta-bar {
    max-width: none !important;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    box-sizing: border-box;
  }
  .mpro-cta-bar .mpro-btn,
  .mpro-cta-bar .mpro-btn-primary,
  .mpro-cta-bar .mpro-btn-ghost,
  .mpro-cta-bar .mpro-btn-secondary {
    flex: 1 1 auto !important;
    min-width: 0;
    font-size: .86rem;
    padding: .75rem .7rem;
    border-radius: 10px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
  }
  .mpro-cta-bar .mpro-more-wrap,
  .mpro-cta-bar .mpro-cta-more,
  .mpro-cta-bar .mpro-icon-btn {
    flex: 0 0 auto !important;
    border-radius: 10px !important;
  }
  .mpro-stats { grid-template-columns: repeat(2, 1fr); }
  .mpro-stats > div:nth-child(2),
  .mpro-stats > .mpro-stat-link:nth-child(2) { border-right: 0; }
  .mpro-stats > div:nth-child(1),
  .mpro-stats > div:nth-child(2),
  .mpro-stats > .mpro-stat-link:nth-child(1),
  .mpro-stats > .mpro-stat-link:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.07); }
  .mpro-block,
  .mpro-card,
  .mpro-trust,
  .mpro-stats {
    max-width: 100%;
  }
  .mpro-intent-row {
    width: 100% !important;
    max-width: 100% !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
  }
  .mpro-intent {
    flex: none;
    width: auto;
    white-space: normal;
    font-size: .76rem;
    padding: .46rem .58rem;
  }
  .mpro-ad-mobile .ad-slot--banner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 16px;
  }
  .mpro-ad-mobile .ad-slot--banner img {
    max-height: 110px;
    height: 110px;
    width: 100%;
  }
  .mpro-tags {
    max-width: 100%;
  }
  .mpro-tag {
    max-width: 100%;
    box-sizing: border-box;
  }
}
@media (max-width: 420px) {
  .mpro-btn-secondary { font-size: .82rem; }
  .mpro-cta-bar .mpro-btn { font-size: .82rem; padding: .72rem .55rem; }
}

/* ?? Oproepbord desktop redesign ?? */
.oboard { margin-top: 0; color: #fff; }
.oboard-layout { display: block; }
.oboard-main { display: grid; gap: 1rem; min-width: 0; }
.oboard-hero {
  position: relative; min-height: 190px; border-radius: 24px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.4rem;
  background: linear-gradient(100deg, rgba(12, 8, 28, .9) 8%, rgba(18, 10, 42, .58) 48%, rgba(18, 10, 42, .28) 100%), var(--oboard-banner) center/cover no-repeat;
  border: 1px solid rgba(255,255,255,.08); color: #fff;
}
.oboard-eyebrow {
  display: inline-flex; align-items: center; margin-bottom: .55rem; padding: .28rem .7rem; border-radius: 999px;
  background: rgba(255, 79, 178, .18); border: 1px solid rgba(255, 79, 178, .35); color: #ff8fd0;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.oboard-hero-copy h1 { margin: 0 0 .35rem; font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.03em; text-shadow: 0 8px 28px rgba(0,0,0,.35); }
.oboard-hero-copy p { margin: 0; max-width: 420px; color: rgba(255,255,255,.86); font-weight: 600; line-height: 1.45; }
.oboard-hero-cta { flex: none; white-space: nowrap; box-shadow: 0 12px 28px rgba(192, 38, 211, .35); }
.oboard-toolbar { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.oboard-search {
  flex: 1 1 200px; display: flex; align-items: center; gap: .55rem; background: #151322;
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: .15rem .85rem; min-width: 0;
}
.oboard-search i { color: #8b849c; font-size: .85rem; }
.oboard-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; padding: .7rem 0; outline: none; font: inherit; }
.oboard-search input::placeholder { color: #8b849c; }
.oboard-filter-dock {
  display: contents;
}
.oboard-filter-dock-label {
  display: none;
}
.oboard-filters {
  display: contents;
}
.oboard-toolbar select,
.oboard-filters select,
.oboard-filter-dock .fancy-select {
  background: #151322; border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 14px; padding: .7rem .85rem; min-width: 0; flex: 0 1 auto;
}
.oboard-filter-dock .fancy-select {
  padding: 0;
  background: transparent;
  border: 0;
  flex: 0 1 9.5rem;
  min-width: 8.5rem;
}
.oboard-filter-dock .fancy-select-trigger {
  min-height: 44px;
  border-radius: 14px;
  background: #151322;
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  padding: .7rem .85rem;
  font-size: .88rem;
}
.oboard-toolbar select option,
.oboard-filters select option { color: #1a1523; }
.oboard-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.oboard-stat { position: relative; background: #151322; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 1rem .9rem .9rem; text-align: left; }
.oboard-stat-ico { display: block; color: #e879f9; margin-bottom: .6rem; font-size: 1.2rem; line-height: 1; }
.oboard-stat strong { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1; }
.oboard-stat-badge { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .28rem; border-radius: 999px; background: #22c55e; color: #052e16; font-size: .65rem; font-style: normal; font-weight: 800; }
.oboard-stat > span { display: block; margin-top: .35rem; color: #a39bb8; font-size: .78rem; font-weight: 700; }
.oboard-stat > small { display: block; margin-top: .25rem; color: #7c748f; font-size: .68rem; font-weight: 650; }
.oboard-stat-up { color: #6ee7b7 !important; }
.oboard-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .15rem; }
.oboard-section-head h2 { margin: 0; font-size: 1.15rem; }
.oboard-section-head .text-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 700; background: none; border: 0; cursor: pointer; padding: 0; }
.oboard-grid { display: grid; grid-template-columns: 1fr; gap: .85rem; align-items: stretch; }
.oboard-card { position: relative; background: #151322; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 1rem 1rem .9rem; display: flex; flex-direction: column; gap: .55rem; min-width: 0; height: 100%; }
.oboard-card.is-clickable { cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.oboard-card.is-clickable:hover { border-color: rgba(216,180,254,.35); transform: translateY(-1px); }
.oboard-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-right: 1.6rem; }
.oboard-cat { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 999px; font-size: .7rem; font-weight: 750; }
.oboard-cat.tone-pink { background: rgba(255,79,178,.16); color: #ff8fd0; }
.oboard-cat.tone-green { background: rgba(52,211,153,.14); color: #6ee7b7; }
.oboard-cat.tone-violet { background: rgba(168,85,247,.16); color: #d8b4fe; }
.oboard-cat.tone-blue { background: rgba(96,165,250,.16); color: #93c5fd; }
.oboard-cat.tone-amber { background: rgba(251,191,36,.16); color: #fcd34d; }
.oboard-dist { color: #8b849c; font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.oboard-cover {
  border-radius: 14px;
  overflow: hidden;
  background: #0f0d1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oboard-cover img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  object-position: center top;
  display: block;
}
.oboard-card h3 { margin: 0; font-size: 1.02rem; letter-spacing: -.02em; line-height: 1.3; }
.oboard-card > p,
.oboard-card .oboard-snippet {
  margin: 0;
  color: #a39bb8;
  font-size: .86rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oboard-media { margin: 0; }
.oboard-author { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.oboard-author .avatar, .oboard-author .avatar-btn .avatar { width: 34px; height: 34px; font-size: .72rem; }
.oboard-author strong { display: block; font-size: .88rem; }
.oboard-author small { color: #8b849c; font-size: .72rem; font-weight: 650; }
.oboard-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .65rem; margin-top: auto; padding-top: .15rem; }
.oboard-faces { display: flex; align-items: center; min-height: 26px; flex: 1; min-width: 0; }
.oboard-faces .facepile-photo, .oboard-faces .avatar { width: 26px !important; height: 26px !important; border: 2px solid #151322; margin-left: -.45rem; font-size: .55rem !important; }
.oboard-faces .facepile-photo:first-child, .oboard-faces .avatar:first-child { margin-left: 0; }
.oboard-faces-more { margin-left: .35rem; color: #8b849c; font-size: .72rem; font-weight: 750; }
.oboard-join { margin-left: auto; border: 0; border-radius: 999px; padding: .48rem .9rem; font: inherit; font-size: .78rem; font-weight: 750; color: #fff; background: linear-gradient(105deg, #812DE2, #D641E7); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; box-shadow: 0 8px 18px rgba(214, 65, 231, .28); }
.oboard-join.is-on { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid rgba(255,255,255,.14); }
.oboard-join.is-owner { cursor: default; pointer-events: none; }
.oboard-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.oboard-tags span { display: inline-flex; align-items: center; gap: .28rem; padding: .22rem .55rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #c4bdd4; font-size: .68rem; font-weight: 700; }
.oboard-report { position: absolute; top: .75rem; right: .7rem; width: 28px; height: 28px; border-radius: 9px; border: 0; background: transparent; color: #8b849c; opacity: 0; cursor: pointer; }
.oboard-card:hover .oboard-report { opacity: 1; }
.oboard-offline-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  background: rgba(148, 163, 184, .18); color: #94a3b8;
}
.oboard-card.is-offline,
.epost-card.is-offline { opacity: .88; }
.post-manage-actions { display: grid; gap: .55rem; margin-top: .85rem; }
.post-manage-btn {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; padding: .85rem 1rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04);
  color: inherit; font: inherit; font-weight: 650; text-align: left; cursor: pointer;
}
.post-manage-btn:hover { background: rgba(255,255,255,.08); }
.post-manage-btn.is-danger { color: #f87171; border-color: rgba(248,113,113,.25); }
.post-manage-btn.is-danger:hover { background: rgba(248,113,113,.1); }
.oboard-empty { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1.25rem; border-radius: 20px; border: 1px dashed rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.oboard-empty h3 { margin: 0 0 .35rem; }
.oboard-empty p { color: #a39bb8; margin: 0 0 1rem; }

/* Event / oproep detail subpage */
.epost { max-width: 720px; margin: 0 auto; display: grid; gap: .85rem; }
.epost-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.epost-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  background: transparent;
  color: #d8b4fe;
  font: inherit;
  font-weight: 750;
  font-size: .88rem;
  cursor: pointer;
  padding: .2rem 0;
}
.epost-invite {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #fbbf24;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  padding: .2rem 0;
  white-space: nowrap;
}
.epost-invite .lucide-icon,
.epost-invite i,
.epost-invite svg {
  color: #fbbf24;
  stroke: #fbbf24;
}
.epost-invite:hover { text-decoration: underline; text-underline-offset: 3px; }
.epost-card {
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  padding: 1.15rem 1.15rem 1.25rem;
  display: grid;
  gap: .85rem;
}
.epost-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.epost-top-meta { display: flex; align-items: center; gap: .55rem; }
.epost-more {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #c7c0d8;
  cursor: pointer;
}
.epost-cover {
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0d1a;
  cursor: zoom-in;
}
.epost-cover img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center top;
  display: block;
}
.epost-media .post-media-item {
  border: 0;
  padding: 0;
  cursor: zoom-in;
}
.epost-card h1 { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); letter-spacing: -.03em; line-height: 1.25; color: #fff; }
.epost-body { margin: 0; color: #a39bb8; font-size: .95rem; line-height: 1.5; }
.epost-facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.epost-facts span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: rgba(216,180,254,.1);
  color: #d8b4fe;
  font-size: .78rem;
  font-weight: 750;
}
.epost-author { display: flex; align-items: center; gap: .7rem; }
.epost-author .avatar, .epost-author .avatar-btn .avatar { width: 42px; height: 42px; }
.epost-author strong { display: block; font-size: .95rem; color: #fff; }
.epost-author small { color: #8b849c; font-size: .76rem; }
.epost-footer {
  display: grid;
  gap: .85rem;
  margin-top: .35rem;
}
.epost-people {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: .85rem;
  display: grid;
  gap: .65rem;
}
.epost-people-head h2 {
  margin: 0;
  font-size: .95rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.epost-faces { display: flex; flex-wrap: wrap; gap: .45rem; }
.epost-face { border: 0; background: transparent; padding: 0; cursor: pointer; }
.epost-face .avatar { width: 40px; height: 40px; }
.epost-tags { margin-top: .1rem; }
.epost-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .1rem; }
.epost-actions .btn { border-radius: 999px; }
.epost-actions .epost-chat-btn {
  width: 100%;
  justify-content: center;
  color: #d8b4fe;
  border-color: rgba(255,255,255,.14);
}
.epost-reply { box-shadow: 0 10px 24px rgba(192, 38, 211, .28); }

.oboard-rail { display: none; }
.oboard-widget { background: #151322; border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 1rem 1rem .95rem; }
.oboard-widget h3 { margin: 0 0 .85rem; font-size: .95rem; }
.oboard-widget-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.oboard-widget-head h3 { margin: 0; }
.oboard-widget-head .text-link { font-size: .78rem; font-weight: 700; background: none; border: 0; cursor: pointer; padding: 0; color: #d8b4fe; }
.oboard-muted { margin: 0; color: #a39bb8; font-size: .84rem; }
.oboard-group-row { width: 100%; display: grid; grid-template-columns: 40px 1fr auto; gap: .65rem; align-items: center; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); color: inherit; text-align: left; padding: .55rem 0; cursor: pointer; }
.oboard-group-row:last-of-type { border-bottom: 0; }
.oboard-group-emoji { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); font-size: 1.1rem; }
.oboard-group-row strong { display: block; font-size: .86rem; }
.oboard-group-row small { color: #8b849c; font-size: .72rem; }
.oboard-follow { color: #ff8fd0; font-size: .74rem; font-weight: 800; }
.oboard-interest-cloud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.oboard-interest-cloud span { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .55rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); font-size: .74rem; font-weight: 700; color: #e8e4f2; }
.oboard-interest-cloud em { margin-left: auto; color: #8b849c; font-style: normal; font-weight: 750; }
.oboard-upcoming { display: grid; gap: .55rem; }
.oboard-up-row { display: grid; grid-template-columns: 48px 1fr; gap: .65rem; align-items: start; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: .45rem 0; cursor: pointer; border-radius: 12px; }
.oboard-up-row:hover { background: rgba(255,255,255,.04); }
.oboard-up-date { background: linear-gradient(160deg, rgba(129,45,226,.35), rgba(214,65,231,.2)); border: 1px solid rgba(214,65,231,.28); border-radius: 12px; text-align: center; padding: .4rem .2rem; line-height: 1.1; }
.oboard-up-date strong { display: block; font-size: 1rem; }
.oboard-up-date span { font-size: .62rem; font-weight: 800; text-transform: uppercase; color: #e9d5ff; }
.oboard-up-row strong { display: block; font-size: .86rem; margin-bottom: .15rem; }
.oboard-up-row small { color: #8b849c; font-size: .72rem; display: block; }
.oboard-up-meta { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; color: #a39bb8; font-size: .72rem; font-weight: 700; }
.oboard-agenda-btn { width: 100%; margin-top: .85rem; border-radius: 14px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: #fff; padding: .75rem 1rem; font: inherit; font-weight: 750; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.oboard-agenda-btn:hover { background: rgba(255,255,255,.05); }
@media (min-width: 820px) {
  .oboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oboard-hero { min-height: 220px; padding: 1.6rem 1.7rem; }
}
@media (min-width: 1100px) {
  .content:has(.oboard) { max-width: 1400px; }
  .oboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.1rem; align-items: start; }
  .oboard-rail { display: grid; gap: .85rem; position: sticky; top: .5rem; }
  .oboard-hero { min-height: 240px; }
  .oboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) { .oboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .oboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oboard-hero { flex-direction: column; align-items: flex-start; }
  .oboard-hero-cta { width: 100%; justify-content: center; }
  .oboard-report { opacity: .55; }

  /* Filters sticky boven bottom-nav — resultaten blijven zichtbaar */
  .oboard-toolbar {
    display: block;
  }
  .oboard-search {
    width: 100%;
    flex: none;
  }
  .oboard-filter-dock {
    display: grid;
    gap: .45rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px));
    z-index: 28;
    padding: .55rem .85rem calc(.55rem + env(safe-area-inset-bottom, 0px) * 0);
    margin: 0;
    background: rgba(14, 10, 28, .94);
    border-top: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 -12px 28px rgba(0, 0, 0, .35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .oboard-filter-dock.has-active {
    border-top-color: rgba(196, 181, 253, .35);
  }
  .oboard-filter-dock-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c4b5fd;
  }
  .oboard-filter-dock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .55rem;
  }
  .oboard-filter-dock-actions {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex: none;
  }
  .oboard-filter-link {
    border: 0;
    background: none;
    padding: 0;
    color: #efe8ff;
    font: inherit;
    font-size: .72rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
  }
  .oboard-filter-link.is-on {
    color: #c4b5fd;
  }
  .oboard-filter-dock-label em {
    font-style: normal;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .35rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #812DE2;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
  }
  .oboard-filter-dock .fancy-select.is-filter-on .fancy-select-trigger,
  .oboard-filter-dock select.is-filter-on {
    background: rgba(167, 139, 250, .12) !important;
    border-color: rgba(196, 181, 253, .38) !important;
    color: #ede9fe !important;
    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .12);
  }
  .oboard-filter-dock .fancy-select.is-filter-on .fancy-select-chevron {
    color: #c4b5fd !important;
  }
  .oboard-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem;
  }
  .oboard-filter-dock select,
  .oboard-filter-dock .fancy-select {
    width: 100%;
    flex: none;
    min-width: 0;
  }
  .oboard-filter-dock .fancy-select-trigger {
    min-height: 42px;
    padding: .65rem .75rem;
    font-size: .82rem;
    font-weight: 650;
  }
  /* Dropdowns openen omhoog zodat ze niet achter de nav verdwijnen */
  .oboard-filter-dock .fancy-select.is-open { z-index: 40; }
  .oboard-filter-dock .fancy-select-menu {
    top: auto;
    bottom: calc(100% + .35rem);
    max-height: min(240px, 42vh);
    transform-origin: bottom center;
    transform: translateY(8px) scale(.985);
  }
  .oboard-filter-dock .fancy-select-menu.is-open {
    transform: translateY(0) scale(1);
  }
  body.view-board .content,
  body.view-board .user-content {
    padding-bottom: calc(72px + 148px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.view-board .oboard {
    padding-bottom: .5rem;
  }
  body.view-discover .content,
  body.view-discover .user-content {
    padding-bottom: calc(72px + 58px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.view-discover.discover-filters-open .content,
  body.view-discover.discover-filters-open .user-content {
    padding-bottom: calc(72px + 210px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.view-discover .ddash {
    padding-bottom: .5rem;
  }
}



/* ?? Discover dark dashboard ?? */
.ddash { margin-top: 0; color: #fff; }
.ddash-layout { display: block; }
/* minmax(0,1fr) houdt de horizontale scrollers binnen de kolom i.p.v. over de rail heen. */
.ddash-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; min-width: 0; }
.ddash-main > * { min-width: 0; }

/* Discover mockup layout */
.ddisc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  position: relative;
}
.ddisc-top-copy { min-width: 0; }
.ddisc-top h1 {
  margin: 0;
  font-size: clamp(1.7rem, 5vw, 2.1rem);
  letter-spacing: -.04em;
  line-height: 1.1;
  color: #fff;
}
.ddisc-top p {
  margin: .35rem 0 0;
  color: #9b93ad;
  font-size: .92rem;
}
.ddisc-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}
.ddisc-quick-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: center;
  text-align: left;
  min-height: 68px;
  padding: .75rem .8rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: #161422;
  color: #fff;
  cursor: pointer;
  box-shadow: none;
}
.ddisc-quick-card:hover {
  border-color: rgba(255,255,255,.16);
  background: #1a1828;
}
.ddisc-quick-ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: .95rem;
  flex: none;
}
.ddisc-quick-ico.is-online {
  background: #5b2d8a;
  color: #fff;
}
.ddisc-quick-ico.is-bolt {
  background: #5c4018;
  color: #f5c518;
}
.ddisc-quick-copy {
  display: grid;
  gap: .2rem;
  min-width: 0;
  align-content: center;
}
.ddisc-quick-copy strong {
  margin: 0;
  font-size: .88rem;
  font-weight: 750;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -.01em;
}
.ddisc-quick-copy small {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #8a9a8e;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.2;
}
.ddisc-live-dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
  flex: none;
}
.ddisc-quick-chevron {
  color: #7a738c;
  font-size: .72rem;
  display: grid;
  place-items: center;
  flex: none;
}
.ddisc-quick-card > .fa-chevron-right,
.ddisc-quick-card > i.fa-chevron-right {
  display: none;
}
.ddisc-featured {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 70%);
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.ddisc-featured::-webkit-scrollbar { height: 0; }
.ddisc-feature {
  position: relative;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 3 / 4.05;
  min-height: 0;
  display: block;
}
.ddisc-feature-hit {
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  z-index: 1;
}
.ddisc-feature-media {
  position: absolute;
  inset: 0;
  background: #0f0d1a;
  overflow: hidden;
}
.ddisc-feature-media img,
.ddisc-feature-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ddisc-feature-media video.ddisc-feature-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0f0d1a;
}
.ddisc-video-badge {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(8, 6, 18, .72);
  color: #fff;
  font-size: .78rem;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ddisc-feature-media.has-video .online-dot {
  right: 2.55rem;
}
.ddisc-feature-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
}
.ddisc-feature-media .online-dot {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: .7rem;
  height: .7rem;
  border: 2px solid rgba(15, 13, 26, .85);
  z-index: 2;
}
.ddisc-feature-score {
  position: absolute;
  left: .55rem;
  top: .55rem;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(8, 6, 18, .72);
  color: #efe8ff;
  font-size: .68rem;
  font-weight: 800;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ddisc-feature-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: .4rem;
  align-content: end;
  padding: 3.4rem .75rem 3.15rem;
  background: linear-gradient(
    180deg,
    rgba(8, 6, 18, 0) 0%,
    rgba(8, 6, 18, .35) 28%,
    rgba(8, 6, 18, .78) 62%,
    rgba(8, 6, 18, .94) 100%
  );
  pointer-events: none;
}
.ddisc-feature-body strong {
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.ddisc-feature-body strong .fa-circle-check { color: #c4b5fd; font-size: .78rem; }
.ddisc-feature-body > span {
  color: rgba(239, 232, 255, .82);
  font-size: .75rem;
  font-weight: 650;
}
.ddisc-words {
  display: block;
  min-width: 0;
  color: rgba(239, 232, 255, .88);
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.ddisc-words em {
  display: inline;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
  white-space: inherit;
  overflow: visible;
  text-overflow: clip;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ddisc-tag {
  display: inline-flex;
  align-self: start;
  margin-top: .2rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(129, 45, 226, .22);
  color: #d8b4fe;
  font-size: .68rem;
  font-style: normal;
  font-weight: 750;
}
.ddisc-feature-actions {
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .7rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  pointer-events: none;
}
.ddisc-feature-actions > * {
  pointer-events: auto;
}
.ddisc-friend {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 34px;
  padding: .3rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(12, 8, 24, .55);
  color: #efe8ff;
  font: inherit;
  font-size: .7rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ddisc-friend.is-friend {
  cursor: default;
  background: rgba(129, 45, 226, .55);
  border-color: rgba(196, 181, 253, .45);
  color: #ede9fe;
}
.ddisc-friend.is-pending {
  opacity: .9;
}
.ddisc-msg {
  position: static;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  border: 0;
  background: #812DE2;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  box-shadow: 0 6px 16px rgba(129, 45, 226, .35);
}
.ddisc-feature.is-locked .ddisc-feature-media {
  display: grid;
  place-items: center;
}
.ddisc-feature-blur {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, rgba(129,45,226,.45), rgba(15,13,26,.9)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px);
  filter: blur(0);
}
.ddisc-lock {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 1.1rem;
}
.ddisc-unlock-btn {
  display: inline-flex;
  justify-content: center;
  margin-top: .35rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  background: #812DE2;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}
.ddisc-popular {
  display: grid;
  gap: .55rem;
}
.ddisc-pop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .45rem;
  align-items: center;
  padding: .55rem .45rem;
  border-radius: 16px;
}
.ddisc-pop-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
  min-width: 0;
}
.ddisc-pop-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}
.ddisc-pop-avatar img,
.ddisc-pop-avatar .ddisc-feature-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-size: .9rem;
}
.ddisc-pop-avatar .online-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: .65rem;
  height: .65rem;
  border: 2px solid #0f0d1a;
}
.ddisc-pop-copy {
  display: grid;
  gap: .12rem;
  min-width: 0;
}
.ddisc-pop-copy strong {
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}
.ddisc-pop-copy strong .fa-circle-check { color: #a78bfa; font-size: .75rem; }
.ddisc-pop-copy small {
  color: #9b93ad;
  font-size: .75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ddisc-follow {
  border: 0;
  border-radius: 999px;
  padding: .42rem .85rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  color: #fff;
  background: #812DE2;
  cursor: pointer;
  white-space: nowrap;
}
.ddisc-follow.is-on,
.ddisc-follow.is-pending {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.ddisc-more {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #8b849c;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ddisc-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .95rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(129, 45, 226, .35);
  background:
    linear-gradient(120deg, rgba(129, 45, 226, .28), rgba(255, 86, 165, .08)),
    #151322;
}
.ddisc-cta-ico {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(129, 45, 226, .35);
  color: #e9d5ff;
}
.ddisc-cta-copy strong { display: block; font-size: .95rem; }
.ddisc-cta-copy p {
  margin: .2rem 0 0;
  color: #b7afc8;
  font-size: .78rem;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .ddisc-cta {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ddisc-cta .btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
  .ddisc-quick {
    gap: .55rem;
  }
  .ddisc-quick-card {
    min-height: 68px;
    padding: .75rem .7rem;
    gap: .55rem;
  }
  .ddisc-quick-ico {
    width: 38px;
    height: 38px;
    font-size: .95rem;
  }
  .ddisc-quick-copy strong { font-size: .82rem; }
  .ddisc-quick-copy small { font-size: .68rem; }
}
@media (min-width: 901px) {
  .ddisc-featured {
    grid-auto-columns: minmax(210px, 230px);
  }
  .ddisc-feature {
    aspect-ratio: 3 / 4;
  }
  .ddisc-feature-body {
    padding: 4rem .85rem 3.35rem;
    gap: .45rem;
  }
  .ddisc-feature-body strong { font-size: 1rem; }
  .ddisc-words { font-size: .74rem; }
  .ddisc-feature-actions {
    left: .8rem;
    right: .8rem;
    bottom: .8rem;
  }
}
@media (max-width: 900px) {
  .ddisc-featured {
    grid-auto-columns: minmax(210px, 78%);
    gap: .75rem;
    padding-bottom: .25rem;
  }
  .ddisc-feature {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    aspect-ratio: 3 / 4.05;
    height: auto;
    min-height: 0;
  }
  .ddisc-feature-body {
    padding: 3.4rem .75rem 3.15rem;
  }
  .ddisc-feature-body strong { font-size: .95rem; }
  .ddisc-feature-actions {
    left: .7rem;
    right: .7rem;
    bottom: .7rem;
  }
}

.ddash-hello {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ddash-hello--guide {
  display: grid;
  gap: .85rem;
}
.ddash-hello-copy { min-width: 0; }
.ddash-eyebrow {
  margin: 0 0 .25rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ff7ad9;
}
.ddash-hello h1 {
  margin: 0 0 .35rem;
  font-size: clamp(1.55rem, 3vw, 2rem);
  letter-spacing: -.03em;
  color: #fff;
}
.ddash-hello p {
  margin: 0;
  color: #a39bb8;
  font-size: .95rem;
  max-width: 520px;
  line-height: 1.45;
}
.ddash-pulse {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.ddash-pulse span {
  display: inline-flex;
  align-items: baseline;
  gap: .28rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #c4bdd4;
  font-size: .78rem;
  font-weight: 700;
}
.ddash-pulse strong {
  color: #fff;
  font-size: .92rem;
  font-weight: 800;
}
.ddash-hello-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.ddash-hello-actions .btn {
  min-height: 44px;
}
.ddash-next {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: .9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(214, 65, 231, .35);
  background:
    linear-gradient(120deg, rgba(129, 45, 226, .28), rgba(255, 86, 165, .1) 55%, rgba(255,255,255,.03)),
    #151322;
  color: inherit;
  cursor: pointer;
}
.ddash-next-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(129, 45, 226, .35);
  color: #f5e9ff;
  font-size: 1.05rem;
}
.ddash-next-copy {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.ddash-next-copy em {
  font-style: normal;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #c4b5fd;
}
.ddash-next-copy strong {
  font-size: .98rem;
  line-height: 1.25;
}
.ddash-next-copy small {
  color: #b7afc8;
  font-size: .8rem;
  line-height: 1.35;
}
.ddash-next-cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  font-size: .78rem;
  font-weight: 800;
  color: #f0e7ff;
}
.ddash-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-left: .35rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: rgba(129, 45, 226, .35);
  color: #efe8ff;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
  vertical-align: middle;
}
@media (max-width: 640px) {
  .ddash-next {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ddash-next-cta {
    grid-column: 2;
  }
}
.ddash-engage {
  flex: none;
  display: flex;
  align-items: center;
  gap: .85rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: .85rem 1rem;
  color: inherit;
  cursor: pointer;
  text-align: left;
  min-width: 220px;
}
.ddash-engage-label {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-bottom: .2rem;
}
.ddash-engage-copy strong { display: block; font-size: 1.05rem; margin-bottom: .4rem; }
.ddash-engage-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  width: 120px;
}
.ddash-engage-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #812DE2, #D641E7);
  border-radius: inherit;
}
.ddash-engage-ring {
  --pct: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#D641E7 calc(var(--pct) * 1%), rgba(255,255,255,.1) 0);
  position: relative;
}
.ddash-engage-ring::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #16122b;
}
.ddash-engage-ring strong { position: relative; z-index: 1; font-size: .72rem; }
.ddash-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.ddash-block-head h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.ddash-vibes { display: flex; flex-wrap: wrap; gap: .5rem; }
.ddash-vibe {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #efe8ff;
  border-radius: 999px;
  padding: .55rem .9rem;
  font-weight: 750;
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}
.ddash-vibe i { color: #ff8fd0; }
.ddash-vibe.is-on {
  background: rgba(129, 45, 226, .35);
  border-color: rgba(214, 65, 231, .45);
}
.ddash-vibe.add {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}
.ddash-filter-dock.oboard-filter-dock {
  display: grid;
  gap: .5rem;
  margin: 0 0 1rem;
}
.ddash-filter-dock .oboard-filter-dock-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}
.ddash-filter-dock .oboard-filter-dock-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  background: none;
  padding: .1rem 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  min-width: 0;
}
.ddash-filter-dock .oboard-filter-dock-label {
  display: none;
}
.ddash-filter-dock .dock-chevron {
  color: #c4b5fd;
  font-size: .72rem;
  transition: transform .18s ease;
}
.ddash-filter-dock.is-collapsed .dock-chevron {
  transform: rotate(180deg);
}
.ddash-filter-dock.is-collapsed .oboard-filters {
  display: none;
}
.ddash-filter-dock.is-collapsed .oboard-filter-dock-actions [data-action="discover-more-filters"] {
  display: none;
}
.ddash-filter-dock .oboard-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.ddisc-name-filter {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .65rem .85rem;
  border-radius: 12px;
  background: #151322;
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ddisc-name-filter i {
  color: #8b849c;
  font-size: .82rem;
  flex: none;
}
.ddisc-name-filter input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font: inherit;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.25;
}
.ddisc-name-filter input::placeholder {
  color: #8b849c;
  font-weight: 550;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ddisc-name-filter input::-webkit-search-decoration,
.ddisc-name-filter input::-webkit-search-cancel-button,
.ddisc-name-filter input::-webkit-search-results-button {
  -webkit-appearance: none;
  appearance: none;
}
.ddisc-name-filter:focus-within {
  border-color: rgba(196, 181, 253, .45);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .12);
}
.ddisc-name-filter.is-filter-on {
  background: rgba(167, 139, 250, .12);
  border-color: rgba(196, 181, 253, .38);
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .12);
}
.ddisc-name-filter.is-filter-on i { color: #c4b5fd; }
.ddash-filter-dock .fancy-select,
.ddash-filter-dock select {
  width: 100%;
  min-width: 0;
  flex: none;
}
@media (max-width: 900px) {
  .ddash-filter-dock.oboard-filter-dock {
    margin: 0;
  }
  .ddash-filter-dock .oboard-filter-dock-head {
    display: flex;
  }
  .ddash-filter-dock .oboard-filter-dock-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c4b5fd;
  }
  .ddash-filter-dock .oboard-filter-dock-label em {
    font-style: normal;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .35rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #812DE2;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
  }
  .ddash-filter-dock .fancy-select-trigger {
    min-height: 42px;
    border-radius: 12px;
  }
}
@media (min-width: 901px) {
  .ddash-filter-dock .oboard-filter-dock-head {
    display: flex;
  }
  .ddash-filter-dock .oboard-filter-dock-label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #c4b5fd;
  }
  .ddash-filter-dock .oboard-filter-dock-label em {
    font-style: normal;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .35rem;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: #812DE2;
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
  }
  .ddash-filter-dock .oboard-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ddisc-name-filter {
    min-height: 44px;
    border-radius: 14px;
    padding: .7rem .9rem;
  }
  .ddisc-name-filter input { font-size: .88rem; }
  .ddash-filter-dock .fancy-select-trigger {
    min-height: 44px;
    border-radius: 14px;
    background: #151322;
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    padding: .7rem .85rem;
    font-size: .88rem;
  }
}
.ddisc-more-filters .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.ddisc-gender-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.ddisc-gender-chip {
  cursor: pointer;
}
.ddisc-gender-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ddisc-gender-chip span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: .55rem .5rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #efe8ff;
  font-size: .88rem;
  font-weight: 700;
}
.ddisc-gender-chip input:checked + span {
  border-color: rgba(196, 181, 253, .55);
  background: rgba(129, 45, 226, .28);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .2);
}
.ddisc-more-hint {
  margin: .25rem 0 0;
  color: #9b93ad;
  font-size: .8rem;
  line-height: 1.4;
}
.ddisc-more-filters .drawer-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
}
.ddash-searchrow {
  display: none !important;
}
.ddash-search {
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  gap: .55rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: .7rem .9rem;
}
.ddash-search i { color: #8b849c; }
.ddash-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: #fff;
  outline: none;
  font: inherit;
  min-width: 0;
}
.ddash-search input::placeholder { color: #8b849c; }
.ddash-searchrow select,
.ddash-filter-btn {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: #efe8ff;
  border-radius: 14px;
  padding: .7rem .85rem;
  font: inherit;
}
.ddash-filter-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ddash-people {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: thin;
}
.ddash-person {
  flex: 0 0 148px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.ddash-person-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #1a1530;
  margin-bottom: .55rem;
}
.ddash-person-photo img,
.ddash-person-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}
.ddash-person-fallback {
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
}
.ddash-person-meta strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.ddash-person-match {
  position: absolute;
  left: .45rem;
  bottom: .45rem;
  z-index: 2;
  padding: .28rem .5rem;
  border-radius: 999px;
  background: #812DE2;
  color: #fff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: -.01em;
  white-space: nowrap;
  line-height: 1.1;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.ddash-person-meta > span {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: #a39bb8;
  margin-bottom: .35rem;
}
.ddash-person-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.ddash-person-tags em {
  font-style: normal;
  font-size: .66rem;
  font-weight: 750;
  padding: .18rem .4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #ddd6fe;
}
.ddash-acts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.ddash-act {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.ddash-act-media {
  position: relative;
  background: #1a1530;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ddash-act-media img {
  width: 100%;
  height: auto;
  max-height: 320px;
  object-fit: contain;
  object-position: center top;
  display: block;
}
.ddash-act-badge {
  position: absolute;
  top: .65rem;
  left: .65rem;
  background: linear-gradient(105deg, #ff4fb2, #c026d3);
  color: #fff;
  font-size: .65rem;
  font-weight: 850;
  letter-spacing: .04em;
  padding: .28rem .5rem;
  border-radius: 999px;
}
.ddash-act-body { padding: .75rem .8rem .85rem; }
.ddash-act-body strong { display: block; font-size: .9rem; margin-bottom: .25rem; }
.ddash-act-body p { margin: 0 0 .55rem; font-size: .76rem; color: #a39bb8; }
.ddash-act-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 750;
  color: #c4b5fd;
}
.ddash-invite {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  border: 1px solid rgba(214, 65, 231, .35);
  background: linear-gradient(120deg, rgba(129,45,226,.18), rgba(214,65,231,.12));
}
.ddash-invite-ico {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: #fbbf24;
  flex: none;
}
.ddash-invite strong { display: block; margin-bottom: .2rem; }
.ddash-invite p { margin: 0; color: #a39bb8; font-size: .84rem; }
.ddash-invite .btn { margin-left: auto; flex: none; white-space: nowrap; border-radius: 999px; background: linear-gradient(105deg, #812DE2, #D641E7); border: 0; }
.ddash-rail { display: none; }
.ddash-widget {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 1rem;
}
.ddash-widget h3 { margin: 0 0 .85rem; font-size: .98rem; }
.ddash-groups { display: grid; gap: .7rem; margin-bottom: .85rem; }
.ddash-group {
  display: flex;
  gap: .7rem;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.ddash-group-emoji {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(129,45,226,.28);
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  flex: none;
}
.ddash-group strong { display: block; font-size: .88rem; }
.ddash-group small { color: #a39bb8; font-size: .72rem; }
.ddash-group small em.is-active { color: #86efac; font-style: normal; font-weight: 800; }
.ddash-group p {
  margin: .2rem 0 0;
  color: #8b849c;
  font-size: .74rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ddash-widget-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #efe8ff;
  border-radius: 999px;
  padding: .7rem 1rem;
  font-weight: 750;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.ddash-wall { display: grid; gap: .75rem; margin-bottom: .85rem; }
.ddash-wall-item {
  padding-bottom: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ddash-wall-item:last-child { border-bottom: 0; padding-bottom: 0; }
.ddash-wall-top {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .4rem;
}
.ddash-wall-top .avatar { width: 32px; height: 32px; font-size: .7rem; }
.ddash-wall-top strong { display: block; font-size: .82rem; }
.ddash-wall-top small { color: #8b849c; font-size: .7rem; }
.ddash-wall-item p {
  margin: 0 0 .4rem;
  color: #d4cce8;
  font-size: .82rem;
  line-height: 1.4;
}
.ddash-wall-stats {
  display: flex;
  gap: .75rem;
  color: #8b849c;
  font-size: .74rem;
  font-weight: 700;
}
.ddash-empty, .ddash-muted { color: #8b849c; font-size: .88rem; }
@media (min-width: 900px) {
  .ddash-acts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .content:has(.ddash) { max-width: 1400px; }
  .ddash-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 1.1rem;
    align-items: start;
  }
  .ddash-rail {
    display: grid;
    gap: .85rem;
    position: sticky;
    top: 1rem;
  }
}
@media (max-width: 820px) {
  .ddash-hello { flex-direction: column; }
  .ddash-engage { width: 100%; }
  .ddash-invite { flex-wrap: wrap; }
  .ddash-invite .btn { width: 100%; margin-left: 0; }
  .ddash-acts { grid-template-columns: 1fr; }
}
/* —— Invite page dark mockup —— */
.ipage { margin-top: 0; color: #fff; }
.ipage-layout {
  display: grid;
  gap: .95rem;
  grid-template-columns: 1fr;
}
.ipage-hero { grid-area: auto; }
.ipage-rail { grid-area: auto; display: grid; gap: .85rem; align-content: start; }
.ipage-main { grid-area: auto; display: grid; gap: .95rem; min-width: 0; }
.ipage-foot {
  grid-area: auto;
  display: grid;
  gap: .55rem;
  padding: .15rem 0 .35rem;
}
.ipage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .85rem;
  margin-bottom: 0;
}
.ipage-hero-copy { min-width: 0; }
.ipage-hero-copy h1 {
  margin: 0 0 .45rem;
  font-size: clamp(1.55rem, 5.5vw, 2.1rem);
  letter-spacing: -.03em;
  color: #fff;
  font-weight: 900;
  line-height: 1.1;
}
.ipage-hero-copy p {
  margin: 0;
  max-width: 26rem;
  color: #b7aec9;
  line-height: 1.45;
  font-weight: 550;
  font-size: .92rem;
}
.ipage-hero-art {
  position: relative;
  width: 104px;
  height: 104px;
  flex: none;
  display: grid;
  place-items: center;
}
.ipage-invite-icon {
  width: 104px;
  height: 104px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(214, 65, 231, .4));
}
.ipage-card {
  background: #151322;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 1.05rem 1.1rem;
}
.ipage-engage { padding-bottom: .85rem; }
.ipage-kicker {
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8b849c; margin-bottom: .45rem;
}
.ipage-engage-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.ipage-engage-copy { min-width: 0; flex: 1; }
.ipage-engage-top h2 { margin: 0 0 .28rem; font-size: clamp(1.55rem, 4.5vw, 1.85rem); letter-spacing: -.03em; font-weight: 900; }
.ipage-engage-top h2 span { font-size: .92rem; color: #a39bb8; font-weight: 700; }
.ipage-engage-top p { margin: 0; color: #a39bb8; font-size: .88rem; }
.ipage-ring {
  --pct: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  background: conic-gradient(#812DE2 0%, #D641E7 calc(var(--pct) * 1%), rgba(255,255,255,.1) 0);
  position: relative;
}
.ipage-ring::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #151322;
}
.ipage-ring strong {
  position: relative;
  z-index: 1;
  font-size: .8rem;
  color: #fff;
  font-weight: 850;
}
.ipage-bar { display: none; }
.ipage-engage-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .85rem;
  padding-top: .8rem;
  border-top: 1px dashed rgba(255,255,255,.12);
}
.ipage-howto-details {
  margin: 0;
  flex: 1;
  min-width: 0;
}
.ipage-howto-details > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.72);
  font-size: .86rem;
  font-weight: 650;
}
.ipage-howto-details > summary::-webkit-details-marker { display: none; }
.ipage-howto-details > summary i {
  font-size: .72rem;
  transition: transform .15s ease;
}
.ipage-howto-details[open] > summary i { transform: rotate(180deg); }
.ipage-howto-details > summary:hover { color: #fff; }
.ipage-rates {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: .15rem;
  margin-top: .65rem;
}
.ipage-howto {
  margin: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: .1rem 0;
  color: #d8b4fe;
  font-weight: 750;
  font-size: .86rem;
  white-space: nowrap;
}
.ipage-summary {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.ipage-summary strong { display: block; font-size: 1.55rem; letter-spacing: -.03em; }
.ipage-summary > div > span { color: #a39bb8; font-size: .88rem; font-weight: 650; }
.ipage-summary-meta { display: flex; align-items: center; gap: .75rem; text-align: right; }
.ipage-summary-meta span { display: block; font-weight: 800; color: #fff; font-size: .9rem; }
.ipage-summary-meta small { color: #a39bb8; font-size: .74rem; }
.ipage-badge-ico {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: #8b849c; font-size: 1.35rem; line-height: 1;
}
.ipage-badge-ico.is-complete { color: #86efac; }
.ipage-badge-ico.is-locked { color: #8b849c; opacity: .85; }
.ipage-badge-ico .lucide-icon,
.ipage-badge-ico i { width: 1.25rem; height: 1.25rem; }
.ipage-mile-lead {
  margin: 0 0 .85rem;
  color: #a39bb8;
  font-size: .82rem;
  line-height: 1.4;
}
.ipage-mile-lead strong { color: #efe8ff; font-weight: 750; }
.ipage-milestones {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem;
}
.ipage-mile {
  position: relative;
  text-align: center;
  padding: 1.35rem .5rem .75rem;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  border: 1px dashed rgba(255,255,255,.12);
  color: #8b849c;
  opacity: .78;
}
.ipage-mile-status {
  position: absolute;
  top: .45rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .15rem .45rem;
  border-radius: 999px;
  white-space: nowrap;
  background: rgba(255,255,255,.06);
  color: #a39bb8;
}
.ipage-mile-ico {
  display: inline-flex; align-items: center; justify-content: center;
  margin: .15rem auto .45rem; background: none; border: 0; border-radius: 0;
  color: #6b6478; font-size: 1.45rem; line-height: 1; width: auto; height: auto;
}
.ipage-mile-ico .lucide-icon,
.ipage-mile-ico i { width: 1.35rem; height: 1.35rem; }
.ipage-mile strong { display: block; font-size: 1rem; color: #c4b5d8; }
.ipage-mile-name { display: block; font-size: .78rem; font-weight: 750; margin: .15rem 0; color: #b7adc9; }
.ipage-mile small { display: block; color: #7a738c; font-size: .68rem; line-height: 1.3; }
.ipage-mile-prog {
  display: block;
  margin-top: .45rem;
  font-size: .68rem;
  font-style: normal;
  font-weight: 750;
  color: #8b849c;
}
.ipage-mile.is-done {
  opacity: 1;
  border-style: solid;
  border-color: rgba(34,197,94,.4);
  background: rgba(34,197,94,.1);
  color: #efe8ff;
}
.ipage-mile.is-done .ipage-mile-status {
  background: rgba(34,197,94,.2);
  color: #86efac;
}
.ipage-mile.is-done .ipage-mile-ico { color: #86efac; }
.ipage-mile.is-done strong,
.ipage-mile.is-done .ipage-mile-name { color: #fff; }
.ipage-mile.is-done .ipage-mile-prog { color: #86efac; }
.ipage-mile.is-next {
  opacity: 1;
  border-style: dashed;
  border-color: rgba(214,65,231,.45);
  background: rgba(214,65,231,.06);
  color: #efe8ff;
}
.ipage-mile.is-next .ipage-mile-status {
  background: rgba(214,65,231,.18);
  color: #e9d5ff;
}
.ipage-mile.is-next .ipage-mile-ico { color: #d8b4fe; }
.ipage-mile.is-next strong,
.ipage-mile.is-next .ipage-mile-name { color: #fff; }
.ipage-mile.is-next .ipage-mile-prog { color: #e9d5ff; }
.ipage-mile.is-locked .ipage-mile-status {
  background: rgba(255,255,255,.05);
  color: #8b849c;
}
.ipage-perks { display: grid; gap: .55rem; }
.ipage-perk {
  width: 100%; display: grid; grid-template-columns: 28px 1fr auto; gap: .7rem; align-items: center;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); color: inherit;
  border-radius: 14px; padding: .7rem .75rem; text-align: left; cursor: pointer;
}
.ipage-perk-ico {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0; color: #ff8fd0;
  font-size: 1.2rem; line-height: 1; width: auto; height: auto;
}
.ipage-perk-ico .lucide-icon,
.ipage-perk-ico i { width: 1.15rem; height: 1.15rem; }
.ipage-perk strong { display: block; font-size: .86rem; }
.ipage-perk small { color: #a39bb8; font-size: .74rem; }
.ipage-perk.is-earned { border-color: rgba(34,197,94,.28); }
.ipage-invitees { display: grid; gap: .45rem; }
.ipage-invitee {
  width: 100%; display: flex; gap: .65rem; align-items: center; border: 0; background: transparent;
  color: inherit; text-align: left; padding: .35rem 0; cursor: pointer;
}
.ipage-invitee-av {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800;
}
.ipage-invitee strong { display: block; font-size: .86rem; }
.ipage-invitee small { color: #8b849c; font-size: .72rem; }
.ipage-privacy { margin: 0; color: #8b849c; font-size: .78rem; display: flex; gap: .4rem; align-items: center; }
.ipage-tabs { display: flex; gap: .85rem; margin-bottom: .75rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.ipage-tab {
  border: 0; background: transparent; color: #8b849c; font: inherit; font-weight: 800; font-size: .86rem;
  padding: .35rem 0 .65rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ipage-tab.active { color: #fff; border-bottom-color: #D641E7; }
.ipage-qr-wrap {
  display: grid;
  place-items: center;
  margin: .15rem 0 .95rem;
  padding: 1rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(255,255,255,.12);
}
.ipage-qr {
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
}
.ipage-qr img,
.ipage-qr canvas {
  width: 200px !important;
  height: 200px !important;
  display: block;
  border-radius: 8px;
}
.ipage-qr-empty {
  margin: 0;
  color: #6b6280;
  font-size: .84rem;
  font-weight: 650;
  text-align: center;
}
.ipage-share-row {
  display: grid; grid-template-columns: 1fr 42px; gap: .45rem; margin-bottom: .85rem;
}
.ipage-share-row input {
  width: 100%; border: 1px solid rgba(255,255,255,.1); background: #0f0d1a; color: #fff;
  border-radius: 12px; padding: .75rem .85rem; font: inherit; font-size: .84rem;
}
.ipage-copy {
  border: 0; border-radius: 12px; background: #812DE2; color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.ipage-social { display: flex; gap: .55rem; }
.ipage-social-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color: #fff; display: grid; place-items: center; cursor: pointer; text-decoration: none;
}
.ipage-social-btn.wa { background: rgba(37,211,102,.16); color: #4ade80; border-color: rgba(37,211,102,.28); }
.ipage-social-btn.ig { background: rgba(236,72,153,.14); color: #f472b6; border-color: rgba(236,72,153,.28); }
.ipage-social-btn.fb { background: rgba(59,130,246,.14); color: #60a5fa; border-color: rgba(59,130,246,.28); }
.ipage-emails {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  background: #0f0d1a; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: .65rem .7rem; margin-bottom: .65rem;
}
.ipage-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 999px;
  background: rgba(214,65,231,.16); color: #f5d0fe; font-size: .75rem; font-weight: 750;
}
.ipage-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.ipage-email-row {
  display: flex; align-items: center; gap: .35rem; flex: 1 1 160px; min-width: 160px;
}
.ipage-emails input,
.ipage-email-row input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: #fff; outline: none; font: inherit; padding: .35rem;
}
.ipage-email-add {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(129,45,226,.28); color: #e9d5ff; display: grid; place-items: center; cursor: pointer; flex: none;
}
.ipage-email-add:hover { background: #812DE2; color: #fff; }
.ipage-mail-hint {
  margin: .55rem 0 0; color: #8b849c; font-size: .72rem; line-height: 1.35;
}
.ipage-mail-hint strong { color: #d8b4fe; font-weight: 700; }
.ipage-message {
  width: 100%; min-height: 78px; border: 1px solid rgba(255,255,255,.1); background: #0f0d1a; color: #fff;
  border-radius: 14px; padding: .75rem .85rem; resize: vertical; font: inherit; margin-bottom: .35rem;
}
.ipage-msg-count { text-align: right; color: #8b849c; font-size: .72rem; margin-bottom: .65rem; }
.ipage-send {
  width: 100%; border: 0; border-radius: 999px; padding: .9rem 1rem; color: #fff; font: inherit; font-weight: 850;
  background: #812DE2; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  box-shadow: none;
}
.ipage-send:disabled { opacity: .45; cursor: not-allowed; }
.ipage-terms {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  justify-self: start;
  color: #d8b4fe;
  font-weight: 750;
  font-size: .86rem;
  text-align: left;
}
@media (min-width: 1100px) {
  .content:has(.ipage) { max-width: 1280px; }
  .ipage-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "hero rail"
      "main rail"
      "foot foot";
    gap: 1.15rem;
    align-items: start;
  }
  .ipage-hero { grid-area: hero; }
  .ipage-rail { grid-area: rail; position: sticky; top: .75rem; }
  .ipage-main { grid-area: main; }
  .ipage-foot { grid-area: foot; }
  .ipage-milestones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ipage-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .ipage-hero-art {
    width: 92px;
    height: 92px;
  }
  .ipage-invite-icon {
    width: 92px;
    height: 92px;
  }
  .ipage-hero-copy p {
    font-size: .86rem;
  }
  .ipage-summary { flex-direction: row; align-items: center; }
  .ipage-summary-meta { text-align: right; }
}
@media (max-width: 420px) {
  .ipage-engage-foot {
    flex-wrap: wrap;
    row-gap: .55rem;
  }
  .ipage-howto {
    margin-left: auto;
  }
  .ipage-hero-art {
    width: 78px;
    height: 78px;
  }
  .ipage-invite-icon {
    width: 78px;
    height: 78px;
  }
}

/* ?? Buurthuis ?? */
.ch-page { color: #fff; max-width: 920px; margin: 0 auto; padding-bottom: 2rem; }
.ch-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ch-anon-listen-option {
  margin: 0 0 1rem;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: #fff;
}
.ch-anon-listen-option .toggle-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .55rem;
}
.ch-anon-listen-option .toggle-text strong {
  color: #fff;
  font-size: .95rem;
}
.ch-anon-listen-option .toggle-text small {
  color: #a39bb8;
  font-size: .82rem;
  font-weight: 600;
}
.ch-hero-copy { flex: 1; min-width: 0; }
.ch-hero .btn { flex: 0 0 auto; align-self: flex-start; }
.ch-hero h2 { margin: .2rem 0 .35rem; font-size: 1.7rem; letter-spacing: -.02em; }
.ch-hero p { margin: 0; color: #a39bb8; max-width: 34rem; line-height: 1.45; }
.ch-banner { display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 14px; margin-bottom: 1rem; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.28); color: #fde68a; font-size: .88rem; }
.ch-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .85rem; }
.ch-room-card {
  text-align: left;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 1rem 1.05rem;
  color: #fff;
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
  display: grid;
  gap: .85rem;
}
.ch-room-card:hover { border-color: rgba(129,45,226,.55); transform: translateY(-1px); }
.ch-room-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .72rem; font-weight: 800; }
.ch-live { color: #fb7185; display: inline-flex; align-items: center; gap: .35rem; }
.ch-live i { font-size: .55rem; }
.ch-vis { color: #a39bb8; }
.ch-room-main { display: flex; align-items: flex-start; gap: .8rem; min-width: 0; }
.ch-room-host { flex: none; position: relative; }
.ch-room-host-av,
.ch-room-host .avatar {
  width: 52px !important;
  height: 52px !important;
  font-size: 1rem !important;
  border: 2px solid rgba(251,113,133,.55);
  box-shadow: 0 0 0 3px rgba(251,113,133,.12);
}
.ch-room-host .avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.ch-room-copy { min-width: 0; flex: 1; }
.ch-room-card strong {
  display: block;
  font-size: 1.05rem;
  margin: 0 0 .2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-room-card p {
  margin: 0;
  color: #a39bb8;
  font-size: .86rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 0;
}
.ch-room-host-name {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .35rem;
  color: #cfc7e2;
  font-size: .74rem;
  font-weight: 700;
}
.ch-room-host-name i { color: #fb7185; font-size: .7rem; }
.ch-room-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  color: #cfc7e2;
  font-size: .82rem;
  font-weight: 700;
}
.ch-room-faces {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: .22rem .65rem .22rem .3rem;
}
.ch-room-faces .facepile { display: flex; align-items: center; }
.ch-room-faces .facepile .avatar,
.ch-room-faces .facepile-avatar,
.ch-room-faces .facepile-photo {
  width: 26px !important;
  height: 26px !important;
  font-size: .55rem !important;
  border: 2px solid #151322;
  margin-left: -.45rem;
  flex-shrink: 0;
}
.ch-room-faces .facepile .avatar:first-child,
.ch-room-faces .facepile-avatar:first-child,
.ch-room-faces .facepile-photo:first-child { margin-left: 0; }
.ch-room-faces .facepile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.ch-room-faces .facepile-more {
  margin-left: .2rem;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #ece7f7;
  font-size: .68rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  border: 2px solid #151322;
}
.ch-room-count { color: #fff; font-size: .78rem; font-weight: 800; white-space: nowrap; }
.ch-room-stage {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: #a39bb8;
  font-size: .76rem;
}
.ch-empty { grid-column: 1 / -1; padding: 2rem 1rem; text-align: center; color: #a39bb8; }
.ch-empty h3 { color: #fff; margin: 0 0 .4rem; }

.ch-room { max-width: 520px; margin: 0 auto; padding-bottom: 13.5rem; color: #fff; }
.ch-room-head { display: grid; grid-template-columns: 1fr auto; gap: .85rem; align-items: flex-start; margin-bottom: 1.25rem; }
.ch-room-head-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.ch-pill-btn,
.ch-vis-status {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #efe8ff;
  border-radius: 999px;
  padding: .4rem .75rem;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.ch-pill-btn:active,
.ch-vis-status:active { transform: scale(.98); }
.ch-pill-btn.is-plus { border-color: rgba(255, 79, 178, .28); }
.ch-pill-btn.is-on {
  background: rgba(129, 45, 226, .28);
  border-color: rgba(196, 181, 253, .4);
  color: #ede9fe;
}
.ch-pill-btn--icon {
  min-width: 44px;
  justify-content: center;
  padding: .4rem .65rem;
}
.ch-vis-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
}
.ch-vis-public-btn {
  border: 0;
  background: linear-gradient(105deg, #ff4fb2, #812DE2);
  color: #fff;
  border-radius: 999px;
  padding: .45rem .9rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}
.ch-vis-field {
  padding: .85rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(129,45,226,.35);
  background: rgba(129,45,226,.12);
}
.ch-vis-field > label {
  display: block;
  margin-bottom: .55rem;
  font-weight: 800;
  color: #fff;
}
.ch-coins-pill {
  border: 1px solid rgba(255, 196, 90, .35);
  background: rgba(18,14,32,.9);
  color: #ffe8a3;
  border-radius: 999px;
  padding: .4rem .7rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.profile-top-actions .ch-coins-pill,
.user-topbar .ch-coins-pill,
.mpro-coins-pill {
  padding: .38rem .65rem;
  font-size: .78rem;
  box-shadow: 0 0 0 1px rgba(255, 196, 90, .12);
}
@media (max-width: 420px) {
  .profile-top-actions .ch-coins-pill {
    padding: .35rem .5rem;
    font-size: .74rem;
  }
}
.ch-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .35rem;
}
.ch-section-head h3 { margin: 0; }
.ch-tip-cta {
  border: 0;
  background: rgba(129,45,226,.28);
  color: #efe8ff;
  border-radius: 999px;
  padding: .35rem .7rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  flex: none;
}
.ch-tip-help { margin: 0 0 .65rem; }
.ch-tip-hint {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 700;
  color: #c4b5fd;
}
.ch-tip-fab {
  position: static;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(192, 132, 252, .35);
  background: rgba(129, 45, 226, .35);
  color: #efe8ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  font-size: 1.15rem;
  cursor: pointer;
  flex: none;
}
.ch-room-head h2 { margin: .15rem 0 .25rem; font-size: 1.45rem; }
.ch-room-head p { margin: 0; color: #a39bb8; }
.ch-person-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  margin-left: auto;
  flex: none;
}
.ch-icon-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #efe8ff;
  cursor: pointer;
  flex: none;
}
.ch-icon-action-ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #ff7ad9;
  font-size: .72rem;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ch-icon-action:hover .ch-icon-action-ico,
.ch-icon-action:focus-visible .ch-icon-action-ico {
  background: rgba(255, 79, 178, .18);
  border-color: rgba(255, 79, 178, .45);
  transform: translateY(-1px);
}
.ch-icon-action-label {
  font-size: .58rem;
  font-weight: 750;
  line-height: 1.05;
  color: #cfc7e2;
  white-space: nowrap;
}
.ch-person-actions .btn {
  flex: none;
  white-space: nowrap;
  min-height: 30px;
  padding: .35rem .7rem;
  font-size: .78rem;
  border-radius: 999px;
}
.ch-face-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
}
.ch-host-transfer { margin-top: 1.25rem; padding-bottom: .15rem; }
.ch-host-transfer h3 { margin: 0 0 .35rem; font-size: 1rem; }
.ch-host-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-align: left;
  margin-top: .5rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  color: inherit;
  cursor: pointer;
}
.ch-host-row .avatar,
.ch-host-row .ch-av {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  flex: 0 0 40px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center;
}
.ch-host-row .avatar img,
.ch-host-row .ch-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 50%;
  display: block;
}
.ch-host-meta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1;
  min-width: 0;
}
.ch-host-row small { color: #a39bb8; font-size: .78rem; }
.ch-host-row .btn,
.ch-host-action { flex: none; }
.ch-conn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
  padding: .28rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 750;
  background: rgba(255,255,255,.06);
  color: #cfc7e2;
}
.ch-conn[data-state="connected"] { background: rgba(34,197,94,.18); color: #86efac; }
.ch-conn[data-state="connecting"] { background: rgba(251,191,36,.16); color: #fde68a; }
.ch-conn[data-state="idle"] { background: rgba(239,68,68,.16); color: #fecaca; }
.ch-section { margin-bottom: 1.1rem; }
.ch-section h3 { margin: 0 0 .65rem; font-size: .88rem; color: #cfc7e2; font-weight: 700; }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .65rem; }
.ch-faces {
  display: grid;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: .15rem 0 .5rem;
  gap: 1rem .55rem;
  justify-items: center;
}
.ch-faces.stage {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ch-faces.audience {
  max-width: 480px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem .4rem;
}
.ch-faces-empty {
  grid-column: 1 / -1;
  text-align: center;
  margin: .4rem 0;
}
.ch-face {
  width: 100%;
  max-width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
}
button.ch-face {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.ch-face:focus-visible .ch-ring .avatar,
button.ch-face:focus-visible .ch-ring .ch-av {
  box-shadow: 0 0 0 3px #151225, 0 0 0 5px rgba(255,79,178,.65);
}
.ch-face.size-audience { max-width: 84px; gap: .25rem; }
.ch-face-name,
.ch-face strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  font-size: .78rem;
  font-weight: 750;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #efe8ff;
}
.ch-face.size-audience .ch-face-name { font-size: .68rem; font-weight: 700; color: #d7cee8; }
.ch-host-star {
  color: #4ade80;
  font-weight: 900;
  font-size: 1.05em;
  line-height: 1;
}
.ch-face-btn {
  margin-top: .15rem;
  border: 0;
  border-radius: 999px;
  padding: .28rem .55rem;
  font-size: .68rem;
  font-weight: 750;
  background: rgba(255,255,255,.08);
  color: #efe8ff;
  cursor: pointer;
}
.ch-listen-only-toggle {
  border-color: rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.04) !important;
  color: #fff;
  align-items: flex-start;
  gap: .75rem;
}
.ch-listen-only-toggle .toggle-text {
  display: grid;
  gap: .15rem;
  color: #efe8ff;
}
.ch-listen-only-toggle .toggle-text strong { font-size: .92rem; color: #fff; }
.ch-listen-only-toggle .toggle-text small { color: #a39bb8; font-size: .78rem; font-weight: 600; }
.ch-listen-only-toggle .toggle-switch { background: rgba(255,255,255,.18); margin-top: .1rem; }
.ch-host-form { gap: .7rem; }
.ch-host-form .field { margin: 0; }
.ch-host-label {
  display: block;
  margin-bottom: .35rem;
  font-size: .88rem;
  font-weight: 700;
  color: #efe8ff;
}
.ch-host-hint {
  margin: .25rem 0 0;
  font-size: .78rem;
  color: #a39bb8;
}
.ch-host-listeners-block { margin: 0; }
.ch-host-listeners-row {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: .55rem;
  align-items: stretch;
}
.modal .ch-host-listeners-row input,
#modal-root .ch-host-listeners-row input {
  width: 100%;
  min-height: 46px;
  padding: .65rem .85rem;
  border-radius: 12px;
  box-sizing: border-box;
  background: #2a1d52 !important;
  border: 1px solid rgba(192, 132, 252, .35) !important;
  color: #fff !important;
}
.ch-vis-row--compact .doel-chip span {
  min-height: 3.35rem;
  padding: .55rem .25rem;
  font-size: .74rem;
}
.ch-listen-only-toggle--inline {
  padding: .55rem .65rem !important;
  margin: 0;
  min-height: 46px;
  height: 100%;
  display: flex !important;
  align-items: center;
}
.ch-listen-only-toggle--inline .toggle-switch { margin-top: 0; flex-shrink: 0; }
.ch-listen-only-toggle--inline .toggle-text strong { font-size: .84rem; }
.ch-listen-only-toggle--inline .toggle-text small { font-size: .72rem; line-height: 1.25; }
.modal-head--compact { margin-bottom: .65rem; }
.modal-head--compact h2 { font-size: 1.35rem; }
.ch-host-save { margin-top: .15rem; }
.ch-host-transfer--compact { margin-top: .85rem; }
.ch-host-transfer--compact h3 { font-size: .95rem; }
.ch-host-transfer--compact > .muted { font-size: .82rem; margin: 0 0 .45rem; }
@media (max-width: 480px) {
  .ch-host-listeners-row { grid-template-columns: 1fr; }
}
.ticket-custom-wrap {
  margin-top: .75rem;
  padding: .85rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(255,79,178,.28);
  background: rgba(129,45,226,.12);
}
.ticket-custom-wrap label {
  display: block;
  margin-bottom: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: #e9d5ff;
}
.ticket-custom-input {
  display: flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: .15rem .85rem;
  background: rgba(0,0,0,.25);
}
.ticket-custom-input span {
  color: #ff9ed0;
  font-weight: 800;
}
.ticket-custom-input input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: .7rem 0 !important;
  color: #fff;
}
.ch-dock-note {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,14,32,.94);
  color: #a39bb8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}
.ch-give-stage,
.ch-leave-stage {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  margin-top: .15rem;
  border: 0;
  border-radius: 12px;
  padding: .4rem .75rem;
  font-size: .66rem;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.ch-face.wants-stage,
.ch-face.can-leave-stage {
  max-width: 120px;
  gap: .3rem;
}
.ch-give-stage {
  background: linear-gradient(180deg, #6d28d9 0%, #4c1d95 100%);
  border: 1px solid rgba(167, 139, 250, .28);
  box-shadow: 0 6px 14px rgba(76, 29, 149, .4);
}
.ch-leave-stage {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  color: #efe8ff;
}
.ch-give-stage i,
.ch-leave-stage i { font-size: .72rem; line-height: 1; }
.ch-give-stage:active,
.ch-leave-stage:active { transform: scale(.97); }
.ch-face.is-hand.wants-stage .ch-ring .avatar,
.ch-face.is-hand.wants-stage .ch-ring .ch-av {
  box-shadow: 0 0 0 3px #151225, 0 0 0 5px rgba(255,79,178,.75), 0 0 16px rgba(255,79,178,.35);
}
.ch-ring {
  position: relative;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.ch-face.size-audience .ch-ring,
.ch-ring-sm {
  width: 52px;
  height: 52px;
  flex: none;
}
.ch-mute-badge {
  position: absolute;
  right: -2px;
  bottom: 2px;
  z-index: 4;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1b1139;
  border: 1.5px solid rgba(255,255,255,.2);
  color: #efe8ff;
  font-size: .62rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.ch-name-mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f9a8d4;
  font-size: .78em;
  opacity: .95;
}
.ch-face.is-muted .ch-face-name { color: #c4b5d8; }
.ch-meta-card {
  margin: 0 0 .75rem;
  padding: .8rem .9rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.ch-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.ch-meta-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #b7a8d4;
}
.ch-meta-title {
  margin: 0;
  color: #fff;
  font-size: .95rem;
  font-weight: 750;
  line-height: 1.35;
}
.ch-meta-title.is-empty { color: #8b849c; font-weight: 600; }
.ch-meta-sub {
  margin: .2rem 0 0;
  color: #8b849c;
  font-size: .74rem;
  font-weight: 650;
}
.ch-meta-ico {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #cfc7e2;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: none;
  font-size: .85rem;
}
.ch-meta-ico.is-danger { color: #fca5a5; }
.ch-meta-ico:hover { background: rgba(255,255,255,.1); color: #fff; }
.ch-poll-empty {
  border-style: dashed;
  padding: .55rem;
}
.ch-poll-start-btn {
  width: 100%;
  border: 0;
  background: transparent;
  color: #c4b5d8;
  font-weight: 750;
  font-size: .86rem;
  padding: .5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
}
.ch-poll.is-closed { opacity: .92; }
.ch-poll-host { display: inline-flex; gap: .25rem; }
.ch-poll-opts { display: grid; gap: .4rem; margin-top: .7rem; }
.ch-poll-opt {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  padding: .55rem .7rem .5rem;
  color: #fff;
  cursor: pointer;
}
.ch-poll-opt:disabled { cursor: default; }
.ch-poll-opt:not(:disabled):hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
}
.ch-poll-opt.is-mine {
  border-color: rgba(255,79,178,.4);
  background: rgba(255,79,178,.1);
}
.ch-poll-opt-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}
.ch-poll-opt-label {
  font-size: .86rem;
  font-weight: 700;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ch-poll-opt-label i { font-size: .72rem; color: #f9a8d4; }
.ch-poll-opt-stats {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  flex: none;
  font-size: .78rem;
}
.ch-poll-opt-stats b { color: #fff; font-weight: 800; }
.ch-poll-opt-stats em { font-style: normal; color: #8b849c; font-weight: 700; }
.ch-poll-bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  margin-top: .45rem;
  overflow: hidden;
}
.ch-poll-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff4fb2, #812DE2);
}
.ch-person-sheet-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.ch-person-sheet-head .avatar,
.ch-person-sheet-head .ch-av {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  min-height: 48px;
  flex: 0 0 48px !important;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;
  overflow: hidden !important;
}
.ch-person-sheet-head .avatar img,
.ch-person-sheet-head .ch-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 50%;
  display: block;
}
.ch-person-sheet-head h2 { margin: .1rem 0 0; font-size: 1.15rem; }
.ch-ring .avatar,
.ch-ring .ch-av {
  position: relative;
  z-index: 2;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  overflow: hidden;
  box-shadow: 0 0 0 3px #151225, 0 0 0 4px rgba(255,255,255,.12);
  font-size: 1.05rem;
}
.ch-face.size-audience .ch-ring .avatar,
.ch-face.size-audience .ch-ring .ch-av,
.ch-ring-sm .avatar,
.ch-ring-sm .ch-av {
  width: 46px !important;
  height: 46px !important;
  font-size: .72rem;
  box-shadow: 0 0 0 2px #151225, 0 0 0 3px rgba(255,255,255,.1);
}
.ch-face.is-host .ch-ring .avatar,
.ch-face.is-host .ch-ring .ch-av {
  box-shadow: 0 0 0 3px #151225, 0 0 0 5px rgba(74, 222, 128, .55), 0 0 18px rgba(74, 222, 128, .2);
}
.ch-ring .avatar img,
.ch-ring .ch-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.ch-pulse {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(129, 45, 226, .0);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.ch-pulse-2 { inset: 0; }
.is-talking .ch-pulse {
  animation: ch-vibe 1.15s ease-out infinite;
  border-color: #c084fc;
}
.is-talking .ch-pulse-2 {
  animation-delay: .35s;
  border-color: #ff4fb2;
}
.is-talking .ch-ring .avatar,
.is-talking .ch-ring .ch-av {
  box-shadow: 0 0 0 3px #151225, 0 0 0 5px rgba(192, 132, 252, .85), 0 0 22px rgba(129, 45, 226, .45);
}
@keyframes ch-vibe {
  0% { transform: scale(.92); opacity: .85; }
  70% { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
.ch-person.is-hand,
.ch-face.is-hand .ch-ring .avatar,
.ch-face.is-hand .ch-ring .ch-av { box-shadow: 0 0 0 3px #151225, 0 0 0 5px rgba(255,79,178,.55); }
.ch-face.is-me .ch-face-name { color: #ff7ad9; }
.ch-emote {
  position: absolute;
  right: -4px;
  top: -6px;
  z-index: 4;
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
  animation: ch-emote-pop .45s cubic-bezier(.2,1.4,.4,1);
  pointer-events: none;
}
.ch-face.size-audience .ch-emote,
.ch-ring-sm .ch-emote { font-size: .9rem; right: -4px; top: -5px; }
@media (max-width: 380px) {
  .ch-faces.stage { max-width: 100%; gap: .85rem .35rem; }
  .ch-faces.audience { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ch-ring { width: 76px; height: 76px; }
  .ch-ring .avatar,
  .ch-ring .ch-av { width: 64px !important; height: 64px !important; }
}
@keyframes ch-emote-pop {
  0% { transform: scale(.2) translateY(8px); opacity: 0; }
  60% { transform: scale(1.15) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.ch-audio-unlock {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border: 0;
  border-radius: 14px;
  background: #812DE2;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(129, 45, 226, .35);
}
.ch-audio-unlock.is-error {
  background: linear-gradient(135deg, #ff4fb2, #c026d3 55%, #7c3aed);
}
.ch-audio-unlock:disabled { opacity: .7; cursor: wait; }
.ch-audio-unlock:active { transform: scale(.98); }
.ch-audio-status {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  background: rgba(129, 45, 226, .16);
  border: 1px solid rgba(129, 45, 226, .35);
  color: #efe6ff;
  text-align: left;
}
.ch-audio-status-copy {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.ch-audio-status-copy strong {
  font-size: .95rem;
  font-weight: 700;
}
.ch-audio-status-copy small {
  font-size: .78rem;
  color: rgba(239, 230, 255, .72);
}
.ch-audio-spin {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .22);
  border-top-color: #c4b5fd;
  animation: ch-audio-spin .7s linear infinite;
}
@keyframes ch-audio-spin {
  to { transform: rotate(360deg); }
}
.ch-react-bar {
  position: relative;
  z-index: 41;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  padding: .3rem .4rem;
  border-radius: 999px;
  background: rgba(18,14,32,.96);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ch-react-bar::-webkit-scrollbar { display: none; }
.ch-react-btn {
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  transition: transform .12s ease, background .12s ease;
}
.ch-react-btn:active { transform: scale(1.12); }
.ch-react-btn.on { background: rgba(255,79,178,.28); box-shadow: inset 0 0 0 1px rgba(255,79,178,.55); }
.ch-react-btn.more { font-size: .95rem; background: rgba(129,45,226,.28); }
.ch-react-panel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + .55rem);
  z-index: 43;
  width: min(22rem, calc(100vw - 1.25rem));
  max-height: min(48vh, 22rem);
  overflow: auto;
  padding: .75rem .8rem .9rem;
  border-radius: 18px;
  background: rgba(18,14,32,.97);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}
.ch-react-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.ch-react-panel-head strong { font-size: .95rem; }
.ch-react-mini {
  border: 0;
  border-radius: 999px;
  padding: .35rem .7rem;
  background: rgba(255,255,255,.08);
  color: #fff;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.ch-react-mini.on { background: #812DE2; }
.ch-react-hint {
  margin: 0 0 .65rem;
  color: #a39bb8;
  font-size: .78rem;
  line-height: 1.35;
}
.ch-react-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .35rem;
}
.ch-react-pick {
  position: relative;
  border: 0;
  border-radius: 12px;
  aspect-ratio: 1;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  line-height: 1;
  padding: 0;
}
.ch-react-pick.is-fav { background: rgba(255,79,178,.22); box-shadow: inset 0 0 0 1px rgba(255,79,178,.45); }
.ch-react-pick:active { transform: scale(1.08); }
.ch-react-star {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: .65rem;
  color: #ffd166;
  line-height: 1;
}
.ch-room-chrome {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  padding: .75rem max(.85rem, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left));
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 10, 21, .82) 28%, rgba(11, 10, 21, .98) 55%);
}
.ch-room-chrome > * { pointer-events: auto; }
.ch-room-chrome-react {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.ch-room-chrome-actions {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: .65rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.ch-chrome-spacer {
  width: 56px;
  height: 56px;
  visibility: hidden;
}
.ch-dock {
  position: static;
  left: auto;
  transform: none;
  bottom: auto;
  z-index: 40;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: auto;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.ch-dock-btn {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  width: 56px;
  height: 56px;
  padding: 0;
  background: rgba(18,14,32,.94);
  color: #fff;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  font-size: 1.15rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  cursor: pointer;
}
.ch-dock-btn.on { background: #812DE2; border-color: transparent; }
.ch-dock-btn.hand.on { background: rgba(255,79,178,.92); }
.ch-dock-btn.danger { background: rgba(239,68,68,.22); color: #fecaca; }
.ch-end-fab,
.ch-leave-fab,
.ch-leave-stage-fab {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  z-index: 42;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(18,14,32,.94);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  font-size: 1.15rem;
  cursor: pointer;
  flex: none;
}
.ch-end-fab {
  border-radius: 999px;
  background: #b91c1c;
  border-color: rgba(255,255,255,.08);
  color: #fff;
}
.ch-leave-stage-fab {
  border-radius: 999px;
  background: rgba(129, 45, 226, .28);
  border-color: rgba(192, 132, 252, .35);
  color: #efe8ff;
}
.ch-leave-fab {
  border-radius: 16px;
  justify-self: end;
}
/* Desktop: chrome blijft in main-kolom, niet over sidebar */
@media (min-width: 721px) {
  body.view-buurthuis-room .main {
    position: relative;
    min-width: 0;
  }
  body.view-buurthuis-room .ch-room {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 12.5rem;
  }
  body.view-buurthuis-room .ch-room-chrome {
    position: fixed;
    left: var(--app-sidebar-w, 260px);
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 1rem clamp(1.25rem, 3vw, 2.5rem) 1.15rem;
    background: linear-gradient(180deg, transparent 0%, rgba(11, 10, 21, .88) 30%, rgba(11, 10, 21, .98) 55%);
  }
  body.view-buurthuis-room .ch-room-chrome-react,
  body.view-buurthuis-room .ch-room-chrome-actions {
    max-width: 480px;
  }
  body.view-buurthuis-room .ch-react-panel {
    width: min(22rem, 100%);
  }
  body.view-buurthuis-room .sidebar .ad-slot--sidebar {
    display: none;
  }
}
@media (max-width: 720px) {
  .ch-hero { flex-direction: column; }
  .ch-hero .btn { width: 100%; justify-content: center; }
  .ch-room-chrome {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .ch-room { padding-bottom: 15.5rem; }
  .ch-react-btn {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
  }
}

.ch-ended {
  min-height: min(70vh, 36rem);
  display: grid;
  place-items: center;
  padding: 2rem 1.1rem 6rem;
  color: #fff;
}
.ch-ended-card {
  width: min(22rem, 100%);
  text-align: center;
  padding: 1.75rem 1.35rem 1.4rem;
  border-radius: 22px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(129, 45, 226, .28), transparent 55%),
    rgba(18, 14, 32, .96);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ch-ended-ico {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto .85rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(185, 28, 28, .28);
  color: #fecaca;
  font-size: 1.25rem;
}
.ch-ended-card .eyebrow {
  margin: 0 0 .35rem;
  color: #c4b5fd;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
}
.ch-ended-card h2 {
  margin: 0 0 .55rem;
  font-size: 1.45rem;
  line-height: 1.2;
}
.ch-ended-copy {
  margin: 0 0 1.1rem;
  color: #cfc7e2;
  font-size: .95rem;
  line-height: 1.45;
}
.ch-ended-room {
  margin: -.35rem 0 1.15rem;
  color: #a39bb8;
  font-size: .85rem;
  font-weight: 600;
}
.ch-ended-card .btn {
  margin-top: .25rem;
}

/* —— Matched Plus —— */
.eco-page {
  --eco-ink: #fff;
  --eco-muted: #b7a8d4;
  --eco-line: rgba(255,255,255,.1);
  --eco-card: #18152a;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 .85rem 5.5rem;
  color: var(--eco-ink);
}
.eco-hero { margin-bottom: 1.25rem; }
.eco-hero .eyebrow {
  color: var(--pink);
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eco-hero-top {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: .5rem;
  margin-bottom: .4rem;
  min-width: 0;
}
.eco-hero h1 {
  margin: 0;
  flex: none;
  font-size: clamp(1.45rem, 5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.eco-hero-sep {
  color: rgba(251, 191, 36, .7);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1;
  user-select: none;
  flex: none;
  opacity: .9;
}
.eco-hero-status {
  font-size: clamp(.88rem, 3.2vw, 1.05rem);
  font-weight: 750;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eco-hero-status--free { color: #fbbf24; }
.eco-hero-status--plus { color: #6ee7b7; }
.eco-hero-actions {
  margin-top: .85rem;
}
.eco-cancel-plus {
  color: rgba(255,255,255,.72) !important;
  border-color: rgba(255,255,255,.16) !important;
}
.eco-cancel-box {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: .75rem;
}
.eco-cancel-box .btn {
  justify-content: center;
}
.eco-lead {
  margin: 0;
  color: var(--eco-muted);
  font-size: .9rem;
  line-height: 1.45;
}
@media (max-width: 380px) {
  .eco-hero-top {
    flex-wrap: wrap;
    row-gap: .2rem;
  }
  .eco-hero-sep { display: none; }
  .eco-hero-status {
    width: 100%;
    white-space: normal;
  }
}
.eco-status-pill {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 0;
  flex-shrink: 0;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--eco-line);
  background: rgba(255,255,255,.04);
  color: var(--eco-muted);
  font-size: .82rem;
  font-weight: 700;
}
.eco-status-pill.is-on {
  border-color: rgba(255, 79, 178, .4);
  color: #ffe3f3;
  background: rgba(255, 79, 178, .12);
}
.eco-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .35rem;
  margin: 0 0 1rem;
  padding: .3rem;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--eco-line);
}
.eco-tabs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eco-tab {
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--eco-muted);
  font-weight: 750;
  font-size: .78rem;
  padding: .65rem .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.eco-tab.is-active {
  background: linear-gradient(145deg, rgba(255,79,178,.22), rgba(129,45,226,.28));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.eco-tab-panel[hidden] { display: none !important; }
.eco-perk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.eco-perk-list li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--eco-line);
}
.eco-perk-check {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(52, 211, 153, .15);
  color: #34d399;
  flex: none;
}
.eco-perk-list strong { display: block; margin-bottom: .15rem; }
.eco-perk-list small { color: var(--eco-muted); line-height: 1.35; }
.eco-wallet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: 1rem;
}
.eco-stat {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem .9rem;
  border-radius: 18px;
  background: var(--eco-card);
  border: 1px solid var(--eco-line);
}
.eco-stat.is-plus {
  border-color: rgba(255, 79, 178, .35);
  background: linear-gradient(145deg, rgba(255,79,178,.14), rgba(129,45,226,.18));
}
.eco-stat-ico {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(129,45,226,.28);
  color: #e9d5ff;
  font-size: 1rem;
}
.eco-stat-ico.gold { background: rgba(251,191,36,.18); color: #fbbf24; }
.eco-stat-ico.plus { background: rgba(255,79,178,.22); color: #ff4fb2; }
.eco-stat strong {
  display: block;
  font-size: 1.15rem;
  line-height: 1.1;
}
.eco-stat small {
  color: var(--eco-muted);
  font-size: .75rem;
  font-weight: 650;
}
.eco-panel {
  margin-bottom: .85rem;
  padding: 1.1rem 1rem 1.15rem;
  border-radius: 22px;
  background: var(--eco-card);
  border: 1px solid var(--eco-line);
  overflow: visible;
}
.eco-panel-head { margin-bottom: .9rem; }
.eco-panel-head h2 {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  color: #fff;
}
.eco-panel-head p {
  margin: 0;
  color: var(--eco-muted);
  font-size: .88rem;
  line-height: 1.4;
}
.eco-plans {
  display: grid;
  gap: .65rem;
}
.eco-plan {
  position: relative;
  text-align: left;
  border: 1px solid var(--eco-line);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 18px;
  padding: 1rem;
  cursor: pointer;
  display: grid;
  gap: .25rem;
  transition: border-color .15s ease, transform .12s ease;
}
.eco-plan:active { transform: scale(.985); }
.eco-plan--featured {
  border-color: rgba(255,79,178,.45);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,79,178,.22), transparent 50%),
    rgba(129,45,226,.16);
}
.eco-plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  min-height: 1.35rem;
}
.eco-plan-name {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #d8b4fe;
}
.eco-price {
  font-size: 1.55rem;
  font-weight: 850;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.1;
}
.eco-plan-note {
  color: var(--eco-muted);
  font-size: .8rem;
  margin-bottom: .15rem;
}
.eco-plan-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: .35rem;
  padding: .62rem .8rem;
  border-radius: 999px;
  background: linear-gradient(105deg, #ff4fb2, #812DE2);
  color: #fff;
  font-size: .84rem;
  font-weight: 800;
}
.eco-badge {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 800;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: #ff4fb2;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
}
.eco-packs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  overflow: visible;
  padding-top: .45rem;
}
.eco-pack {
  position: relative;
  border: 1px solid var(--eco-line);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 16px;
  padding: .85rem .5rem .8rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  min-height: 6.5rem;
  overflow: visible;
}
.eco-pack--badge {
  padding-top: 1.55rem;
  border-color: rgba(255,79,178,.35);
}
.eco-pack-badge {
  position: absolute;
  top: -.45rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: .62rem;
  font-weight: 800;
  padding: .18rem .45rem;
  border-radius: 999px;
  background: #ff4fb2;
  color: #fff;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  max-width: calc(100% - .35rem);
  overflow: hidden;
  text-overflow: ellipsis;
}
.eco-pack strong { font-size: 1.35rem; line-height: 1; }
.eco-pack-label { font-size: .75rem; color: var(--eco-muted); font-weight: 700; }
.eco-pack-price {
  margin-top: .45rem;
  font-size: .88rem;
  font-weight: 800;
  color: #e9d5ff;
}
.eco-compare {
  display: grid;
  gap: 0;
  border: 1px solid var(--eco-line);
  border-radius: 16px;
  overflow: hidden;
}
.eco-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, .95fr);
  gap: .35rem;
  align-items: center;
  padding: .7rem .75rem;
  border-bottom: 1px solid var(--eco-line);
  font-size: .86rem;
  line-height: 1.3;
}
.eco-compare-row:last-child { border-bottom: 0; }
.eco-compare-head {
  background: rgba(255,255,255,.05);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #d8b4fe;
}
.eco-compare-row > span:nth-child(2),
.eco-compare-row > span:nth-child(3) {
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.eco-yes { color: #34d399; font-weight: 750; }
.eco-no { color: #7c738f; font-weight: 650; }
.eco-x { color: #f87171 !important; }
.eco-support-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin-top: 1rem;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(196, 181, 253, .22);
  background: rgba(129, 45, 226, .12);
}
.eco-support-ico {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: #f0abfc;
  flex: none;
}
.eco-support-note strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .25rem;
}
.eco-support-note p {
  margin: 0;
  color: #cfc6e2;
  font-size: .86rem;
  line-height: 1.45;
  font-weight: 550;
}
.eco-support-cta {
  margin-top: .85rem;
}
.eco-x i, .eco-x svg { color: #f87171 !important; stroke: #f87171; }
.eco-compare-row small {
  font-size: .65rem;
  font-weight: 800;
  color: #ff9ed0;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.eco-reacts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .85rem;
}
.eco-react-chip {
  font-size: .8rem;
  padding: .35rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #efe8ff;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.eco-react-chip b { font-weight: 800; color: #ffe8a3; }
.eco-hint {
  margin: .75rem 0 0;
  color: var(--eco-muted);
  font-size: .82rem;
  line-height: 1.4;
}
.eco-toggle {
  margin: 1rem 0 .75rem;
  border-color: var(--eco-line) !important;
  background: rgba(255,255,255,.04) !important;
  color: #fff;
}
.eco-toggle .toggle-text strong { color: #fff; }
.eco-toggle .toggle-text small { color: var(--eco-muted); }
.eco-ledger {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.eco-ledger li {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--eco-line);
  font-size: .9rem;
}
.eco-ledger-empty {
  color: var(--eco-muted);
  border-bottom: 0 !important;
  display: block !important;
}
.eco-plus { color: #34d399; }
@media (max-width: 420px) {
  .eco-packs { grid-template-columns: 1fr; }
  .eco-pack {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    min-height: 0;
    padding: .85rem 1rem;
    gap: .35rem .75rem;
  }
  .eco-pack--badge { padding-top: 1.35rem; }
  .eco-pack-badge {
    top: -.4rem;
    left: .85rem;
    transform: none;
  }
  .eco-pack strong { order: 1; }
  .eco-pack-label { order: 2; margin-right: auto; }
  .eco-pack-price { margin-top: 0; order: 3; }
  .eco-compare-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .65fr) minmax(0, .85fr);
    padding: .65rem .6rem;
    font-size: .8rem;
  }
}
.eco-tip-row, .eco-premium-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0;
}
.eco-premium-btn {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 14px;
  padding: .55rem .7rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  cursor: pointer;
  font-size: 1.25rem;
}
.eco-premium-btn small { font-size: .7rem; color: #cfc7e2; }
.eco-views { display: grid; gap: .55rem; }
.eco-view-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-align: left;
  border: 0;
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 14px;
  padding: .65rem .75rem;
  cursor: pointer;
  width: 100%;
}
.eco-view-row small { display: block; color: #a39bb8; }

/* Admin message manager */
.admin-msg { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.admin-msg-head { margin-bottom: 0; }
.admin-msg-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  min-height: 520px;
  height: calc(100vh - 180px);
  height: calc(100dvh - 180px);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.admin-msg-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: rgba(0,0,0,.18);
}
.admin-msg-list-toolbar {
  flex: none;
  display: grid;
  gap: .65rem;
  padding: .85rem;
  border-bottom: 1px solid var(--line);
}
.admin-msg-list-toolbar .toolbar-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: #fff;
  padding: .65rem .95rem;
}
.admin-msg-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.admin-msg-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.admin-msg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-msg-row.is-active {
  background: rgba(129, 45, 226, .18);
  box-shadow: inset 3px 0 0 #c026d3;
}
.admin-msg-row.is-empty { opacity: .72; }
.admin-msg-row:hover { background: rgba(255,255,255,.04); }
.admin-msg-row.is-active:hover { background: rgba(129, 45, 226, .18); }
.admin-msg-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem .9rem;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.admin-msg-item:hover { background: transparent; }
.admin-msg-item.is-active {
  background: transparent;
  box-shadow: none;
}
.admin-msg-delete {
  flex: none;
  align-self: center;
  width: 34px;
  height: 34px;
  margin-right: .55rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #c4b5fd;
  opacity: .55;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.admin-msg-row:hover .admin-msg-delete,
.admin-msg-row.is-active .admin-msg-delete,
.admin-msg-delete--head {
  opacity: .9;
}
.admin-msg-delete:hover,
.admin-msg-delete--head:hover {
  opacity: 1;
  color: #fda4af;
  background: rgba(244, 63, 94, .12);
}
.admin-msg-chat-head-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.admin-msg-delete--head {
  margin: 0;
  width: 36px;
  height: 36px;
  opacity: .75;
}
.admin-msg-avatars {
  display: flex;
  align-items: center;
  flex: none;
}
.admin-msg-avatars .avatar {
  width: 36px;
  height: 36px;
  font-size: .75rem;
  border: 2px solid rgba(15,10,30,.9);
}
.admin-msg-avatars .avatar + .avatar { margin-left: -10px; }
.admin-msg-avatars .avatar.xs,
.admin-msg-pill .avatar {
  width: 22px;
  height: 22px;
  font-size: .58rem;
}
.admin-msg-more {
  margin-left: -8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  border: 2px solid rgba(15,10,30,.9);
}
.admin-msg-item-body {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: .2rem;
}
.admin-msg-item-top,
.admin-msg-item-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
}
.admin-msg-item-top strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
}
.admin-msg-item-top time,
.admin-msg-count {
  flex: none;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
}
.admin-msg-count {
  min-width: 1.6rem;
  text-align: center;
  padding: .12rem .4rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.admin-msg-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: .82rem;
  min-width: 0;
}
.admin-msg-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--bg);
}
.admin-msg-chat-head {
  flex: none;
  display: grid;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}
.admin-msg-chat-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.admin-msg-chat-title strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-msg-participants {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.admin-msg-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 999px;
  padding: .25rem .65rem .25rem .3rem;
  font-size: .78rem;
  font-weight: 650;
}
.admin-msg-pill:hover { background: rgba(255,255,255,.08); }
.admin-msg-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.admin-msg-bubble {
  max-width: min(85%, 640px);
  align-self: flex-start;
}
.admin-msg-bubble.is-grouped { margin-top: -.1rem; }
.admin-msg-bubble-meta {
  font-size: .72rem;
  color: var(--muted);
  margin: .45rem 0 .2rem .15rem;
}
.admin-msg-bubble-body {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  padding: .55rem .8rem;
  line-height: 1.45;
}
.admin-msg-bubble-body small {
  display: block;
  margin-top: .25rem;
  opacity: .65;
  font-size: .68rem;
}
@media (max-width: 900px) {
  .admin-msg-layout {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .admin-msg-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 360px;
  }
  .admin-msg-chat { min-height: 420px; }
}

/* ===== Flat CTAs: geen gradients / glows op knoppen ===== */
.btn-primary,
.btn-primary:hover,
.sidebar-cta,
.sidebar-cta:hover,
.waitlist-scroll-cta,
.gpage-cta,
.gpage-rail-add:hover,
.nav-create-btn,
.mpro-btn-primary,
.group-hero-chat.btn-primary,
.group-detail .group-hero-chat.btn-primary,
.drawer-foot .btn-primary,
.friends-page .btn-primary,
.test-card .btn-primary,
.ch-audio-unlock,
.ch-audio-unlock.is-error {
  background: #812DE2 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}
.btn-primary:hover,
.sidebar-cta:hover,
.gpage-cta:hover,
.mpro-btn-primary:hover {
  background: #6d28d9 !important;
}
.btn:active,
.sidebar-cta:active,
.gpage-cta:active {
  transform: none !important;
}

/* Birthday wall + tip wallet */
.invite-by-line {
  margin: .45rem 0 0;
  color: #f9a8d4;
  font-size: .9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.invite-by-invalid {
  color: #fca5a5 !important;
}
.birthday-wall-widget {
  position: relative;
  margin: 0 0 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(88, 28, 135, .45), rgba(24, 16, 48, .92) 55%, rgba(12, 8, 28, .98));
}
.birthday-wall-close {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #c4bdd4;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.birthday-wall-close:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.birthday-wall-widget-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-right: 1.5rem;
}
.birthday-wall-widget-copy {
  min-width: 0;
  flex: 1;
}
.birthday-wall-kicker {
  margin: 0 0 .35rem;
  color: #ff7ad9;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.birthday-wall-widget-copy p {
  margin: 0;
  color: #c4bdd4;
  line-height: 1.45;
  font-size: .92rem;
}
.birthday-wall-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #120a2a;
  font-weight: 800;
  font-size: .88rem;
  padding: .7rem 1.05rem;
  min-height: 42px;
  cursor: pointer;
  box-shadow: none;
}
.birthday-wall-cta:hover { opacity: .92; }
.birthday-wall-widget.has-people {
  display: grid;
  gap: .85rem;
  padding-right: 2.4rem;
}
.birthday-wall-people {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: flex-start;
}
.birthday-wall-person {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.birthday-wall-avatar-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex: none;
  border-radius: 50%;
}
.birthday-wall-person .avatar { overflow: visible; }
.birthday-wall-person .avatar.birthday-lg {
  width: 56px;
  height: 56px;
  font-size: 1.05rem;
}
.birthday-wall-person-copy {
  display: grid;
  gap: .2rem;
  min-width: 0;
}
.birthday-wall-person-copy strong {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.birthday-wall-feliciteer {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: #ff7ad9;
  font: inherit;
  font-size: .8rem;
  font-weight: 750;
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
}
.birthday-wall-feliciteer:hover {
  color: #ff9fd0;
  text-decoration: underline;
}
.birthday-wall-feliciteer:disabled {
  opacity: .55;
  cursor: default;
  text-decoration: none;
}
.wall-mention {
  color: #d8b4fe;
  font-weight: 800;
}
.birthday-wall-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
@media (max-width: 640px) {
  .birthday-wall-widget-main {
    flex-direction: column;
    align-items: stretch;
  }
  .birthday-wall-cta { width: 100%; justify-content: center; }
}
.birthday-rail-list { display: grid; gap: .55rem; }
.birthday-rail-item {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.birthday-rail-person {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 0;
}
.birthday-rail-person strong { display: block; font-size: .86rem; }
.birthday-rail-person small { color: var(--muted); font-size: .72rem; }
.birthday-rail-actions { display: flex; gap: .15rem; }
.birthday-tip-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.tip-custom-form {
  margin-top: 1rem;
}
.tip-custom-field {
  display: grid;
  gap: .45rem;
}
.tip-custom-field > label {
  text-align: center;
  width: 100%;
}
.tip-custom-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .45rem;
  width: 100%;
}
.tip-custom-prefix {
  font-weight: 800;
  opacity: .85;
  padding-left: .15rem;
}
.tip-custom-row input {
  min-width: 0;
  width: 100%;
}
.tip-pay-btn {
  width: 100% !important;
  justify-content: center !important;
  margin-top: .25rem;
}
.tip-preset-btn.is-selected {
  border-color: rgba(129, 45, 226, .85) !important;
  background: rgba(129, 45, 226, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(196, 181, 253, .35);
}
.tip-fee-box {
  margin: 0 0 1rem;
  padding: .85rem .95rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  text-align: center;
}
.tip-fee-box > strong {
  display: block;
  margin: 0 0 .45rem;
  font-size: .88rem;
  color: #fff;
}
.tip-fee-live {
  margin: 0;
  line-height: 1.45;
  font-size: .9rem;
  color: #d6cce8;
}
.tip-fee-live strong {
  color: #fff;
  font-weight: 800;
}
.tip-fee-line {
  display: block;
  margin-top: .35rem;
}
.tip-modal-head {
  position: relative;
  align-items: flex-start;
  justify-content: center;
}
.tip-modal-head-copy {
  min-width: 0;
  flex: 1;
  text-align: center;
  padding-inline: 2.6rem;
}
.tip-modal-head-copy .eyebrow {
  display: block;
  text-align: center;
  width: 100%;
}
.tip-modal-head-copy h2 {
  margin: .15rem 0 0;
  text-align: center;
}
.tip-modal-head > .icon-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.tip-modal-title {
  margin: 0 0 .45rem;
  text-align: center;
}
.tip-modal-lead {
  margin: 0 0 .85rem;
  line-height: 1.45;
  text-align: center;
}
.tip-modal-min {
  margin: .15rem 0 0;
  text-align: center;
}
@media (max-width: 820px) {
  .tip-modal {
    text-align: center;
  }
  .tip-modal-head,
  .tip-modal .modal-head {
    text-align: center;
  }
  .tip-modal-title,
  .tip-modal-lead,
  .tip-modal-min,
  .tip-custom-field > label {
    text-align: center;
  }
  .tip-fee-box {
    text-align: center;
  }
  .tip-custom-row {
    width: 100%;
  }
}
.tip-wallet-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin: 0 0 1rem;
}
@media (min-width: 720px) {
  .tip-wallet-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .admin-shell .tip-wallet-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.tip-wallet-stats--wallet {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tip-wallet-stat {
  padding: .9rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.tip-wallet-stats--wallet .tip-wallet-stat {
  text-align: center;
}
.tip-wallet-stat--wide {
  grid-column: 1 / -1;
}
.tip-wallet-stat strong {
  display: block;
  margin-top: .25rem;
  font-size: 1.25rem;
}
.tip-wallet-stat-note {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.3;
}
.tip-wallet-list { display: grid; gap: .45rem; }
.tip-wallet-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tip-wallet-row--compact {
  font-size: .92rem;
  line-height: 1.35;
  color: rgba(255,255,255,.88);
}
.tip-wallet-row--compact time {
  flex: none;
  white-space: nowrap;
}
.tip-wallet-row--compact .tip-wallet-name-link {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}
.tip-wallet-row--compact .tip-wallet-name-link:hover {
  color: #e9d5ff;
  text-decoration: underline;
}
.eco-panel-head--center {
  text-align: center;
}
.eco-panel-head--center h2 {
  justify-content: center;
}
.eco-fooi-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  text-align: center;
  margin-bottom: 1rem;
}
.eco-fooi-head-ico {
  flex: none;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(129, 45, 226, .22);
  color: #efe8ff;
  font-size: 1.05rem;
}
.eco-fooi-head-ico i,
.eco-fooi-head-ico svg {
  width: 1.15rem;
  height: 1.15rem;
}
.eco-fooi-head-copy {
  min-width: 0;
  width: 100%;
  text-align: center;
}
.eco-fooi-head-copy h2 {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 850;
  letter-spacing: -.02em;
  color: #fff;
  display: block;
  text-align: center;
}
.eco-fooi-head-copy p {
  margin: .18rem auto 0;
  color: var(--eco-muted, #b7a8d4);
  font-size: .88rem;
  line-height: 1.3;
  text-align: center;
  max-width: 28rem;
}
.eco-panel--wallet .tip-wallet-stats--wallet .tip-wallet-stat {
  text-align: center;
}
.eco-panel--wallet .tip-wallet-empty {
  text-align: center;
}
.tip-wallet-name-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #e9d5ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: .15em;
}
.tip-wallet-name-link:hover {
  color: #fff;
}
.eco-panel--wallet .fooi-pot-note {
  margin: .85rem 0 0;
  text-align: center;
  line-height: 1.4;
}
.fooi-pot-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .55rem;
}
.fooi-pot-actions .btn,
.fooi-pot-actions .fooi-pot-btn {
  display: inline-flex !important;
  width: auto;
  min-width: min(100%, 16rem);
  max-width: 100%;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45rem;
  border-radius: 16px;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center !important;
  text-decoration: none;
  padding: .85rem 1.25rem !important;
  min-height: 48px;
  font-size: .92rem;
  box-sizing: border-box;
  margin: 0 auto;
}
.fooi-pot-actions .btn > span,
.fooi-pot-actions .fooi-pot-btn > span {
  display: inline;
  width: auto;
  max-width: none;
  line-height: 1.2;
  text-align: center;
  margin: 0;
}
.fooi-pot-actions .btn i,
.fooi-pot-actions .btn svg,
.fooi-pot-actions .fooi-pot-btn i,
.fooi-pot-actions .fooi-pot-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin: 0;
}
@media (min-width: 720px) {
  .tip-wallet-stats--wallet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .tip-wallet-stats--wallet .tip-wallet-stat--wide {
    grid-column: auto;
  }
}
.mpro-fooi-pot {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  text-align: center;
  gap: .85rem;
  margin: 1rem .85rem 5.5rem;
  padding: 1.15rem 1.05rem 1.25rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(145deg, rgba(129,45,226,.16), rgba(24,16,48,.92));
  color: #fff;
}
.mpro-fooi-pot-ico {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.08);
  color: #e9d5ff;
  flex: none;
  margin: 0 auto;
}
.mpro-fooi-pot-copy {
  flex: none;
  width: 100%;
  min-width: 0;
  text-align: center;
}
.mpro-fooi-pot-copy h2 {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  font-weight: 850;
  text-align: center;
}
.mpro-fooi-pot-copy p {
  margin: 0 auto;
  font-size: .84rem;
  line-height: 1.4;
  color: rgba(255,255,255,.72);
  text-align: center;
  max-width: 26rem;
}
.mpro-fooi-pot-balance {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .55rem;
  margin-top: .65rem;
}
.mpro-fooi-pot-balance span {
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  font-weight: 650;
}
.mpro-fooi-pot-balance strong {
  font-size: 1.2rem;
  font-weight: 850;
}
.mpro-fooi-pot-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-top: .15rem;
}
.mpro-fooi-pot-actions .btn,
.mpro-fooi-pot-actions a.btn {
  width: auto;
  min-width: min(100%, 16rem);
  max-width: 100%;
  justify-content: center;
  border-radius: 12px;
  white-space: nowrap;
  text-decoration: none !important;
  padding: .72rem 1.1rem;
  min-height: 44px;
  font-size: .88rem;
  line-height: 1.15;
  margin: 0 auto;
}
.mpro-fooi-pot-actions .btn-secondary {
  background: rgba(255,255,255,.92);
  color: #1f1830;
  border: 0;
}
.mpro-fooi-pot-actions .btn-secondary:hover {
  background: #fff;
  color: #1f1830;
}
@media (min-width: 480px) {
  .mpro-fooi-pot-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .mpro-fooi-pot-actions .btn,
  .mpro-fooi-pot-actions a.btn {
    white-space: nowrap;
    font-size: .88rem;
    min-width: 0;
  }
}
@media (min-width: 901px) {
  .mpro-fooi-pot {
    margin: 1.1rem 0 1.5rem;
    align-items: center;
  }
  .mpro-fooi-pot-actions {
    width: auto;
    flex: none;
    min-width: 0;
  }
}
.eco-tabs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Photo likes (positive emoji reactions) */
.mpro-photo-react {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 8;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .35rem;
  pointer-events: auto;
}
.mpro-photo-react-desk {
  display: none;
}
.mpro-photo-identity-end {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  pointer-events: auto;
}
.mpro-photo-react-btn {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  border: 0;
  background: rgba(20, 16, 28, .55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #9ca3af;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.mpro-photo-react-btn.is-idle {
  color: #9ca3af;
}
.mpro-photo-react-btn:hover {
  transform: translateY(-1px) scale(1.04);
  background: rgba(20, 16, 28, .72);
  color: #d1d5db;
}
.mpro-photo-react-btn.has-reaction {
  background: rgba(20, 16, 28, .62);
  color: inherit;
  border: 0;
}
.mpro-photo-react-emoji {
  font-size: 1.2rem;
  line-height: 1;
  display: grid;
  place-items: center;
}
.mpro-photo-react-placeholder {
  color: #9ca3af;
  font-size: 1.05rem;
  opacity: .95;
}
.mpro-photo-react-placeholder i,
.mpro-photo-react-placeholder svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  color: #9ca3af;
}
.mpro-photo-react-chips {
  display: flex;
  gap: .28rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 7.5rem;
}
.mpro-photo-react-chip {
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  padding: .12rem .32rem;
  border-radius: 999px;
  border: 0;
  background: rgba(12, 8, 24, .55);
  color: #fff;
  font-size: .78rem;
  font-weight: 750;
  backdrop-filter: blur(8px);
}
.mpro-photo-react-chip span {
  font-size: .72rem;
  opacity: .92;
}
.mpro-photo-react-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + .45rem);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 2.2rem);
  grid-template-rows: repeat(2, 2.2rem);
  place-items: center;
  gap: .28rem .22rem;
  padding: .5rem .55rem;
  border-radius: 18px;
  background: rgba(12, 8, 24, .98);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 36px rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  width: max-content;
  max-width: none;
  overflow: visible;
  box-sizing: border-box;
}
.mpro-photo-react-picker[hidden] { display: none !important; }
.mpro-photo-react-picker.is-open { display: grid; }
body > .mpro-photo-react-picker.is-open {
  position: fixed;
  z-index: 10050;
}
.mpro-photo-react-pick {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 1.22rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.mpro-photo-react-pick:hover {
  transform: scale(1.12);
  background: rgba(255,255,255,.1);
}
.mpro-photo-react-pick.is-active {
  transform: scale(1.12);
  background: rgba(129, 45, 226, .22);
  box-shadow: inset 0 0 0 1.5px rgba(167, 139, 250, .55);
}
@media (min-width: 821px) {
  .mpro-photo-identity-end .mpro-photo-react { display: none; }
  .mpro-photo-react-desk {
    display: block;
    position: absolute;
    right: .55rem;
    bottom: .55rem;
    z-index: 8;
  }
  .mpro-photo-react-desk .mpro-photo-react {
    position: relative;
  }
}
@media (max-width: 820px) {
  .mpro-photo-react-desk { display: none !important; }
  .mpro-photo-identity-end .mpro-photo-react {
    display: flex;
  }
  .mpro-hero-photo {
    overflow: hidden;
  }
  .mpro-photo-identity {
    overflow: visible;
    z-index: 6;
  }
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .18rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.lang-switch--compact {
  margin: .15rem 0 .35rem;
  width: fit-content;
}
.lang-switch-btn {
  border: 0;
  background: transparent;
  color: #b7adc9;
  font-size: .78rem;
  font-weight: 750;
  padding: .35rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.1;
}
.lang-switch-btn.is-active {
  background: rgba(129, 45, 226, .9);
  color: #fff;
}
.lang-switch-btn:hover:not(.is-active) {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.lang-switch-block {
  display: grid;
  gap: .65rem;
  margin: 0 0 .2rem;
}
.lang-switch-head strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: #fff;
}
.lang-switch-head small {
  display: block;
  margin-top: .2rem;
  color: #a39bb8;
  font-size: .82rem;
  line-height: 1.4;
}
.sidebar-links .lang-switch {
  margin-left: .15rem;
}


.birthday-congrats-media {
  display: grid;
  gap: .55rem;
}
.birthday-congrats-preview {
  position: relative;
  max-width: 220px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}
.birthday-congrats-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  background: rgba(0,0,0,.25);
}


.wall-rail-newest {
  display: grid;
  gap: .35rem;
}
.wall-rail-newest-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 0;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: .35rem;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  width: 100%;
}
.wall-rail-newest-item:hover { background: rgba(255,255,255,.05); }
.wall-rail-newest-item .avatar { width: 34px; height: 34px; font-size: .7rem; }
.wall-rail-newest-item span { min-width: 0; display: grid; gap: .1rem; }
.wall-rail-newest-item strong {
  font-size: .86rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-rail-newest-item small {
  color: #a39bb8;
  font-size: .72rem;
  font-weight: 650;
}

.admin-buddy-tips-panel {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
}
.admin-buddy-tip-form .field { margin-bottom: .65rem; }
.wall-buddy-tip-label {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-left: .35rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #ffe7a3;
  background: rgba(245, 158, 11, .18);
  border: 1px solid rgba(245, 158, 11, .35);
  vertical-align: middle;
}
.wall-buddy-tip-label i { font-size: .72em; }

.admin-buddy-tip-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.admin-buddy-tip-label-row label { margin: 0; }
.admin-buddy-tip-label-row .btn { white-space: nowrap; }

.admin-buddy-tip-image-field { flex: 1 1 220px; min-width: 200px; }
.admin-buddy-tip-image-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}
.admin-buddy-tip-preview {
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
}
.admin-buddy-tip-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.admin-buddy-tip-preview .wall-compose-clear {
  position: absolute;
  top: .25rem;
  right: .25rem;
}
.admin-buddy-tip-cell {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.admin-buddy-tip-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
}

.wall-comment.is-hidden .wall-comment-bubble {
  opacity: .55;
  border: 1px dashed rgba(251, 113, 133, .45);
}
.wall-comment-hidden-label {
  display: inline-flex;
  margin-left: .35rem;
  padding: .08rem .4rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  color: #fecdd3;
  background: rgba(251, 113, 133, .18);
  vertical-align: middle;
}

.wall-buddy-badge {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  margin-left: .28rem;
  padding: .12rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #e9d5ff;
  background: rgba(129, 45, 226, .28);
  border: 1px solid rgba(196, 181, 253, .35);
  vertical-align: middle;
}
.wall-buddy-badge i { font-size: .78em; }