: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; overflow:hidden;}
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; height:var(--app-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; }

/* ---- Update banner ---- */
.update-banner{
  position:absolute; top:0; left:0; right:0; z-index:998;
  padding: calc(10px + var(--safe-top)) 16px 10px;
  background:var(--ember); color:#1A1518;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  font-size:13px; font-weight:500; text-align:center;
}
.update-banner.hidden{ display:none; }
.update-banner-version{ font-size:9px; opacity:0.65; margin-left:5px; vertical-align:1px; }

/* ---- 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-family:'Nunito', sans-serif; font-size:34px; font-weight:600; margin-bottom:6px; display:flex; align-items:center; gap:12px; }
/* The dot stands loose from the word on purpose (the flex gap) — a brand choice. */
.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); }
/* Chromium/Edge's built-in "reveal password" eye icon renders solid black,
   invisible against this dark theme — invert it so it reads as light/muted
   like the rest of the form instead. Not a custom icon; browser-drawn. */
.auth-form input[type="password"]::-ms-reveal{ filter:invert(1) brightness(1.8); }
.field-error{ color:var(--danger); font-size:12px; margin-top:6px; min-height:0; }
.field-hint{ color:var(--muted); font-size:12px; margin-top:6px; }
#profileBioError:empty{ display:none; }
/* 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{ position:relative; 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; }

.beta-note{ color:var(--muted); font-size:12.5px; line-height:1.5; text-align:center; margin:4px 0 0; }
.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; }
/* Signup opened through a member's invite link. */
.invite-note{ background:rgba(123,163,131,0.12); border:1px solid var(--success, #7BA383); color:var(--cream); font-size:13px; text-align:center; padding:12px 14px; border-radius:12px; margin-bottom:16px; }
.invite-note.expired{ background:transparent; border-color:var(--border); color:var(--muted); }
/* Settings -> Invite someone: one row per link. */
.invite-row .nm{ display:flex; flex-direction:column; gap:2px; }
.invite-row .invite-code{ font-family:ui-monospace, Menlo, Consolas, monospace; letter-spacing:0.06em; }
.invite-row .invite-status{ font-size:12px; color:var(--muted); }
.invite-row .invite-status.joined{ color:var(--ember-light); }

.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:'Nunito', sans-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; }
.fab:disabled{ opacity:0.7; cursor:default; }
.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; }
/* Discover sub-tab swipe transition (We Match / We Liked / We Saved etc.) —
   see animateDiscContentSwap() in app.js. #discContentWrap wraps the two
   possible content containers (#discoverGrid, #discoverListsSection); only
   one is ever visible per the existing .hidden toggle, this just adds the
   sliding transition around that swap. .disc-swipe-outgoing is a throwaway
   snapshot of whichever was showing right before a switch, absolutely
   positioned over the wrap so it can slide off while the real (now
   off-screen, already reloaded) container slides into view underneath. */
/* flex-shrink:0 matters here, not just cosmetic: #screen-discover is a flex
   column, and a flex item's automatic minimum size becomes 0 instead of its
   content size the moment it has overflow != visible (a real, spec'd
   flexbox behavior) — without this, the flex layout was free to squash this
   wrap down to whatever space happened to be left over, clipping almost the
   entire card grid via the overflow:hidden below and making the page think
   there was nothing left to scroll. */
