/* style.css — shared across every page. Same palette/warmth as the
   extension's own overlay (purple #8b5cf6 + a warm gold for "memories"),
   so the site reads as a continuation of it, not a separate product. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-0: #0d0b12;
  --bg-1: #171320;
  --bg-2: #1f1a2b;
  --card: #201a2c;
  --ink: #f3f0f8;
  --ink-dim: #a79fc0;
  --ink-faint: #6f6683;
  --purple: #8b5cf6;
  --purple-deep: #6d28d9;
  --gold: #f5b942;
  --gold-deep: #d97706;
  --border: rgba(167, 139, 250, 0.18);
}

html, body {
  min-height: 100%;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(139,92,246,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(245,185,66,0.08), transparent 55%),
    var(--bg-0);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

h1, h2, h3, .brand {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

a { color: var(--purple); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Top bar ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(13, 11, 18, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  font-size: 20px;
  background: linear-gradient(140deg, #f5b942, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.who { font-size: 13px; color: var(--ink-dim); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 20px; border-radius: 12px; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; filter: none; }
.btn-primary {
  background: linear-gradient(150deg, var(--purple), var(--purple-deep));
  color: #fff;
  box-shadow: 0 6px 20px rgba(139,92,246,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-gold {
  background: linear-gradient(150deg, var(--gold), var(--gold-deep));
  color: #241505;
  box-shadow: 0 6px 20px rgba(217,119,6,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-ghost {
  background: rgba(255,255,255,0.05); color: var(--ink-dim);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); }

/* ── Form controls ── */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 12px; font-weight: 700; color: var(--ink-dim);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em;
}
.field input, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  color: var(--ink); font-size: 14px; font-family: inherit;
  outline: none; transition: border-color 0.15s ease, background 0.15s ease;
}
.field input:focus, .field textarea:focus {
  border-color: var(--purple); background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.15);
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.error-text {
  color: #f87171; font-size: 13px; margin-top: 10px; text-align: center;
  min-height: 18px;
}

/* ── Login page ── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  width: 380px; max-width: 100%;
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.login-icon { font-size: 40px; text-align: center; margin-bottom: 6px; }
.login-title { text-align: center; font-size: 22px; margin-bottom: 4px; }
.login-sub { text-align: center; font-size: 13px; color: var(--ink-faint); margin-bottom: 28px; }
.login-hint { font-size: 12px; color: var(--ink-faint); margin-top: 18px; text-align: center; line-height: 1.6; }

/* ── Continue with Google ──
   Sits ABOVE the credentials form, which is a product decision as much as a
   visual one: accounts created through Google are given a random password hash
   they can never be told (see server/src/signup.js), so a returning Google user
   who reaches for the password field cannot succeed and gets only a generic
   failure. Offering their actual route first prevents that dead end — and it's
   the lower-friction path, so it earns the position anyway.

   Scoped .hidden, because this stylesheet has no global one (admin.css does,
   but the auth pages don't load it). Both parts stay hidden until
   google-signin.js confirms the server actually offers Google. */
.auth-or.hidden, #googleMount:empty { display: none; }

/* Google's dark button variant (#131314 surface, #8E918F stroke), which their
   branding permits alongside the light one. The white version is specified for
   light UIs; dropped onto this near-black purple page it reads as a lit panel
   and out-shouts the primary action directly beneath it. */
.btn-google {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  background: #131314; color: #e3e3e3; border: 1px solid #8e918f;
  font-weight: 600; letter-spacing: .01em;
}
.btn-google:hover:not(:disabled) { background: #1c1c1d; border-color: #a5a8a6; }
.btn-google:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.btn-google:disabled { opacity: .6; cursor: default; }
.btn-google svg { flex: none; }

/* ── Movie filter bar ──
   One quiet line above the grid. Collapsed by default so it reads as optional
   help rather than a form standing between you and the films; each control only
   raises its voice (purple) once it's actually doing something. */
.mf-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 12px 0 14px;
}
.mf-chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.mf-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: var(--bg-1); border: 1px solid var(--border);
  color: var(--ink-dim); font-size: 12.5px; font-family: inherit; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.mf-chip:hover { color: var(--ink); border-color: rgba(139,92,246,0.4); }
.mf-chip.is-open { border-color: rgba(139,92,246,0.7); color: var(--ink); }
/* An active filter is the only thing here allowed to use the accent — that's
   what makes "am I filtered right now?" answerable at a glance. */
.mf-chip.is-active {
  background: rgba(139,92,246,0.16); border-color: rgba(139,92,246,0.55); color: var(--ink);
}
.mf-caret { font-size: 9px; opacity: .65; }
.mf-meta { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mf-count { font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mf-clear {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--ink-faint); font-size: 12px; font-family: inherit; text-decoration: underline;
}
.mf-clear:hover { color: var(--ink-dim); }

/* Fixed, not absolute: this bar sits inside scrollable modals, where an
   absolutely positioned panel gets clipped by the overflow. */
.mf-pop {
  position: fixed; z-index: 1200;
  min-width: 210px; max-width: 280px; max-height: 320px; overflow-y: auto;
  padding: 8px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--border);
  box-shadow: 0 18px 44px rgba(0,0,0,0.55);
}
.mf-pop-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-faint); padding: 6px 9px 8px;
}
.mf-opt {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 9px; border-radius: 9px;
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); font-size: 13px; font-family: inherit; text-align: left;
}
.mf-opt:hover { background: rgba(255,255,255,0.05); color: var(--ink); }
.mf-opt.is-on { color: var(--ink); font-weight: 600; }
/* Fixed-width so labels line up whether or not they're ticked — a tick that
   shifts every row sideways makes the list feel unstable while you click. */
