/* =========================================================
   Vaparte — design tokens
   Palette (from the brand logo): ink #150A2E · paper #F5F2FA
             signal (magenta) #E4106B · gold (orange) #FC6C18
             live #FF3D6E · line #3A2A63
   Type:     display "Space Grotesk" · body "Inter" · mono "IBM Plex Mono"
   ========================================================= */

:root {
  --ink:        #150A2E;
  --ink-soft:   #1F1140;
  --card:       #241751;
  --line:       #3A2A63;
  --paper:      #F5F2FA;
  --paper-dim:  #B6A9D6;
  --signal:     #E4106B;
  --signal-soft:#FF4F94;
  --live:       #FF3D6E;
  --gold:       #FC6C18;
  --brand-gradient: linear-gradient(135deg, #E4106B 0%, #FC6C18 100%);
  --radius:     18px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; }

:focus-visible { outline: 2px solid var(--signal-soft); outline-offset: 2px; }

.app-shell {
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding-bottom: 76px;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(18,18,26,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: block;
}
.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.brand-word em {
  font-style: normal;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- add-to-home-screen banner ---------- */
.install-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.install-banner img { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.install-banner-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.install-banner-text strong { font-size: 0.82rem; }
.install-banner-text span { font-size: 0.72rem; color: var(--paper-dim); }
.install-banner .btn { padding: 8px 14px; font-size: 0.8rem; flex-shrink: 0; }
#install-dismiss { padding: 8px 10px; }

.search-form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
}
.search-form input {
  flex: 1;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 0.9rem;
}
.search-form input::placeholder { color: var(--paper-dim); }
.search-icon { color: var(--paper-dim); flex-shrink: 0; }

.topbar-actions { display: none; align-items: center; gap: 10px; }
.avatar-link img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }

@media (min-width: 640px) {
  .topbar-actions { display: flex; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.88rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--brand-gradient); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--ink-soft); color: var(--paper); border-color: var(--line); }
.btn-ghost { background: none; color: var(--paper-dim); border-color: var(--line); }
.btn-ghost:hover { color: var(--paper); }
.btn-live { background: var(--brand-gradient); color: #fff; }
.btn-live:hover { filter: brightness(1.08); }

/* ---------- story strip (horizontal scroll menu) ---------- */
.story-strip {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 16px;
  scrollbar-width: none;
}
.story-strip::-webkit-scrollbar { display: none; }

.story-item {
  flex-shrink: 0;
  width: 68px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
}
.story-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, var(--signal), var(--gold));
  display: block;
}
.story-item.is-live .story-ring { background: linear-gradient(135deg, var(--live), var(--gold)); }
.story-item.is-ongoing .story-ring { background: linear-gradient(135deg, var(--gold), var(--signal-soft)); }
.story-ring img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--ink);
}
.status-dot {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.52rem;
  font-family: var(--font-mono);
  padding: 1px 6px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  white-space: nowrap;
}
.status-live { background: var(--live); }
.status-ongoing { background: var(--gold); color: var(--ink); }
.story-label {
  font-size: 0.7rem;
  color: var(--paper-dim);
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- post feed (ticket-stub cards) ---------- */
.post-feed { display: flex; flex-direction: column; gap: 20px; padding: 0 0 20px; }

.ticket-shape {
  position: relative;
  background: var(--card);
  margin: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
}
/* perforated ticket-stub edge running down the right side of each card */
.ticket-shape::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 14px;
  width: 0;
  border-right: 2px dashed var(--line);
  pointer-events: none;
  display: none;
}
@media (min-width: 460px) {
  .ticket-shape::after { display: block; }
}