#discContentWrap{ position:relative; overflow:hidden; flex-shrink:0; }
.disc-swipe-outgoing{ position:absolute; inset:0; pointer-events:none; }
.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; }
.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); }
.rsvp-pill.hosting{ border-color:var(--border); color:var(--muted); cursor:default; }
.going-count{ font-size:12.5px; color:var(--muted); }
/* RSVP sheet and the "You're going" menu (app.js openEventRsvpSheet / openEventGoingMenu) */
.rsvp-event-meta{ color:var(--muted); font-size:13px; margin:-8px 0 18px; line-height:1.5; }
.rsvp-options{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.rsvp-option{ border:1px solid var(--border); border-radius:14px; padding:14px 16px 14px 44px; cursor:pointer; position:relative; }
.rsvp-option::before{ content:''; position:absolute; left:16px; top:16px; width:16px; height:16px; border-radius:50%; border:2px solid var(--muted); box-sizing:border-box; }
.rsvp-option.active{ border-color:var(--ember); background:rgba(217,164,65,0.10); }
.rsvp-option.active::before{ border-color:var(--ember); background:radial-gradient(circle, var(--ember) 0 3.5px, transparent 4px); }
.rsvp-option-title{ font-size:14.5px; font-weight:500; color:var(--cream); }
.rsvp-option-sub{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.45; }
.menu-list{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:14px; }
.menu-row{ padding:14px 16px; font-size:14.5px; color:var(--cream); cursor:pointer; }
.menu-row + .menu-row{ border-top:1px solid var(--border); }
.menu-row:active{ background:var(--card); }
.menu-row.danger{ color:var(--danger); }
.modal-actions .btn.disabled{ opacity:0.6; pointer-events:none; }
#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.going.new{ background:var(--success); color:#1A1518; font-weight:600; }
.segment-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--danger); margin-left:6px; vertical-align:2px; }
.segment-dot.hidden{ display:none; }
.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; }
/* Discover > Nearby: status + actions above the cards, and its settings sheet */
.nearby-panel{ grid-column:1 / -1; background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; }
.nearby-status-title{ font-size:14.5px; font-weight:600; color:var(--cream); padding-left:16px; position:relative; }
.nearby-status-title::before{ content:''; position:absolute; left:0; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--muted); }
.nearby-status.visible .nearby-status-title::before{ background:var(--success); }
.nearby-status-sub{ color:var(--muted); font-size:12.5px; margin-top:6px; padding-left:16px; line-height:1.55; }
.nearby-actions{ display:flex; gap:10px; margin-top:18px; }
.nearby-actions .btn{ padding:10px; font-size:13.5px; }
.nearby-actions .btn.disabled{ opacity:0.6; pointer-events:none; }
.nearby-stop{ margin-top:14px; text-align:center; font-size:13px; color:var(--danger); cursor:pointer; }
.nearby-options{ display:flex; flex-direction:column; gap:8px; }
.nearby-option{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; cursor:pointer; }
.nearby-option.active{ border-color:var(--ember); background:rgba(217,164,65,0.10); }
.nearby-option-title{ font-size:14px; font-weight:500; color:var(--cream); }
.nearby-option-sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.nearby-interval{ margin:10px 0 0; }
/* Nearby radar (app.js nearbyRadarHtml): positions are in % of the stage.
   Thin rings only, so the photos carry the picture. */
.nearby-radar{ grid-column:1 / -1; margin:22px 0 6px; }
.radar-stage{ position:relative; width:100%; max-width:320px; margin:0 auto; aspect-ratio:1; }
.radar-stage svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.radar-ring{ fill:none; stroke:var(--border); stroke-width:0.35; }
.radar-label{ fill:var(--muted); font-size:2.7px; text-anchor:middle; font-family:inherit; opacity:0.8; }
.radar-you, .radar-dot{ position:absolute; transform:translate(-50%, -50%); border-radius:50%; background-color:var(--card); display:flex; align-items:center; justify-content:center; color:var(--cream); }
.radar-you{ left:50%; top:50%; width:13%; aspect-ratio:1; border:2px solid var(--success); font-size:10.5px; font-weight:600; }
.radar-you::after{ content:''; position:absolute; inset:-2px; border-radius:50%; border:1.5px solid var(--success); animation:radarPulse 2.8s ease-out infinite; pointer-events:none; }
@keyframes radarPulse{ from{ transform:scale(1); opacity:0.6; } to{ transform:scale(2.1); opacity:0; } }
.radar-dot{ width:8.5%; aspect-ratio:1; border:2px solid var(--bg); box-shadow:0 0 0 1px var(--border); font-size:9.5px; font-weight:600; cursor:pointer; opacity:0.85; transition:transform 0.15s ease; }
.radar-dot:active{ transform:translate(-50%, -50%) scale(1.15); }
.radar-dot.fresh{ opacity:1; }
.radar-dot.stale{ opacity:0.45; }
.radar-dot.matched{ box-shadow:0 0 0 1.5px var(--ember); }
.radar-more{ background:var(--ember); color:var(--bg); box-shadow:none; opacity:1; font-size:10.5px; }
.radar-note{ text-align:center; color:var(--muted); font-size:12px; margin-top:16px; }
@media (prefers-reduced-motion: reduce){ .radar-you::after{ animation:none; opacity:0; } }
.nearby-list-title{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; margin-top:18px; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.nearby-list-title span{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1px 8px; font-size:11.5px; letter-spacing:0; color:var(--cream); }
.nearby-note{ color:var(--muted); font-size:12.5px; margin:14px 0 4px; }
.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; }
/* bottom-right, not top-right like the base .presence-dot -- top-right is
   already the "New" badge's corner (top-left is Liked/Matched), and the two
   were overlapping */
