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

:root {
  --pink: #ff2d6b;
  --pink-hot: #ff5f97;
  --pink-core: #ffe3ec;
  --pink-dim: #cc1a50;
  --pink-dark: #6b0030;
  --pink-glow: rgba(255, 45, 107, 0.55);
  --bg-0: #060002;
  --bg-1: #0a0003;
  --bg-2: #0d0005;
  --bg-3: #120007;
  --bg-4: #1a0010;
  --bg-5: #1f0014;
  --surface: #200010;
  --border: #2a0010;
  --border-dim: #1a0008;
  --text-primary: #f5e6ea;
  --text-secondary: #e8c8d0;
  --text-muted: #cc8899;
  --text-dim: #6b3050;
  --text-faint: #3d1828;
  --green: #22c55e;
  --red: #ef4444;
  --font-mono: 'Share Tech Mono', monospace;
  --font-sans: 'Inter', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(600px 400px at 15% -10%, rgba(255, 45, 107, 0.16), transparent 60%),
    radial-gradient(700px 500px at 90% 110%, rgba(255, 45, 107, 0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── NEON UTILITY: sharp hard core + fast falloff (Mach edge) ── */
.neon-text {
  color: var(--pink-hot);
  text-shadow:
    0 0 2px var(--pink-core),
    0 0 6px var(--pink),
    0 0 16px var(--pink-glow),
    0 0 34px rgba(255, 45, 107, 0.42);
}
.neon-ring { box-shadow: 0 0 3px var(--pink-core), 0 0 10px var(--pink-glow), inset 0 0 0 1px rgba(255, 227, 236, 0.25); }

/* ── AURA: layered halo behind logos ── */
.logo-halo { position: relative; display: inline-flex; line-height: 0; }
.logo-halo::before {
  content: '';
  position: absolute;
  inset: -95%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 95, 151, 0.95) 0%, rgba(255, 45, 107, 0.5) 24%, rgba(255, 45, 107, 0.2) 45%, rgba(255, 45, 107, 0.07) 58%, transparent 68%);
  animation: aura-breathe 3.4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.logo-halo::after {
  content: '';
  position: absolute;
  inset: -16%;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 95, 151, 0.9);
  box-shadow: 0 0 12px rgba(255, 45, 107, 0.9), inset 0 0 8px rgba(255, 95, 151, 0.55);
  animation: ring-pulse 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes aura-breathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}
@keyframes ring-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ── GLITCH: masked slice tears + RGB split ── */
.glitch { position: relative; display: inline-block; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch::before {
  color: var(--pink);
  text-shadow: -2px 0 #00e5ff, 0 0 8px rgba(255, 45, 107, 0.4);
  animation: glitch-t-1 4.2s steps(1) infinite;
}
.glitch::after {
  color: var(--pink-hot);
  text-shadow: 2px 0 #ff0088, 0 0 8px rgba(255, 95, 151, 0.4);
  animation: glitch-t-2 4.2s steps(1) infinite;
}
@keyframes glitch-t-1 {
  0%, 84% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
  85% { clip-path: inset(12% 0 62% 0); opacity: 0.85; transform: translate(-2px, -1px); }
  87% { clip-path: inset(58% 0 14% 0); opacity: 0.85; transform: translate(3px, 1px); }
  89% { clip-path: inset(34% 0 42% 0); opacity: 0.85; transform: translate(-3px, 0); }
  91% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
  100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}
@keyframes glitch-t-2 {
  0%, 85% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
  86% { clip-path: inset(70% 0 8% 0); opacity: 0.85; transform: translate(2px, 1px); }
  88% { clip-path: inset(18% 0 56% 0); opacity: 0.85; transform: translate(-3px, -1px); }
  90% { clip-path: inset(46% 0 28% 0); opacity: 0.85; transform: translate(3px, 0); }
  92% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translate(0); }
  100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}

.wrap { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 0, 2, 0.78);
  backdrop-filter: blur(10px);
  border-bottom: 0.5px solid var(--border-dim);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-logo { width: 42px; height: 42px; border-radius: 12px; filter: drop-shadow(0 0 12px var(--pink-glow)); display: block; }
.logo-halo img { position: relative; }
.nav-word { font-family: var(--font-mono); font-size: 20px; letter-spacing: 6px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: 13px; color: var(--text-muted); letter-spacing: 0.4px; transition: color .15s; }
.nav-link:hover { color: var(--pink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-burger { display: none; background: none; border: none; color: var(--pink); font-size: 26px; cursor: pointer; }

/* ── BUTTONS (UI kit) ── */
.btn-primary {
  background: var(--pink);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 0 3px var(--pink-core), 0 0 12px var(--pink-glow), 0 0 28px rgba(255, 45, 107, 0.35), inset 0 0 0 1px rgba(255, 227, 236, 0.28);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 4px var(--pink-core), 0 0 18px var(--pink-glow), 0 0 40px rgba(255, 45, 107, 0.5), inset 0 0 0 1px rgba(255, 227, 236, 0.4); background: #ff3d76; }

.btn-secondary {
  background: rgba(255, 45, 107, 0.06);
  color: var(--pink-hot);
  border: 1px solid var(--pink);
  border-radius: 24px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-block;
  box-shadow: 0 0 10px rgba(255, 45, 107, 0.22);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-secondary:hover { transform: translateY(-2px); box-shadow: 0 0 16px var(--pink-glow); background: rgba(255, 45, 107, 0.12); }

.btn-ghost {
  background: var(--bg-4);
  color: var(--text-muted);
  border: 0.5px solid var(--border);
  border-radius: 24px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  display: inline-block;
  transition: border-color .15s, color .15s;
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); }

/* ── HERO ── */
.hero { padding: 96px 0 72px; text-align: center; }
.hero-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink-hot);
  border: 1px solid var(--pink-dim);
  background: rgba(255, 45, 107, 0.07);
  padding: 7px 16px;
  border-radius: 24px;
  display: inline-block;
  margin-bottom: 28px;
  box-shadow: 0 0 12px rgba(255, 45, 107, 0.35), inset 0 0 0 1px rgba(255, 227, 236, 0.08);
  text-shadow: 0 0 8px var(--pink-glow);
}
.hero h1 {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin-bottom: 22px;
}
.hero h1 .glow {
  color: var(--pink-hot);
  text-shadow:
    0 0 2px #fff,
    0 0 7px var(--pink),
    0 0 16px var(--pink-glow),
    0 0 40px rgba(255, 45, 107, 0.38);
}
.hero-sub {
  max-width: 620px;
  margin: 0 auto 40px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
}
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 72px; }

/* ── DEVICE MOCKUP ── */
.mock-scene { position: relative; max-width: 380px; margin: 0 auto; }
.mock-glow {
  position: absolute; inset: -40px;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(255, 45, 107, 0.34), rgba(255, 45, 107, 0.08) 50%, transparent 72%);
  filter: blur(1px);
  animation: aura-breathe 4.6s ease-in-out infinite;
  pointer-events: none;
}
.mock {
  position: relative;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 45, 107, 0.12);
}
.mock-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 0.5px solid var(--border-dim); }
.mock-brand { display: flex; align-items: center; gap: 8px; }
.mock-logo { width: 26px; height: 26px; border-radius: 7px; display: block; }
.mock-halo .mock-logo { position: relative; }
.mock-name { font-family: var(--font-mono); font-size: 13px; letter-spacing: 3px; }
.mock-icons { display: flex; gap: 14px; color: var(--text-secondary); font-size: 17px; }
.mock-tabs { display: flex; border-bottom: 1px solid var(--border-dim); background: var(--bg-1); }
.mock-tab { flex: 1; padding: 9px 0 10px; text-align: center; font-size: 9px; color: var(--text-faint); border-bottom: 2px solid transparent; letter-spacing: 1px; text-transform: uppercase; }
.mock-tab i { display: block; font-size: 16px; margin-bottom: 2px; }
.mock-tab.on { color: var(--pink); border-bottom: 2px solid var(--pink); }
.mock-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.msg-row { display: flex; align-items: flex-end; gap: 10px; }
.msg-av {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: var(--pink);
  background: var(--bg-5); border: 1px solid var(--border); flex-shrink: 0;
}
.msg-bubble {
  max-width: 74%;
  padding: 9px 12px; border-radius: 14px; font-size: 12px; line-height: 1.5;
}
.msg-bubble.in { background: var(--bg-4); color: var(--text-secondary); border-bottom-left-radius: 3px; }
.msg-bubble.out { background: var(--pink-dark); color: #ffd0df; border-bottom-right-radius: 3px; }
.msg-meta { font-size: 9px; color: var(--text-dim); margin-top: 4px; text-align: right; }

.call-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-2); border: 0.5px solid var(--border-dim);
  border-radius: 12px; padding: 10px 12px;
}
.call-chip .av { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-5); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--pink); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.call-chip .cc-body { flex: 1; }
.call-chip .cc-name { font-size: 12.5px; font-weight: 500; }
.call-chip .cc-sub { font-size: 10px; color: var(--text-dim); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.call-chip .cc-sub i { color: var(--green); }
.call-chip .cc-btn { color: var(--pink); font-size: 18px; }

.status-row { display: flex; gap: 8px; justify-content: center; }
.status-chip { display: flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 10px; border: 0.5px solid; }
.sc-online { background: #0a2010; color: #86efac; border-color: #14532d; }
.sc-away { background: #1a1200; color: #fcd34d; border-color: #713f12; }

.float-card {
  position: absolute;
  background: var(--bg-2);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 45, 107, 0.12);
  animation: float 5s ease-in-out infinite;
}
.float-card.left { top: 18%; left: -88px; }
.float-card.right { top: 52%; right: -88px; animation-delay: 2.2s; }
.float-ic { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 45, 107, 0.14); color: var(--pink-hot); display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: 0 0 10px var(--pink-glow), inset 0 0 0 1px rgba(255, 227, 236, 0.15); }
.float-num { font-family: var(--font-mono); font-size: 17px; letter-spacing: 2px; color: #fff; }
.float-lbl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── SECTION HEADINGS ── */
.section { padding: 84px 0; }
.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink-hot);
  margin-bottom: 14px;
  text-shadow: 0 0 2px var(--pink-core), 0 0 10px var(--pink-glow);
}
.section h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -1px; margin-bottom: 16px; }
.section-lead { color: var(--text-muted); font-size: 15px; line-height: 1.7; max-width: 640px; }