.post-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.post-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.post-header-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.post-organizer { font-weight: 600; font-size: 0.9rem; }
.post-location { font-size: 0.76rem; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 4px 9px;
  border-radius: 999px;
  flex-shrink: 0;
}
.badge-live { background: var(--brand-gradient); color: #fff; }
.badge-date { background: var(--ink-soft); color: var(--paper-dim); border: 1px solid var(--line); }

.post-media { position: relative; display: block; background: #000; aspect-ratio: 4/5; }
.post-media img, .post-media video { width: 100%; height: 100%; object-fit: cover; }
.play-hint {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  pointer-events: none;
}
.live-overlay {
  position: absolute; top: 10px; left: 10px;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--font-mono); font-size: 0.72rem;
  padding: 4px 10px; border-radius: 999px;
  animation: pulse 1.8s ease-in-out infinite;
}
.live-overlay.small { font-size: 0.6rem; padding: 3px 8px; top: 6px; left: 6px; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

.post-body { padding: 12px 14px 4px; }
.post-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.post-desc { font-size: 0.87rem; color: var(--paper-dim); margin: 0 0 10px; line-height: 1.5; }

.post-meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  color: var(--paper-dim);
}
.chip-price { color: var(--gold); }
.chip-rating { color: var(--gold); }
.chip-seats { color: var(--signal-soft); }

.post-actions { display: flex; gap: 10px; padding: 14px; }
.post-actions .btn { flex: 1; }
.post-actions-secondary { padding-top: 0; }
.post-actions-secondary .btn { flex: 1; }

.btn-video {
  background: var(--ink-soft);
  color: var(--gold);
  border: 1px dashed var(--gold);
}
.btn-video:hover { background: rgba(255,182,72,0.1); }
.ext-hint { opacity: 0.7; font-size: 0.8em; }

/* ---------- panels / forms shared ---------- */
.panel { padding: 20px 14px; border-top: 1px solid var(--line); }
.panel h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 12px; }
.muted { color: var(--paper-dim); font-size: 0.85rem; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: var(--paper-dim); margin-bottom: 12px; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=datetime-local], select, textarea {
  background: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--paper);
  font-size: 0.92rem;
}
textarea { resize: vertical; font-family: var(--font-body); }

.confirm-msg { color: #7CE0A8; font-size: 0.9rem; }
.error-msg { color: var(--live); font-size: 0.9rem; }
.price-preview { font-family: var(--font-mono); font-size: 0.85rem; color: var(--gold); margin: -4px 0 12px; }

.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; margin-bottom: 12px; }
.star-input input { position: absolute; opacity: 0; width: 0; }
.star-input label { font-size: 1.8rem; color: var(--line); cursor: pointer; margin: 0; }
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--gold); }

.review-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.review-item { display: flex; gap: 10px; }
.review-item img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.review-item strong { font-size: 0.85rem; }
.review-stars { color: var(--gold); font-size: 0.8rem; display: block; margin: 2px 0 4px; }
.review-item p { margin: 0; font-size: 0.85rem; color: var(--paper-dim); }