.mf-opt-tick { width: 12px; flex: none; color: var(--purple); font-size: 12px; }
.mf-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-opt-count { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ── First-time Google signup: choose a username ──
   A modal rather than an inline step, because at this point the account does
   not exist yet and this is the only decision left — anything else on screen is
   noise the person can't act on. */
.gsu-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(6, 4, 12, 0.72); backdrop-filter: blur(6px);
}
.gsu-card {
  width: 100%; max-width: 380px; padding: 26px;
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.gsu-title { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.gsu-sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; margin-bottom: 18px; }
.gsu-input {
  width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
  background: var(--bg-1); color: var(--ink);
  border: 1px solid var(--border); border-radius: 12px;
}
.gsu-input:focus { outline: none; border-color: rgba(139,92,246,0.6); box-shadow: 0 0 0 3px rgba(139,92,246,0.15); }
.gsu-hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; line-height: 1.5; min-height: 17px; }
.gsu-hint.bad { color: #f87171; }
.gsu-go { width: 100%; margin-top: 16px; }
.gsu-cancel {
  width: 100%; margin-top: 10px; padding: 8px; background: none; border: none;
  color: var(--ink-faint); font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.gsu-cancel:hover { color: var(--ink-dim); text-decoration: underline; }

/* Labelled rather than a bare "or": the divider should say what's below it, so
   someone scanning knows the form is the alternative and not an extra step. */
.auth-or {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0; color: var(--ink-faint);
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ── Danger zone + confirm modal (delete account) ── */
.danger-zone {
  max-width: 1080px; margin: 8px auto 0; padding: 0 24px;
}
.danger-zone-inner {
  border: 1px solid rgba(248,113,113,0.35); border-radius: 16px;
  background: rgba(248,113,113,0.06);
  padding: 20px 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.danger-zone-inner h3 { font-size: 16px; color: #fca5a5; margin-bottom: 4px; }
.danger-zone-inner p { font-size: 13px; color: var(--ink-dim); max-width: 560px; line-height: 1.6; }
.btn-danger {
  background: linear-gradient(150deg, #ef4444, #b91c1c); color: #fff;
  box-shadow: 0 6px 20px rgba(239,68,68,0.28), inset 0 1px 0 rgba(255,255,255,0.15);
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(6,4,12,0.7); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: modalFade 0.15s ease;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: 440px; max-width: 100%;
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid rgba(248,113,113,0.3); border-radius: 20px;
  padding: 28px 26px; box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.modal-card h2 { font-size: 21px; margin-bottom: 10px; }
.modal-card p { color: var(--ink-dim); font-size: 14px; line-height: 1.65; margin-bottom: 12px; }
.modal-warn {
  background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3);
  border-left: 3px solid #ef4444; border-radius: 10px; padding: 12px 14px;
  color: #fca5a5; font-size: 13px; line-height: 1.6; margin-bottom: 16px;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-card .error-text { text-align: left; }

/* ── Moments Recap card (own profile, auto-generated) ── */
.recap-card {
  display: flex; gap: 20px; align-items: stretch;
  background: linear-gradient(135deg, rgba(139,92,246,0.14), rgba(245,185,66,0.08)), var(--card);
  border: 1px solid rgba(167,139,250,0.35); border-radius: 20px;
  padding: 16px; margin-bottom: 22px; cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.recap-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(139,92,246,0.22);
  border-color: var(--purple);
}
.recap-card-media { position: relative; flex: 0 0 auto; width: 180px; }
.recap-card-img {
  width: 180px; height: 180px; object-fit: cover; border-radius: 14px;
  display: block; border: 1px solid var(--border);
}
.recap-card-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 44px; text-shadow: 0 4px 16px rgba(0,0,0,0.5); pointer-events: none;
}
.recap-card-body { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.recap-card-kicker {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 700; color: var(--gold);
}
.recap-card-title { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: 700; }
.recap-card-sub { color: var(--ink-dim); font-size: 14px; line-height: 1.55; }
.recap-card-open { align-self: flex-start; margin-top: 8px; }
@media (max-width: 560px) {
  .recap-card { flex-direction: column; }
  .recap-card-media, .recap-card-img { width: 100%; }
  .recap-card-img { height: 220px; }
}

/* ── Share sheet (❤️ Share your Moment) ── */
/* The share sheet opens ON TOP of the fullscreen media viewer (.mv-overlay,
   z-index 3000), so it must sit above it — the base .modal-overlay z-index
   (1000) would otherwise render it behind the moment. */
.share-overlay { z-index: 4000; }
.share-card {
  width: 460px; border: 1px solid var(--border);
}
.share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.share-head h2 { font-size: 22px; margin: 0; }
.share-close {
  background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--ink-dim);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer; font-size: 15px;
}
.share-close:hover { background: rgba(255,255,255,0.12); color: var(--ink); }
.share-note {
  background: rgba(245,185,66,0.09); border: 1px solid rgba(245,185,66,0.28);
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; color: var(--ink-dim);
  line-height: 1.55; margin-bottom: 16px;
}
.share-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.share-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--ink); font-size: 13px; font-weight: 600; font-family: inherit;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.share-opt:hover { transform: translateY(-2px); background: rgba(139,92,246,0.14); border-color: var(--purple); }
.share-opt:active { transform: scale(0.97); }
.share-opt:disabled { opacity: 0.5; cursor: default; transform: none; filter: none; }
.share-opt:disabled:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }
.share-ico { font-size: 26px; line-height: 1; }
.share-status { min-height: 20px; margin-top: 16px; font-size: 13px; color: var(--ink-dim); text-align: center; }
.share-status.ok { color: #4ade80; }
.mv-btn-share { font-size: 13px !important; font-weight: 700; white-space: nowrap; }
@media (max-width: 480px) { .share-grid { grid-template-columns: repeat(2, 1fr); } .share-card { width: 100%; } }

/* ── Site legal footer (shared by the app pages: feed, profile, etc.) ── */
.site-legal-footer {
  border-top: 1px solid var(--border);
  padding: 30px 24px 40px; margin-top: 20px; text-align: center;
}
.site-legal-footer .slf-links {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; margin-bottom: 12px;
}
.site-legal-footer .slf-links a { color: var(--ink-dim); font-size: 12.5px; }
.site-legal-footer .slf-links a:hover { color: var(--ink); }
.site-legal-footer .slf-note { color: var(--ink-faint); font-size: 12px; }

/* ── Memories grid ── */
.page-wrap { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; }
.page-title { font-size: 26px; margin-bottom: 6px; }
.page-sub { color: var(--ink-faint); font-size: 14px; margin-bottom: 32px; }

.empty-state {
  text-align: center; padding: 80px 20px; color: var(--ink-faint);
}
.empty-state .icon { font-size: 44px; margin-bottom: 14px; }
.empty-state .msg { font-size: 15px; line-height: 1.7; }

.moments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
}
.moment-card {
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.moment-card:hover { transform: translateY(-4px) rotate(0deg) !important; box-shadow: 0 20px 50px rgba(0,0,0,0.45); }
/* A slight, alternating scrapbook tilt — a real gallery, not a spreadsheet. */
.moment-card:nth-child(3n)   { transform: rotate(-0.6deg); }
.moment-card:nth-child(3n+1) { transform: rotate(0.5deg); }
.moment-card img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: #000;
}
.moment-body { padding: 16px 18px 18px; }
.moment-meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.moment-people { font-size: 13px; font-weight: 700; color: var(--ink); }
.moment-date { font-size: 11px; color: var(--ink-faint); }
.moment-description { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); margin-bottom: 12px; }
.theme-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.04em;
  background: rgba(245,185,66,0.14); color: var(--gold); border: 1px solid rgba(245,185,66,0.3);
  white-space: nowrap;
}
.moment-reviews { margin-top: 4px; }
.review-line { font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.review-author { font-weight: 700; color: var(--purple); }
.review-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; }

/* ── Review page ── */
.review-moment-strip {
  display: flex; gap: 12px; overflow-x: auto; margin-bottom: 28px; padding-bottom: 6px;
}
.review-moment-strip img {
  height: 160px; border-radius: 12px; border: 1px solid var(--border);
  flex-shrink: 0;
}
.review-panel {
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 20px; padding: 26px;
  max-width: 560px; margin: 0 auto;
}
.review-section-title { font-size: 14px; font-weight: 700; color: var(--ink-dim); margin-bottom: 12px; }
.partner-review-box {
  background: rgba(139,92,246,0.08); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.6;
  margin-bottom: 22px;
}
.partner-review-waiting { color: var(--ink-faint); font-style: italic; font-size: 13px; }
.save-confirm { color: #6ee7b7; font-size: 13px; margin-top: 10px; text-align: center; }

.spinner-text { text-align: center; color: var(--ink-faint); padding: 60px 0; }

/* ── Nav links (topbar) ── */
.nav-links { display: flex; gap: 4px; }
.nav-link {
  padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--ink-dim); text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: rgba(255,255,255,0.06); color: var(--ink); text-decoration: none; }
.nav-link-active { background: rgba(139,92,246,0.16); color: #d9c9ff; }

/* ── Feed tabs ── */
.feed-tabs { display: flex; gap: 8px; margin-bottom: 24px; }
.feed-tab {
  padding: 9px 18px; border-radius: 24px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--ink-dim);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease;
}
.feed-tab:hover { background: rgba(255,255,255,0.08); }
.feed-tab-active {
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
  color: #fff; border-color: transparent;
}

/* ── Post meta row (theme + privacy) ── */
.moment-meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
.privacy-badge {
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  background: rgba(139,92,246,0.14); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.3);
  white-space: nowrap;
}
.privacy-select {
  font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 20px;
  background: rgba(139,92,246,0.14); color: #c4b5fd; border: 1px solid rgba(139,92,246,0.35);
  cursor: pointer; outline: none;
}
.privacy-select:disabled { opacity: 0.6; cursor: wait; }

/* ── Reactions (likes + comments) — shared by moment cards and reviews ── */
.reaction-row {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 0; margin: 4px 0 8px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.like-btn, .comment-toggle-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; color: var(--ink-dim);
  font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 5px 10px; border-radius: 20px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.like-btn:hover, .comment-toggle-btn:hover { background: rgba(255,255,255,0.06); }
.like-btn:active, .comment-toggle-btn:active { transform: scale(0.94); }
.like-btn-active { color: var(--purple); }
.like-btn:disabled { opacity: 0.6; cursor: wait; }

.comments-block { padding: 4px 0 8px; }
.comments-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.comment-line { font-size: 13px; line-height: 1.5; }
.comment-author { font-weight: 700; color: var(--purple); margin-right: 4px; }
.comment-empty { font-size: 12px; color: var(--ink-faint); font-style: italic; }
.comment-input-row { display: flex; gap: 8px; }
.comment-input {
  flex: 1; padding: 8px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  color: var(--ink); font-size: 13px; font-family: inherit; outline: none;
}
.comment-input:focus { border-color: var(--purple); background: rgba(255,255,255,0.06); }
.comment-submit-btn {
  padding: 8px 16px; border-radius: 20px; border: none;
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
  color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
}
.comment-submit-btn:hover { filter: brightness(1.1); }
.comment-submit-btn:disabled { opacity: 0.6; cursor: wait; }

.review-block { margin-bottom: 14px; }
.review-block:last-child { margin-bottom: 0; }
.review-open-link {
  display: inline-block; margin-left: 6px; color: var(--ink-faint);
  font-size: 12px; text-decoration: none;
}
.review-open-link:hover { color: var(--purple); text-decoration: none; }

/* ── Single-post detail page ── */
.post-detail-img {
  width: 100%; border-radius: 18px; display: block; cursor: zoom-in;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4); background: #000;
  transition: transform 0.15s ease;
}
.post-detail-img:hover { transform: scale(1.01); }
.post-detail-card {
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 20px; padding: 20px;
  max-width: 620px; margin: 0 auto;
}
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(5,4,8,0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; cursor: zoom-out;
  animation: lightbox-fade-in 0.15s ease-out;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@keyframes lightbox-fade-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox-overlay img {
  max-width: 92vw; max-height: 92vh; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}

/* ── Contacts list ── */
.contacts-list { display: flex; flex-direction: column; gap: 10px; }
.contact-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 16px;
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.contact-row:hover {
  transform: translateY(-2px); text-decoration: none;
  border-color: rgba(139,92,246,0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.3);
}
.contact-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold), var(--purple));
  color: #1c1408; font-weight: 800; font-size: 16px;
}
.contact-info { flex: 1; min-width: 0; }
.contact-name { font-weight: 700; font-size: 15px; }
.contact-status { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.contact-online { color: #6ee7b7; }
.contact-arrow { color: var(--ink-faint); font-size: 18px; }

.review-no-moments {
  text-align: center; color: var(--ink-faint); font-size: 13px;
  font-style: italic; padding: 18px 0 26px;
}

.login-back {
  display: block; text-align: center; margin-bottom: 18px;
  color: var(--ink-faint); font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════
   Premium feed redesign — session cards, review posts, recommendations,
   the featured hero, media tiles (photo + inline video), carousels,
   skeletons, search overlay, and the movie detail page. Same palette as
   everything above: purple + gold on the dark base, Georgia headings.
   ══════════════════════════════════════════════════════════════════════ */

.feed-header-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.feed-header-row .page-title, .feed-header-row .page-sub { margin-bottom: 0; }
.feed-header-row .page-sub { margin-top: 6px; }
.feed-list { display: flex; flex-direction: column; gap: 24px; max-width: 640px; margin: 0 auto; }
.scroll-sentinel {
  text-align: center; color: var(--ink-faint); font-size: 13px;
  padding: 28px 0 8px;
}
.scroll-sentinel.hidden { display: none; }

.feed-scope-tab, .feed-tab {
  padding: 9px 18px; border-radius: 24px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--ink-dim);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease;
}
.feed-scope-tab:hover, .feed-tab:hover { background: rgba(255,255,255,0.08); }
.feed-scope-tab-active, .feed-tab-active {
  background: linear-gradient(140deg, var(--purple), var(--purple-deep));
  color: #fff; border-color: transparent;
}

/* ── Generic feed card shell (session/review posts + recommendations) ── */
.feed-card {
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; padding: 18px 20px 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  animation: feed-card-in 0.35s ease-out;
}
@keyframes feed-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.feed-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.feed-card-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold), var(--purple));
  color: #1c1408; font-weight: 800; font-size: 15px;
}
.feed-card-headtext { flex: 1; min-width: 0; }
.feed-card-people { font-weight: 700; font-size: 14px; }
.feed-card-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.feed-card-title-inline { color: var(--gold); font-weight: 600; }
.session-avg-rating { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.session-avg-num { font-size: 12px; color: var(--ink-faint); }

/* ── Session / review cards ── */
.session-carousel-wrap { margin-bottom: 12px; }
.session-reviews { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.session-review {
  background: rgba(139,92,246,0.07); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
}
.session-review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.session-review-author { font-weight: 700; color: var(--purple); font-size: 13.5px; }
.session-review-date { font-size: 11px; color: var(--ink-faint); margin-left: auto; }
.session-review-text { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); margin-bottom: 4px; }
.session-no-review {
  font-size: 12.5px; color: var(--ink-faint); font-style: italic;
  padding: 8px 2px 2px;
}

/* ── Star ratings ── */
.star-rating { color: var(--gold); letter-spacing: 1px; }
.star-rating-sm { font-size: 12px; }
.star-rating-md { font-size: 15px; }
.star-picker { display: flex; gap: 4px; }
.star-picker-btn {
  background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: rgba(255,255,255,0.16); transition: color 0.12s ease, transform 0.1s ease;
  padding: 2px;
}
.star-picker-btn:hover { transform: scale(1.12); }
.star-picker-btn-active { color: var(--gold); }

/* ── Media tiles (photo + video moments) ──
   A tile is now a wrapper element with the media inside it (it used to be a
   bare <img> for photos), so photos and videos size and round identically
   and both can carry an overlay. Every tile opens the fullscreen media
   viewer on click — nothing plays inside a tile any more. */
.media-tile {
  position: relative; display: block; width: 100%;
  border-radius: inherit; overflow: hidden; cursor: zoom-in;
  background: #000; border: none; padding: 0;
}
.media-tile-video { cursor: pointer; }
.media-tile:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }
.media-tile-img, .media-tile-poster {
  width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.media-tile:hover .media-tile-img, .media-tile:hover .media-tile-poster { transform: scale(1.03); }
.media-tile-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; border: none;
  background: rgba(13,11,18,0.55); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  backdrop-filter: blur(4px); box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  transition: transform 0.18s ease, background 0.18s ease;
  pointer-events: none; /* the whole tile is the hit target */
}
.media-tile:hover .media-tile-play { transform: translate(-50%, -50%) scale(1.1); background: rgba(139,92,246,0.8); }
.media-tile-duration {
  position: absolute; bottom: 8px; right: 8px; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; background: rgba(13,11,18,0.7); color: #fff;
}
.moment-card-media { width: 100%; }
.moment-card .media-tile { border-radius: 0; }
.post-detail-media { border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
.review-strip-media { width: 160px; border-radius: 12px; flex-shrink: 0; }
.review-strip-media .media-tile-img,
.review-strip-media .media-tile-poster { aspect-ratio: 3/4; height: 160px; width: 160px; }

/* ── Carousel: strip mode (movie gallery) — unchanged ── */
.carousel { position: relative; }
.carousel:not(.carousel-3d) .carousel-track {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: 4px;
}
.carousel:not(.carousel-3d) .carousel-item { scroll-snap-align: start; }
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(13,11,18,0.75); color: #fff; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s ease;
}
.carousel:hover .carousel-arrow { opacity: 1; }
.carousel-arrow-prev { left: -4px; }
.carousel-arrow-next { right: -4px; }