/* ── FEATURES ── */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.feat-card {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-1));
  border: 0.5px solid var(--border);
  border-radius: 18px;
  padding: 30px 26px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feat-card:hover { transform: translateY(-5px); border-color: var(--pink-dim); box-shadow: 0 16px 44px rgba(255, 45, 107, 0.12), 0 0 0 1px rgba(255, 45, 107, 0.1) inset; }
.feat-ic {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255, 45, 107, 0.12);
  color: var(--pink-hot);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 20px;
  box-shadow: 0 0 3px var(--pink-core), 0 0 14px rgba(255, 45, 107, 0.4), inset 0 0 0 1px rgba(255, 227, 236, 0.14);
}
.feat-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.feat-card p { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.feat-tag { display: inline-block; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; font-family: var(--font-mono); color: var(--pink); margin-top: 18px; }

/* ── SHOWCASE ── */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 48px; }
.show-txt li { list-style: none; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; }
.show-txt i { color: var(--pink-hot); font-size: 18px; margin-top: 2px; text-shadow: 0 0 2px var(--pink-core), 0 0 9px var(--pink-glow); }
.show-txt b { color: var(--text-primary); font-weight: 600; }
.show-txt p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ── STATS ── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.stat {
  text-align: center; padding: 26px 16px;
  background: var(--bg-2); border: 0.5px solid var(--border-dim); border-radius: 16px;
}
.stat-num { font-family: var(--font-mono); font-size: 30px; letter-spacing: 3px; color: var(--pink-hot); text-shadow: 0 0 2px #fff, 0 0 10px var(--pink), 0 0 26px var(--pink-glow); }
.stat-lbl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 2px; margin-top: 8px; }

/* ── CTA BAND ── */
.cta-band {
  border: 0.5px solid var(--border);
  border-radius: 24px;
  padding: 60px 40px;
  text-align: center;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255, 45, 107, 0.16), transparent 70%),
    var(--bg-2);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(255, 45, 107, 0.08);
}
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; letter-spacing: -1px; margin-bottom: 14px; }
.cta-band .section-lead { margin: 0 auto 34px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
.footer { border-top: 0.5px solid var(--border-dim); padding: 48px 0 40px; margin-top: 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.foot-logo { width: 34px; height: 34px; border-radius: 9px; position: relative; display: block; filter: drop-shadow(0 0 10px var(--pink-glow)); }
.foot-word { font-family: var(--font-mono); font-size: 17px; letter-spacing: 4px; }
.foot-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; max-width: 260px; }
.foot-col h4 { font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--pink); font-family: var(--font-mono); margin-bottom: 16px; }
.foot-col a { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; transition: color .15s; }
.foot-col a:hover { color: var(--pink); }
.foot-bottom { margin-top: 36px; padding-top: 20px; border-top: 0.5px solid var(--border-dim); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); }
.foot-bottom a { color: var(--text-dim); }
.foot-bottom a:hover { color: var(--pink); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-1); border-bottom: 0.5px solid var(--border); flex-direction: column; padding: 20px 28px; gap: 18px; align-items: flex-start; }
  .nav-links.open { display: flex; }
  .nav-cta { display: none; }
  .nav-burger { display: block; }
  .feat-grid { grid-template-columns: 1fr; }
  .showcase { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .float-card.left { left: 0; }
  .float-card.right { right: 0; }
  .hero { padding: 64px 0 56px; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; }
  .float-card { display: none; }
}