/* ---------- event detail page ---------- */
.event-media { background: #000; }
.event-media img, .event-media video, .live-player { width: 100%; max-height: 70vh; object-fit: cover; display: block; }
.event-info { padding: 16px 14px; border-bottom: 1px solid var(--line); }
.event-organizer-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.event-organizer-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.event-organizer-row div { display: flex; flex-direction: column; font-size: 0.85rem; }
.event-organizer-row span { color: var(--paper-dim); font-size: 0.76rem; }
.avg-rating { margin-left: auto; color: var(--gold); font-family: var(--font-mono); font-size: 0.85rem; }
.event-info h1 { font-family: var(--font-display); font-size: 1.5rem; margin: 4px 0; }
.event-date { color: var(--signal-soft); font-family: var(--font-mono); font-size: 0.82rem; margin: 0 0 10px; }
.event-desc { color: var(--paper-dim); font-size: 0.9rem; line-height: 1.6; margin: 0 0 14px; }

.other-events { border-top: 1px solid var(--line); padding-top: 10px; }
.other-events h2 { font-family: var(--font-display); font-size: 1rem; padding: 10px 14px 0; margin: 0; }

.past-video-player { width: 100%; max-height: 60vh; border-radius: 12px; background: #000; }

/* ---------- search page ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 14px; border-bottom: 1px solid var(--line); }
.filter-bar input[type=text] { flex: 1; min-width: 160px; }
.check-label { flex-direction: row; align-items: center; gap: 6px; margin: 0; }
.result-count { padding: 12px 14px 0; color: var(--paper-dim); font-size: 0.82rem; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; }
.result-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.result-thumb { position: relative; aspect-ratio: 1; background: #000; }
.result-thumb img { width: 100%; height: 100%; object-fit: cover; }
.result-info { padding: 10px; }
.result-info h3 { font-size: 0.88rem; margin: 0 0 4px; font-family: var(--font-display); }
.result-info p { margin: 0; font-size: 0.74rem; color: var(--paper-dim); }
.result-price { color: var(--gold) !important; font-family: var(--font-mono); margin-top: 4px !important; }

/* ---------- account / tickets ---------- */
.account-page, .organizer-page { padding: 18px 14px; }
.account-page h1, .organizer-page h1 { font-family: var(--font-display); font-size: 1.4rem; }
.ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.ticket-card img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.ticket-card-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ticket-card-info strong { font-size: 0.9rem; }
.ticket-card-info span { font-size: 0.74rem; color: var(--paper-dim); }

/* ---------- organizer forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.live-toggle-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.live-toggle-title { flex: 1 1 100%; font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.live-toggle-form input[type=url] { flex: 1; min-width: 160px; }

.past-video-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.past-video-form input[type=url] { flex: 1; min-width: 160px; }
.past-video-form input[type=file] { color: var(--paper-dim); font-size: 0.78rem; max-width: 200px; }
.upload-or { margin: 0; white-space: nowrap; }

/* ---------- auth ---------- */
.auth-page { display: flex; flex-direction: column; align-items: center; padding: 32px 16px; }
.auth-hero {
  width: 100%;
  max-width: 300px;
  margin-bottom: 24px;
  background: var(--paper);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.auth-hero img { width: 100%; height: auto; display: block; }
.auth-form { width: 100%; max-width: 360px; }
.auth-form h1 { font-family: var(--font-display); margin-bottom: 20px; }
.role-choice { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.role-choice legend { font-size: 0.8rem; color: var(--paper-dim); padding: 0 4px; }
.role-choice label { flex-direction: row; align-items: center; gap: 6px; font-size: 0.85rem; margin: 4px 0; }
.auth-switch { font-size: 0.85rem; color: var(--paper-dim); margin-top: 14px; }
.auth-switch a { color: var(--signal-soft); }

/* ---------- empty state ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--paper-dim); grid-column: 1/-1; }
.empty-state h2 { font-family: var(--font-display); color: var(--paper); }

.feed-end-msg { text-align: center; padding: 20px; font-size: 0.8rem; }
#feed-sentinel { height: 1px; }

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px;
  display: flex; justify-content: space-around;
  background: rgba(18,18,26,0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 20;
}
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--paper-dim); font-size: 0.65rem; padding: 4px 14px; }
.bottom-nav a.active { color: var(--signal-soft); }

@media (min-width: 640px) {
  .bottom-nav { display: none; }
  .app-shell { padding-bottom: 0; }
}

/* =========================================================
   Social feature styles (profiles, follow, likes, comments,
   saves, notifications, messages, stories, explore, insights)
   ========================================================= */

/* ---------- icon links (bell, DM) in topbar ---------- */
.icon-link { position: relative; font-size: 1.1rem; text-decoration: none; }
.icon-badge {
  position: absolute; top: -6px; right: -8px;
  background: var(--live); color: #fff;
  font-family: var(--font-mono); font-size: 0.55rem;
  padding: 1px 5px; border-radius: 999px;
  border: 2px solid var(--ink);
}

/* ---------- verified badge ---------- */
.verified-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  margin-left: 3px;
  background: var(--brand-gradient);
  color: #fff;
  border-radius: 50%;
  font-size: 0.62rem;
  vertical-align: middle;
}

/* ---------- tag links (#hashtag / @mention) ---------- */
.tag-link { color: var(--signal-soft); font-weight: 600; }
.tag-link:hover { text-decoration: underline; }

/* ---------- feed tabs (For you / Following) ---------- */
.feed-tabs {
  display: flex;
  gap: 4px;
  padding: 0 14px 12px;
}
.feed-tabs a {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--paper-dim);
  border-bottom: 2px solid var(--line);
}
.feed-tabs a.active { color: var(--paper); border-bottom-color: var(--signal); }

/* ---------- stories bubble strip ---------- */
.story-bubble-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 14px 14px 6px;
  scrollbar-width: none;
}
.story-bubble-strip::-webkit-scrollbar { display: none; }
.story-bubble {
  flex-shrink: 0;
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.story-bubble-ring {
  width: 58px; height: 58px;
  border-radius: 50%;
  padding: 2.5px;
  display: block;
  background: var(--line);
}
.story-bubble.unseen .story-bubble-ring { background: var(--brand-gradient); }
.story-bubble-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); }
.story-bubble-label { font-size: 0.66rem; color: var(--paper-dim); max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- engagement row (event detail page) ---------- */
.engagement-row { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.engagement-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink-soft);
  border: 1px solid var(--line);
  color: var(--paper-dim);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
.engagement-btn.active-like { color: var(--live); border-color: var(--live); }
.engagement-btn.active-save { color: var(--gold); border-color: var(--gold); }
.engagement-btn.report-open { padding: 8px 12px; }

/* ---------- engagement row (feed card, compact) ---------- */
.card-engagement-row { display: flex; gap: 8px; padding: 0 14px 10px; }
.engagement-btn-sm {
  background: none; border: none; color: var(--paper-dim);
  font-size: 0.85rem; display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; padding: 4px 6px;
}
.engagement-btn-sm.active-like { color: var(--live); }
.engagement-btn-sm.save-btn { margin-left: auto; }
.engagement-btn-sm.active-save { color: var(--gold); }

/* ---------- carousel indicator + carousel itself ---------- */
.carousel-indicator {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.9rem; padding: 3px 7px; border-radius: 6px;
}
.carousel { position: relative; overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.25s ease; }
.carousel-slide { min-width: 100%; flex-shrink: 0; background: #000; }
.carousel-slide img, .carousel-slide video { width: 100%; max-height: 70vh; object-fit: cover; display: block; }
.carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); }
.carousel-dot.active { background: #fff; }

/* ---------- tagged people line ---------- */
.tagged-with { font-size: 0.8rem; color: var(--paper-dim); margin: -6px 0 10px; }
.tagged-with a { color: var(--signal-soft); font-weight: 600; }

/* ---------- organizer name link inside event/card ---------- */
.organizer-name-link { color: var(--paper); }

/* ---------- comments ---------- */
.comment-form { display: flex; gap: 8px; margin-bottom: 16px; }
.comment-form input { flex: 1; margin-bottom: 0; }
.comment-list { display: flex; flex-direction: column; gap: 14px; }
.comment-item { display: flex; gap: 10px; }
.comment-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-body p { margin: 0; font-size: 0.87rem; line-height: 1.5; }
.comment-author { font-weight: 600; color: var(--paper); margin-right: 4px; }
.comment-meta { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.comment-meta time { font-size: 0.7rem; color: var(--paper-dim); }
.comment-meta form button { background: none; border: none; color: var(--paper-dim); font-size: 0.7rem; cursor: pointer; padding: 0; }
.comment-meta form button:hover { color: var(--live); }

/* ---------- profile page ---------- */
.profile-page { padding-bottom: 20px; }
.profile-header { display: flex; gap: 16px; padding: 20px 14px; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--line); }
.profile-header-info { flex: 1; min-width: 0; }
.profile-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.profile-name-row h1 { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.profile-username { color: var(--paper-dim); font-size: 0.85rem; margin: 2px 0 8px; }
.profile-bio { font-size: 0.85rem; line-height: 1.5; margin: 0 0 10px; }
.profile-stats { display: flex; gap: 20px; margin-bottom: 12px; }
.profile-stats > div, .profile-stats > a { display: flex; flex-direction: column; font-size: 0.78rem; color: var(--paper-dim); }
.profile-stats strong { font-size: 1rem; color: var(--paper); font-family: var(--font-mono); }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.profile-actions form { display: contents; }
.profile-more { position: relative; }
.profile-more summary { list-style: none; cursor: pointer; }
.profile-more summary::-webkit-details-marker { display: none; }
.profile-more-menu {
  position: absolute; top: 110%; right: 0; z-index: 10;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; display: flex; flex-direction: column; min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.profile-more-menu button, .profile-more-menu form { width: 100%; }
.profile-more-menu button {
  width: 100%; text-align: left; background: none; border: none; color: var(--paper);
  padding: 8px 10px; border-radius: 6px; font-size: 0.85rem; cursor: pointer;
}
.profile-more-menu button:hover { background: var(--ink-soft); }

.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-top: 1px solid var(--line); }
.profile-grid-item { position: relative; aspect-ratio: 1; background: #000; }
.profile-grid-item img { width: 100%; height: 100%; object-fit: cover; }
.grid-media-icon { position: absolute; top: 6px; right: 6px; color: #fff; font-size: 0.8rem; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.grid-live-dot {
  position: absolute; bottom: 6px; left: 6px;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--font-mono); font-size: 0.55rem;
  padding: 2px 6px; border-radius: 999px;
}

/* ---------- followers/following list page ---------- */
.list-page-tabs { display: flex; border-bottom: 1px solid var(--line); }
.list-page-tabs a { flex: 1; text-align: center; padding: 14px; font-size: 0.85rem; font-weight: 600; color: var(--paper-dim); }
.list-page-tabs a.active { color: var(--paper); border-bottom: 2px solid var(--signal); }
.user-list { display: flex; flex-direction: column; }
.user-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.user-list-item img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.user-list-item div { display: flex; flex-direction: column; }
.user-list-item strong { font-size: 0.9rem; }
.user-list-item span { font-size: 0.76rem; color: var(--paper-dim); }

/* ---------- notifications page ---------- */
.page-header-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 0; }
.page-header-row h1 { font-family: var(--font-display); font-size: 1.4rem; margin: 0; }
.notification-list { display: flex; flex-direction: column; }
.notification-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); position: relative; }
.notification-item.unread { background: rgba(228,16,107,0.06); }
.notification-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.notification-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.notification-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.notification-text span { font-size: 0.85rem; line-height: 1.4; }
.notification-text time { font-size: 0.7rem; color: var(--paper-dim); margin-top: 2px; }
.unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); flex-shrink: 0; }