/* ── Carousel: 3D coverflow (a session's moments) ──
   Items are absolutely stacked in one perspective scene and placed purely
   by transform (see carousel.js's layout()) — no scroll container, so the
   focused moment can be shown large and centred with its neighbours angled
   away behind it. */
.carousel-3d { padding: 4px 0 0; }
.carousel-3d:focus { outline: none; }
.carousel-3d:focus-visible { outline: 2px solid var(--purple); outline-offset: 6px; border-radius: 18px; }
.carousel-3d .carousel-stage {
  position: relative;
  height: 420px;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
.carousel-3d .carousel-track {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* The track's own box sits at Z=0 and spans the whole stage, while every
     neighbour is pushed BACK (translateZ) — so in this 3D scene the track
     is literally in front of them and swallowed their clicks, leaving only
     the focused slide reachable. It's a transparent container with nothing
     to click, so it opts out of hit-testing entirely; the items opt back in
     (carousel.js sets pointer-events per item). */
  pointer-events: none;
}
.carousel-3d .carousel-item {
  position: absolute; top: 0; left: 50%; width: 300px; height: 100%;
  margin-left: -150px;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.45s ease;
  cursor: pointer;
}
.carousel-3d .carousel-item.is-active { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .carousel-3d .carousel-item { transition: none; }
}
.session-carousel-media {
  border-radius: 18px;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.07);
}
.carousel-3d .carousel-item .session-carousel-media { height: 380px; }
.session-carousel-media .media-tile-img,
.session-carousel-media .media-tile-poster { aspect-ratio: auto; height: 380px; }
/* Neighbours are scenery: dimmed and un-clickable through to their media,
   so a click on one means "bring it forward" (carousel.js), never "open". */
.carousel-3d .carousel-item:not(.is-active) .session-carousel-media { cursor: pointer; }
.carousel-3d .carousel-item:not(.is-active) .media-tile-play { opacity: 0; }
.carousel-3d .carousel-item:not(.is-active) .carousel-item-bar { opacity: 0; pointer-events: none; }

.carousel-item-bar {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; gap: 4px;
  transition: opacity 0.3s ease;
}
.carousel-item-bar .post-menu-btn,
.carousel-item-open {
  background: rgba(13,11,18,0.66); backdrop-filter: blur(6px);
  border-radius: 9px; color: var(--ink); text-decoration: none;
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; padding: 0;
}
.carousel-item-open:hover { text-decoration: none; background: rgba(139,92,246,0.7); color: #fff; }
.carousel-item-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 14px 12px;
  background: linear-gradient(to top, rgba(13,11,18,0.92), transparent);
  border-radius: 0 0 18px 18px;
  pointer-events: none;
}
/* The slot itself must always exist — the inline caption editor mounts into
   it — but an uncaptioned moment shouldn't show an empty gradient strip.
   :empty can't do this (the slot always holds whitespace), so key off what's
   actually inside: a caption, or the editor while you're writing one. */
.carousel-item-caption:not(:has(.moment-description)):not(:has(.inline-editor)) { display: none; }
.carousel-item-caption .moment-description { font-size: 13px; margin: 0; }
/* The inline caption editor inside a slide has to be interactive again. */
.carousel-item-caption .inline-editor { pointer-events: auto; }

.carousel-3d .carousel-arrow {
  width: 40px; height: 40px; font-size: 20px; opacity: 0.85; z-index: 200;
  top: 50%; background: rgba(13,11,18,0.8);
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.carousel-3d:hover .carousel-arrow { opacity: 1; }
.carousel-3d .carousel-arrow:hover:not(:disabled) { background: rgba(139,92,246,0.8); transform: translateY(-50%) scale(1.08); }
.carousel-3d .carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-3d .carousel-arrow-prev { left: 6px; }
.carousel-3d .carousel-arrow-next { right: 6px; }

.carousel-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.carousel-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.22);
  transition: background 0.2s ease, width 0.25s ease;
}
.carousel-dot.is-active { background: var(--purple); width: 20px; border-radius: 4px; }

@media (max-width: 640px) {
  .carousel-3d .carousel-stage { height: 340px; }
  .carousel-3d .carousel-item { width: 220px; margin-left: -110px; }
  .carousel-3d .carousel-item .session-carousel-media { height: 306px; }
  .session-carousel-media .media-tile-img,
  .session-carousel-media .media-tile-poster { height: 306px; }
}

/* ── Fullscreen media viewer ── */
.mv-overlay {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; flex-direction: column;
  background: rgba(6, 5, 10, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: mv-fade-in 0.2s ease;
}
@keyframes mv-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mv-overlay { animation: none; } }
.mv-overlay:fullscreen { background: #05040a; }
.mv-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; flex-shrink: 0;
}
.mv-caption {
  font-size: 13px; color: var(--ink-dim); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mv-btn {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,0.06);
  color: var(--ink); font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s ease, transform 0.12s ease;
}
.mv-btn:hover { background: rgba(139,92,246,0.35); transform: translateY(-1px); }
.mv-btn-close:hover { background: rgba(248,113,113,0.35); }
.mv-zoom-level {
  font-size: 12px; color: var(--ink-dim); min-width: 46px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.mv-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 0 18px 8px;
}
.mv-image {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  transform-origin: center center;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-drag: none;
}
.mv-image.mv-zoomed { cursor: grab; transition: none; }
.mv-image.mv-zoomed:active { cursor: grabbing; }
.mv-video {
  max-width: 100%; max-height: 100%; display: block;
  border-radius: 10px; background: #000;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.mv-hint {
  text-align: center; font-size: 11.5px; color: var(--ink-faint);
  padding: 8px 18px 14px; flex-shrink: 0;
}
@media (max-width: 640px) {
  .mv-hint { display: none; }
  .mv-stage { padding: 0 8px 8px; }
  .mv-topbar { padding: 10px 12px; }
}


/* ── Recommendation cards + featured hero ── */
.recommendation-card { padding: 0; }
.recommendation-card-link { color: inherit; text-decoration: none; display: block; }
.recommendation-card-link:hover { text-decoration: none; }
.recommendation-card-art {
  aspect-ratio: 16/8; background-size: cover; background-position: center top;
  background-color: rgba(139,92,246,0.12); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.recommendation-card-placeholder { font-size: 34px; opacity: 0.5; }
.recommendation-card-flag {
  position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 20px;
  background: rgba(13,11,18,0.6); color: var(--gold); border: 1px solid rgba(245,185,66,0.35);
}
.recommendation-card-body { padding: 16px 20px 20px; }
.recommendation-card-title { font-size: 17px; margin-bottom: 4px; }
.recommendation-card-meta { font-size: 12px; color: var(--ink-faint); margin-bottom: 8px; }
.recommendation-card-desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; margin-bottom: 8px; }
.recommendation-card-rating { color: var(--gold); font-weight: 700; font-size: 13px; }