/* ── REDUCED MOTION (accessibility: keep brain adapters voluntary) ── */
@media (prefers-reduced-motion: reduce) {
  .logo-halo::before, .logo-halo::after,
  .glitch::before, .glitch::after,
  .mock-glow, .float-card { animation: none; }
  .btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover { transform: none; }
}


/* ══════════════════════════════════════════════════════════════
   ZETOP APP SHELL
   ══════════════════════════════════════════════════════════════ */

.app {
  min-height: 100vh;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  border-left: 0.5px solid var(--border-dim);
  border-right: 0.5px solid var(--border-dim);
}

.app-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: rgba(6, 0, 2, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 0.5px solid var(--border-dim);
}
.app-top-left { display: flex; align-items: center; gap: 10px; }
.app-top-title { font-size: 15px; font-weight: 600; }
.app-top-title small { display: block; font-size: 9.5px; color: var(--text-dim); font-weight: 400; letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }
.app-top-icons { display: flex; gap: 16px; color: var(--text-secondary); font-size: 19px; }
.app-top-icons .ti { cursor: pointer; transition: color .15s; }
.app-top-icons .ti:hover { color: var(--pink); }

.app-body { flex: 1; padding: 12px 14px 96px; }
a { cursor: pointer; }

/* ── BOTTOM NAV ──
   Black bar, five icon-only buttons. The centre post button is hot pink on
   black; every other icon is white and dims to grey when not current. */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; z-index: 70;
  background: #000;
  border-top: 0.5px solid rgba(255, 255, 255, .12);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  display: flex; align-items: center;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .6);
}
.tb {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0; border-radius: 12px; text-decoration: none;
}
.tb i { font-size: 23px; color: #fff; transition: color .15s, text-shadow .15s, transform .15s; }
.tb span { display: none; }  /* icon-only, Instagram style */
.tb.on i { color: var(--pink-hot); text-shadow: 0 0 14px var(--pink-glow); }
.tb:active i { transform: scale(.88); }
/* Centre post button: hot pink icon sitting on its own black disc, lifted out
   of the bar the way a compose button should read as the primary action. */
.tb-post i {
  color: var(--pink-hot);
  font-size: 25px;
  width: 44px; height: 44px; line-height: 44px; text-align: center;
  border-radius: 50%;
  background: #000;
  border: 1.5px solid var(--pink-hot);
  box-shadow: 0 0 14px rgba(255, 45, 107, .45);
}
.tb-post.on i { background: var(--pink-hot); color: #000; box-shadow: 0 0 18px rgba(255, 45, 107, .75); }

/* ── TOP TAB BAR ──
   Wordmark left, quick-switch icons centred, page actions right. Sits inside
   .app-top so every page shares one header shape. */
.toptabs {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 22px;
}
.tt {
  text-decoration: none; padding: 4px;
  border-bottom: 2px solid transparent;
}
.tt i { font-size: 21px; color: var(--text-faint); transition: color .15s, text-shadow .15s; }
.tt.on i { color: var(--pink-hot); text-shadow: 0 0 12px var(--pink-glow); }
.tt.on { border-bottom-color: var(--pink-hot); }
.tt:active i { transform: scale(.9); }

/* ── AVATARS (chat) ── */
.av { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--pink); background: var(--bg-5); flex-shrink: 0; position: relative; }
.av-xl { width: 56px; height: 56px; font-size: 18px; border: 2px solid var(--pink); }
.av-lg { width: 44px; height: 44px; font-size: 14px; border: 1.5px solid var(--border); }
.av-md { width: 36px; height: 36px; font-size: 12px; border: 1.5px solid var(--border); }
.av-sm { width: 28px; height: 28px; font-size: 10px; border: 1px solid var(--border); }
.av-online::after { content: ''; width: 10px; height: 10px; background: var(--green); border-radius: 50%; border: 2px solid var(--bg-2); position: absolute; bottom: 0; right: 0; }
.av-away::after { content: ''; width: 10px; height: 10px; background: #fcd34d; border-radius: 50%; border: 2px solid var(--bg-2); position: absolute; bottom: 0; right: 0; }
.av-off::after { content: ''; width: 10px; height: 10px; background: var(--text-dim); border-radius: 50%; border: 2px solid var(--bg-2); position: absolute; bottom: 0; right: 0; }
.av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* ── SEARCH ── */
.search-bar { background: var(--bg-4); border-radius: 20px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 0.5px solid var(--border-dim); color: var(--text-dim); font-size: 12px; }
.search-bar input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13px; font-family: var(--font-sans); }
.search-bar input::placeholder { color: var(--text-dim); }

/* ── STORY ROW ── */
.story-row { display: flex; gap: 14px; overflow-x: auto; padding: 14px 2px; scrollbar-width: none; }
.story-row::-webkit-scrollbar { display: none; }
.story { text-align: center; flex-shrink: 0; width: 62px; cursor: pointer; }
.story-ring {
  width: 58px; height: 58px; border-radius: 50%; padding: 3px; margin: 0 auto 6px;
  background: conic-gradient(var(--pink), var(--pink-dark), var(--pink));
  box-shadow: 0 0 14px rgba(255,45,107,.35);
}
.story-ring > div { width: 100%; height: 100%; border-radius: 50%; background: var(--bg-1); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.story-ring .av { border: none; font-size: 17px; }
.story-name { font-size: 9px; color: var(--text-secondary); }

/* ── SEGMENT / TOGGLE TABS ── */
.seg { display: flex; gap: 6px; background: var(--bg-2); border: 0.5px solid var(--border-dim); border-radius: 20px; padding: 4px; margin: 12px 0; }
.seg button { flex: 1; background: none; border: none; color: var(--text-dim); font-size: 11.5px; font-weight: 500; font-family: var(--font-sans); padding: 7px 0; border-radius: 16px; cursor: pointer; transition: all .15s; }
.seg button.on { background: var(--pink); color: #fff; box-shadow: 0 0 14px rgba(255,45,107,.4); }

/* ── CONTACT / CONVERSATION ROW ── */
.contact-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 0.5px solid var(--border-dim); text-decoration: none; }
.contact-row:last-child { border-bottom: none; }
.cr-body { flex: 1; min-width: 0; overflow: hidden; }
/* min-width:0 lets the name shrink below its content width, otherwise a long
   name or a long single-word message pushes the row wider than the screen. */
.cr-name { font-size: 14px; font-weight: 500; color: var(--text-primary); display: flex; align-items: center; gap: 6px; min-width: 0; }
.cr-name > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* display:block is required — overflow/text-overflow do nothing on an inline
   box, which is what let a long preview stretch the list instead of clipping. */
.cr-sub { display: block; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px; }
.cr-sub .you { color: var(--pink); }
.cr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cr-time { font-size: 9.5px; color: var(--text-faint); }
.cr-unread { background: var(--pink); color: #fff; font-size: 9.5px; font-weight: 700; border-radius: 12px; padding: 1px 7px; box-shadow: 0 0 10px rgba(255,45,107,.5); }
.cr-pin { color: var(--text-faint); font-size: 13px; }

/* ── FAB ── */
.fab {
  position: fixed; right: max(18px, calc(50% - 244px)); bottom: 96px; z-index: 65;
  width: 54px; height: 54px; border-radius: 50%; border: none;
  background: var(--pink); color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 4px var(--pink-core), 0 0 18px var(--pink-glow), 0 10px 26px rgba(0,0,0,.5);
  cursor: pointer; transition: transform .15s;
}
.fab:hover { transform: translateY(-3px) scale(1.04); }

/* ── CHAT ROOM ── */
.chat-wrap { flex: 1; display: flex; flex-direction: column; height: 100vh; max-width: 520px; margin: 0 auto; position: relative; }
.chat-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 20% 0%, rgba(255,45,107,.18), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  transition: background 0.4s;
}
.chat-body {
  position: relative; z-index: 1; flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 6px;
  scroll-behavior: smooth;
}
.day-divider { text-align: center; margin: 14px 0 8px; }
.day-divider span { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-faint); background: var(--bg-2); padding: 4px 14px; border-radius: 14px; border: 0.5px solid var(--border-dim); }
.bub-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.bub-row .av { border: 1px solid var(--border); }
.bub-row.in { justify-content: flex-start; }
.bub-row.out { justify-content: flex-end; }
/* min-width:0 so a single unbroken token cannot widen the row; overflow-wrap
   so an unbroken string wraps instead of forcing the page sideways. */
.bub { max-width: 74%; min-width: 0; padding: 9px 12px; border-radius: 16px; font-size: 13px; line-height: 1.5; word-break: break-word; overflow-wrap: anywhere; }
.bub.in { background: var(--bg-4); color: var(--text-secondary); border-bottom-left-radius: 4px; }
.bub.out { background: linear-gradient(135deg, var(--pink-dark), var(--pink-dim)); color: #ffd6e3; border-bottom-right-radius: 4px; box-shadow: 0 0 18px rgba(255,45,107,.18); }
.bub-meta { font-size: 9px; color: var(--text-dim); margin-top: 4px; text-align: right; }
.bub-meta .ti-checks, .bub-meta .ti-check { font-size: 11px; }
.bub-meta .read, .bub-meta .ti-checks.read { color: var(--pink); text-shadow: 0 0 8px rgba(255,45,107,.95); animation: readGlow 1.8s ease-in-out infinite; }
.bub-meta .ti-check.delivered { color: var(--text-faint); }
@keyframes readGlow { 0%,100% { text-shadow: 0 0 6px rgba(255,45,107,.7); } 50% { text-shadow: 0 0 12px rgba(255,45,107,1); } }

/* presence: viewing / left / typing */
.pres-typing, .pres-viewing { font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pres-typing { color: var(--pink) !important; animation: presPulse 1s infinite; text-shadow: 0 0 10px rgba(255,45,107,.95); }
.pres-viewing { color: var(--green) !important; text-shadow: 0 0 10px rgba(34,197,94,.95); }
.pres-left { color: var(--text-dim) !important; }
.pres-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.pres-typing .pres-dot { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.pres-viewing .pres-dot { background: var(--green); box-shadow: 0 0 8px var(--green); animation: presPulse 1.6s infinite; }
@keyframes presPulse { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* typing indicator */
.typing { display: none; align-items: center; gap: 8px; padding: 2px 0 8px; }
.typing.show { display: flex; }
.typing .typing-av { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-5); color: var(--pink); font-size: 8px; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.typing-bub {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-4); border-radius: 14px; border-bottom-left-radius: 4px;
  padding: 10px 14px;
  border: 0.5px solid rgba(255,45,107,.4); box-shadow: 0 0 14px rgba(255,45,107,.35), inset 0 0 10px rgba(255,45,107,.06);
}
.typing-bub i { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 6px rgba(255,45,107,.95); animation: tdot 1.2s ease-in-out infinite; }
.typing-bub i:nth-child(2) { animation-delay: .18s; }
.typing-bub i:nth-child(3) { animation-delay: .36s; }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-5px); opacity: 1; } }
.typing-txt { font-size: 11px; color: var(--pink); text-shadow: 0 0 8px rgba(255,45,107,.7); animation: presPulse 1.2s infinite; }

/* chat composer */
/* --kb is the keyboard height published by app.js from visualViewport.
   When the keyboard is up we shrink the chat column to the visible area and
   drop the tab-bar clearance, so the input rides above the keys instead of
   the whole page being shoved upward. */
.composer { position: relative; z-index: 2; padding: 10px 12px 92px; display: flex; align-items: flex-end; gap: 8px; transition: padding-bottom .18s ease; }
body.kb-open .composer { padding-bottom: 10px; }
body.kb-open .chat-wrap { height: var(--kb-vh, 100dvh); }
.composer-tools { display: flex; align-items: center; gap: 4px; }
.composer-tools button { background: none; border: none; color: var(--text-secondary); font-size: 21px; cursor: pointer; padding: 4px; }
.composer-tools button:hover { color: var(--pink); }
.chat-input-box { flex: 1; display: flex; align-items: flex-end; background: var(--bg-4); border: 0.5px solid var(--border); border-radius: 22px; padding: 8px 6px 8px 14px; transition: border-color .15s; }
.chat-input-box:focus-within { border-color: var(--pink); box-shadow: 0 0 14px rgba(255,45,107,.25); }
.chat-input-box textarea {
  flex: 1; resize: none; max-height: 110px; background: none; border: none; outline: none;
  color: var(--text-primary); font-size: 14px; font-family: var(--font-sans); line-height: 1.45;
}
.chat-input-box textarea::placeholder { color: var(--text-dim); }
.chat-input-box .in-tools { display: flex; align-items: center; gap: 2px; }
.chat-input-box .in-tools button { background: none; border: none; color: var(--text-dim); font-size: 19px; cursor: pointer; padding: 4px; }
.chat-input-box .in-tools button:hover { color: var(--pink); }
.send-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--pink); color: #fff; font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 3px var(--pink-core), 0 0 14px var(--pink-glow);
  transition: transform .15s;
}
.send-btn:hover { transform: scale(1.06); }

