/* Meet menu: a quiet "Soon" on Nearby and Community. */
.mm-soon { flex: none; padding: 3px 8px; border-radius: 99px; background: #f1f0eb; color: #8a8b84; font-size: 11.5px; font-weight: 600; }
html[data-profile-theme="dark"] .mm-soon { background: #242830; color: #a1a1aa; }

/* Same vibe, Nearby and Community pages (js/meet/vibe.js). Each Open to pick has one tint everywhere. */
.vb-page { background: #f7f6f2; }
.vb-top { display: flex; align-items: center; gap: 10px; padding: max(14px, env(safe-area-inset-top, 0px)) 16px 4px; }
.vb-top strong { flex: 1; font-size: 26px; font-weight: 800; letter-spacing: -.6px; }
.vb-round { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .08); color: #20211f; font-size: 17px; cursor: pointer; }
.vb-pill { padding: 7px 12px; border: 0; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #e6e7e3; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.vb-scroll { padding: 4px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
.vb-sub { margin: 0 0 12px; color: #6c6d67; font-size: 13.5px; line-height: 1.4; }
.vb-friends { --t: #fff1d6; --k: #9a6a00; }
.vb-coffee { --t: #f6e6d8; --k: #8a5a3c; }
.vb-sports { --t: #ffe4dc; --k: #b4462a; }
.vb-lang { --t: #e0f2fb; --k: #1f6f8b; }
.vb-hike { --t: #e3f3e2; --k: #3b7a3a; }
.vb-cofounder { --t: #ece6ff; --k: #5a43b8; }
.vb-mentor { --t: #e6efff; --k: #2f5fb8; }
.vb-love { --t: #ffe3ee; --k: #b3365f; }
.vb-serious { --t: #fbe4f7; --k: #8f2c80; }
.vb-other { --t: #f2f3f5; --k: #4a4d4a; }
.vb-chip { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 99px; background: var(--t); color: var(--k); font-size: 13px; font-weight: 750; white-space: nowrap; }
.vb-chip.is-sm { padding: 4px 9px; font-size: 11.5px; font-weight: 700; }
.vb-mine { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 2px; scrollbar-width: none; }
.vb-mine::-webkit-scrollbar { display: none; }
.vb-h { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 10px; }
.vb-h b { font-size: 17px; letter-spacing: -.2px; }
.vb-h span { color: #8a8d8a; font-size: 12.5px; font-weight: 650; }
.vb-best { display: grid; gap: 10px; margin-bottom: 16px; }
.vb-card { display: flex; gap: 12px; padding: 14px; border-radius: 24px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 22px rgb(15 23 42 / .06); }
.vb-face { --avatar-box: 54px; flex: none; width: 54px; height: 54px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #d9e5df center / cover no-repeat; color: #2f5a46; font-weight: 800; }
.vb-face.is-big { --avatar-box: 62px; width: 62px; height: 62px; margin: 0; }
.vb-mid { flex: 1; min-width: 0; }
.vb-name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; }
.vb-match { margin-left: auto; flex: none; padding: 3px 8px; border-radius: 99px; background: #171717; color: #fff; font-size: 11px; font-weight: 800; }
.vb-mid small { display: block; min-height: 16px; margin: 1px 0 8px; overflow: hidden; color: #6c6d67; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.vb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.vb-hi { width: 100%; height: 38px; margin-top: 12px; border: 0; border-radius: 99px; background: #171717; color: #fff; font: inherit; font-size: 13.5px; font-weight: 750; cursor: pointer; }
.vb-lane { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 6px; scrollbar-width: none; }
.vb-lane::-webkit-scrollbar { display: none; }
.vb-mini { flex: none; width: 118px; padding: 12px 10px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #ecebe6; text-align: center; }
.vb-mini b { display: block; overflow: hidden; font-size: 14.5px; text-overflow: ellipsis; white-space: nowrap; }
.vb-mini small { display: block; min-height: 15px; margin-bottom: 8px; overflow: hidden; color: #8a8d8a; font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.vb-mini button { width: 100%; height: 30px; border: 0; border-radius: 99px; background: var(--t); color: var(--k); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.vb-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.vb-tile { position: relative; aspect-ratio: 1 / 1.05; padding: 8px; border: 0; border-radius: 20px; background: var(--t); color: var(--k); font: inherit; font-size: 12.5px; font-weight: 750; line-height: 1.2; display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; cursor: pointer; }
.vb-tile-e { font-size: 30px; line-height: 1; }
.vb-tile.is-on { box-shadow: 0 0 0 2.5px #171717; }
.vb-tile.is-on::after { content: "✓"; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%; background: #171717; color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.vb-go { display: block; width: 100%; height: 50px; margin-top: 16px; border: 0; border-radius: 99px; background: #171717; color: #fff; font: inherit; font-size: 15.5px; font-weight: 750; cursor: pointer; }
.vb-go:disabled { opacity: .4; cursor: default; }
.vb-soon { margin-top: 70px; text-align: center; color: #6c6d67; }
.vb-soon-ic { width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #ecebe6; display: grid; place-items: center; font-size: 36px; }
.vb-soon h3 { margin: 0; color: #20211f; font-size: 20px; }
.vb-soon p { margin: 6px 24px 0; font-size: 14px; line-height: 1.45; }

html[data-profile-theme="dark"] .vb-page { background: #111; }
html[data-profile-theme="dark"] :is(.vb-card, .vb-mini, .vb-round, .vb-pill, .vb-soon-ic) { background: #1b1e24; box-shadow: 0 0 0 1px #2e323a; color: #f4f4f5; }
html[data-profile-theme="dark"] .vb-soon h3 { color: #f4f4f5; }
html[data-profile-theme="dark"] :is(.vb-hi, .vb-go) { background: #f2f3f5; color: #111; }

/* "Who do you want to meet?" (an empty hive cell) and its people. */
.vb-sheet-wrap { position: fixed; inset: 0; z-index: 260; }
.vb-sheet-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .32); opacity: 0; transition: opacity .25s; }
.vb-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto; padding: 10px 16px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 26px 26px 0 0; background: #fff; transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.vb-sheet-wrap.open .vb-sheet-scrim { opacity: 1; }
.vb-sheet-wrap.open .vb-sheet { transform: none; }
.vb-grab { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 99px; background: #e2e3df; }
.vb-sheet h3 { margin: 0; font-size: 20px; letter-spacing: -.3px; }
.vb-sheet > p { margin: 2px 0 12px; color: #6c6d67; font-size: 13.5px; }
.vb-tile.is-sm { aspect-ratio: auto; padding: 12px 6px 10px; gap: 4px; }
.vb-tile.is-sm .vb-tile-e { font-size: 26px; }
.vb-tile small { font-size: 11px; font-weight: 650; opacity: .75; }
.vb-photo { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 14px; background: #f6f6f3; color: #4a4d4a; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.vb-switch button.vb-chip { border: 0; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.vb-chip.is-on { box-shadow: 0 0 0 2px #171717; }
.vb-row { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #ecebe6; }
.vb-row .vb-face { --avatar-box: 50px; width: 50px; height: 50px; margin: 0; }
.vb-row-mid { flex: 1; min-width: 0; }
.vb-row-mid b { display: block; font-size: 15.5px; }
.vb-row-mid small { display: block; overflow: hidden; color: #6c6d67; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.vb-row button { flex: none; padding: 9px 13px; border: 0; border-radius: 99px; background: #171717; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
html[data-profile-theme="dark"] .vb-sheet, html.is-dark .vb-sheet { background: #1b1e24; color: #f4f4f5; }
html[data-profile-theme="dark"] .vb-row { background: #1b1e24; box-shadow: 0 0 0 1px #2e323a; }
html[data-profile-theme="dark"] .vb-row button { background: #f2f3f5; color: #111; }

/* Home (Meet menu, top row): three big doors. */
.hm-doors { display: grid; gap: 10px; margin-top: 4px; }
.hm-door { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; width: 100%; padding: 14px; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #ecebe6, 0 2px 8px rgb(0 0 0 / .03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hm-ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #f2f2f0; color: #171717; font-size: 22px; }
.hm-ic svg { width: 24px; height: 24px; }
.hm-copy b { display: block; font-size: 16px; }
.hm-copy small { display: block; margin-top: 2px; color: #6c6d67; font-size: 13px; }
.hm-chev { color: #b3b3ad; font-size: 22px; }
html[data-profile-theme="dark"] .hm-door { background: #1b1e24; box-shadow: 0 0 0 1px #2e323a; color: #f4f4f5; }
html[data-profile-theme="dark"] .hm-ic { background: #242830; color: #f4f4f5; }