/* We Outside — Feng Shui theme (Joseph, 2026-10-31): black grounds,
   purple flows, yellow sparks. Black = the dominant ground; purple =
   primary brand (headers, brand marks, surfaces, gradients); yellow =
   sparing accent ONLY (CTAs, On the Line / live indicators, highlights)
   and only ever on dark. Variable names are historical (--amber is now
   the yellow spark, --orange the purple primary) — values carry the
   palette; --yellow/--purple are the semantic aliases going forward. */
:root{
  --bg:#0a0714; --bg2:#130b26; --card:#180f31; --card2:#211547;
  --line:#3d2a6e; --ink:#f7f3ff; --muted:#cfc2f2; --dim:#9d8bd0;
  --amber:#ffd60a; --orange:#8b5cf6; --pink:#c084fc; --green:#7ee08a;
  --yellow:#ffd60a; --purple:#8b5cf6; --violet:#7c3aed;
  --radius:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(120% 60% at 50% 0%,#2a1152 0%,var(--bg) 55%) fixed,var(--bg);
  color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;padding-bottom:48px}
a{color:var(--amber)}
.wrap{max-width:860px;margin:0 auto;padding:0 16px}
header.site{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,7,20,.93);backdrop-filter:blur(6px);z-index:5}
.brand{font-size:1.45rem;font-weight:800;letter-spacing:.2px;text-decoration:none;color:var(--ink)}
.brand span{color:var(--orange)}
nav.main{display:flex;gap:14px;font-size:.95rem;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--muted);font-weight:600}
.hero{padding:28px 0 8px}
.hero h1{font-size:2rem;line-height:1.15;margin:0 0 10px}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p{color:var(--muted);margin:0 0 14px;max-width:56ch}
.demo-badge{display:inline-block;background:#2a1152;color:var(--amber);border:1px solid var(--line);
  padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
h2.section{font-size:1.25rem;margin:30px 0 6px}
h1.section{font-size:1.5rem;margin:30px 0 6px}
p.section-sub{color:var(--muted);margin:0 0 14px;font-size:.95rem}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--yellow);margin-right:7px;box-shadow:0 0 0 4px rgba(255,214,10,.18)}
.cards{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:14px}
.card.narrow{max-width:560px;margin:24px auto}
.cards .card{margin-bottom:0}
.card-top{display:flex;gap:12px;align-items:center}
.avatar{flex:0 0 52px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.1rem;color:#fff;background:linear-gradient(135deg,var(--purple),#5b21b6)}
.avatar.lg{width:84px;height:84px;font-size:1.8rem;flex-basis:84px}
.card h3{margin:0;font-size:1.08rem}
.meta{color:var(--muted);font-size:.88rem}
.window{display:inline-block;margin-top:8px;background:#241245;color:var(--yellow);border:1px solid #4c3487;
  font-size:.8rem;font-weight:700;padding:3px 9px;border-radius:999px}
.profile-status{margin-top:8px}
.status-chip{display:inline-block;background:#241245;color:var(--yellow);border:1px solid #4c3487;
  padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:700}
.presence{display:flex;align-items:center;gap:6px;margin-top:6px;color:#4ade80;font-size:.85rem;font-weight:600}
.presence.seen{color:var(--muted);font-weight:500}
.online-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}
.chip{background:#241245;color:var(--amber);border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;font-size:.83rem;font-weight:600;text-decoration:none}
.intro{margin-top:12px;background:#120a26;border:1px solid var(--line);border-radius:12px;padding:12px}
.play-btn{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#231303;border:0;cursor:pointer;
  font:inherit;font-weight:800;font-size:.9rem;border-radius:999px;padding:8px 16px}
.play-btn:hover{background:#ffe14d}
.wave{display:flex;align-items:center;gap:3px;height:34px;margin:12px 0 4px}
.wave i{flex:1;background:var(--dim);border-radius:2px;height:30%}
.wave i:nth-child(3n){height:65%}.wave i:nth-child(4n){height:95%}.wave i:nth-child(5n){height:50%}.wave i:nth-child(7n){height:80%}
.wave.playing i{background:var(--orange);animation:bounce 0.7s ease-in-out infinite alternate}
.wave.playing i:nth-child(2n){animation-delay:.15s}.wave.playing i:nth-child(3n){animation-delay:.3s}.wave.playing i:nth-child(5n){animation-delay:.45s}
@keyframes bounce{from{transform:scaleY(.45)}to{transform:scaleY(1.15)}}
.transcript{color:var(--muted);font-size:.92rem;margin:8px 0 0;font-style:italic}
.transcript[hidden]{display:none}
.party{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.party h3{margin:0 0 4px}
.rsvp{flex:0 0 auto;background:transparent;border:1px solid var(--amber);color:var(--amber);border-radius:999px;
  padding:7px 14px;font:inherit;font-weight:700;font-size:.85rem;cursor:pointer}
.rsvp.on{background:var(--amber);color:#231303}
.status-banner{background:linear-gradient(90deg,#2a1152,#3b1a73);border:1px solid #4c3487;border-radius:var(--radius);
  padding:14px 16px;margin:18px 0;font-weight:700}
.status-banner small{display:block;font-weight:500;color:var(--muted)}
form{display:grid;gap:12px}
form label{font-weight:700;font-size:.92rem;display:block;margin-bottom:5px}
form input[type=text],form input[type=email],form input[type=password],form input[type=datetime-local],form select,form textarea{
  background:#120a26;border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;padding:11px 12px;width:100%}
form textarea{min-height:84px;resize:vertical}
form fieldset{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0}
form legend{font-weight:700;font-size:.92rem;padding:0 6px}
.checkgroup{display:flex;flex-wrap:wrap;gap:8px 16px}
label.check{display:inline-flex;gap:7px;align-items:center;font-weight:600;margin:0}
label.check input{width:18px;height:18px;accent-color:var(--orange)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
form.mailbox{margin-top:12px}
.btn{background:var(--yellow);color:#171000;border:0;border-radius:999px;padding:12px 20px;
  font:inherit;font-weight:800;cursor:pointer}
.btn.secondary{background:transparent;color:#c4b5fd;border:1px solid var(--purple)}
.btn.small{padding:6px 12px;font-size:.85rem}
.btn.danger{background:#7c2d1e;color:#ffd9d0}
.error{background:#4a1410;border:1px solid #7c2d1e;color:#ffb4a2;border-radius:10px;padding:10px 12px;font-size:.92rem}
.success{background:#17351b;border:1px solid #2c5a33;color:var(--green);border-radius:10px;padding:10px 12px;font-size:.92rem}
pre.post{background:#120a26;border:1px solid var(--line);border-radius:12px;padding:14px;white-space:pre-wrap;
  word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem;color:var(--ink)}
.link-line{font-size:1.05rem;font-weight:700;word-break:break-all;margin-bottom:10px}
.qr{display:flex;gap:16px;align-items:center;margin-top:16px}
.qr-box{flex:0 0 110px;width:110px;height:110px;border-radius:12px;background:
  repeating-conic-gradient(#f7f3ff 0% 25%, #0a0714 0% 50%) 0 0/22px 22px;
  border:8px solid #f7f3ff;display:flex;align-items:center;justify-content:center;color:#0a0714;font-weight:800}
.board-controls{display:flex;gap:14px;flex-wrap:wrap;align-items:end}
.board-controls label{font-weight:700;font-size:.92rem}
.board-controls select{background:#120a26;border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;padding:10px;display:block;margin-top:5px}
.card-actions{display:flex;gap:10px;margin-top:12px}
.card.danger{border-color:#7c2d1e}
.msg.unread{border-color:var(--orange)}
.msg audio{width:100%;margin-top:8px}
.social-row{display:grid;gap:10px;margin:6px 0 12px}
.social-btn{display:flex;justify-content:center;text-decoration:none}
.social-btn.google{background:#ffffff;color:#171000}
.social-btn.apple{background:#000;color:#fff;border:1px solid var(--line)}
.social-btn.facebook{background:#1877f2;color:#fff}
.social-btn.instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.intro-video{width:100%;max-height:430px;border-radius:12px;background:#000;margin-top:10px}
#vid-preview{width:100%;max-height:430px;border-radius:12px;background:#000;margin-bottom:12px}
.intro-list{margin:12px 0 0;padding-left:18px}
.intro-list li{margin-bottom:8px}
.recorder{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
footer.site{margin-top:44px;border-top:1px solid var(--line);padding:18px 16px;color:var(--dim);font-size:.85rem;text-align:center}

/* Temporary stock imagery (see woStock note in index.php) */
.hero-img{width:100%;display:block;margin-top:20px;border-radius:var(--radius);border:1px solid var(--line)}
.vibe-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 6px}
.vibe-strip img{width:100%;height:104px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block}
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.party-cover{width:100%;height:150px;object-fit:cover;border-radius:12px;display:block;margin-bottom:6px}
.stock-note{font-size:.72rem;color:var(--dim);margin-bottom:8px}

/* Ticketmaster promoter concerts */
.promoter-badge{display:inline-block;background:#2a1152;color:var(--amber);border:1px solid var(--line);
  border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:600;vertical-align:middle}
.concert-card .ticket-btn{text-decoration:none}
.badge-postponed{display:inline-block;background:#4a2b00;color:#ffb84d;border:1px solid #7a4d00;
  border-radius:8px;padding:3px 9px;font-size:.78rem;margin:4px 0}

/* ---------- location-first browse + member lock (visitors) ---------- */
.loc-now { font-size: 1.05rem; margin-bottom: 10px; }
/* The hidden attribute must always win: .loc-suggest/.loc-results set
   display:flex below, which otherwise overrides [hidden] and leaves the
   location suggestion box stuck on screen with dead-looking buttons. */
[hidden] { display: none !important; }
.loc-suggest { background: #1d1430; border: 1px solid #8b5cf6; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.loc-results { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 10px; }
.loc-hit { text-align: left; background: #17102a; color: #eee; border: 1px solid #3b2a63; border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.loc-hit:hover { border-color: #8b5cf6; }
.member-locked { filter: grayscale(1); opacity: .62; position: relative; }
.member-locked .avatar { filter: grayscale(1); }
.member-locked .lock-overlay { filter: none; margin-top: 10px; font-weight: 600; }
.lock-cta { color: #ffd60a !important; text-decoration: underline; }
.lock-panel { border: 1px dashed #8b5cf6; border-radius: 10px; padding: 14px; margin-top: 12px; text-align: center; }
section.card.member-locked { filter: none; opacity: 1; }
section.card.member-locked .avatar { filter: grayscale(1); opacity: .62; }

/* ---------- competitor-study features (2026-10-31) ---------- */
.when-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.when-chip{background:#241245;color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:.88rem;font-weight:700;text-decoration:none}
.when-chip.on{background:var(--yellow);color:#171000;border-color:var(--yellow)}
.series-badge{display:inline-block;margin-top:8px;background:#241245;color:var(--pink);border:1px solid var(--line);
  font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:999px}
/* Paid featuring (in-app upgrade only — the site sells nothing):
   yellow is the house sparing accent; a badge always names the tier
   honestly (Featured = member upgrade, Promoted = promoter upgrade). */
.feature-badge{display:inline-block;margin-top:6px;background:var(--yellow);color:#241a02;border:1px solid #a88400;
  font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.01em}
.feature-badge.promoted{background:#8b5cf6;color:#fff;border-color:var(--yellow)}
.feature-note{font-size:.8rem;color:var(--amber);margin:8px 0 0;max-width:46ch}
.attendees{margin-top:8px;color:var(--muted);font-size:.9rem}
.attendees a{color:var(--amber)}
.party-side{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex:0 0 auto}
.guests-pick{font-size:.8rem;color:var(--muted);font-weight:600;display:flex;gap:6px;align-items:center}
.guests-pick select{background:#120a26;border:1px solid var(--line);border-radius:8px;color:var(--ink);font:inherit;padding:4px 6px}
.save-btn{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:999px;
  padding:6px 12px;font:inherit;font-weight:700;font-size:.83rem;cursor:pointer}
.save-btn.on{color:var(--yellow);border-color:var(--yellow)}
.follow-row{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.prompt-line{color:var(--pink);font-size:.9rem;margin:8px 0 0;font-weight:600}

/* ---------- location tool: areas, meetup spots, picker (2026-10-31) ---------- */
.spot-line{margin-top:8px;font-size:.95rem}
.spot-line .meta{color:var(--muted);font-weight:400}
.spot-map{height:170px;border-radius:12px;overflow:hidden;margin-top:8px;background:#17102b;border:1px solid var(--line);z-index:0}
.spot-map .leaflet-container{background:#17102b;font:inherit}
.spot-picker{margin-top:6px}
.spot-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.spot-tab{background:#241245;color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.spot-tab.on{background:#8b5cf6;color:#fff;border-color:#8b5cf6}
.spot-panel{margin-bottom:8px}
.spot-near,.spot-results{display:flex;flex-direction:column;gap:6px}
.spot-hit{text-align:left;background:#17102a;color:#eee;border:1px solid #3b2a63;border-radius:8px;
  padding:8px 10px;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:2px}
.spot-hit:hover{border-color:#8b5cf6}
.spot-hit .meta{color:var(--muted);font-size:.85rem}
.spot-q{width:100%}
.spot-pinmap{height:240px;border-radius:12px;overflow:hidden;background:#17102b;border:1px solid var(--line);z-index:0;margin-bottom:8px}
.spot-selected{background:#1d1430;border:1px solid #8b5cf6;border-radius:10px;padding:9px 12px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.spot-selected .meta{color:var(--muted)}

/* ---------- top-3 round: notifications, threads, check-ins (2026-10-31) ---------- */
.bell{position:relative;text-decoration:none}
.bell-badge{position:absolute;top:-8px;right:-12px;background:var(--yellow);color:#171000;
  border-radius:999px;font-size:.68rem;font-weight:800;padding:1px 6px;line-height:1.5}
.card.notif.unread{border-color:var(--yellow)}
.thread-btn,.checkin-btn{background:transparent;border:1px solid var(--purple);color:#c4b5fd;border-radius:999px;
  padding:6px 12px;font:inherit;font-weight:700;font-size:.83rem;cursor:pointer}
.checkin-btn{border-color:var(--yellow);color:var(--yellow)}
.thread-btn:hover,.checkin-btn:hover{border-color:var(--yellow);color:var(--yellow)}
.thread-panel{margin-top:12px;border-top:1px solid var(--line);padding-top:12px;width:100%}
.thread-msgs{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.thread-msg{background:#120a26;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.thread-msg p{margin:4px 0 0}
.thread-msg audio{width:100%;margin-top:6px}
.thread-msg.announcement{border-color:var(--yellow);background:#241a04}
.host-badge{display:inline-block;background:var(--purple);color:#fff;border-radius:999px;
  padding:0 8px;font-size:.72rem;font-weight:800;vertical-align:1px}
.thread-form{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.thread-form input[type="text"]{flex:1 1 200px;background:#120a26;border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;padding:9px 11px}
.btn.small{padding:8px 14px;font-size:.88rem}
.checked-in-line{margin-top:8px;color:var(--yellow);font-size:.9rem;font-weight:600}
.checkin-card h3{margin:0}
#checkin-bar .loc-results{position:static;margin-top:8px}

/* ---------- sample showcases: blurred SAMPLE strip + featured /
   promoted demos (2026-10-31) — static data (assets/samples.json),
   fictional samples only; yellow SAMPLE badge is deliberately loud
   so a sample can never be mistaken for a real member. ---------- */
.sample-marquee{overflow:hidden;margin:2px 0 8px;border-radius:var(--radius);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sample-track{display:flex;width:max-content;animation:sampleScroll 38s linear infinite}
.sample-track.paused,.sample-marquee:hover .sample-track{animation-play-state:paused}
.sample-group{display:flex;gap:12px;padding-right:12px}
@keyframes sampleScroll{to{transform:translateX(-50%)}}
.sample-card{flex:0 0 132px;width:132px;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px}
.sample-imgwrap{position:relative;display:block;border-radius:10px;overflow:hidden}
.sample-imgwrap img{width:100%;height:132px;object-fit:cover;display:block}
.sample-blur{filter:blur(7px) saturate(1.15);transform:scale(1.07)}
.badge-sample{position:absolute;top:7px;left:7px;background:var(--yellow);color:#171000;
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:2}
.sample-name{font-weight:800;font-size:.98rem;margin-top:6px}
.sample-city{color:var(--muted);font-size:.82rem}
.showcase-featured{display:flex;gap:16px;align-items:stretch;margin:18px 0 6px;
  background:linear-gradient(180deg,var(--card2),var(--card));border:2px solid var(--yellow);
  border-radius:var(--radius);padding:14px;box-shadow:0 0 0 4px rgba(255,214,10,.12)}
.showcase-media{position:relative;flex:0 0 168px;border-radius:12px;overflow:hidden;display:block}
.showcase-media img{width:100%;height:100%;min-height:168px;object-fit:cover;display:block}
.badge-featured{position:absolute;top:7px;right:7px;background:var(--purple);color:#fff;
  border:1px solid var(--yellow);font-size:.68rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 8px;border-radius:999px;z-index:2}
.showcase-media .badge-sample{top:7px;left:7px}
.showcase-body{flex:1;min-width:0}
.showcase-body h2{margin:2px 0 4px;font-size:1.3rem}
.showcase-body p{margin:6px 0;color:var(--ink)}
.showcase-name{font-weight:800;color:var(--amber);margin-bottom:2px}
@media(max-width:560px){.showcase-featured{flex-direction:column}.showcase-media{flex-basis:auto}.showcase-media img{min-height:190px}}
@media (prefers-reduced-motion: reduce){.sample-track{animation:none}}

/* Profile gallery (2026-11-04): dating-site presentation — big
   cover first, grid below, in-page lightbox for the full view. */
.profile-cover{margin:-16px -16px 14px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:#000}
.cover-media{width:100%;max-height:520px;object-fit:cover;display:block}
video.cover-media{object-fit:contain}
.profile-cover img{cursor:zoom-in}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.gallery-cell{border-radius:12px;overflow:hidden;background:#000;aspect-ratio:1}
.gallery-cell img,.gallery-cell video{width:100%;height:100%;object-fit:cover;display:block}
.gallery-cell img{cursor:zoom-in}
.gallery-lightbox{position:fixed;inset:0;background:rgba(5,2,12,.92);display:flex;align-items:center;justify-content:center;z-index:60;cursor:zoom-out}
.gallery-lightbox img{max-width:94vw;max-height:92vh;border-radius:12px;box-shadow:0 12px 48px rgba(0,0,0,.6)}
.card-cover{display:block;margin:-16px -16px 12px;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden;background:#000}
.card-cover img{width:100%;height:190px;object-fit:cover;display:block}
.gallery-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.gallery-list li{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gallery-thumb{width:84px;height:84px;object-fit:cover;border-radius:10px;background:#000}
.gallery-meta{flex:1;min-width:140px}
.gallery-actions{display:flex;gap:6px;flex-wrap:wrap}
.cover-badge{background:var(--yellow);color:#171000;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px}