/* ---------- messages inbox ---------- */
.messages-page { padding-bottom: 10px; }
.messages-page h1 { font-family: var(--font-display); font-size: 1.4rem; padding: 16px 14px 0; }
.conversation-list { display: flex; flex-direction: column; }
.conversation-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.conversation-item.unread .conversation-text strong { color: var(--paper); }
.conversation-item img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.conversation-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.conversation-text span { font-size: 0.8rem; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item time { font-size: 0.7rem; color: var(--paper-dim); flex-shrink: 0; }

/* ---------- message thread ---------- */
.thread-page { display: flex; flex-direction: column; height: calc(100vh - 140px); }
.thread-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.thread-back-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.thread-header div { display: flex; flex-direction: column; }
.thread-header span { font-size: 0.76rem; color: var(--paper-dim); }
.thread-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.thread-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 0.88rem; line-height: 1.4; position: relative; }
.thread-bubble.theirs { background: var(--ink-soft); align-self: flex-start; border-bottom-left-radius: 4px; }
.thread-bubble.mine { background: var(--brand-gradient); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.thread-bubble time { display: block; font-size: 0.62rem; opacity: 0.7; margin-top: 4px; }
.thread-compose { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.thread-compose textarea { flex: 1; margin-bottom: 0; resize: none; }
.thread-blocked-msg { text-align: center; padding: 16px; }

/* ---------- story viewer (full screen) ---------- */
.story-viewer { position: fixed; inset: 0; background: #000; z-index: 100; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.story-progress-row { display: flex; gap: 4px; padding: 8px 10px 0; }
.story-progress-track { flex: 1; height: 2.5px; background: rgba(255,255,255,0.3); border-radius: 2px; overflow: hidden; }
.story-progress-fill { height: 100%; width: 0%; background: #fff; }
.story-viewer-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; }
.story-viewer-header img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.story-close { margin-left: auto; color: #fff; font-size: 1.1rem; padding: 6px; }
.story-slides { position: relative; flex: 1; }
.story-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.story-slide img, .story-slide video { width: 100%; height: 100%; object-fit: contain; }
.story-caption { position: absolute; bottom: 20px; left: 14px; right: 14px; color: #fff; font-size: 0.9rem; text-align: center; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.story-tap-zones { position: absolute; inset: 0; display: flex; }
.story-tap-prev, .story-tap-next { flex: 1; background: none; border: none; }

/* ---------- insights ---------- */
.insights-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 14px; }
.insights-summary div { display: flex; flex-direction: column; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; }
.insights-summary strong { font-family: var(--font-mono); font-size: 1.1rem; }
.insights-summary span { font-size: 0.68rem; color: var(--paper-dim); }
.insight-row { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.insight-row img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.insight-row-info { flex: 1; min-width: 0; }
.insight-row-info strong { font-size: 0.88rem; }
.insight-bar-track { height: 5px; background: var(--ink-soft); border-radius: 4px; margin: 6px 0; overflow: hidden; }
.insight-bar-fill { height: 100%; background: var(--brand-gradient); }
.insight-stat-line { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.74rem; color: var(--paper-dim); }

/* ---------- result-engagement badge (explore grid) ---------- */
.result-engagement {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 0.68rem; padding: 2px 6px; border-radius: 999px;
}

/* ---------- story-form / tag inputs on host dashboard ---------- */
.story-form { display: flex; flex-direction: column; gap: 10px; }

/* ---------- report modal (shared) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end; justify-content: center;
}
@media (min-width: 640px) {
  .modal-overlay { align-items: center; }
}
.modal-box {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 20px 16px;
  width: 100%; max-width: 400px;
}
@media (min-width: 640px) { .modal-box { border-radius: 18px; } }
.modal-box h2 { font-family: var(--font-display); margin: 0 0 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }

/* =========================================================
   Admin panel
   ========================================================= */

.admin-summary { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 480px) { .admin-summary { grid-template-columns: repeat(6, 1fr); } }

.admin-nav-panel { display: flex; flex-direction: column; gap: 10px; }
.admin-nav-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ink-soft); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; gap: 10px;
}
.admin-nav-card div { display: flex; flex-direction: column; gap: 2px; }
.admin-nav-card strong { font-size: 0.95rem; }
.admin-nav-badge { position: static; background: var(--live); }

.admin-tabs { margin: 0 -14px; }

.admin-report-list { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.admin-report-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.admin-report-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.admin-report-target { display: block; font-size: 0.9rem; margin-bottom: 6px; color: var(--paper); }
.admin-report-target:hover { color: var(--signal-soft); }
.admin-report-details { font-size: 0.8rem; color: var(--paper-dim); margin: 0 0 10px; }
.admin-report-details a { color: var(--signal-soft); }
.admin-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-report-actions form { display: contents; }
.admin-report-actions .btn { padding: 7px 12px; font-size: 0.78rem; }

.admin-search-bar { gap: 10px; }
.admin-search-bar input[type=text] { flex: 1; min-width: 140px; }

.admin-user-list { display: flex; flex-direction: column; padding: 0 14px; }
.admin-user-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.admin-user-row img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.admin-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-user-info strong { font-size: 0.9rem; }
.admin-user-info span { font-size: 0.76rem; color: var(--paper-dim); }
.admin-user-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-chip-banned { color: var(--live); border-color: var(--live); }
.admin-user-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.admin-user-actions form { width: 100%; }
.admin-user-actions .btn { width: 100%; padding: 6px 10px; font-size: 0.74rem; white-space: nowrap; }

.admin-event-list { padding: 0 14px; }
.admin-event-row form { flex-shrink: 0; }