.browse-card-photo .presence-dot{ width:14px; height:14px; border-width:3px; top:auto; bottom: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-header .conv-more-btn{ margin-left:auto; flex-shrink:0; }
.conv-messages{ flex:1; min-height:0; padding:16px 16px 90px; display:flex; flex-direction:column; gap:10px; overflow-y:auto;}
/* One row per active share (there can be up to two — either participant may
   be sharing). Sits between the header and the message list rather than
   inline in the scrolling history, since a share is ongoing state, not a
   one-off event the way a sent message is. */
.location-share-bar{ display:flex; flex-direction:column; gap:8px; padding:10px 16px; background:rgba(217,164,65,0.1); border-bottom:1px solid var(--border); }
.location-share-row{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--cream); }
.location-share-row .live-dot{ width:7px; height:7px; border-radius:50%; background:var(--success); flex-shrink:0; }
.location-share-row a{ color:var(--ember-light); text-decoration:none; font-weight:500; }
.location-share-row .stop-btn{ margin-left:auto; color:var(--danger); background:none; border:none; font-size:12px; cursor:pointer; padding:4px 8px; }
.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; }
/* Photo and location sit inside the message field, so the send button always
   keeps its place. min-width:0 matters: an <input> won't shrink below its
   ~20-character default width otherwise, which pushed Send off narrow screens. */
.composer-field{ flex:1; min-width:0; display:flex; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:22px; padding:2px; }
.composer-field:focus-within{ border-color:var(--ember); }
.composer input{ flex:1; min-width:0; background:none; border:none; padding:9px 14px 9px 4px; color:var(--cream); font-size:14px; outline:none; }
.composer .send-btn{ width:42px; height:42px; border-radius:50%; background:var(--ember); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.composer .attach-btn{ width:36px; height:36px; border-radius:50%; background:none; border:none; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:24px; font-weight:400; line-height:1; padding:0 0 2px; flex-shrink:0; }
.composer .attach-btn:active{ background:var(--surface); color:var(--cream); }
.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); }
.btn.danger{ background:transparent; border-color:var(--danger); color:var(--danger); }