.hero-card {
  display: block; position: relative; border-radius: 22px; overflow: hidden;
  min-height: 320px; background-size: cover; background-position: center;
  background-color: var(--card); padding: 28px 30px; margin-bottom: 30px;
  color: var(--ink); text-decoration: none;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-card:hover { text-decoration: none; }
.hero-card-badge {
  align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 5px 12px; border-radius: 20px; margin-bottom: 12px;
  background: rgba(245,185,66,0.16); color: var(--gold); border: 1px solid rgba(245,185,66,0.35);
}
.hero-card-title { font-size: 32px; margin-bottom: 8px; max-width: 560px; }
.hero-card-meta { font-size: 13px; color: var(--ink-dim); margin-bottom: 10px; }
.hero-card-desc {
  font-size: 14px; line-height: 1.6; color: var(--ink-dim); max-width: 520px;
  margin-bottom: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-card-cta { align-self: flex-start; }

/* ── Skeletons ── */
.skeleton-card {
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px 20px;
}
.skeleton-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.skeleton-avatar, .skeleton-line, .skeleton-media {
  background: linear-gradient(100deg, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.05) 60%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton-line { height: 11px; width: 100%; }
.skeleton-line-short { width: 60%; }
.skeleton-line-shorter { width: 38%; }
.skeleton-media { height: 200px; border-radius: 14px; margin-bottom: 12px; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Search overlay ── */
.search-overlay {
  position: fixed; inset: 0; background: rgba(5,4,8,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 20px 20px; z-index: 900;
}
.search-overlay.hidden { display: none; }
.search-panel {
  width: 560px; max-width: 100%;
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 20px; padding: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  max-height: 70vh; display: flex; flex-direction: column;
}
.search-input-row { display: flex; gap: 10px; margin-bottom: 14px; }
.search-input {
  flex: 1; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.05);
  color: var(--ink); font-size: 15px; outline: none;
}
.search-input:focus { border-color: var(--purple); }
.search-results { overflow-y: auto; }
.search-section { margin-bottom: 16px; }
.search-section:last-child { margin-bottom: 0; }
.search-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-faint); margin-bottom: 8px;
}
.search-result {
  display: block; padding: 10px 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; transition: background 0.15s ease;
}
.search-result:hover { background: rgba(255,255,255,0.06); text-decoration: none; }
a.search-result.contact-row { display: flex; padding: 8px 10px; border: none; background: none; }
.search-result-title { font-weight: 700; font-size: 13.5px; }
.search-result-sub { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }
.search-hint { color: var(--ink-faint); font-size: 13px; padding: 20px 6px; text-align: center; }

/* ── Movie detail page ── */
.movie-hero {
  background-size: cover; background-position: center;
  background-color: var(--card); padding: 60px 24px 32px;
}
.movie-hero-inner {
  max-width: 1080px; margin: 0 auto; display: flex; align-items: flex-end; gap: 26px;
}
.movie-poster {
  width: 180px; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.55);
  flex-shrink: 0; background: #000;
}
.movie-hero-info { padding-bottom: 6px; }
.movie-title { font-size: 34px; margin-bottom: 8px; }
.movie-meta { font-size: 14px; color: var(--ink-dim); margin-bottom: 8px; }
.movie-rating { color: var(--gold); font-weight: 700; }
.movie-body { padding-top: 30px; max-width: 1080px; }
.movie-description { font-size: 15px; line-height: 1.7; color: var(--ink-dim); margin-bottom: 18px; max-width: 720px; }
/* Licence attribution: legally required, so it must be legible, but it isn't
   what anyone came to read — fine print under the synopsis. */
.movie-credit {
  font-size: 11.5px; line-height: 1.6; color: var(--ink-faint, var(--ink-dim));
  opacity: .72; max-width: 720px; margin-bottom: 30px;
}
.movie-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.movie-credit a:hover { opacity: 1; }
.movie-gallery-title, .movie-similar-title { font-size: 18px; margin-bottom: 14px; }
.movie-gallery-carousel { margin-bottom: 34px; }
.movie-gallery-img { height: 220px; border-radius: 14px; display: block; }
.movie-similar-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px;
}
.movie-similar-card { color: inherit; text-decoration: none; }
.movie-similar-card:hover { text-decoration: none; }
.movie-similar-art {
  aspect-ratio: 2/3; border-radius: 12px; background-size: cover; background-position: center;
  background-color: rgba(139,92,246,0.12); margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease; box-shadow: 0 10px 26px rgba(0,0,0,0.35);
}
.movie-similar-card:hover .movie-similar-art { transform: translateY(-4px); }
.movie-similar-name { font-size: 13px; font-weight: 600; }

.review-content-banner {
  max-width: 640px; margin: 0 auto 18px; font-size: 14px; font-weight: 700;
  color: var(--ink-dim); text-align: center;
}
.review-moment-strip-item { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════
   Brand lockup, profile pictures, profile pages, contact management, and
   the inline edit/delete controls. Same palette and Georgia headings as
   everything above — these are additions to the existing design, not a
   restyle of it.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Brand lockup (the logo, everywhere it appears) ── */
.brand-link {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.brand-link:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.08); }
.brand-link:active { transform: scale(0.98); }
.brand-logo {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.32);
}
.brand-link .brand-sub { margin-top: 0; }
.brand-wordmark {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700;
  font-size: 21px; letter-spacing: 0.01em;
  background: linear-gradient(140deg, #f5b942, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.login-logo {
  width: 72px; height: 72px; border-radius: 20px; display: block; margin: 0 auto 16px;
  box-shadow: 0 12px 34px rgba(139, 92, 246, 0.4);
}

/* ── Avatars ──
   One circle, four sizes. The initial sits underneath the <img> so a
   loading/failed picture shows the same letter a no-picture account gets,
   never an empty hole. */
.avatar {
  position: relative; flex-shrink: 0; overflow: hidden;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold), var(--purple));
  color: #1c1408; font-weight: 800;
  line-height: 1; user-select: none;
}
.avatar-initial { position: relative; z-index: 0; }
.avatar-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  background: var(--bg-2);
}
.avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.avatar-md { width: 44px; height: 44px; font-size: 16px; }
.avatar-lg { width: 72px; height: 72px; font-size: 26px; }
.avatar-xl { width: 128px; height: 128px; font-size: 46px; }
.avatar-link { display: inline-flex; text-decoration: none; }
.avatar-link:hover { text-decoration: none; }
.avatar-link:hover .avatar { filter: brightness(1.08); }

/* Overlapping faces for a multi-person session card. */
.avatar-stack { display: flex; flex-shrink: 0; }
.avatar-stack .avatar-link + .avatar-link { margin-left: -14px; }
.avatar-stack .avatar { border: 2px solid var(--card); }
.avatar-stack .avatar-link:hover { z-index: 2; }

/* ── Clickable usernames ── */
.user-link {
  color: inherit; text-decoration: none; font-weight: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.user-link:hover {
  text-decoration: none; color: #c4b5fd;
  border-bottom-color: rgba(196, 181, 253, 0.5);
}

/* ── Profile page header ── */
.profile-header {
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 700px 260px at 20% 0%, rgba(139, 92, 246, 0.18), transparent 70%),
    radial-gradient(ellipse 500px 240px at 90% 10%, rgba(245, 185, 66, 0.09), transparent 65%);
}
.profile-header-inner {
  max-width: 1080px; margin: 0 auto; padding: 40px 24px 34px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
  border: 3px solid rgba(255, 255, 255, 0.1);
}
.profile-headtext { flex: 1; min-width: 220px; }
.profile-name { font-size: 34px; margin-bottom: 8px; word-break: break-word; }
.profile-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint); margin-bottom: 16px;
}
.profile-presence { font-weight: 700; }
.profile-presence.is-online { color: #6ee7b7; }
.profile-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.profile-stat { font-size: 13px; color: var(--ink-faint); }
.profile-stat-num {
  display: block; font-size: 20px; font-weight: 800; color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
}
.profile-contact-note { margin-top: 14px; font-size: 13px; color: var(--ink-dim); }
.profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-you-badge {
  font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 20px;
  background: rgba(139, 92, 246, 0.14); color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ── Avatar upload control (your own profile) ── */
/* z-index must clear .avatar-img's own z-index: 1 — both are positioned
   children of the same (non-stacking) .profile-avatar-wrap, so without this
   the picture paints on top of the edit button and eats its clicks. Which
   means it broke for exactly the people who HAVE a picture, i.e. everyone
   trying to replace or remove one. */
.avatar-controls { position: absolute; right: 0; bottom: 0; z-index: 3; }
.avatar-edit-btn {
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--bg-0);
  background: linear-gradient(150deg, var(--purple), var(--purple-deep));
  color: #fff; font-size: 15px; line-height: 1;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.14s ease, filter 0.14s ease;
}
.avatar-edit-btn:hover { transform: scale(1.08); filter: brightness(1.1); }
.avatar-edit-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 186px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.avatar-menu-item, .post-menu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; border: none;
  background: none; color: var(--ink); font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.avatar-menu-item:hover, .post-menu-item:hover { background: rgba(255, 255, 255, 0.07); }
.avatar-menu-item-danger, .post-menu-item-danger { color: #fca5a5; }
/* Any class that sets `display` silently beats the [hidden] attribute's UA
   `display: none` — which left the upload spinner below permanently
   overlaying (and swallowing every click on) the avatar edit button. The
   toggled-by-`hidden` elements here (this overlay, the avatar menu, the ⋯
   post menu) all rely on the attribute, so make it win outright. */
[hidden] { display: none !important; }

.avatar-uploading {
  position: absolute; inset: auto 0 0 auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(13, 11, 18, 0.8);
}
.avatar-spinner {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: var(--purple);
  animation: avatar-spin 0.7s linear infinite;
}
@keyframes avatar-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .avatar-spinner { animation-duration: 2s; } }

/* ── Contacts page ── */
.page-wrap-narrow { max-width: 640px; }
.section-title {
  font-size: 14px; font-weight: 700; color: var(--ink-dim);
  display: flex; align-items: center; gap: 8px;
}
.pill-count {
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 10px;
  background: rgba(139, 92, 246, 0.18); color: #c4b5fd;
}
/* Invite landing: two co-equal routes in, stacked full width. */
.invite-cta { width: 100%; display: block; text-align: center; margin-top: 10px; }

/* ── Add someone ──
   One card holding both routes in. They do the same job, so two equal-weight
   cards read as duplication and, stacked, pushed the actual contact list off
   the first screen. The username form keeps the primary button; the invite link
   sits below a hairline as the quieter option — no heading, no second primary,
   just the link and two text buttons. */
.add-someone {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(139,92,246,0.10), transparent 62%),
    linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 22px;
}
.add-someone-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
/* Only shown once someone has actually joined — a "0 joined" badge is a nudge
   about a thing you haven't done, on a page you came here to use. */
.invite-count {
  flex: none; font-size: 11px; font-weight: 700; color: var(--ink-dim);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.28);
  white-space: nowrap;
}