/* chat bg + music panel (popover) */
.pop-panel {
  position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%) translateY(12px);
  width: min(92%, 430px); z-index: 80; background: var(--bg-2); border: 0.5px solid var(--border);
  border-radius: 20px; padding: 18px; opacity: 0; pointer-events: none;
  transition: all .25s; box-shadow: 0 24px 70px rgba(0,0,0,.6), 0 0 40px rgba(255,45,107,.12);
}
.pop-panel.open { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.pop-panel h4 { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-family: var(--font-mono); color: var(--pink); margin-bottom: 12px; }
.bg-opt-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.bg-opt { aspect-ratio: 1; border-radius: 12px; border: 1.5px solid var(--border); cursor: pointer; position: relative; background-size: cover; background-position: center; transition: transform .15s, border-color .15s; }
.bg-opt:hover { transform: scale(1.06); }
.bg-opt.on { border-color: var(--pink); box-shadow: 0 0 14px var(--pink-glow), inset 0 0 0 1.5px var(--pink); }
.bg-opt .tick { position: absolute; bottom: 4px; right: 4px; font-size: 12px; color: #fff; display: none; text-shadow: 0 0 6px #000; }
.bg-opt.on .tick { display: block; }
.bg-url { display: flex; gap: 8px; margin-top: 6px; }
.bg-url input { flex: 1; background: var(--bg-4); border: 0.5px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text-primary); font-size: 12px; outline: none; font-family: var(--font-sans); }
.bg-url input:focus { border-color: var(--pink); }
.bg-upload { display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding: 11px; border: 1.5px dashed var(--border); border-radius: 12px; color: var(--pink); font-size: 12.5px; font-weight: 600; transition: border-color .15s, background .15s; }
.bg-upload:hover { border-color: var(--pink); background: rgba(255,45,107,.06); }
.bg-upload-status { margin-top: 8px; font-size: 11.5px; color: var(--pink); }
.add-user-res { display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto; }
.add-user-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-4); }
.add-user-row .au-av { flex: none; }
.add-user-row .au-av .av-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.add-user-row .au-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); display: flex; flex-direction: column; }
.add-user-row .au-name small { font-size: 10.5px; color: var(--text-faint); font-weight: 500; }
.au-add { border: 0.5px solid var(--border); background: var(--bg-2); color: var(--pink); font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 999px; cursor: pointer; flex: none; }
.au-add:disabled { opacity: .5; }
.member-chip { font-size: 10.5px; color: var(--text-secondary); background: var(--bg-4); border: 0.5px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.bub-name { font-size: 9.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--pink); margin-bottom: 3px; }
.music-now { display: flex; gap: 12px; align-items: center; background: var(--bg-1); border: 0.5px solid var(--border-dim); border-radius: 14px; padding: 12px; }
.music-art { width: 44px; height: 44px; border-radius: 11px; background: linear-gradient(135deg, var(--pink), var(--pink-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; flex-shrink: 0; }
.music-meta { flex: 1; min-width: 0; }
.music-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-sub { font-size: 10px; color: var(--text-dim); }
.music-ctrl { display: flex; gap: 10px; color: var(--text-secondary); font-size: 19px; align-items: center; }
.music-ctrl button { background: none; border: none; color: inherit; font-size: inherit; cursor: pointer; }
.music-ctrl button.play { color: var(--pink); }
.listening { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; color: #86efac; background: #0a2010; border: 0.5px solid #14532d; border-radius: 12px; padding: 2px 9px; margin-top: 10px; }

/* ── FEED ── */
.feed-snap { height: 100vh; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.feed-snap::-webkit-scrollbar { display: none; }
.snap-post { position: relative; scroll-snap-align: start; height: 100dvh; overflow: hidden; background: #000; }
.snap-media, .snap-media video, .snap-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.snap-media video { object-fit: cover; }
.post-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 56px 14px 10px; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.post-user { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 13.5px; font-weight: 600; }
.post-top .av { border-color: var(--pink); }
.post-top .av-sm { width: 44px; height: 44px; min-width: 44px; font-size: 18px; }
.post-follow { margin-left: auto; }
.post-side { position: absolute; right: 8px; bottom: 90px; z-index: 5; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.action-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 24px; cursor: pointer; background: none; border: none; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); }
.action-btn span { font-size: 10px; font-weight: 600; }
.action-btn.liked i { color: var(--pink); animation: pop .3s; }
.action-btn.saved i { color: var(--pink); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.post-caption { position: absolute; left: 0; right: 0; bottom: 62px; z-index: 5; padding: 12px 14px 8px; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); color: #fff; font-size: 12.5px; line-height: 1.5; }
.post-caption b { color: #fff; margin-right: 6px; }
.post-tts { position: absolute; right: 14px; bottom: 100px; z-index: 6; font-size: 10px; color: rgba(255,255,255,.8); }
/* floating hearts — one per double-tap, stack up on repeat taps */
.hearts { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.heart-fly {
  position: absolute; bottom: 36%; width: 40px; height: 40px; pointer-events: none;
  animation: heartUp 1.15s ease-out forwards;
  filter: drop-shadow(0 0 6px rgba(255,45,107,.6));
}
.heart-fly svg { width: 100%; height: 100%; }
@keyframes heartUp {
  0% { opacity: 0; transform: translateY(0) scale(.5); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-230px) scale(1.12); }
}

/* comment sheet — slides UP from the bottom */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  max-height: 74vh; width: min(100%, 520px); margin: 0 auto;
  background: var(--bg-1); border-top: 0.5px solid var(--border);
  border-radius: 22px 22px 0 0;
  transform: translateY(105%); transition: transform .32s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  box-shadow: 0 -20px 60px rgba(0,0,0,.6), 0 0 46px rgba(255,45,107,.1);
}
.sheet.open { transform: translateY(0); }
.sheet-grab { width: 44px; height: 4px; border-radius: 4px; background: var(--border); margin: 8px auto 0; flex-shrink: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; }
.sheet-head h3 { font-size: 13px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--pink); }
.sheet-body { flex: 1; overflow-y: auto; padding: 10px 16px; display: flex; flex-direction: column; gap: 14px; }
.sheet-foot { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 0.5px solid var(--border-dim); display: flex; gap: 8px; align-items: center; }
.sheet-foot input { flex: 1; background: var(--bg-4); border: 0.5px solid var(--border); border-radius: 18px; padding: 9px 12px; color: var(--text-primary); font-size: 12.5px; outline: none; font-family: var(--font-sans); }
.sheet-foot input:focus { border-color: var(--pink); }

/* ── PROFILE ── */
.profile-cover { position: relative; height: 190px; overflow: hidden; }
.profile-cover .cover-img { position: absolute; inset: 0; background-image: url("../img/cover.206703395a44.gif"), linear-gradient(135deg, var(--pink-dark), #3b0018 60%, var(--pink-dim)); background-size: cover, cover; background-position: center, center; }
.profile-cover .cover-edit { position: absolute; right: 12px; bottom: 10px; }
.profile-head { display: flex; align-items: flex-end; gap: 16px; padding: 0 16px; margin-top: -42px; position: relative; }
.profile-avatar { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--bg-0); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-5); color: var(--pink); font-size: 30px; font-weight: 700; flex-shrink: 0; box-shadow: 0 0 26px rgba(255,45,107,.3); }
.profile-id { flex: 1; padding-bottom: 6px; }
.profile-id h2 { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.profile-id .handle { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.profile-actions { display: flex; gap: 8px; margin-top: 14px; padding: 0 16px; }
.stats-row { display: flex; gap: 34px; padding: 16px 18px; }
.stat-col { text-align: center; }
.stat-col b { display: block; font-family: var(--font-mono); font-size: 17px; letter-spacing: 1px; color: var(--pink-hot); text-shadow: 0 0 10px var(--pink-glow); }
.stat-col span { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; }
.stat-link { text-decoration: none; color: inherit; display: block; padding: 4px 2px; border-radius: 8px; transition: background .15s; }
.stat-link:active { background: var(--bg-4); }
.bio { padding: 0 18px 6px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* ── people list (followers / following) ── */
.people-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; }
.people-switch { display: flex; border-bottom: 1px solid var(--border-dim); margin: 6px 0 4px; }
.psw { flex: 1; text-align: center; padding: 11px 0 9px; color: var(--text-faint); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.psw.on { color: var(--pink); border-bottom: 2px solid var(--pink); }
.people-list { padding: 6px 0 24px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; text-decoration: none; color: inherit; }
.person-row:active { background: var(--bg-4); }
.person-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: 0 0 42px; display: flex; align-items: center; justify-content: center; background: var(--bg-5); color: var(--pink); font-weight: 700; }
.person-id { flex: 1; min-width: 0; }
.person-name { display: block; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-handle { display: block; color: var(--text-dim); font-size: 11px; }

/* ── story viewer ── */
.story-feed { position: fixed; inset: 0; z-index: 200; background: #000; overflow: hidden; touch-action: none; }
.story-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); font-size: 13px; }
.story-empty .ti { font-size: 40px; color: var(--pink); opacity: .6; }
.story-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.18); z-index: 4; }
.story-bar > i { display: block; height: 100%; width: 0; background: #fff; }
.story-top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; padding: 14px 14px 16px; display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(0,0,0,.6), transparent); }
.story-back { background: rgba(0,0,0,.4); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.story-who { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 12.5px; font-weight: 600; }
.story-who em { font-style: normal; opacity: .6; font-weight: 400; }
.story-av { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-5); color: var(--pink); font-size: 11px; font-weight: 700; }
.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; background: #000; }
.story-track { position: absolute; left: 14px; right: 14px; bottom: 26px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 20px; background: rgba(0,0,0,.45); color: #fff; font-size: 12px; }
.story-cap { position: absolute; left: 14px; right: 14px; bottom: 74px; z-index: 4; color: #fff; font-size: 12.5px; text-shadow: 0 1px 5px rgba(0,0,0,.8); }

.follow-btn.following { background: var(--bg-5); color: var(--text-secondary); }
.bio a { color: var(--pink); }
.mutuals { padding: 0 18px; font-size: 11px; color: var(--text-dim); }

.profile-tabs { display: flex; border-bottom: 1px solid var(--border-dim); margin-top: 16px; }
.ptab { flex: 1; text-align: center; padding: 12px 0 10px; color: var(--text-faint); font-size: 18px; border-bottom: 2px solid transparent; cursor: pointer; }
.ptab.on { color: var(--pink); border-bottom: 2px solid var(--pink); }
.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
.ptile { aspect-ratio: 1; border-radius: 4px; overflow: hidden; position: relative; cursor: pointer; background: var(--bg-2); }
.ptile img, .ptile video { width: 100%; height: 100%; object-fit: cover; }
.ptile .ptile-ic { position: absolute; top: 6px; right: 6px; font-size: 14px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.ptile .ptile-ic.liked { color: var(--pink); }
.placeholder-box { display: flex; align-items: center; justify-content: center; min-height: 200px; color: var(--text-dim); font-size: 12px; text-align: center; padding: 30px; }
.placeholder-box i { font-size: 40px; color: var(--text-faint); display: block; margin-bottom: 12px; }

/* ── SETTINGS ── */
.set-group { margin-bottom: 20px; }
.set-group > h4 { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-family: var(--font-mono); color: var(--pink); margin-bottom: 10px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 0.5px solid var(--border-dim); text-decoration: none; color: inherit; }
.set-row:last-child { border-bottom: none; }
.set-row .set-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(255,45,107,.1); color: var(--pink); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.set-row .set-body { flex: 1; min-width: 0; }
.set-row .set-name { font-size: 13.5px; font-weight: 500; }
.set-row .set-sub { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.set-row .set-chev { color: var(--text-faint); font-size: 16px; }
.set-row.danger .set-ic { background: rgba(239,68,68,.12); color: var(--red); }
.set-row.danger .set-name { color: var(--red); }

/* manage-posts card */
.mp-row { cursor: default; }
.mp-thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: rgba(255,45,107,.14); color: var(--pink); font-size: 20px; }
.mp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mp-del { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(239,68,68,.4); background: rgba(239,68,68,.12); color: var(--red); font-size: 16px; cursor: pointer; margin-left: auto; display: flex; align-items: center; justify-content: center; transition: transform .1s, background .15s; }
.mp-del:hover { background: rgba(239,68,68,.28); }
.mp-del:active { transform: scale(.9); }
.mp-foot { padding: 10px 16px 14px; font-size: 11px; color: var(--text-dim); }
.mp-going { opacity: .45; pointer-events: none; }

.set-card { background: var(--bg-2); border: 0.5px solid var(--border-dim); border-radius: 18px; padding: 6px 14px; margin-bottom: 18px; }
.form-field { margin-bottom: 12px; }
.form-field label { display: block; font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.input-field { background: var(--bg-4); border: 0.5px solid var(--border); border-radius: 12px; padding: 11px 14px; color: var(--text-primary); font-size: 13.5px; font-family: var(--font-sans); width: 100%; outline: none; }
.input-field:focus { border-color: var(--pink); box-shadow: 0 0 14px rgba(255,45,107,.22); }
.btn-block { width: 100%; text-align: center; }

/* report status */
.report-status { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bg-2); border: 0.5px solid var(--border-dim); border-radius: 14px; margin-bottom: 10px; }
.report-status .rs-ic { font-size: 20px; }
.report-status.ok .rs-ic { color: var(--green); }
.report-status.pend .rs-ic { color: #fcd34d; }
.report-status.den .rs-ic { color: var(--red); }
.report-status b { font-size: 12.5px; display: block; }
.report-status span { font-size: 11px; color: var(--text-dim); }

/* switch */
.sw { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
.sw input { opacity: 0; width: 44px; height: 26px; position: absolute; cursor: pointer; }
.sw i { position: absolute; inset: 0; background: var(--bg-4); border: 0.5px solid var(--border); border-radius: 20px; transition: all .2s; pointer-events: none; }
.sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-dim); transition: all .2s; }
.sw input:checked + i { background: rgba(255,45,107,.25); border-color: var(--pink); box-shadow: 0 0 12px rgba(255,45,107,.4); }
.sw input:checked + i::after { left: 21px; background: var(--pink); box-shadow: 0 0 8px var(--pink-glow); }

/* modal */
.modal-bg { position: fixed; inset: 0; z-index: 85; background: rgba(0,0,0,.6); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-bg.open { display: flex; }
.modal-card { width: 100%; max-width: 380px; background: var(--bg-2); border: 0.5px solid var(--border); border-radius: 20px; padding: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.7), 0 0 50px rgba(255,45,107,.1); }
.modal-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.modal-card p { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* numbers page */
.numbers-hero { text-align: center; padding: 90px 24px; }
.numbers-hero .dial { font-size: 64px; color: var(--text-faint); margin-bottom: 18px; }
.numbers-hero h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.numbers-hero p { font-size: 13px; color: var(--text-dim); max-width: 320px; margin: 0 auto; line-height: 1.7; }
.badge { box-shadow: 0 0 10px rgba(255,45,107,.4); }

/* toast */
.toast { position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); z-index: 100; background: var(--bg-3); border: 0.5px solid var(--pink-dim); color: var(--text-primary); font-size: 12px; padding: 10px 18px; border-radius: 20px; opacity: 0; pointer-events: none; transition: all .25s; box-shadow: 0 0 20px rgba(255,45,107,.3); }
.toast.show { opacity: 1; bottom: 140px; }

/* media tweaks */
@media (max-width: 720px) {
  .app, .chat-wrap { border-left: none; border-right: none; max-width: none; }
  .fab { right: 18px; }
}

/* ── POST COMPOSER / MUSIC PICKER ── */
.post-domain { display: flex; gap: 8px; margin-bottom: 14px; }
.post-domain button { flex: 1; background: var(--bg-4); border: 0.5px solid var(--border); color: var(--text-dim); font-size: 11.5px; font-weight: 500; font-family: var(--font-sans); padding: 9px 0; border-radius: 14px; cursor: pointer; transition: all .15s; }
.post-domain button.on, .post-domain button:hover { border-color: var(--pink); color: var(--pink); box-shadow: 0 0 12px rgba(255,45,107,.25); }
.track-list { max-height: 210px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.track-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 0.5px solid var(--border-dim); background: var(--bg-1); cursor: pointer; transition: all .15s; }
.track-item:hover { border-color: var(--pink); }
.track-item.on { border-color: var(--pink); box-shadow: 0 0 12px rgba(255,45,107,.25); }
.track-art { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, var(--pink), var(--pink-dark)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 17px; flex-shrink: 0; }
.track-meta { flex: 1; min-width: 0; }
.track-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { font-size: 10.5px; color: var(--text-dim); }
.track-dur { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
.track-manage { text-align: center; font-size: 10.5px; color: var(--text-dim); padding: 8px 0 2px; }
.track-manage a { color: var(--pink); }
.post-preview { height: 130px; border-radius: 14px; background: linear-gradient(135deg, #1a0010, #060002); border: 0.5px dashed var(--pink-dim); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); gap: 8px; margin-bottom: 14px; cursor: pointer; }
.post-preview i { font-size: 30px; color: var(--pink); }
.post-preview span { font-size: 11.5px; }
.feed-fab { position: fixed; right: max(16px, calc(50% - 244px)); bottom: 92px; z-index: 65; }
@media (max-width: 720px) { .feed-fab { right: 14px; } }

/* global helpers */
.hide { display: none; }

.cover-opt input:checked + img { border-color: var(--pink); box-shadow: 0 0 10px var(--pink-glow); }

/* ── real chat extras ── */
.chat-body { scrollbar-width: thin; }
.chat-empty { text-align:center; color:var(--text-dim); font-size:13px; padding:60px 24px; }
.cr-time { font-size:10px; color:var(--text-faint); font-family:var(--font-mono); margin-left:8px; margin-top:2px; }
.cr-unread { min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:var(--pink); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-left:8px; flex-shrink:0; box-shadow:0 0 10px rgba(255,45,107,.6); }
.contact-row { align-items:center; }
.contact-row .cr-body .cr-sub.has-last { color:var(--text-secondary); }

/* chatter chat empty + call overlay */
.call-overlay { position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; background:rgba(2,0,5,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.call-overlay.open { display:flex; }
.call-card { text-align:center; width:min(360px,88vw); padding:34px 24px 26px; border-radius:28px; background:linear-gradient(180deg,#18000e,#060002); border:0.5px solid var(--pink-dim); box-shadow:0 0 60px rgba(255,45,107,.25); margin-bottom:110px; }
.call-ring-wrap { display:flex; justify-content:center; }
.call-name { font-size:21px; font-weight:700; margin-top:18px; color:var(--text-primary); }
.call-state { font-size:12.5px; color:var(--text-dim); margin-top:6px; }
.call-time { font-size:11px; font-family:var(--font-mono); color:var(--text-faint); margin-top:6px; height:16px; }
.call-actions { position:absolute; bottom:26px; bottom:calc(26px + env(safe-area-inset-bottom)); left:0; right:0; display:flex; justify-content:center; align-items:flex-end; gap:12px; margin-top:0; padding:0 12px; z-index:6; }
.call-btn { width:70px; height:70px; border-radius:50%; border:0.5px solid var(--border); background:var(--bg-4); color:var(--text-secondary); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:9.5px; font-family:var(--font-sans); cursor:pointer; transition:all .15s; }
.call-btn i { font-size:22px; }
.call-btn:active { transform:scale(.93); }
.call-accept { background:var(--green); color:#fff; border-color:transparent; box-shadow:0 0 22px rgba(34,197,94,.55); }
.call-hangup { background:#d32349; color:#fff; border-color:transparent; box-shadow:0 0 22px rgba(211,35,73,.55); }
.call-btn:disabled { opacity:.45; cursor:default; }
.call-banner { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:130; display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:20px; background:linear-gradient(180deg,#200014,#080003); border:0.5px solid var(--pink); box-shadow:0 10px 40px rgba(0,0,0,.7); animation:ringIn .35s ease; max-width:calc(100vw - 24px); }
.call-banner .ring-meta { display:flex; flex-direction:column; flex:1; min-width:0; }
.call-banner .ring-meta b { font-size:13.5px; }
.call-banner .ring-meta small { color:var(--pink); font-size:11px; gap:4px; display:flex; align-items:center; animation:blinkP 1.2s infinite; }
.call-banner .btn-primary { font-size:12px; padding:8px 14px; border-radius:12px; }
.call-banner .btn-ghost { font-size:12px; padding:8px 12px; border-radius:12px; background:transparent; border:0.5px solid var(--border); color:var(--text-secondary); }
@keyframes ringIn { from { opacity:0; transform:translate(-50%,-18px);} to { opacity:1; transform:translate(-50%,0);} }
@keyframes blinkP { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.av-xl { width:86px; height:86px; font-size:30px; border-radius:28px; background:linear-gradient(135deg,var(--pink),var(--pink-dark)) !important; }
.ring-pulse { animation:ringPulse 1.4s ease-in-out infinite; }
@keyframes ringPulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,45,107,.5);} 50% { box-shadow:0 0 0 14px rgba(255,45,107,0);} }

.cam-btn, #callSwitch { display: none; }

.call-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; z-index: 0; }
.call-self { position: absolute; top: 16px; right: 16px; width: 104px; height: 140px; border-radius: 16px; object-fit: cover; display: none; background: var(--bg-5); border: 2px solid rgba(255,255,255,.22); z-index: 3; }
.call-overlay.video { padding: 0; }
.call-overlay.video .call-video { display: block; }
.call-overlay.video .call-card { position: absolute; top: 0; left: 0; right: 0; width: 100%; padding: 16px 16px 12px; text-align: center; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.call-overlay.video .call-ring-wrap { display: none; }
.call-overlay.video .call-name { margin-top: 0; font-size: 18px; }
.call-overlay.video .call-state { margin-top: 3px; }
.call-overlay.video .call-time { margin-top: 2px; }
.call-overlay.video .call-btn { width: 62px; height: 62px; }
.call-overlay.video .cam-btn, .call-overlay.video #callSwitch { display: flex; }
.call-overlay.video .call-self { display: block; }
.call-btn.off { opacity: .5; border-color: var(--pink); color: var(--pink); box-shadow: 0 0 14px rgba(255,45,107,.4); }

.call-fs { display: none; }
.call-overlay.video .call-fs { display: flex; }

.call-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,45,107,.15); border-top-color: var(--pink); animation: ringSp .9s linear infinite; position: absolute; top: 42%; left: 50%; margin: -23px 0 0 -23px; display: none; z-index: 4; }
.call-overlay.video:not(.streaming) .call-spinner { display: block; }
@keyframes ringSp { to { transform: rotate(360deg); } }

.call-overlay.video .call-name,
.call-overlay.video .call-state { text-shadow: 0 1px 12px rgba(0,0,0,.9); }

/* ── SPLASH / LOADING SCREEN ──
   Painted on first frame and removed on window load. The artwork is
   static/img/loading/screen.png; without it the wordmark carries the screen. */
.splash {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  transition: opacity .45s ease;
}
.splash.gone { opacity: 0; pointer-events: none; }
.splash-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: .5;
}
.splash-brand { position: relative; text-align: center; }
.splash-word {
  display: block;
  font-size: 34px; font-weight: 700; letter-spacing: 8px;
  color: #fff; text-shadow: 0 0 22px rgba(255, 45, 107, .55);
}
.splash-bar {
  display: block; width: 132px; height: 2px; margin: 18px auto 0;
  background: rgba(255, 255, 255, .16); overflow: hidden; border-radius: 2px;
}
.splash-bar i {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: var(--pink-hot); box-shadow: 0 0 10px var(--pink-glow);
  animation: splashSlide 1.15s ease-in-out infinite;
}
@keyframes splashSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-bar i { animation: none; width: 100%; }
}

/* ── FEED-SPECIFIC NAV ──
   On the feed the bar was covering the bottom of the post, so it gets a
   shorter, tucked-up, fully opaque black treatment. The icons also move the
   action rail up so nothing the creator posted sits underneath chrome. */
.feed-page .tabbar {
  max-width: 300px;
  bottom: 4px;
  border-radius: 26px;
  border: 0.5px solid rgba(255, 255, 255, .16);
  padding: 3px 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .7);
  opacity: .92;
}
.feed-page .tb { padding: 3px 0; }
.feed-page .tb i { font-size: 18px; }
.feed-page .tb-post i { width: 32px; height: 32px; line-height: 32px; font-size: 20px; }

/* Liked heart: hot red with a black outline so it reads on any frame. */
.feed-page .like-btn.liked i,
.like-btn.liked i {
  color: #ff1f3d !important;
  -webkit-text-stroke: 1.6px #000;
  paint-order: stroke fill;
  text-shadow: 0 0 14px rgba(255, 31, 61, .55);
}

/* ── FEED SEARCH ──
   Floats over the posts and hides while you scroll so it never sits on top of
   what you are watching. */
.feed-search {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: min(92%, 460px); z-index: 55;
  padding: 10px 12px calc(10px + env(safe-area-inset-top));
  transition: opacity .2s ease, transform .2s ease;
}
.feed-search.tucked { opacity: 0; transform: translate(-50%, -14px); pointer-events: none; }
.fs-box {
  display: flex; align-items: center; gap: 8px;
  background: rgba(0, 0, 0, .82);
  border: 0.5px solid rgba(255, 255, 255, .16);
  border-radius: 24px; padding: 8px 12px;
  backdrop-filter: blur(14px);
}
.fs-box > i { color: var(--text-dim); font-size: 17px; }
.fs-box input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text-primary); font-size: 16px; font-family: var(--font-sans);
}
.fs-box input::placeholder { color: var(--text-faint); }
.fs-box button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 0 2px; }
.fs-res {
  margin-top: 8px; max-height: 46vh; overflow-y: auto;
  background: rgba(8, 2, 10, .95);
  border: 0.5px solid var(--border);
  border-radius: 16px; backdrop-filter: blur(14px);
}
.fs-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; text-decoration: none;
  border-bottom: 0.5px solid var(--border-dim);
}
.fs-row:last-child { border-bottom: none; }
.fs-row:active { background: rgba(255, 45, 107, .12); }
.fs-thumb {
  width: 40px; height: 52px; flex: 0 0 auto; border-radius: 8px;
  object-fit: cover; background: var(--bg-4);
}
.fs-thumb-ph { width: 40px; height: 52px; flex: 0 0 auto; border-radius: 8px; background: var(--bg-4); display: flex; align-items: center; justify-content: center; color: var(--pink); }
.fs-body { flex: 1; min-width: 0; }
.fs-cap { font-size: 12.5px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-who { font-size: 10px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-empty { padding: 16px; text-align: center; color: var(--text-dim); font-size: 12px; }

/* ── COMPOSER · COVER STEP ── */
.sc-cover { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sc-cover-stage {
  flex: 1; min-height: 0; position: relative;
  background: #000; display: flex; align-items: center; justify-content: center;
}
.sc-cover-stage video, .sc-cover-stage img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.sc-cover-hint { margin: 0 0 10px; font-size: 11.5px; color: var(--text-dim); text-align: center; }
.sc-cover-btns { display: flex; gap: 10px; margin-bottom: 10px; }
.sc-cover-btns button { flex: 1; justify-content: center; }
.sc-cover-btns .btn-back {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .07);
  border: 0.5px solid var(--border);
  color: var(--text-primary); font-size: 12px; font-family: var(--font-sans);
}
.sc-cover-btns .btn-back:active { background: rgba(255, 45, 107, .18); }

.view-empty { color: var(--pink); font-size: 30px; }
.viewer-full .vw-text { z-index: 2; }
/* The profile grid is pictures only; never let a stray tap start a player. */
.pgrid video { pointer-events: none; }