/* ---- 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; }

/* ---- Settings (grouped list rows, native-settings style) ---- */
.settings-label{ font-size:11.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin:24px 4px 8px; }
.settings-label:first-child{ margin-top:4px; }
.settings-group{ background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.settings-group-spaced{ margin-top:32px; }
.settings-group + .settings-group{ margin-top:12px; }
.settings-row{ position:relative; display:flex; align-items:center; gap:12px; min-height:50px; padding:12px 16px; color:var(--cream); text-decoration:none; font-size:14.5px; }
.settings-row + .settings-row{ border-top:1px solid var(--border); }
.settings-row-link{ cursor:pointer; transition:background 0.15s ease; }
.settings-row-link:active{ background:var(--surface); }
@media (hover:hover){ .settings-row-link:hover{ background:var(--surface); } }
.settings-row-text{ flex:1; min-width:0; }
.settings-row-title{ flex:1; min-width:0; }
.settings-row-hint{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
.settings-row-value{ color:var(--muted); font-size:13.5px; text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.settings-chevron{ flex-shrink:0; width:8px; height:8px; border-right:2px solid var(--muted); border-top:2px solid var(--muted); transform:rotate(45deg); margin-right:3px; opacity:0.7; }
.settings-row-center{ justify-content:center; font-weight:500; }
.settings-row-danger{ color:var(--danger); }
.settings-footnote{ font-size:12px; color:var(--muted); margin:8px 4px 0; line-height:1.45; }
label.settings-row{ cursor:pointer; }
.switch-native{ position:absolute; opacity:0; width:1px; height:1px; }
.switch{ flex-shrink:0; position:relative; width:44px; height:26px; border-radius:13px; background:var(--border); transition:background 0.18s ease; }
.switch::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--cream); transition:transform 0.18s ease; }
.switch-native:checked + .switch{ background:var(--ember); }
.switch-native:checked + .switch::after{ transform:translateX(18px); }
.switch-native:focus-visible + .switch{ outline:2px solid var(--ember-light); outline-offset:2px; }
.switch-native:disabled + .switch{ opacity:0.4; }
label.settings-row:has(.switch-native:disabled){ cursor:default; }
.sheet-status{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:0 0 16px; font-size:13.5px; line-height:1.5; }
button.btn{ font-family:inherit; }
.btn:disabled{ opacity:0.6; cursor:default; }

/* ---- 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); }
}

/* Plans screen: "Your free Premium" — end date and its full history. */
.premium-overview{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:18px; }
.premium-overview h3{ font-size:16px; margin:0 0 4px; color:var(--cream); }
.premium-overview .premium-sub{ font-size:13px; color:var(--muted); line-height:1.5; margin:0 0 12px; }
.premium-overview .premium-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin:14px 0 6px; }
.premium-lines{ width:100%; border-collapse:collapse; font-size:13px; }
.premium-lines td{ padding:7px 0; border-top:1px solid var(--border); vertical-align:top; color:var(--cream); }
.premium-lines td.date, .premium-lines td.ends{ color:var(--muted); white-space:nowrap; }
.premium-lines td.date{ padding-right:10px; }
.premium-lines td.ends{ text-align:right; padding-left:10px; }
.premium-overview .premium-note{ font-size:12px; color:var(--muted); margin:10px 0 0; line-height:1.5; }
/* Profile tab: free Premium status, only while it runs; opens Plans. */
.my-premium-status{ display:inline-block; background:rgba(217,164,65,0.12); border:1px solid var(--ember); color:var(--ember-light); font-size:12.5px; font-weight:500; padding:6px 12px; border-radius:20px; margin:0 0 14px; cursor:pointer; }
.my-premium-status.soon{ background:rgba(196,87,60,0.12); border-color:var(--danger); color:#ffb3a3; }
/* Settings -> Invite someone: the rewards as tiles, then the steps. */
.invite-rewards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 16px; }
.invite-rewards.single{ grid-template-columns:1fr; }
.invite-reward{ background:rgba(217,164,65,0.12); border:1px solid var(--ember); border-radius:14px; padding:14px; text-align:center; }
.invite-reward .who{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); }
.invite-reward .amount{ font-size:26px; font-weight:600; color:var(--ember-light); margin:4px 0 0; line-height:1.1; }
.invite-reward .what{ font-size:13px; color:var(--cream); }
.invite-rewards-when{ grid-column:1 / -1; font-size:12.5px; color:var(--muted); text-align:center; margin-top:-2px; }
.invite-steps{ margin:0 0 16px; padding-left:20px; color:var(--muted); font-size:13.5px; line-height:1.55; }
.invite-steps li{ margin-bottom:4px; }