.invite-inline { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.invite-inline-label { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 9px; line-height: 1.5; }
.invite-inline-row { display: flex; align-items: center; gap: 8px; }
/* The link is visible rather than hidden behind the button: people want to see
   what they're about to paste, and it doubles as proof the thing exists.
   Truncated, never wrapped, so the row height can't jump. */
.invite-link {
  flex: 1; min-width: 0;
  padding: 8px 11px; border-radius: 9px;
  background: var(--bg-0); border: 1px solid var(--border);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  user-select: all;
}
/* Text-weight, not a second primary — one card should have one loudest action. */
.invite-mini {
  flex: none; padding: 8px 12px; border-radius: 9px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--ink-dim); font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.invite-mini:hover { color: var(--ink); border-color: rgba(139,92,246,0.45); }
.invite-mini.is-done { color: #4ade80; border-color: rgba(74,222,128,0.45); }

@media (max-width: 520px) {
  .invite-inline-row { flex-wrap: wrap; }
  .invite-link { flex-basis: 100%; }
  .invite-mini { flex: 1; }
}

.add-contact-row { display: flex; gap: 10px; margin-top: 12px; }
.add-contact-row input {
  flex: 1; min-width: 0;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  color: var(--ink); font-size: 14px; font-family: inherit;
}
.add-contact-row input:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}
.add-contact-msg { font-size: 12.5px; margin-top: 10px; min-height: 16px; color: var(--ink-faint); }
.add-contact-msg.is-ok { color: #6ee7b7; }
.add-contact-msg.is-error { color: #fca5a5; }

.requests-section { margin-bottom: 26px; }
.requests-section .section-title { margin-bottom: 12px; }
.contacts-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.contacts-search {
  width: 220px; padding: 9px 13px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  color: var(--ink); font-size: 13px; font-family: inherit;
}
.contacts-search:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}
.contact-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.btn-sm { padding: 7px 13px; font-size: 12.5px; border-radius: 10px; }
.search-result-contact { padding: 0; border: none; background: none; }
.search-result-contact .contact-row { padding: 8px 10px; }

/* ── The ⋯ post menu (edit / delete) ── */
.post-menu { position: relative; margin-left: auto; flex-shrink: 0; }
.post-menu-btn {
  border: none; background: none; cursor: pointer;
  color: var(--ink-faint); font-size: 18px; line-height: 1;
  padding: 2px 8px; border-radius: 8px;
  transition: background 0.14s ease, color 0.14s ease;
}
.post-menu-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--ink); }
.post-menu-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  min-width: 150px; padding: 6px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* ── Inline editors (caption, review, comment) ── */
.inline-editor { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.inline-edit-text {
  width: 100%; min-height: 68px; resize: vertical;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  color: var(--ink); font-size: 13.5px; font-family: inherit; line-height: 1.6;
}
.inline-edit-text:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}
.inline-editor-actions { display: flex; gap: 8px; }
.btn-inline {
  padding: 6px 12px; border-radius: 9px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: inherit;
  background: linear-gradient(150deg, var(--purple), var(--purple-deep)); color: #fff;
  transition: filter 0.14s ease;
}
.btn-inline:hover { filter: brightness(1.1); }
.btn-inline:disabled { opacity: 0.55; cursor: default; }
.btn-inline-ghost {
  background: rgba(255, 255, 255, 0.06); color: var(--ink-dim);
  border: 1px solid var(--border);
}
.btn-inline-danger {
  background: rgba(248, 113, 113, 0.14); color: #fca5a5;
  border: 1px solid rgba(248, 113, 113, 0.3);
}
.review-own-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.review-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.review-body { margin-bottom: 8px; }
.review-rating-slot:empty { display: none; }
.review-text-slot { font-size: 14px; line-height: 1.65; color: var(--ink); }
.review-edit-stars { margin-bottom: 8px; }

/* ── Comment lines (avatar + author + actions) ── */
.comment-line {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 6px 0;
}
.comment-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.6; word-break: break-word; }
.comment-actions { display: flex; gap: 2px; flex-shrink: 0; opacity: 0; transition: opacity 0.14s ease; }
.comment-line:hover .comment-actions, .comment-line:focus-within .comment-actions { opacity: 1; }
.icon-btn {
  border: none; background: none; cursor: pointer;
  font-size: 11px; line-height: 1; padding: 4px 5px; border-radius: 7px;
  transition: background 0.14s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
.icon-btn:disabled { opacity: 0.5; cursor: default; }
.comment-edit-input {
  width: 100%; padding: 7px 10px; border-radius: 9px; margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
  color: var(--ink); font-size: 13px; font-family: inherit;
}
.comment-edit-input:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
}

/* ── Smooth scrolling, matched across the site's paginated lists ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 640px) {
  .profile-header-inner { padding: 28px 18px 24px; gap: 18px; }
  .profile-name { font-size: 26px; }
  .avatar-xl { width: 96px; height: 96px; font-size: 34px; }
  .contacts-search { width: 100%; }
  .add-contact-row { flex-direction: column; }
}

/* A contacts row that carries action buttons is a <div>, not an <a> (see
   contactRow.js) — but it still navigates to the profile on click, so it
   must still look and feel like it does. */
.contact-row[data-username] { cursor: pointer; }
.contact-row[data-username] button { cursor: pointer; }

/* The topbar is a three-column row (brand · nav · account controls) with no
   wrap, so on a phone it pushed past the viewport and scrolled the whole
   page sideways — verified at 390px on the feed. The new profile page's
   topbar inherits the same layout, so this fixes it everywhere at once:
   let the row wrap and drop the nav onto its own full-width line. */
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px 12px; padding: 14px 16px; }
  .nav-links { order: 3; width: 100%; justify-content: center; }
  .nav-links .nav-link { flex: 1; text-align: center; }
  .topbar-right { margin-left: auto; gap: 8px; }
  /* "logged in as <name>" is the first thing worth dropping for room — the
     account is a tap away on the profile page, and Log out stays put. */
  .topbar-right .who { display: none; }
}

/* The name participants gave a session, shown above what was watched. */
.review-session-title-banner {
  text-align: center; font-family: Georgia, 'Times New Roman', serif;
  font-size: 24px; font-weight: 700; margin-bottom: 6px;
  background: linear-gradient(140deg, #f5b942, #8b5cf6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feed-card-watched { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }

/* ── Media viewer: side panel layout (session page) ──
   .mv-main wraps the topbar/stage/hint column; a .mv-panel sibling (moved
   in by the caller — see mediaViewer.js) sits to its right with the
   moment's comments, likes, caption and the session's reviews. */
.mv-overlay { flex-direction: row; }
.mv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mv-panel {
  width: 400px; flex-shrink: 0; overflow-y: auto;
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border-left: 1px solid var(--border);
  padding: 18px;
}
.mvp-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; margin-bottom: 10px;
}
.mvp-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.mvp-duration { font-size: 11px; color: var(--ink-faint); font-weight: 700; }
.mv-panel .moment-description-slot { margin-bottom: 6px; }
.mvp-section-title {
  font-size: 12px; font-weight: 700; color: var(--ink-dim);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 18px 0 10px;
}
.mvp-review {
  background: rgba(139,92,246,0.07); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
@media (max-width: 860px) {
  .mv-overlay.has-panel { flex-direction: column; }
  .mv-panel { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 46vh; }
}

/* ── Search results page ── */
.search-page-bar { display: flex; gap: 10px; margin-bottom: 30px; }
.search-page-bar input {
  flex: 1; min-width: 0; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  color: var(--ink); font-size: 15px; font-family: inherit; outline: none;
}
.search-page-bar input:focus {
  border-color: var(--purple); box-shadow: 0 0 0 3px rgba(139,92,246,0.18);
}
/* ── Search result tabs ──
   Not sticky: .topbar is already `sticky; top: 0`, so a second sticky bar would
   need a hardcoded offset matching the topbar's height — which silently breaks
   the moment that padding changes. */
.search-tabs {
  display: flex; gap: 6px; margin-bottom: 22px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.search-tabs::-webkit-scrollbar { display: none; }
.search-tab {
  position: relative; flex: none;
  padding: 10px 14px 12px; background: none; border: none;
  color: var(--ink-faint); font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: color .15s ease;
}
.search-tab:hover:not(:disabled) { color: var(--ink-dim); }
.search-tab.is-active { color: var(--ink); }
/* Underline on the active tab only, sitting on the bar's own border so the two
   read as one line rather than two stacked rules. */
.search-tab.is-active::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--purple); border-radius: 2px 2px 0 0;
}
/* Dimmed rather than hidden: results stream in, and a tab bar that reflows as
   each group arrives is far more disorienting than a few quiet tabs. */
.search-tab:disabled { opacity: .38; cursor: default; }
.search-tab-n {
  display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08); font-size: 11px; font-variant-numeric: tabular-nums;
}
.search-tab.is-active .search-tab-n { background: rgba(139,92,246,0.28); color: var(--ink); }

