:root{
  --bg:#1A1518;
  --surface:#231D21;
  --card:#2C242A;
  --ember:#D9A441;
  --ember-light:#E8BE6B;
  --blush:#EAD9A8;
  --cream:#F2EAE4;
  --muted:#9A8F92;
  --border:#3A3237;
  --success:#7BA383;
  --danger:#C4573C;
  --man:#6FA8DC;
  --woman:#E88FB3;
  --radius:16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
.gender-man{ color:var(--man); font-weight:600; }
.gender-woman{ color:var(--woman); font-weight:600; }
html,body{margin:0; height:100%; background:#0F0C0D;}
body{font-family:'Inter', sans-serif; color:var(--cream); display:flex; justify-content:center; overscroll-behavior:none;}
/* On laptop/desktop the shell (below) stays phone-proportioned rather than
   stretching — the mobile-first grids/cards weren't designed to reflow at
   real desktop widths, so widening the shell itself would just leave them
   sparse and oversized. This backdrop makes the letterboxing either side
   read as a deliberate frame instead of empty/broken space. */
@media (min-width: 700px){
  body{ background:radial-gradient(ellipse at center, #241B1E 0%, #0F0C0D 70%); }
}
h1,h2,h3,.serif{font-family:'Fraunces', serif;}
button, input, textarea{ font-family: inherit; }

.shell{ width:100%; max-width:430px; height:100vh; height:100dvh; background:var(--bg); position:relative; display:flex; flex-direction:column; overflow:hidden; }

.hidden{ display:none !important; }

/* ---- Toast ---- */
.toast{
  position:absolute; top: calc(10px + var(--safe-top)); left:50%; transform:translateX(-50%) translateY(-140%);
  background:var(--card); border:1px solid var(--border); color:var(--cream);
  padding:10px 18px; border-radius:20px; font-size:13px; z-index:999; transition: transform 0.3s ease; max-width:88%; text-align:center;
}
.toast.show{ transform:translateX(-50%) translateY(0); }
.toast.error{ border-color:var(--danger); color:#F5C9BE; }

/* ---- Auth ---- */
.auth-screen{ position:absolute; inset:0; z-index:100; display:flex; flex-direction:column; background:linear-gradient(180deg, #2A1E22 0%, #171214 100%); padding: calc(60px + var(--safe-top)) 28px calc(28px + var(--safe-bottom)); overflow-y:auto; }
#authSignup, #authLogin{ background:radial-gradient(ellipse 120% 60% at 50% 0%, rgba(217,164,65,0.16) 0%, rgba(42,30,34,0) 60%), linear-gradient(180deg, #2A1E22 0%, #171214 100%); }
.auth-logo{ font-size:34px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:12px; }
.auth-logo span{ color:var(--ember-light); }
.logo-icon{ width:40px; height:auto; }
.logo-icon-small{ width:24px; height:auto; }
.auth-hero{ margin-bottom:8px; }
.auth-headline{ font-family:'Fraunces', serif; font-weight:500; font-size:34px; line-height:1.15; color:var(--cream); margin:18px 0 12px; }
.auth-subhead{ color:var(--muted); font-size:14.5px; line-height:1.5; margin:0 0 18px; max-width:340px; }
.trust-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.trust-badge{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--blush); background:rgba(255,255,255,0.05); border:1px solid var(--border); padding:6px 11px; border-radius:20px; white-space:nowrap; }
.trust-badge svg{ flex-shrink:0; }
.auth-form{ display:flex; flex-direction:column; gap:14px; }
.auth-form label{ font-size:12.5px; color:var(--muted); margin-bottom:6px; display:block; }
.auth-form input{ width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--border); border-radius:12px; padding:14px 15px; color:var(--cream); font-size:15px; outline:none; }
.auth-form input:focus{ border-color:var(--ember); }
.field-error{ color:var(--danger); font-size:12px; margin-top:6px; min-height:0; }
/* Generic muted/small hint text — used all over (field hints, modal sub-labels,
   etc.) via class="sub", but until now only actually had color/size rules
   scoped to .onboard-body and .profile-detail; anywhere else it silently fell
   back to plain body text (large, full-color), which is what made the
   Discover filter modal's distance hint look inconsistent with its siblings.
   The two scoped rules below stay (their margins differ), but every other
   context now gets sane text instead of no styling at all. */
.sub{ color:var(--muted); font-size:13.5px; }
.btn-primary-full{ background:var(--ember); color:#fff; border:none; padding:15px; border-radius:12px; font-size:15px; font-weight:500; cursor:pointer; margin-top:8px; width:100%; }
.btn-primary-full.btn-outline{ background:transparent; border:1px solid var(--border); color:var(--cream); }
.btn-primary-full:disabled{ opacity:0.6; cursor:default; }
.age-gate{ font-size:12px; color:var(--muted); margin-top:18px; line-height:1.5; }
/* label.checkbox-row (not just .checkbox-row) to out-specificity .auth-form
   label's display:block — otherwise that global rule wins and stacks the
   checkbox box above its text instead of laying them out side by side. */
label.checkbox-row{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); cursor:pointer; margin-top:4px; line-height:1.4; }
.checkbox-row .checkbox-native{ position:absolute; opacity:0; width:1px; height:1px; }
.checkbox-row .checkbox-box{
  flex-shrink:0; width:20px; height:20px; border-radius:6px;
  border:1px solid var(--border); background:var(--card);
  display:flex; align-items:center; justify-content:center; color:transparent;
  transition:background 0.18s ease, border-color 0.18s ease;
}
.checkbox-row .checkbox-native:checked + .checkbox-box{ background:var(--ember); border-color:var(--ember); color:#fff; }
.checkbox-row .checkbox-native:focus-visible + .checkbox-box{ outline:2px solid var(--ember-light); outline-offset:2px; }

.trial-banner{ background:rgba(217,164,65,0.12); border:1px solid var(--ember); color:var(--ember-light); font-size:13px; font-weight:500; text-align:center; padding:12px 14px; border-radius:12px; margin-bottom:16px; }

.activity-teaser{ background:rgba(217,164,65,0.1); border:1px solid var(--ember); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:10px; }
.activity-teaser-text{ flex:1; font-size:13px; color:var(--cream); line-height:1.4; }
.activity-teaser-text b{ color:var(--ember-light); }
.activity-teaser-links{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex-shrink:0; }
.activity-teaser-link{ font-size:12.5px; color:var(--ember-light); font-weight:600; cursor:pointer; white-space:nowrap; }
.activity-teaser-link:hover{ text-decoration:underline; }
.checklist-card{ background:rgba(217,164,65,0.1); border:1px solid var(--ember); border-radius:14px; padding:14px; margin-bottom:16px; }
.checklist-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.checklist-title{ font-size:13.5px; font-weight:600; color:var(--cream); }
.checklist-dismiss{ font-size:11.5px; color:var(--muted); cursor:pointer; }
.checklist-dismiss:hover{ text-decoration:underline; }
.checklist-item{ display:flex; align-items:center; gap:10px; padding:7px 0; cursor:pointer; }
.checklist-item:not(:last-child){ border-bottom:1px solid rgba(255,255,255,0.06); }
.checklist-check{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.checklist-item.done .checklist-check{ background:var(--success); border-color:var(--success); }
.checklist-item.done .checklist-label{ color:var(--muted); text-decoration:line-through; }
.checklist-label{ font-size:13px; color:var(--cream); flex:1; }
.checklist-progress-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.checklist-progress-bar{ flex:1; height:6px; border-radius:4px; background:rgba(255,255,255,0.08); overflow:hidden; }
.checklist-progress-fill{ height:100%; background:var(--ember); border-radius:4px; transition:width 0.25s ease; }
.checklist-progress-label{ font-size:11.5px; color:var(--muted); flex-shrink:0; }

.member-plan-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:14px; position:relative; }
.member-plan-card.current{ border-color:var(--ember); background:rgba(217,164,65,0.06); }
.member-plan-current-badge{ position:absolute; top:-10px; right:16px; background:var(--ember); color:#fff; font-size:10.5px; font-weight:600; padding:4px 10px; border-radius:20px; }
.member-plan-name{ font-size:16px; font-weight:600; margin-bottom:2px; }
.member-plan-price{ font-family:'Fraunces', serif; font-size:26px; color:var(--ember-light); margin-bottom:14px; }
.member-plan-price span{ font-family:'Inter', sans-serif; font-size:12.5px; color:var(--muted); font-weight:400; }
.member-plan-card ul{ list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:8px; }
.member-plan-card li{ font-size:13px; color:var(--cream); padding-left:20px; position:relative; }
.member-plan-card li::before{ content:"✓"; position:absolute; left:0; color:var(--success); font-weight:600; }
.auth-tabs{ margin:22px 0 28px; }

/* ---- Onboarding ---- */
.onboard-screen{ position:absolute; inset:0; z-index:90; background:var(--bg); display:flex; flex-direction:column; padding-top: var(--safe-top); overflow:hidden; }
.onboard-dots{ display:flex; justify-content:center; gap:6px; padding:18px 18px 4px; }
.onboard-dots .dot{ width:6px; height:6px; border-radius:50%; background:var(--border); transition:background 0.25s ease, transform 0.25s ease; }
.onboard-dots .dot.active{ background:var(--ember); transform:scale(1.3); }
.onboard-body{ flex:1; overflow-y:auto; padding:22px 24px 100px; animation:onboardStepIn 0.32s cubic-bezier(0.22,1,0.36,1); }
.onboard-body.hidden{ display:none; }
@keyframes onboardStepIn{ from{ opacity:0; transform:translateX(16px); } to{ opacity:1; transform:translateX(0); } }
.onboard-body h2{ font-size:22px; font-weight:500; margin:0 0 6px; }
.onboard-body p.sub{ color:var(--muted); font-size:13.5px; margin:0 0 26px; }
.avatar-picker{ width:96px; height:96px; border-radius:50%; margin:0 auto 26px; background:var(--card); border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--muted); font-size:12px; gap:4px; }
.avatar-picker.picked{ border-style:solid; border-color:var(--ember); background:linear-gradient(135deg, var(--ember), #6B8F4E); color:#fff; font-family:'Fraunces',serif; font-size:26px; }
.new-event-photo-picker{ width:100%; height:110px; border-radius:12px; background:var(--card); border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12.5px; text-align:center; cursor:pointer; background-size:cover; background-position:center; }
.new-event-photo-picker.picked{ border-style:solid; border-color:var(--ember); color:transparent; }
.chip-grid{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip-option{ padding:9px 15px; border-radius:20px; border:1px solid var(--border); background:var(--card); font-size:13.5px; color:var(--cream); cursor:pointer; transition:background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; }
.chip-option:active{ transform:scale(0.96); }
.chip-option.selected{ background:rgba(217,164,65,0.18); border-color:var(--ember); color:var(--blush); }

/* Themed range slider (e.g. the Discover distance filter) — the browser
   default is a plain grey OS control, which reads as broken against this
   otherwise fully custom dark UI. Track/thumb need separate -webkit-/-moz-
   rules; there's no shorthand that covers both engines. */
.range-slider{ -webkit-appearance:none; appearance:none; width:100%; height:4px; margin-top:10px; background:var(--border); border-radius:2px; outline:none; }
.range-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--ember); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--ember); cursor:pointer; }
.range-slider::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:var(--ember); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--ember); cursor:pointer; }
.range-slider::-moz-range-track{ background:var(--border); height:4px; border-radius:2px; }
#gender1Chips .chip-option[data-val="man"].selected,
#gender2Chips .chip-option[data-val="man"].selected{ background:rgba(111,168,220,0.18); border-color:var(--man); color:var(--man); }
#gender1Chips .chip-option[data-val="woman"].selected,
#gender2Chips .chip-option[data-val="woman"].selected{ background:rgba(232,143,179,0.18); border-color:var(--woman); color:var(--woman); }
.onboard-footer{ position:absolute; bottom:0; left:0; right:0; padding:14px 24px calc(20px + var(--safe-bottom)); background:var(--bg); border-top:1px solid var(--border); display:flex; gap:10px; }

/* ---- Top bar ---- */
.topbar{ padding: calc(18px + var(--safe-top)) 20px 14px; display:flex; align-items:center; justify-content:space-between; background:var(--bg); position:sticky; top:0; z-index:20; }
.brand{font-size:20px; font-weight:600; letter-spacing:0.3px; color:var(--cream); display:flex; align-items:center; gap:8px; font-family:'Fraunces', serif;}
.brand span{color:var(--ember-light);}
.icon-btn{ width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--cream); cursor:pointer; font-size:16px; line-height:1; padding:0 0 3px; }
.icon-btn:has(svg){ padding:0; }

.screen{ flex:1; display:none; flex-direction:column; overflow-y:auto; padding-bottom: calc(84px + var(--safe-bottom)); }
.screen.active{ display:flex; animation:screenFadeIn 0.22s ease; }
@keyframes screenFadeIn{ from{ opacity:0; } to{ opacity:1; } }

.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{ font-size:11.5px; padding:5px 11px; border-radius:20px; background:rgba(217,164,65,0.15); color:var(--blush); border:1px solid rgba(217,164,65,0.3); }

.feature-table{ width:100%; border-collapse:collapse; }
.feature-table th, .feature-table td{ padding:9px 8px; text-align:left; font-size:13px; border-bottom:1px solid var(--border); }
.feature-table th{ font-size:12px; font-weight:600; color:var(--muted); }
.feature-table td:not(.feature-label){ color:var(--cream); }
.feature-table td.gender-man{ color:var(--man); }
.feature-table td.gender-woman{ color:var(--woman); }
.feature-table .feature-label{ color:var(--muted); font-size:12px; white-space:nowrap; }
.feature-table tr:last-child td{ border-bottom:none; }

/* ---- Events ---- */
.section-head{ padding: 4px 20px 14px; display:flex; align-items:center; justify-content:space-between; }
.section-head h1{ font-size:22px; font-weight:500; margin:0; }
.fab{ background:var(--ember); color:#fff; border:none; padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:500; display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer; flex-shrink:0; white-space:nowrap; }
.event-list{ padding: 0 20px; display:flex; flex-direction:column; gap:14px; }

/* ---- Shared profile-card grid (Discover, Visitors, Liked me, list detail) ---- */
.segmented{ margin:0 20px 16px; display:flex; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:3px; gap:3px; }
#profileTabs{ margin-left:0; margin-right:0; }
.profile-tab-panel{ margin-top:8px; }
.segment{ flex:1; text-align:center; padding:8px 4px; border-radius:9px; font-size:13.5px; color:var(--muted); cursor:pointer; transition:background 0.18s ease, color 0.18s ease; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.segment.active{ background:var(--ember); color:#fff; }
/* A second-level tab row nested under a .segmented main tab row — a
   different form (underline, not filled pill), not just a different color,
   is what actually reads as "belongs to the tab above it." */
.sub-segmented{ background:transparent; border:none; padding:0; gap:22px; justify-content:center; margin:0 20px 22px; }
.sub-segmented .segment{ flex:none; padding:6px 0 9px; border-radius:0; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; }
.sub-segmented .segment.active{ background:transparent; color:var(--cream); font-weight:600; border-bottom-color:var(--ember); }
.sub-tab-badge{ display:inline-block; min-width:15px; height:15px; padding:0 4px; margin-left:5px; border-radius:8px; background:var(--danger); color:#fff; font-size:10px; line-height:15px; text-align:center; font-weight:600; vertical-align:2px; }
.filter-chip-btn{ display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:20px; border:1px solid var(--border); font-size:12.5px; color:var(--cream); cursor:pointer; }
.filter-chip-btn.active{ background:var(--ember); border-color:var(--ember); color:#fff; }
.filter-chip-btn:active{ transform:scale(0.97); }
.pill-picker{ display:flex; flex-wrap:wrap; gap:8px; }
.pill-option{ padding:8px 14px; border-radius:20px; border:1px solid var(--border); background:var(--card); font-size:13.5px; color:var(--muted); cursor:pointer; white-space:nowrap; transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.pill-option.active{ background:var(--ember); color:#fff; border-color:var(--ember); }
.browse-grid{ padding:0 20px; display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.browse-card{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; cursor:pointer; transition:transform 0.15s ease, border-color 0.15s ease; }
.browse-card:active{ transform:scale(0.97); }
.browse-card-photo{ position:relative; aspect-ratio:1; background:linear-gradient(135deg, var(--ember), #6B8F4E); display:flex; align-items:center; justify-content:center; }
.browse-card-photo .initials{ font-family:'Fraunces', serif; font-size:34px; font-weight:500; color:rgba(255,255,255,0.92); }
.matched-badge{ position:absolute; top:8px; left:8px; background:rgba(15,12,13,0.72); backdrop-filter:blur(4px); color:var(--success); padding:4px 9px; border-radius:20px; font-size:10.5px; font-weight:600; }
.liked-badge{ position:absolute; top:8px; left:8px; background:rgba(15,12,13,0.72); backdrop-filter:blur(4px); color:var(--ember-light); padding:4px 9px; border-radius:20px; font-size:10.5px; font-weight:600; }
.new-badge{ position:absolute; top:8px; right:8px; background:var(--danger); color:#fff; padding:4px 9px; border-radius:20px; font-size:10.5px; font-weight:600; }
.premium-badge-icon{ color:var(--ember-light); vertical-align:-1px; }
.socially-proven-badge{ display:inline-flex; align-items:center; gap:4px; margin-top:6px; background:rgba(123,163,131,0.15); color:var(--success); padding:4px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.card-photo-nav{ position:absolute; top:0; bottom:0; width:34%; border:none; background:transparent; padding:0; cursor:pointer; color:transparent; display:flex; align-items:center; z-index:3; }
.card-photo-nav svg{ opacity:0; transition:opacity 0.15s ease; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6)); color:#fff; }
.card-photo-nav:active svg{ opacity:0.9; }
.card-photo-nav.prev{ left:0; justify-content:flex-start; padding-left:4px; }
.card-photo-nav.next{ right:0; justify-content:flex-end; padding-right:4px; }
.card-photo-dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:6px; z-index:2; }
.card-photo-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.45); box-shadow:0 0 2px rgba(0,0,0,0.4); }
.card-photo-dots span.active{ background:#fff; }
.browse-card-info{ padding:10px 12px 12px; }
.browse-card-info .nm{ font-size:14px; font-weight:500; margin-bottom:3px; }
.browse-card-info .meta{ font-size:11.5px; color:var(--muted); line-height:1.4; }
.browse-card-info .meta.card-location{ color:var(--text); opacity:0.75; margin-top:4px; }
.event-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.event-card-clickable{ cursor:pointer; }

.my-avatar-wrap{ position:relative; width:72px; margin:0 auto; cursor:pointer; }
.avatar-edit-badge{ position:absolute; bottom:8px; right:-4px; width:24px; height:24px; border-radius:50%; background:var(--ember); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; border:2px solid var(--bg); }
.event-banner{ height:76px; background:linear-gradient(120deg, #3D2C35 0%, #5B3A45 100%); background-size:cover; background-position:center; position:relative; padding:12px 14px; display:flex; flex-direction:column; justify-content:flex-end; }
/* Speed dates show the host's photo full-width, so the banner grows to
   actually showcase it, with a dark gradient overlay so the date chip and
   type badge (both direct children, unaffected by the overlay) stay legible
   over whatever the photo looks like. */
.event-banner-photo{ height:180px; }
.event-banner-photo::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,12,13,0.55) 0%, rgba(15,12,13,0.15) 40%, rgba(15,12,13,0.75) 100%); }
.event-banner-photo > *{ position:relative; z-index:1; }
.event-date-chip{ position:absolute; top:12px; right:14px; background:rgba(15,12,13,0.6); color:var(--cream); padding:6px 10px; border-radius:10px; text-align:center; font-size:11px; line-height:1.2; max-width:110px; }
.event-type-badge{ position:absolute; top:12px; left:14px; padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:600; letter-spacing:0.2px; }
.event-type-badge.event-type-public{ background:rgba(123,163,131,0.22); color:var(--success); }
.event-type-badge.event-type-private{ background:rgba(217,164,65,0.22); color:var(--ember-light); }
.event-type-badge.event-type-speed_date{ background:rgba(196,87,60,0.22); color:#E8907C; }
.event-type-badge.event-type-official{ background:var(--ember); color:#1A1518; font-weight:700; }
/* Same colors as .event-type-badge, but laid out inline rather than
   absolutely-positioned over a banner photo — used where there's no banner
   to anchor to, e.g. the event history list. */
.event-type-chip{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:600; letter-spacing:0.2px; flex-shrink:0; white-space:nowrap; }
.event-type-chip.event-type-public{ background:rgba(123,163,131,0.22); color:var(--success); }
.event-type-chip.event-type-private{ background:rgba(217,164,65,0.22); color:var(--ember-light); }
.event-type-chip.event-type-speed_date{ background:rgba(196,87,60,0.22); color:#E8907C; }
.event-type-chip.event-type-official{ background:var(--ember); color:#1A1518; font-weight:700; }
.event-body{ padding:14px; }
.event-body h3{ font-size:16.5px; font-weight:500; margin:0 0 6px; }
.event-meta{ font-size:12.5px; color:var(--muted); display:flex; gap:14px; margin-bottom:6px; }
.event-host{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.event-description{ font-size:13px; color:var(--cream); line-height:1.5; margin:2px 0 10px; white-space:pre-line; }
.event-host-link{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.event-host-link:hover{ color:var(--ember-light); }
.event-host-avatar{ width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, var(--ember), #6B8F4E); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:600; color:rgba(255,255,255,0.92); flex-shrink:0; }
.attendee-row{ display:flex; align-items:center; justify-content:space-between; }

/* ---- Private portfolio ---- */
.portfolio-section{ text-align:left; margin-top:28px; }
.profile-footer{ text-align:center; margin-top:36px; padding-top:18px; border-top:1px solid var(--border); font-size:11.5px; color:var(--muted); line-height:2.4; }
.profile-footer a{ color:var(--muted); text-decoration:none; }
.profile-footer a:hover{ text-decoration:underline; }
.profile-footer span{ margin:0 8px; }
.portfolio-section h3{ font-size:15px; font-weight:500; margin:0 0 12px; }
.photo-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px; }
.photo-thumb{ position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; background:var(--card); border:1px solid var(--border); cursor:pointer; }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-thumb.broken img{ display:none; }
.photo-thumb.broken::after{ content:"⚠ Photo unavailable"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; font-size:11px; color:var(--muted); padding:8px; }
.photo-thumb .photo-remove{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(15,12,13,0.65); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; }
.photo-thumb.is-avatar{ border-color:var(--ember); box-shadow:0 0 0 2px var(--ember); }
.photo-thumb .avatar-select-badge{ position:absolute; bottom:0; left:0; right:0; padding:5px 6px; font-size:10.5px; text-align:center; color:#fff; background:rgba(15,12,13,0.65); cursor:pointer; }
.photo-thumb.is-avatar .avatar-select-badge{ background:rgba(217,164,65,0.85); font-weight:600; cursor:default; }
.access-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.access-row{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.access-row + .access-row{ margin-top:8px; }
.event-attendee-row{ cursor:pointer; }
.event-attendee-row .event-host-avatar, #eventDetailRequestsList .event-host-avatar{ width:32px; height:32px; font-size:12px; }
.access-row .nm{ flex:1; font-size:14px; }
.access-toggle{ font-size:12.5px; padding:6px 12px; border-radius:20px; border:1px solid var(--border); cursor:pointer; color:var(--muted); }
.access-toggle.granted{ background:var(--ember); border-color:var(--ember); color:#fff; }
.avatar-stack{ display:flex; }
.mini-avatar{ width:26px; height:26px; border-radius:50%; border:2px solid var(--card); background:var(--ember); margin-left:-8px; font-size:10px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:500; }
.mini-avatar:first-child{ margin-left:0; }
.rsvp-pill{ font-size:12px; padding:6px 14px; border-radius:20px; border:1px solid var(--ember); color:var(--ember-light); background:transparent; cursor:pointer; }
.rsvp-pill.joined{ background:rgba(123,163,131,0.15); border-color:var(--success); color:var(--success); }
#detailMetConfirmBtn.active{ background:rgba(123,163,131,0.15); border-color:var(--success); color:var(--success); }
.event-status-chip{ display:inline-block; margin-left:auto; font-size:12px; padding:6px 14px; border-radius:20px; border:1px solid var(--border); color:var(--muted); }
.event-status-chip.cta{ border-color:var(--ember); color:var(--ember-light); }
.event-status-chip.going{ border-color:var(--success); color:var(--success); background:rgba(123,163,131,0.15); }
.event-status-chip.pending{ border-color:var(--ember); color:var(--ember-light); background:rgba(217,164,65,0.15); font-weight:600; }
.event-status-chip.muted{ opacity:0.7; }

/* ---- Chat ---- */
.chat-list{ padding: 0 20px; display:flex; flex-direction:column; }
.chat-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.chat-row.unread .nm{ font-weight:700; color:var(--cream); }
.chat-row.unread p{ color:var(--cream); }
.unread-dot{ flex-shrink:0; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--ember); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; }
.chat-avatar{ width:50px; height:50px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg, var(--ember), #6B8F4E); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-size:18px; color:#fff; position:relative; }
.chat-preview{ flex:1; min-width:0; }
.chat-preview .top{ display:flex; justify-content:space-between; margin-bottom:3px; }
.chat-preview .top span.time{ font-size:11.5px; color:var(--muted); }
.chat-preview .top span.nm{ font-size:15px; font-weight:500; }
.chat-preview p{ margin:0; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camera-icon{ vertical-align:-1.5px; margin-right:2px; }
.empty-state{ padding:40px 24px; text-align:center; color:var(--muted); font-size:13.5px; }
.browse-grid .empty-state{ grid-column:1 / -1; }
.locked-card{ pointer-events:none; cursor:default; }
.locked-card .browse-card-photo.blurred{ filter:blur(7px); }
.locked-card .browse-card-info .nm{ color:var(--muted); }
.locked-upsell{ grid-column:1 / -1; background:rgba(217,164,65,0.12); border:1px solid var(--ember); color:var(--ember-light); font-size:13.5px; font-weight:500; text-align:center; padding:14px; border-radius:14px; cursor:pointer; pointer-events:auto; }
.upsell-banner{ background:rgba(217,164,65,0.12); border:1px solid var(--ember); border-radius:14px; padding:16px; text-align:center; margin-bottom:8px; }
.upsell-banner-title{ font-size:14.5px; font-weight:600; color:var(--ember-light); margin-bottom:6px; }
.upsell-banner-text{ font-size:13px; color:var(--muted); line-height:1.5; }

.presence-dot{ display:none; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--success); border:2px solid var(--surface); top:2px; right:2px; z-index:2; }
.presence-dot.online{ display:block; }
.browse-card-photo .presence-dot{ width:14px; height:14px; border-width:3px; top:11px; right:11px; }
.profile-detail .hero .presence-dot{ width:16px; height:16px; border-width:3px; top:16px; right:16px; }
.profile-detail .hero .matched-badge, .profile-detail .hero .liked-badge{ top: calc(64px + var(--safe-top)); left:16px; }

.conversation{ position:absolute; inset:0; z-index:80; background:var(--bg); display:flex; flex-direction:column; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.22,1,0.36,1); pointer-events:none; }
.conversation.active{ transform:translateX(0); pointer-events:auto; }
.conv-header{ display:flex; align-items:center; gap:12px; padding: calc(14px + var(--safe-top)) 16px 14px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5; }
.conv-header-profile{ display:flex; align-items:center; gap:12px; cursor:pointer; }
.conv-messages{ flex:1; min-height:0; padding:16px 16px 90px; display:flex; flex-direction:column; gap:10px; overflow-y:auto;}
.msg{ position:relative; max-width:75%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.45; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.msg-reply-btn, .msg-more-btn{ position:absolute; top:-9px; width:22px; height:22px; border-radius:50%; background:var(--card); border:1px solid var(--border); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; }
.msg.me .msg-reply-btn{ left:-9px; }
.msg.them .msg-reply-btn{ right:-9px; }
.msg.me .msg-more-btn{ right:-9px; }
.msg.them .msg-more-btn{ left:-9px; }
.msg.them{ background:var(--card); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.me{ background:var(--ember); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.msg.image-msg{ padding:6px; cursor:pointer; }
.msg.image-msg img{ display:block; max-width:220px; max-height:280px; width:100%; border-radius:11px; object-fit:cover; }
.msg.image-msg .caption{ padding:8px 6px 2px; }
.msg-footer{ display:flex; justify-content:flex-end; align-items:center; gap:4px; margin-top:3px; }
.msg-time{ font-size:10.5px; opacity:0.6; }
.msg-status{ display:flex; align-items:center; opacity:0.6; }
.msg-status-read{ display:flex; align-items:center; opacity:1; color:#6FC1E8; }
.msg-sender{ display:block; width:fit-content; font-size:9.5px; font-weight:600; margin-bottom:4px; padding:2px 8px; border-radius:10px; background:rgba(255,255,255,0.16); color:inherit; }
.msg-sender.gender-man{ background:var(--man); color:#fff; }
.msg-sender.gender-woman{ background:var(--woman); color:#fff; }
.sender-picker{ display:flex; gap:8px; padding:8px 12px 0; }
.sender-picker .chip-option{ padding:5px 12px; border-radius:14px; border:1px solid var(--border); font-size:12px; color:var(--muted); cursor:pointer; }
.sender-picker .chip-option.gender-man{ color:var(--man); border-color:var(--man); }
.sender-picker .chip-option.gender-woman{ color:var(--woman); border-color:var(--woman); }
.sender-picker .chip-option.selected{ background:var(--ember); border-color:var(--ember); color:#fff; }
.sender-picker .chip-option.gender-man.selected{ background:var(--man); border-color:var(--man); color:#fff; }
.sender-picker .chip-option.gender-woman.selected{ background:var(--woman); border-color:var(--woman); color:#fff; }
.date-divider{ align-self:center; margin:6px 0; padding:5px 12px; border-radius:20px; background:var(--card); color:var(--muted); font-size:11.5px; font-weight:500; }
.msg .quoted{ display:flex; gap:6px; padding:6px 8px; margin-bottom:6px; border-radius:8px; background:rgba(0,0,0,0.18); border-left:3px solid rgba(255,255,255,0.4); cursor:pointer; }
.msg.them .quoted{ background:rgba(0,0,0,0.12); border-left-color:var(--ember); }
.msg .quoted-body{ min-width:0; }
.msg .quoted-label{ font-size:11px; font-weight:600; opacity:0.85; }
.msg .quoted-text{ font-size:12.5px; opacity:0.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.composer-dock{ position:absolute; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); }
.reply-preview{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--border); }
.reply-preview-bar{ width:3px; align-self:stretch; border-radius:2px; background:var(--ember); flex-shrink:0; }
.reply-preview-body{ flex:1; min-width:0; }
.reply-preview-label{ font-size:11.5px; font-weight:600; color:var(--ember-light); }
.reply-preview-text{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reply-preview-close{ flex-shrink:0; width:24px; height:24px; border-radius:50%; background:var(--card); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.composer{ padding: 10px 12px calc(12px + var(--safe-bottom)); display:flex; gap:8px; align-items:center; }
.composer input{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:22px; padding:11px 16px; color:var(--cream); font-size:14px; outline:none; }
.composer .send-btn{ width:40px; height:40px; border-radius:50%; background:var(--ember); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.composer .attach-btn{ width:40px; height:40px; border-radius:50%; background:var(--card); border:1px solid var(--border); color:var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:22px; font-weight:400; line-height:1; padding:0 0 2px; flex-shrink:0; }
.composer .attach-btn.disabled{ opacity:0.35; cursor:not-allowed; }

/* ---- Bottom nav ---- */
.bottom-nav{ position:absolute; bottom:0; left:0; right:0; display:flex; background:var(--surface); border-top:1px solid var(--border); padding: 8px 8px calc(10px + var(--safe-bottom)); z-index:30; }
.nav-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); font-size:10.5px; cursor:pointer; padding:4px 0; }
.nav-item .ico{ position:relative; }
.nav-badge{ position:absolute; top:-5px; right:-9px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--danger); color:#fff; font-size:10px; line-height:16px; text-align:center; font-weight:600; }
.nav-item .ico{ font-size:20px; }
.nav-item.active{ color:var(--ember-light); }

/* ---- Modal ---- */
.modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.55); display:none; align-items:flex-end; z-index:120; }
.modal-overlay.active{ display:flex; }
.modal-sheet{ width:100%; background:var(--surface); border-radius:22px 22px 0 0; padding:22px 20px calc(24px + var(--safe-bottom)); max-height:82vh; overflow-y:auto; }
.modal-sheet h2{ font-size:19px; font-weight:500; margin:0 0 16px; }
/* Groups a modal into distinct labeled sections (e.g. "Sort" vs "Filter by"
   in the Discover filter modal) — an eyebrow label plus, for the section
   that needs to visually stand apart as a different kind of control (sort
   order isn't a filter), a shaded box around it. */
.section-eyebrow{ font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ember-light); margin:0 0 10px; }
.section-box{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px; }
.field{ margin-bottom:14px; }
.field label{ font-size:12.5px; color:var(--muted); display:block; margin-bottom:6px; }
.field input, .field textarea{ width:100%; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:11px 13px; color:var(--cream); font-size:14px; font-family:inherit; outline:none; transition:border-color 0.18s ease; }
.field input:focus, .field textarea:focus{ border-color:var(--ember); }
.field textarea{ resize:none; height:70px; }
#newEventDesc{ height:130px; }
.modal-actions{ display:flex; gap:10px; margin-top:6px; }
.btn{ flex:1; padding:13px; border-radius:12px; text-align:center; font-size:14px; font-weight:500; cursor:pointer; border:1px solid var(--border); transition:background 0.18s ease, opacity 0.18s ease, transform 0.12s ease; }
#detailLikeBtn{ margin-top:26px; }
.btn:active{ transform:scale(0.97); }
.btn.primary{ background:var(--ember); border-color:var(--ember); color:#fff; }
.btn.ghost{ background:transparent; color:var(--muted); }

/* ---- Profile detail ---- */
.profile-detail{ position:absolute; inset:0; z-index:90; background:var(--bg); display:none; flex-direction:column; overflow-y:auto; }
.profile-detail.active{ display:flex; }
.profile-detail .hero{ height:280px; background:linear-gradient(135deg, var(--ember), #6B8F4E); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; }
.profile-detail .hero .initials{ font-family:'Fraunces',serif; font-size:76px; color:rgba(255,255,255,0.92); }
.profile-detail .back-btn{ position:absolute; top: calc(16px + var(--safe-top)); left:16px; }
.profile-detail .more-btn{ position:absolute; top: calc(16px + var(--safe-top)); right:16px; }
.profile-detail .body{ padding:20px 22px 40px; }
.profile-detail h2{ font-size:24px; margin:0 0 4px; }
.profile-detail .sub{ color:var(--muted); font-size:13.5px; margin-bottom:16px; }
.bio{ font-size:14.5px; line-height:1.6; color:var(--cream); margin:22px 0 18px; white-space:pre-line; }

/* ---- Folder / album list ---- */
.new-folder-row{ display:flex; gap:8px; margin-bottom:14px; }
.new-folder-row input{ flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:11px 13px; color:var(--cream); font-size:14px; font-family:inherit; outline:none; transition:border-color 0.18s ease; }
.new-folder-row input:focus{ border-color:var(--ember); }
.folder-list{ display:flex; flex-direction:column; gap:10px; }
.folder-row{ display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; cursor:pointer; transition:border-color 0.15s ease, transform 0.12s ease; }
.folder-row:active{ transform:scale(0.98); }
.folder-row .folder-icon{ font-size:20px; }
.folder-row .folder-info{ flex:1; }
.folder-row .folder-info .nm{ font-size:14.5px; font-weight:500; }
.folder-row .folder-info .meta{ font-size:12px; color:var(--muted); }
.folder-row .chevron{ color:var(--muted); font-size:16px; }
.folder-row.locked{ opacity:0.6; border-style:dashed; }

/* ---- Folder screen (album detail, owner edit or shared read-only) ---- */
.folder-screen{ position:absolute; inset:0; z-index:70; background:var(--bg); display:none; flex-direction:column; }
/* Plans can be opened from within another .folder-screen (e.g. Visitors), so it
   needs to render above those regardless of DOM source order. */
#plansScreen{ z-index:72; }
.folder-screen.active{ display:flex; }
.folder-screen-body{ flex:1; overflow-y:auto; padding:18px 20px 40px; }

/* ---- Photo lightbox ---- */
.lightbox{ position:absolute; inset:0; z-index:200; background:rgba(10,8,9,0.94); display:none; align-items:center; justify-content:center; padding:20px; }
.lightbox.active{ display:flex; animation:screenFadeIn 0.18s ease; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:12px; object-fit:contain; }
.lightbox-close{ position:absolute; top: calc(16px + var(--safe-top)); right:16px; }

@media (min-width: 700px){
  /* Modest widening only (430 -> 480px) plus a phone-mockup presentation
     (rounded corners, shadow, capped height) — deliberately NOT the full
     desktop reflow (sidebar nav, multi-column grids, master-detail chat)
     that a genuine responsive redesign would need; see the Responsive design
     backlog item for that larger, not-yet-scoped effort. */
  .shell{ max-width:480px; height:min(100dvh, 900px); border-radius:28px; margin:auto; box-shadow:0 24px 70px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.06); }
}