.search-group { margin-bottom: 36px; }
.search-group-title {
  font-size: 18px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.search-more-users { margin-top: 10px; }
.search-review-row {
  display: block; color: inherit; text-decoration: none;
  background: linear-gradient(175deg, var(--card), var(--bg-1));
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.search-review-row:hover { text-decoration: none; transform: translateY(-2px); border-color: rgba(139,92,246,0.45); }
.search-review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.search-review-text { font-size: 13.5px; line-height: 1.6; color: var(--ink-dim); }
.search-review-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; }
.search-moments-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px;
}
.search-moment .search-moment-media { border-radius: 12px; }
.search-moment-link {
  display: block; font-size: 12px; margin-top: 6px; color: var(--ink-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Clicking a card opens its session ──
   A stretched link fills the card head (z:1); the people/avatar links sit
   above it (z:2), so a click on a name still goes to the profile while a
   click anywhere else on the head opens the session. */
.feed-card-head { position: relative; }
.feed-card-open { position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.feed-card-head .avatar-stack,
.feed-card-head .session-avg-rating,
.feed-card-head .feed-card-people .user-link { position: relative; z-index: 2; }
.feed-card-head:hover .feed-card-title-inline { text-decoration: underline; text-decoration-color: rgba(196,181,253,0.6); }

/* ── Herae video player (mediaViewer) ── */
.mv-video-wrap {
  position: relative; max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
}
.mv-video { border-radius: 0; box-shadow: none; cursor: pointer; }
.mv-vc {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 14px 10px;
  background: linear-gradient(to top, rgba(5,4,10,0.88), transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
.mv-video-wrap:hover .mv-vc,
.mv-video-wrap.is-paused .mv-vc,
.mv-vc:focus-within { opacity: 1; }
.mv-vc-btn {
  border: none; background: none; color: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px 7px; border-radius: 8px;
  transition: background 0.15s ease;
}
.mv-vc-btn:hover { background: rgba(139,92,246,0.4); }
.mv-vc-time {
  font-size: 11.5px; color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.mv-vc-seek { flex: 1; min-width: 0; accent-color: var(--purple); cursor: pointer; height: 4px; }
.mv-vc-vol { width: 72px; flex-shrink: 0; accent-color: var(--purple); cursor: pointer; height: 4px; }

/* ── Media-only fullscreen ── */
.mv-image:fullscreen { object-fit: contain; background: #05040a; border-radius: 0; }
.mv-video-wrap:fullscreen {
  background: #000; border-radius: 0; max-width: none; max-height: none;
}
.mv-video-wrap:fullscreen .mv-video {
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; object-fit: contain;
}

/* Session link atop the viewer's side panel */
.mvp-session-line { margin-bottom: 12px; font-size: 13px; font-weight: 700; }

@media (max-width: 640px) {
  .mv-vc { gap: 6px; padding: 14px 8px 8px; }
  .mv-vc-vol { display: none; }
}

/* The signed-in user's profile panel atop the feed — the profile page's
   header, framed as a card instead of a full-bleed banner. */
.profile-header-feed {
  border: 1px solid var(--border); border-radius: 20px;
  margin-bottom: 28px; overflow: hidden;
}
.profile-header-feed .profile-header-inner { padding: 22px 24px; gap: 20px; }
.profile-name-feed { font-size: 24px; margin-bottom: 4px; }
.profile-name-feed .user-link { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Relationship Memory Engine — the Memories section, story selector,
   important-dates manager, cinematic player, and shared bits. Uses the same
   tokens (--purple, --gold, --ink, --border …) as the rest of the site.
   ═══════════════════════════════════════════════════════════════════════ */
/* The Memories section spans the full page column (up to page-wrap's 1080px)
   so the hero banner, Featured Story and Timeline read wide; the moments feed
   below keeps its own 640px column. */
.ms-section { margin: 0 auto 34px; display: flex; flex-direction: column; gap: 26px; }

/* ── Unified relationship banner — replaces the plain profile header for an
   accepted contact: couple identity (avatars, names, together, label, stats) on
   the left, Share Card + Important Dates actions on the right, all in ONE
   full-bleed top banner. Layers a premium gradient over the base .profile-header. */
.rel-header {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60% 130% at 12% 0%, rgba(139,92,246,.30), transparent 60%),
    radial-gradient(52% 120% at 100% 0%, rgba(245,185,66,.14), transparent 58%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2));
  border-bottom: 1px solid var(--border);
}
.rel-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(45% 70% at 15% 0%, rgba(255,255,255,.05), transparent 70%);
}
.rel-header-inner { position: relative; z-index: 1; align-items: center; justify-content: space-between; gap: 28px; }
.rel-identity { display: flex; align-items: center; gap: 24px; min-width: 0; flex: 1; }
.rel-avatars-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 0 0 auto; }
.rel-avatars { display: flex; }
.rel-avatars .avatar { border: 3px solid var(--bg-1); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.rel-avatars .avatar + .avatar { margin-left: -24px; }
/* Live presence, sitting under the couple avatars. */
.rel-presence {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--ink-faint);
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.rel-presence.is-online { color: #6ee7b7; border-color: rgba(110,231,183,.35); background: rgba(110,231,183,.08); }
.rel-idtext { min-width: 0; }
/* Two-line couple name: "{them} & ●" on the first line (the dot is their live
   presence), the logged-in user's own name on the second. */
.rel-names {
  font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: var(--ink);
  margin: 0 0 10px; word-break: break-word;
  display: flex; flex-direction: column; gap: 2px; line-height: 1.15;
}
.rel-name-line { display: flex; align-items: center; gap: 10px; }
.rel-name-them { font-size: 40px; }
.rel-amp { font-size: 30px; color: var(--ink-faint); }
.rel-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: currentColor; opacity: .6;
}
.rel-presence.is-online .rel-dot { opacity: 1; box-shadow: 0 0 8px rgba(110,231,183,.8); }
.rel-name-me { font-size: 40px; color: var(--ink-dim); }
.rel-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--ink-dim); margin-bottom: 12px; }
.rel-label {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  box-shadow: 0 6px 20px rgba(139,92,246,.42);
}
.rel-stats { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 18px; }

/* Share Card + Important Dates — matching premium action tiles, in the same
   card language as the rest of the page. */
.rel-actions { display: grid; grid-template-columns: repeat(2, minmax(150px, 168px)); gap: 12px; align-content: center; flex: 0 0 auto; }
.ms-action-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 16px 18px; border-radius: 16px; cursor: pointer; text-align: left;
  background: linear-gradient(155deg, rgba(139,92,246,.18), rgba(245,185,66,.05)), var(--card);
  border: 1px solid var(--border);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ms-action-tile:hover { transform: translateY(-2px); border-color: var(--purple); box-shadow: 0 14px 34px -14px rgba(139,92,246,.7); }
.ms-action-tile:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.ms-action-ico { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.ms-action-title { font-weight: 800; color: var(--ink); font-size: 15px; }
.ms-action-sub { font-size: 12px; color: var(--ink-dim); }
.rel-remove { grid-column: 1 / -1; justify-self: end; background: none; border: none; color: var(--ink-faint); font-size: 12px; cursor: pointer; padding: 4px 2px; }
.rel-remove:hover { color: #fb7185; text-decoration: underline; }
@media (max-width: 760px) {
  .rel-header-inner { flex-direction: column; align-items: flex-start; }
  .rel-actions { width: 100%; grid-template-columns: 1fr 1fr; }
  .rel-remove { justify-self: center; }
}
@media (max-width: 480px) {
  .rel-identity { flex-direction: column; text-align: center; align-items: center; }
  .rel-names { align-items: center; }
  .rel-name-them, .rel-name-me { font-size: 30px; }
  .rel-amp { font-size: 23px; }
}

/* ── Blocks (Memories / Timeline) ── */
.ms-block { display: flex; flex-direction: column; gap: 14px; }
.ms-block-head { display: flex; align-items: center; justify-content: space-between; }
.ms-block-head h2 { font-family: Georgia, serif; font-size: 22px; font-weight: 700; margin: 0; color: var(--ink); }
.ms-link-btn { background: none; border: none; color: var(--purple); font-weight: 600; font-size: 14px; cursor: pointer; }
.ms-link-btn:hover { color: var(--ink); }

/* ── Featured story ── */
.ms-featured {
  border-radius: 20px; padding: 26px; cursor: pointer;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(245,185,66,.08)), var(--card);
  border: 1px solid var(--border); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ms-featured:hover { transform: translateY(-2px); border-color: var(--purple); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.ms-featured-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--gold); }
.ms-featured-title { font-family: Georgia, serif; font-size: 30px; font-weight: 700; margin: 8px 0 12px; color: var(--ink); }
.ms-featured-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-dim); font-size: 15px; }
.ms-featured-stats span { display: inline-flex; align-items: center; }
.ms-play-btn { margin-top: 20px; }

.ms-empty {
  text-align: center; padding: 44px 24px; border-radius: 20px;
  background: var(--card); border: 1px dashed var(--border);
}
.ms-empty-emoji { font-size: 40px; }
.ms-empty-title { font-family: Georgia, serif; font-size: 22px; font-weight: 700; margin: 10px 0 6px; color: var(--ink); }
.ms-empty-sub { color: var(--ink-dim); font-size: 15px; }

/* ── Relationship timeline (horizontal scroll) ── */
.ms-timeline { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.ms-timeline::-webkit-scrollbar { height: 8px; }
.ms-timeline::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.ms-tl-card {
  flex: 0 0 auto; width: 180px; scroll-snap-align: start;
  border-radius: 16px; padding: 18px; background: var(--card); border: 1px solid var(--border);
}
.ms-tl-card-emoji { font-size: 30px; }
.ms-tl-card-title { font-weight: 700; color: var(--ink); margin-top: 10px; line-height: 1.3; }
.ms-tl-card-sub { color: var(--ink-dim); font-size: 13px; margin-top: 4px; }
.ms-tl-card-date { color: var(--ink-faint); font-size: 12px; margin-top: 8px; }

/* ── Own-profile relationship chooser ── */
.ms-chooser-sub { color: var(--ink-dim); margin: 2px 0 14px; }
.ms-chooser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.ms-chooser-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 22px 14px; border-radius: 18px; background: var(--card); border: 1px solid var(--border);
  text-decoration: none; transition: transform .16s ease, border-color .16s ease;
}
.ms-chooser-card:hover { transform: translateY(-2px); border-color: var(--purple); }
.ms-chooser-name { font-weight: 700; color: var(--ink); font-size: 14px; }
.ms-chooser-open { color: var(--purple); font-size: 13px; font-weight: 600; }

/* ── Story selector overlay ── */
.ms-selector, .ms-dates {
  max-width: 640px; width: 100%;
  /* Cap it and scroll the body: with a few years of month circles and a row of
     story-type buttons this overlay grew past the viewport, putting its lower
     half out of reach. The heading stays put; only the content moves. */
  display: flex; flex-direction: column; max-height: min(86vh, 760px);
}
.ms-sel-head { flex: 0 0 auto; }
.ms-sel-body {
  overflow-y: auto; min-height: 0; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.ms-sel-body::-webkit-scrollbar { width: 8px; }
.ms-sel-body::-webkit-scrollbar-track { background: transparent; }
.ms-sel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.ms-sel-body::-webkit-scrollbar-thumb:hover { background: var(--purple); }
.ms-sel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.ms-sel-head h2 { font-family: Georgia, serif; margin: 0; font-size: 24px; }
.ms-sel-types { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.ms-type-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(245,185,66,.06)), var(--bg-2);
  border: 1px solid var(--border); color: var(--ink); font-weight: 700; font-size: 14px;
  transition: transform .14s ease, border-color .14s ease;
}
.ms-type-btn:hover { transform: translateY(-2px); border-color: var(--purple); }
.ms-type-emoji { font-size: 18px; }
.ms-sel-yearbar { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 18px; }
.ms-year-nav { background: var(--bg-2); border: 1px solid var(--border); color: var(--ink); width: 40px; height: 40px; border-radius: 999px; cursor: pointer; font-size: 18px; }
.ms-year-nav:hover { border-color: var(--purple); }
.ms-year-label { font-family: Georgia, serif; font-size: 26px; font-weight: 700; min-width: 90px; text-align: center; }
.ms-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ms-month-circle {
  aspect-ratio: 1; border-radius: 999px; border: 1px solid var(--border); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(139,92,246,.35), var(--bg-2));
  color: var(--ink); font-weight: 700; transition: transform .14s ease, box-shadow .14s ease;
}
.ms-month-circle:hover { transform: scale(1.06); box-shadow: 0 8px 24px rgba(139,92,246,.4); }
.ms-month-abbr { font-size: 15px; }
.ms-month-count { font-size: 11px; color: var(--ink-dim); font-weight: 600; }
.ms-month-circle.is-empty { background: var(--bg-1); border-style: dashed; color: var(--ink-faint); cursor: default; opacity: .5; }
.ms-month-circle.is-empty:hover { transform: none; box-shadow: none; }
.ms-sel-hint, .ms-sel-empty { color: var(--ink-dim); font-size: 13px; text-align: center; margin-top: 16px; }

/* ── Important dates manager ── */
.ms-dates-body { max-height: 60vh; overflow-y: auto; }
.ms-dates-list { display: flex; flex-direction: column; gap: 10px; }
.ms-date-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--border); }
.ms-date-cover { width: 64px; height: 44px; border-radius: 10px; background-size: cover; background-position: center; flex: 0 0 auto; }
.ms-date-emoji { width: 44px; height: 44px; display: grid; place-items: center; font-size: 24px; border-radius: 12px; background: var(--card); flex: 0 0 auto; }
.ms-date-main { flex: 1; min-width: 0; }
.ms-date-title { font-weight: 700; color: var(--ink); }
.ms-date-sub { color: var(--ink-dim); font-size: 13px; margin-top: 2px; }
.ms-date-actions { display: flex; gap: 6px; }
.ms-icon-btn { background: none; border: 1px solid var(--border); color: var(--ink-dim); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; }
.ms-icon-btn:hover { color: var(--ink); border-color: var(--purple); }
.ms-dates-empty { color: var(--ink-dim); text-align: center; padding: 30px 10px; line-height: 1.6; }
.ms-dates-foot { margin-top: 16px; text-align: right; }
.ms-date-form { display: flex; flex-direction: column; gap: 14px; }
.ms-preset-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-preset { padding: 7px 12px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--border); color: var(--ink-dim); font-size: 13px; cursor: pointer; }
.ms-preset:hover { color: var(--ink); border-color: var(--purple); }
.ms-form-grid { display: grid; grid-template-columns: 90px 1fr 160px; gap: 12px; }
.ms-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.ms-field em { color: var(--ink-faint); font-style: normal; }
.ms-field input, .ms-field textarea {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px;
  color: var(--ink); font-size: 14px; font-family: inherit; width: 100%;
}
.ms-field input:focus, .ms-field textarea:focus { outline: none; border-color: var(--purple); }
.ms-form-cover { height: 140px; border-radius: 12px; background-size: cover; background-position: center; }
.ms-form-err { color: #fb7185; font-size: 13px; min-height: 18px; }
.ms-form-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Loading state + toast ── */
/* Above the story player (z 4000) so the "Creating your video…" progress shows
   when Share is tapped from inside a playing story. */
.ms-loading { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; background: rgba(13,11,18,.9); backdrop-filter: blur(6px); }
.ms-loading-inner { text-align: center; }
.ms-loading-heart { font-size: 56px; animation: ms-beat 1s ease-in-out infinite; }
.ms-loading-msg { margin-top: 14px; color: var(--ink); font-family: Georgia, serif; font-size: 20px; }
@keyframes ms-beat { 0%,100% { transform: scale(1); } 25% { transform: scale(1.2); } 40% { transform: scale(1); } }
.ms-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); z-index: 3200; opacity: 0;
  background: var(--card); border: 1px solid var(--border); color: var(--ink); padding: 12px 20px; border-radius: 999px;
  font-size: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.4); transition: opacity .3s ease, transform .3s ease; max-width: 90vw; }
.ms-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ── Cinematic story player ── */
.ms-player { position: fixed; inset: 0; z-index: 4000; background: #0a0810; display: flex; flex-direction: column;
  overflow: hidden; user-select: none; }
.ms-progress { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 6; display: flex; gap: 5px; }
.ms-seg { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.ms-seg i { display: block; height: 100%; width: 0; background: #fff; }
.ms-topbar { position: absolute; top: 26px; left: 16px; right: 16px; z-index: 6; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.ms-topbar-title { color: rgba(255,255,255,.92); font-weight: 700; font-size: 15px; text-shadow: 0 1px 8px rgba(0,0,0,.6); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-topbar-actions { display: flex; gap: 8px; pointer-events: auto; }
.ms-btn { background: rgba(255,255,255,.14); border: none; color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; backdrop-filter: blur(6px); }
.ms-btn:hover { background: rgba(255,255,255,.26); }
.ms-btn-icon { width: 38px; height: 38px; padding: 0; font-size: 16px; }
.ms-stage { position: absolute; inset: 0; display: grid; place-items: center; }
.ms-nav { position: absolute; top: 0; bottom: 0; width: 38%; background: none; border: none; cursor: pointer; z-index: 4; }
.ms-nav-prev { left: 0; } .ms-nav-next { right: 0; }

.ms-scene { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8vh 8vw; color: #fff; }
/* contain, never cover: the whole moment is always visible. The blurred copy
   behind it fills the leftover space so nothing reads as an empty bar. */
.ms-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ms-media-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(34px) brightness(.42) saturate(1.1); transform: scale(1.16);
}
.ms-vignette { position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 30%, transparent 40%, rgba(0,0,0,.55)); }
.ms-fadein { animation: ms-fade .8s ease both; }
.ms-kenburns { animation: ms-kb 5s ease-out both; }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
/* Scales UP TO its fitted size — never past it, so the drift can't crop. */
@keyframes ms-kb { from { transform: scale(.94); } to { transform: scale(1); } }

.ms-title-emoji { font-size: 68px; animation: ms-pop .7s ease both; }
.ms-title-names { color: rgba(255,255,255,.8); font-weight: 600; margin-top: 8px; letter-spacing: .04em; animation: ms-fade .8s .1s both; }
.ms-title-main { font-family: Georgia, serif; font-size: clamp(34px, 7vw, 72px); font-weight: 700; margin: 14px 0 0;
  background: linear-gradient(120deg, var(--gold), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ms-rise .9s .15s both; }
.ms-title-sub { color: rgba(255,255,255,.65); margin-top: 12px; font-size: 18px; animation: ms-fade .8s .35s both; }
.ms-intro-bloom .ms-title-main { animation: ms-bloom 1s .1s both; }
.ms-intro-sweep .ms-title-main { animation: ms-sweep 1s .1s both; }
@keyframes ms-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ms-rise { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ms-bloom { from { transform: scale(.7); opacity: 0; filter: blur(8px); } to { transform: scale(1); opacity: 1; filter: blur(0); } }
@keyframes ms-sweep { from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.ms-stats .ms-stat-lead { animation: ms-pop .7s both; }
.ms-stat-emoji { font-size: 44px; }
.ms-stat-num { font-family: Georgia, serif; font-size: clamp(60px, 16vw, 140px); font-weight: 700; line-height: 1;
  background: linear-gradient(120deg, var(--gold), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-stat-label { font-size: 22px; color: rgba(255,255,255,.85); margin-top: 6px; }
.ms-stat-row { display: flex; gap: 30px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.ms-stat-mini { display: flex; flex-direction: column; opacity: 0; animation: ms-rise .6s both; }
.ms-stat-mini-num { font-family: Georgia, serif; font-size: 40px; font-weight: 700; color: #fff; }
.ms-stat-mini-label { color: rgba(255,255,255,.7); font-size: 14px; }

.ms-scene-kicker { text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--gold); font-weight: 700; margin-bottom: 26px; }
.ms-tl-list, .ms-top, .ms-comments { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; }
.ms-tl-item { display: flex; align-items: center; gap: 14px; font-size: 20px; opacity: 0; animation: ms-rise .6s both; }
.ms-tl-emoji { font-size: 28px; } .ms-tl-title { font-weight: 700; } .ms-tl-date { margin-left: auto; color: rgba(255,255,255,.6); font-size: 15px; }
.ms-top-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; opacity: 0; animation: ms-rise .6s both;
  border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 12px; }
.ms-top-title { font-size: 22px; font-weight: 700; } .ms-top-rating { color: var(--gold); font-size: 20px; white-space: nowrap; }
/* With cover art the rows become posters: taller, no divider, the artwork
   carrying the row instead of a rule under it. */
.ms-top-art .ms-top-item { border-bottom: none; padding-bottom: 0; gap: 18px; }
.ms-top-poster {
  width: 62px; height: 92px; flex: 0 0 auto; border-radius: 10px;
  background: var(--bg-2) center/cover no-repeat;
  box-shadow: 0 10px 26px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12);
}
.ms-top-poster.is-blank { display: grid; place-items: center; font-size: 26px; }
.ms-top-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; text-align: left; }
.ms-top-year { font-size: 14px; color: rgba(255,255,255,.6); }
.ms-top-num { color: rgba(255,255,255,.8); margin-left: 8px; font-size: 16px; }
.ms-quote { margin: 0; opacity: 0; animation: ms-rise .6s both; }
.ms-quote-text { display: block; font-family: Georgia, serif; font-size: 24px; font-style: italic; line-height: 1.4; }
.ms-quote-who { display: block; color: rgba(255,255,255,.6); margin-top: 8px; }

.ms-caption { position: absolute; left: 0; right: 0; bottom: 12%; padding: 0 8vw; text-align: left; animation: ms-rise .7s .1s both; }
.ms-cap-title { font-family: Georgia, serif; font-size: 30px; font-weight: 700; text-shadow: 0 2px 12px rgba(0,0,0,.7); }
.ms-cap-text { font-size: 18px; color: rgba(255,255,255,.92); margin-top: 6px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.ms-cap-date { font-size: 14px; color: rgba(255,255,255,.7); margin-top: 8px; }

.ms-ending .ms-end-mark { font-size: 72px; animation: ms-beat 1.4s ease-in-out infinite; }
.ms-end-msg { font-family: Georgia, serif; font-size: clamp(26px, 5vw, 44px); font-weight: 700; margin-top: 16px; animation: ms-rise .8s both; }
.ms-end-names { color: rgba(255,255,255,.75); margin-top: 14px; font-size: 18px; }
.ms-end-brand { color: rgba(255,255,255,.4); margin-top: 40px; letter-spacing: .1em; font-size: 13px; }

@media (max-width: 640px) {
  .ms-hero { padding: 24px 20px; }
  .ms-hero-names { font-size: 24px; }
  .ms-form-grid { grid-template-columns: 70px 1fr; }
  .ms-form-grid .ms-field:nth-child(3) { grid-column: 1 / -1; }
  .ms-month-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Shared Watchlist — the two-column profile layout, the watchlist panel,
   the "Add Movie" overlay and the movie-detail modal. Same tokens and card
   language as the rest of the site.
   ═══════════════════════════════════════════════════════════════════════ */

/* Desktop: watchlist left, moments feed right. Mobile: watchlist above the
   feed (the Memories banner already sits above both). */
.profile-split { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.profile-split-main { min-width: 0; }
.profile-split-main .feed-list { max-width: 640px; margin: 0; }
.profile-split-side { position: sticky; top: 20px; }
@media (max-width: 900px) {
  .profile-split { grid-template-columns: 1fr; gap: 24px; }
  .profile-split-side { position: static; }
  .profile-split-main .feed-list { margin: 0 auto; }
  /* Stacked, the panel sits ABOVE the feed — a viewport-tall list would push
     the feed entirely off screen, so it gets a shorter window of its own. */
  .wl-panel { max-height: 60vh; }
}

/* ── The panel ── */
.wl-panel {
  border-radius: 20px; padding: 20px;
  background: linear-gradient(170deg, var(--card), var(--bg-1));
  border: 1px solid var(--border);
  /* The panel is sticky, so it must never be taller than the viewport or its
     bottom (and the Add Movie button) is simply unreachable — which is what a
     long list did. Cap it to the visible area and let the LIST scroll inside,
     so the heading and the button stay put. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 40px);
}
.wl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; flex: 0 0 auto; }
.wl-head h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-weight: 700; margin: 0; color: var(--ink); }
.wl-count { font-size: 12px; font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.wl-add-btn { width: 100%; margin-top: 16px; flex: 0 0 auto; }

.wl-list {
  list-style: none; margin: 0; padding: 0 6px 2px 0; display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; min-height: 0; /* min-height:0 is what lets a flex child actually shrink and scroll */
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.wl-list::-webkit-scrollbar { width: 8px; }
.wl-list::-webkit-scrollbar-track { background: transparent; }
.wl-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.wl-list::-webkit-scrollbar-thumb:hover { background: var(--purple); }
.wl-item {
  display: flex; gap: 12px; padding: 12px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--border);
  transition: border-color .15s ease, opacity .15s ease, transform .15s ease;
}
.wl-item:hover { border-color: rgba(139,92,246,.4); }
.wl-item.is-dragging { opacity: .45; transform: scale(.99); }
.wl-item.is-watched { opacity: .62; }
.wl-item.is-watched .wl-title { text-decoration: line-through; text-decoration-color: var(--ink-faint); }
.wl-grip { color: var(--ink-faint); cursor: grab; font-size: 15px; line-height: 1.2; user-select: none; align-self: center; }
.wl-grip:active { cursor: grabbing; }
.wl-art {
  width: 54px; height: 78px; flex-shrink: 0; border-radius: 8px; cursor: pointer;
  background: var(--bg-1) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.wl-main { flex: 1; min-width: 0; }
.wl-title { font-weight: 700; font-size: 15px; color: var(--ink); cursor: pointer; line-height: 1.3; }
.wl-title:hover { color: var(--purple); }
.wl-meta { font-size: 11px; color: var(--ink-faint); margin-top: 3px; }
.wl-comment { font-size: 12px; color: var(--ink-dim); font-style: italic; margin-top: 6px; line-height: 1.45; }

.wl-stars { display: flex; align-items: center; gap: 2px; margin-top: 6px; }
.wl-star { background: none; border: none; padding: 0 1px; cursor: pointer; font-size: 15px; color: var(--ink-faint); line-height: 1; }
.wl-star.is-on { color: var(--gold); }
.wl-star:hover { color: var(--gold); }
.wl-clear { background: none; border: none; cursor: pointer; color: var(--ink-faint); font-size: 11px; margin-left: 4px; }
.wl-clear:hover { color: #fb7185; }

.wl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wl-chip {
  font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--border); color: var(--ink-dim);
}
.wl-chip:hover { color: var(--ink); border-color: var(--purple); }
.wl-chip-go { color: #c4b5fd; }
.wl-chip-danger:hover { color: #fb7185; border-color: rgba(251,113,133,.5); }

.wl-empty { text-align: center; padding: 26px 12px; }
.wl-empty-emoji { font-size: 32px; }
.wl-empty-title { font-weight: 700; color: var(--ink); margin-top: 8px; }
.wl-empty-sub { font-size: 12px; color: var(--ink-dim); margin-top: 6px; line-height: 1.5; }

/* ── "Add Movie" overlay ── */
.wl-add { max-width: 720px; width: 100%; }
.wl-add-search {
  width: 100%; margin-bottom: 16px; padding: 11px 14px; border-radius: 12px;
  background: var(--bg-1); border: 1px solid var(--border); color: var(--ink); font-size: 14px; font-family: inherit;
}
.wl-add-search:focus { outline: none; border-color: var(--purple); }
.wl-add-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 700; color: var(--gold); margin-bottom: 12px; }
.wl-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; max-height: 56vh; overflow-y: auto; }
.wl-add-card { background: none; border: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.wl-add-art {
  position: relative; width: 100%; aspect-ratio: 2/3; border-radius: 12px;
  background: var(--bg-2) center/cover no-repeat; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  transition: transform .15s ease, border-color .15s ease;
}
.wl-add-card:hover .wl-add-art { transform: translateY(-3px); border-color: var(--purple); }
.wl-add-on {
  position: absolute; inset: auto 6px 6px 6px; text-align: center;
  font-size: 10px; font-weight: 800; padding: 4px; border-radius: 999px;
  background: rgba(13,11,18,.8); color: #6ee7b7;
}
.wl-add-name { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.wl-add-year { font-size: 11px; color: var(--ink-faint); }
.wl-add-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-dim); padding: 28px 10px; }

/* ── Movie detail modal (reuses the movie page's own markup) ── */
.movie-modal { max-width: 860px; width: 100%; padding: 0; overflow: hidden; position: relative; }
.movie-modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; background: rgba(13,11,18,.6); }
.movie-modal-body { max-height: 86vh; overflow-y: auto; }
.movie-modal-body .movie-hero { border-radius: 0; }
.movie-modal-body .movie-body { padding-bottom: 28px; }
.movie-modal-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.movie-modal-msg { font-size: 13px; color: #fb7185; }

/* ── "Find it on…" provider picker ── */
.wp-card { max-width: 460px; width: 100%; }
.wp-movie { font-family: Georgia, serif; font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.wp-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.wp-chip {
  padding: 11px 20px; border-radius: 12px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 800; letter-spacing: .01em;
  background: var(--wp-bg); color: var(--wp-fg);
  transition: transform .14s ease, filter .14s ease;
}
.wp-chip:hover { transform: translateY(-2px); filter: brightness(1.08); }
.wp-note { margin-top: 16px; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }

/* ── Watchlist: rating derived from attached movie nights ── */
.wl-derived { font-size: 11px; color: var(--gold); margin-top: 5px; font-weight: 700; }

/* ── Review page: file this night under a watchlist film ── */
#sessionTitleInput.is-locked { border-color: var(--purple); background: rgba(139,92,246,.10); font-weight: 700; }
.sl-suggest, .sl-linked {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px; border-radius: 12px;
  background: rgba(139,92,246,.10); border: 1px solid var(--border);
  font-size: 13px; color: var(--ink-dim);
}
.sl-linked-text strong, .sl-suggest strong { color: var(--ink); }
.sl-yes, .sl-unlink {
  background: none; border: 1px solid var(--border); color: var(--purple);
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.sl-yes:hover, .sl-unlink:hover { color: var(--ink); border-color: var(--purple); }
.sl-list { margin-top: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.sl-list-head { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding: 9px 14px 4px; }
.sl-option {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 14px;
  background: none; border: none; cursor: pointer; text-align: left; color: var(--ink);
}
.sl-option:hover { background: rgba(139,92,246,.14); }
.sl-option-art { width: 26px; height: 38px; border-radius: 5px; flex-shrink: 0; background: var(--bg-1) center/cover no-repeat; }
.sl-option-title { font-size: 13px; font-weight: 700; }
.sl-busy, .sl-err { margin-top: 10px; font-size: 12px; color: var(--ink-dim); }
.sl-err { color: #fb7185; }

/* Three actions now (Watch Together / Share Card / Important Dates) — a 3-up
   row on desktop keeps them one balanced band rather than a 2+1 orphan. */
.rel-actions { grid-template-columns: repeat(3, minmax(132px, 156px)); }
/* Watch Together is the primary act on a contact's profile, so it carries the
   filled treatment while the other two stay secondary. */
.ms-action-tile.ms-action-primary {
  background: linear-gradient(150deg, var(--purple), var(--purple-deep));
  border-color: transparent;
  box-shadow: 0 10px 26px -10px rgba(139, 92, 246, .8);
}
.ms-action-primary .ms-action-title { color: #fff; }
.ms-action-primary .ms-action-sub { color: rgba(255, 255, 255, .78); }
.ms-action-primary:hover { border-color: transparent; filter: brightness(1.06); }
@media (max-width: 900px) { .rel-actions { grid-template-columns: repeat(3, minmax(110px, 1fr)); } }
@media (max-width: 640px) { .rel-actions { grid-template-columns: 1fr 1fr; } .ms-action-primary { grid-column: 1 / -1; } }
.sl-option-seen { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.sl-hint {
  display: block; width: 100%; margin-top: 10px; padding: 9px 14px; border-radius: 12px; cursor: pointer;
  background: rgba(139,92,246,.08); border: 1px dashed var(--border);
  color: var(--ink-dim); font-size: 12.5px; font-weight: 600; text-align: left; font-family: inherit;
}
.sl-hint:hover { color: var(--ink); border-color: var(--purple); }
.sl-option-guess { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--gold); }
.sl-option-guess + .sl-option-seen { margin-left: 8px; }

/* ── "Add to a shared watchlist" contact picker (movie page) ── */
.pc-card { max-width: 460px; width: 100%; display: flex; flex-direction: column; max-height: min(82vh, 640px); }
.pc-movie { font-family: Georgia, serif; font-size: 19px; font-weight: 700; color: var(--ink); margin-bottom: 12px; flex: 0 0 auto; }
.pc-search {
  width: 100%; margin-bottom: 12px; padding: 10px 13px; border-radius: 11px; flex: 0 0 auto;
  background: var(--bg-1); border: 1px solid var(--border); color: var(--ink); font-size: 14px; font-family: inherit;
}
.pc-search:focus { outline: none; border-color: var(--purple); }
.pc-body { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.pc-body::-webkit-scrollbar { width: 8px; }
.pc-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.pc-list { display: flex; flex-direction: column; gap: 8px; }
.pc-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px;
  border-radius: 12px; cursor: pointer; text-align: left;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.pc-row:hover:not(:disabled) { border-color: var(--purple); transform: translateY(-1px); }
.pc-row:disabled, .pc-row.is-on { cursor: default; opacity: .65; }
.pc-name { font-weight: 700; font-size: 14px; }
.pc-state { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--purple); white-space: nowrap; }
.pc-row.is-on .pc-state { color: #6ee7b7; }
.pc-empty { text-align: center; color: var(--ink-dim); padding: 26px 12px; line-height: 1.6; }