/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #0d0d0d;
  --surface:   #181818;
  --surface-2: #242424;
  --border:    #2e2e2e;
  --text:      #f0f0f0;
  --text-2:    #888;
  --text-3:    #555;
  --accent:    #e0ff4f;          /* sharp lime accent */
  --accent-2:  #ff6b35;          /* warm coral for secondary moments */
  --error:     #ff4f4f;
  --success:   #4fff8b;
  --radius:    14px;
  --font-head: 'Montserrat', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* ── SCREEN SYSTEM ────────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  overflow-y: auto;
}
.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

/* ── NOISE TEXTURE ────────────────────────────────────────── */
.noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* ── GLOW ORBS ────────────────────────────────────────────── */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(224,255,79,0.07) 0%, transparent 70%);
  top: -120px; left: -80px;
}
.orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,107,53,0.06) 0%, transparent 70%);
  bottom: -60px; right: -60px;
}

/* ── COMMON ───────────────────────────────────────────────── */
.logo    { width: 80px; height: 80px; border-radius: 20px; display: block; margin: 0 auto 16px; }
.logo-sm { width: 32px; height: 32px; border-radius: 8px; }

/* ── SPLASH ───────────────────────────────────────────────── */
#screen-splash { background: var(--bg); }
.splash-inner {
  display: flex; flex-direction: column;
  align-items: center; gap: 28px;
}

/* ── GET STARTED ──────────────────────────────────────────── */
.gs-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  justify-content: space-between;
  height: 100%;
  max-width: 440px; width: 100%;
  padding: 80px 28px 48px;
}
.gs-top { display: flex; flex-direction: column; align-items: flex-start; }
.gs-top .logo { margin: 0 0 32px; }

.gs-headline {
  font-family: var(--font-head);
  font-size: clamp(38px, 9vw, 56px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -1px;
  color: var(--text);
  margin-bottom: 16px;
}
.gs-headline span { color: var(--accent); }

.gs-sub {
  font-size: 16px;
  color: var(--text-2);
  font-weight: 400;
  line-height: 1.5;
}

.gs-actions {
  display: flex; flex-direction: column; gap: 12px;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  padding: 16px 24px;
  background: var(--accent);
  color: #0d0d0d;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition), box-shadow var(--transition);
  letter-spacing: 0.3px;
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(224,255,79,0.2); }
.btn-primary:active { transform: translateY(0); opacity: 0.9; }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-ghost {
  width: 100%;
  padding: 15px 24px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.btn-ghost:hover { border-color: var(--text-3); color: var(--text); }

/* ── AUTH CARD ────────────────────────────────────────────── */
.auth-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  padding: 48px 32px 36px;
  margin: auto;
  display: flex; flex-direction: column;
  align-items: center; gap: 0;
}

.auth-title {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: -0.3px;
}

.back-btn {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  transition: color var(--transition), background var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.back-btn:hover { color: var(--text); background: var(--border); }

/* ── OAUTH BUTTONS ────────────────────────────────────────── */
.oauth-buttons { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-bottom: 32px; }

.btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 15px 20px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.btn-oauth:hover  { background: #2a2a2a; border-color: #3a3a3a; transform: translateY(-1px); }
.btn-oauth:active { transform: translateY(0); }
.btn-oauth:disabled { opacity: 0.5; cursor: not-allowed; }

.oauth-icon { width: 22px; height: 22px; flex-shrink: 0; }

.auth-terms {
  font-size: 13px; color: var(--text-3);
  text-align: center; line-height: 1.6;
  max-width: 300px;
}
.auth-terms .link { color: var(--text-2); text-decoration: none; transition: color var(--transition); }
.auth-terms .link:hover { color: var(--accent); }

/* ── ONBOARDING CARD ──────────────────────────────────────── */
.onboard-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  min-height: 100vh;
  padding: 64px 28px 48px;
  display: flex; flex-direction: column; gap: 24px;
  margin: auto;
}

.step-indicator {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.step {
  flex: 1; height: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  transition: background 0.4s;
}
.step.active { background: var(--accent); }
.step.done   { background: rgba(224,255,79,0.4); }

.onboard-title {
  font-family: var(--font-head);
  font-size: 28px; font-weight: 700;
  letter-spacing: -0.4px; line-height: 1.2;
  color: var(--text);
}
.onboard-sub {
  font-size: 14px; color: var(--text-2);
  line-height: 1.5; margin-top: -12px;
}

/* ── DATE INPUTS ──────────────────────────────────────────── */
.date-group {
  display: flex; gap: 12px;
}
.date-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.date-field--wide { flex: 1.6; }
.date-field label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-3);
}

/* ── INPUTS ───────────────────────────────────────────────── */
.input-dark {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
  -webkit-appearance: none;
  appearance: none;
}
.input-dark::placeholder { color: var(--text-3); }
.input-dark:focus {
  border-color: var(--accent);
  background: #1e1e1e;
}
.input-dark::-webkit-outer-spin-button,
.input-dark::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-dark[type=number] { -moz-appearance: textfield; }

.input-wrapper { position: relative; }
.input-wrapper .input-dark { padding-right: 52px; }
.char-counter {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  font-size: 11px; color: var(--text-3);
  pointer-events: none;
}

/* ── FIELD GROUP ──────────────────────────────────────────── */
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-size: 13px; font-weight: 500; color: var(--text-2);
}

/* ── GENDER BUTTONS ───────────────────────────────────────── */
.gender-row { display: flex; gap: 12px; }
.gender-btn {
  flex: 1; padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}
.gender-btn:hover { border-color: var(--text-3); color: var(--text); }
.gender-btn.selected {
  background: rgba(224,255,79,0.08);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── MESSAGES ─────────────────────────────────────────────── */
.field-error   { font-size: 12px; color: var(--error); margin-top: -4px; }
.field-success { font-size: 13px; color: var(--success); }
.hidden        { display: none !important; }

/* ── UTILITIES ────────────────────────────────────────────── */
.mt-auto { margin-top: auto; }

/* ── APP SHELL ────────────────────────────────────────────── */
#screen-app { padding: 0; align-items: stretch; justify-content: flex-start; }

.app-shell {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ── SIDEBAR — TikTok web style ──────────────────────────── */
.app-sidebar {
  flex-shrink: 0;
  width: 240px;
  height: 100vh;
  background: var(--bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0 12px 24px;
  overflow: hidden;
  transition: width var(--transition);
  z-index: 50;
}

/* Logo block */
.sidebar-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 12px 16px;
  flex-shrink: 0;
}
.sidebar-logo-img {
  width: 36px; height: 36px; border-radius: 10px;
  flex-shrink: 0;
}
.sidebar-wordmark {
  font-family: var(--font-head);
  font-size: 20px; font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
}

/* Nav list */
.sidebar-nav {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1;
}

/* Each nav item */
.sidebar-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 11px 12px;
  background: none; border: none; border-radius: 10px;
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 16px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.sidebar-item:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.sidebar-item.active {
  color: var(--text);
  font-weight: 700;
}
.sidebar-item.active .sidebar-icon {
  stroke-width: 2.5;
}

/* Icon sizing */
.sidebar-icon {
  width: 26px; height: 26px; flex-shrink: 0;
}
.sidebar-icon-wrap {
  position: relative; flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-label {
  overflow: hidden; white-space: nowrap;
}

/* Notification badge */
.sidebar-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* Upload / plus button */
.sidebar-upload-box {
  width: 32px; height: 32px; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition);
}
.sidebar-upload:hover .sidebar-upload-box {
  border-color: var(--text);
}

/* Sign out button */
.sidebar-signout {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 11px 12px;
  background: none; border: none; border-radius: 10px;
  color: var(--text-3);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  cursor: pointer; text-align: left;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0; margin-top: 8px;
  white-space: nowrap;
}
.sidebar-signout:hover {
  background: rgba(255,79,79,0.08);
  color: var(--error);
}

/* Main content */
.app-main {
  flex: 1;
  overflow: hidden;
  min-width: 0; min-height: 0;
  display: flex;
}

/* Placeholder for non-feed pages */
.page-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; color: var(--text-3);
  font-size: 16px;
}

/* ── RESPONSIVE — narrow sidebar on small screens ─────────── */
@media (max-width: 900px) {
  .app-sidebar { width: 72px; }
  .sidebar-label { display: none; }
  .sidebar-wordmark { display: none; }
  .sidebar-logo { padding: 20px 8px 16px; justify-content: center; }
  .sidebar-item { justify-content: center; padding: 12px 0; }
  .sidebar-signout { justify-content: center; padding: 12px 0; }
  .sidebar-upload { justify-content: center; }
}

@media (max-width: 480px) {
  /* On very small screens move nav to bottom */
  .app-shell { flex-direction: column-reverse; }
  .app-sidebar {
    width: 100%; height: 56px;
    flex-direction: row; border-right: none;
    border-top: 1px solid var(--border);
    padding: 0 8px; align-items: center;
  }
  .sidebar-logo { display: none; }
  .sidebar-nav { flex-direction: row; flex: 1; justify-content: space-around; gap: 0; }
  .sidebar-item { flex-direction: column; gap: 2px; padding: 6px 8px; font-size: 10px; border-radius: 8px; }
  .sidebar-label { display: block; font-size: 10px; }
  .sidebar-upload { flex-direction: column; gap: 2px; padding: 6px 8px; }
  .sidebar-signout { display: none; }
  .app-main { flex: 1; min-height: 0; }
}

/* ── TOAST ────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap;
  z-index: 9999;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  pointer-events: none;
  opacity: 0;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast.error { border-color: var(--error); color: var(--error); }

/* ── LOADING OVERLAY ──────────────────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 9998;
  display: flex; align-items: center; justify-content: center;
}

/* ── SPINNER ──────────────────────────────────────────────── */
.spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ANIMATIONS ───────────────────────────────────────────── */
.animate-pop {
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.animate-up {
  animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }

@keyframes pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .app-shell { max-width: 100%; border: none; }
  .auth-card { padding: 48px 24px 32px; }
}

@media (min-width: 768px) {
  #screen-get-started { background:
    radial-gradient(ellipse at 20% 20%, rgba(224,255,79,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,107,53,0.04) 0%, transparent 50%),
    var(--bg);
  }
}

/* ═══════════════════════════════════════════════════════════
   FEED
   ═══════════════════════════════════════════════════════════ */

/* Feed wraps the entire app-main area */
.feed-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* feed-posts fills the remaining space below the tab bar overlay */
/* The tab bar is position:absolute so doesn't affect layout */

/* Tab bar — overlaid at top */
.feed-tabs {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 100%);
  gap: 32px;
}
.feed-tab {
  background: none; border: none;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  cursor: pointer; padding: 4px 0;
  position: relative;
  transition: color var(--transition);
}
.feed-tab::after {
  content: '';
  position: absolute; bottom: -4px; left: 0; right: 0;
  height: 2px; background: white; border-radius: 999px;
  transform: scaleX(0);
  transition: transform var(--transition);
}
.feed-tab.active { color: white; }
.feed-tab.active::after { transform: scaleX(1); }

.feed-msg-btn {
  position: absolute; right: 16px; top: 12px;
  background: none; border: none;
  color: white; cursor: pointer;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.feed-msg-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--accent); color: #000;
  font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* Scrollable posts list — snap scrolling */
.feed-posts {
  width: 100%;
  flex: 1;             /* fills remaining height of feed-wrap */
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.feed-posts::-webkit-scrollbar { display: none; }

.feed-loading {
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
.feed-empty {
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2); font-size: 16px;
  text-align: center; padding: 32px;
  line-height: 1.6;
}

/* ── POST CARD ───────────────────────────────────────────── */

/* Card is a flex ROW: [media col] [sidebar] */
.post-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  height: 100%;        /* fills exactly one "page" of feed-posts */
  flex-shrink: 0;      /* prevents shrinking inside the scroll container */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: #000;
}

/* ── MEDIA COLUMN ─────────────────────────────────────────── */
.post-media-col {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.post-media { position: absolute; inset: 0; }
.post-img   { width: 100%; height: 100%; object-fit: cover; }
.post-video { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }

/* Mute button */
.post-mute-btn {
  position: absolute; bottom: 180px; left: 12px;
  background: rgba(0,0,0,0.45); border: none; border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
  transition: background var(--transition);
}
.post-mute-btn:hover { background: rgba(0,0,0,0.7); }

/* Play/pause overlay */
.post-play-btn {
  position: absolute; inset: 0; background: rgba(0,0,0,0.2);
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5;
}

/* Bottom gradient — only on media column */
.post-media-col::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.15) 65%, transparent 100%);
  pointer-events: none; z-index: 3;
}

/* ── BOTTOM OVERLAY (inside media col) ───────────────────── */
.post-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 0 14px 28px;
  display: flex; flex-direction: column; gap: 8px;
}

/* ── SIDEBAR — TikTok-style right column ─────────────────── */
.post-actions {
  flex-shrink: 0;
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding: 0 0 40px;
  background: var(--bg);
  border-left: 1px solid rgba(255,255,255,0.06);
  color: white;
}

/* Profile picture */
.post-profile-wrap { position: relative; width: 52px; height: 62px; }
.post-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  overflow: hidden; cursor: pointer;
  transition: transform var(--transition), border-color var(--transition);
}
.post-avatar:hover { transform: scale(1.06); border-color: var(--accent); }
.post-avatar-img   { width: 100%; height: 100%; object-fit: cover; }
.post-avatar-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 20px; color: #000;
}

/* Follow badge */
.post-follow-btn {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--bg);
  background: var(--accent); color: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.post-follow-btn:hover     { transform: translateX(-50%) scale(1.15); }
.post-follow-btn.following { background: var(--text-2); color: white; }
.post-follow-btn:disabled  { opacity: 0.5; }

/* Action buttons (comment, share) */
.post-action-btn {
  background: none; border: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding: 0; color: rgba(255,255,255,0.9);
  transition: transform var(--transition), color var(--transition);
}
.post-action-btn:hover { transform: scale(1.12); color: white; }
.post-action-btn svg   { display: block; }
.post-action-count { font-size: 12px; font-weight: 700; letter-spacing: 0.2px; }
.post-action-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); }


/* ── RATING BAR ──────────────────────────────────────────── */
.post-rating-wrap {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.post-rating-wrap.visible { opacity: 1; transform: translateY(0); }

.rbar { display: flex; flex-direction: column; gap: 6px; width: 100%; }

/* Nudge pill */
.rbar-nudge-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.92);
  color: #000; font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  width: fit-content;
}
.rbar-nudge-pill.visible { opacity: 1; transform: translateY(0); }
.rbar-nudge-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(0,0,0,0.55); flex-shrink: 0;
}

/* Slider row */
.rbar-slider-row {
  display: flex; align-items: center; gap: 10px;
  transition: opacity 0.2s ease;
}
.rbar-slider-row.hidden { display: none; }

.rbar-track-wrap { flex: 1; position: relative; padding-top: 28px; }

/* Bouncing arrow */
.rbar-arrow {
  position: absolute; top: 0; left: 0;
  font-size: 22px; line-height: 1;
  color: rgba(255,255,255,0.75);
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease;
  animation: arrowBounce 0.5s ease-in-out infinite alternate;
}
.rbar-arrow.visible { opacity: 1; }
@keyframes arrowBounce {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-8px); }
}

/* Track */
.rbar-track {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer; touch-action: none;
  margin-bottom: 4px;
}
.rbar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(217,217,217,0.9);
  border-radius: 999px;
  pointer-events: none;
  transition: width 0.05s linear;
}
.rbar-thumb {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  font-size: 22px; line-height: 1;
  transition: left 0.05s linear;
  pointer-events: none;
  user-select: none;
}
.rbar-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,0.4);
  margin-top: 2px;
}

/* Value */
.rbar-value {
  font-family: var(--font-head);
  font-size: 24px; font-weight: 800;
  color: rgba(217,217,217,0.95);
  min-width: 42px; text-align: right;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* "You rated" button */
.rbar-rated-btn {
  position: relative; overflow: hidden;
  background: rgba(0,0,0,0.55);
  border: none; border-radius: 8px;
  padding: 9px 24px;
  color: white; font-size: 14px; font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: opacity 0.2s ease;
}
.rbar-rated-btn.hidden { display: none; }
.rbar-rated-btn:hover { opacity: 0.85; }

/* Shimmer */
.rbar-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: translateX(-100%);
  pointer-events: none;
}
.rbar-shimmer.animate {
  animation: shimmerSlide 0.85s ease-in-out forwards;
}
@keyframes shimmerSlide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

/* Nudge glow on track */
.rbar.nudging .rbar-track {
  box-shadow: 0 0 10px rgba(255,255,255,0.07);
  border-radius: 12px;
}
.rbar.nudging .rbar-fill {
  background: rgba(217,217,217,0.75);
}

/* Falling 10s overlay */
.falling-tens-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 99999;
  overflow: hidden;
}
.falling-ten {
  position: absolute; top: -60px;
  font-family: var(--font-head);
  font-weight: 900;
  color: white;
  animation: fallDown linear forwards;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
@keyframes fallDown {
  0%   { top: -60px;  opacity: 0;   transform: rotate(var(--rot,0deg)) scale(0.4); }
  15%  { opacity: 1;  transform: rotate(var(--rot,0deg)) scale(1); }
  75%  { opacity: 1; }
  100% { top: 110vh;  opacity: 0;   transform: rotate(var(--rot,0deg)) scale(1); }
}

/* Post meta */
.post-meta-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.post-username {
  color: white; font-size: 15px; font-weight: 600;
  cursor: pointer; text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.post-rating-summary {
  font-size: 12px; color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.45);
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
}

/* Caption */
.post-caption {
  font-size: 14px; color: rgba(255,255,255,0.9);
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.caption-more {
  background: none; border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 0 0 0 4px;
}

/* Feed fills app-main but capped at phone width, centered */
#screen-app .app-main {
  padding: 0;
  justify-content: center;
  background: #000;
}

/* Phone-width container wrapping the feed */
.feed-wrap {
  max-width: 420px !important;
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   AUTH MODAL (sign-up prompt over feed)
   ═══════════════════════════════════════════════════════════ */
.auth-modal-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.auth-modal-overlay.visible { opacity: 1; }

.auth-modal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px;
  padding: 32px 28px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transform: translateY(40px);
  transition: transform 0.35s cubic-bezier(0.34, 1.1, 0.64, 1);
  position: relative;
}
.auth-modal-overlay.visible .auth-modal-card { transform: translateY(0); }

.auth-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition);
}
.auth-modal-close:hover { color: var(--text); }

.auth-modal-sub {
  font-size: 14px; color: var(--text-2);
  text-align: center; margin-top: -4px;
}

.auth-modal-card .logo { margin: 0 0 4px; }
.auth-modal-card .auth-title { margin-bottom: 0; }
.auth-modal-card .oauth-buttons { width: 100%; margin-top: 8px; margin-bottom: 0; }

/* Non-guidance posts: no top padding reserved for arrow */
.rbar-track-wrap.no-guidance { padding-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   PROFILE PAGE
   ═══════════════════════════════════════════════════════════ */

.prof-loading {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

.prof-wrap {
  width: 100%; max-width: 640px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: flex; flex-direction: column; gap: 20px;
}

/* ── HEADER ──────────────────────────────────────────────── */
.prof-header {
  display: flex; align-items: center; gap: 32px;
}

/* Avatar */
.prof-avatar-wrap {
  flex-shrink: 0;
  width: 86px; height: 86px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
}
.prof-avatar-img {
  width: 100%; height: 100%; object-fit: cover;
}
.prof-avatar-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: 32px; color: #000;
}

/* Stats */
.prof-stats {
  display: flex; gap: 28px; align-items: center; flex: 1;
}
.prof-stat {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  background: none; border: none; cursor: default;
  padding: 0; color: inherit;
}
.prof-stat-btn { cursor: pointer; }
.prof-stat-btn:hover .prof-stat-num { color: var(--accent); }
.prof-stat-num {
  font-family: var(--font-head);
  font-size: 18px; font-weight: 700;
  color: var(--text);
  transition: color var(--transition);
}
.prof-stat-lbl {
  font-size: 13px; color: var(--text-2); font-weight: 400;
}

/* ── BIO ─────────────────────────────────────────────────── */
.prof-bio-section { display: flex; flex-direction: column; gap: 6px; }
.prof-name-row {
  display: flex; align-items: center; gap: 6px;
}
.prof-username {
  font-size: 16px; font-weight: 700; color: var(--text);
}
.prof-verified { flex-shrink: 0; }
.prof-flag {
  width: 18px; height: 13px; border-radius: 2px;
  object-fit: cover; flex-shrink: 0;
}
.prof-bio {
  font-size: 14px; color: var(--text-2);
  line-height: 1.5; margin: 0;
}
.prof-bio-more {
  background: none; border: none;
  color: var(--text); font-weight: 600;
  cursor: pointer; font-size: 14px;
  padding: 0 0 0 4px;
}

/* ── ACTION BUTTONS ──────────────────────────────────────── */
.prof-actions {
  display: flex; gap: 10px;
}
.prof-btn {
  padding: 8px 20px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
  border: none;
}
.prof-btn:hover  { opacity: 0.85; transform: translateY(-1px); }
.prof-btn:active { transform: translateY(0); }
.prof-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.prof-btn-primary   { background: var(--accent); color: #000; }
.prof-btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.prof-btn-icon {
  width: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border);
}

/* ── TABS ────────────────────────────────────────────────── */
.prof-tabs {
  display: flex;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.prof-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 0;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-3);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.prof-tab:hover  { color: var(--text-2); }
.prof-tab.active { color: var(--text); border-bottom-color: var(--text); }

/* ── POSTS GRID ──────────────────────────────────────────── */
.prof-grid-loading {
  padding: 48px 0; display: flex; justify-content: center;
}

.prof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

.prof-post-tile {
  aspect-ratio: 0.8;
  position: relative; overflow: hidden;
  background: var(--surface-2);
  cursor: pointer; border-radius: 3px;
}
.prof-post-tile:hover .prof-tile-media { transform: scale(1.04); }
.prof-tile-media {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.prof-tile-video-badge {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 4px; padding: 3px 5px;
  display: flex; align-items: center;
}
.prof-add-tile {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1.5px dashed var(--border);
  color: var(--text-3);
  transition: border-color var(--transition), color var(--transition);
}
.prof-add-tile:hover { border-color: var(--text-2); color: var(--text-2); }

.prof-load-more {
  display: block; width: 100%;
  margin-top: 16px; padding: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text-2);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background var(--transition);
}
.prof-load-more:hover { background: var(--border); color: var(--text); }

/* ── GALLERIES GRID ──────────────────────────────────────── */
.prof-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.prof-gallery-tile {
  aspect-ratio: 1; position: relative;
  border-radius: 10px; overflow: hidden;
  background: var(--surface-2);
  cursor: pointer;
}
.prof-gallery-cover {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease;
}
.prof-gallery-tile:hover .prof-gallery-cover { transform: scale(1.04); }
.prof-gallery-cover-empty {
  display: flex; align-items: center; justify-content: center;
}
.prof-gallery-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  padding: 24px 10px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.prof-gallery-name {
  color: white; font-weight: 700; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prof-gallery-count { color: rgba(255,255,255,0.75); font-size: 12px; }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.prof-empty {
  padding: 56px 32px;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  text-align: center;
  color: var(--text-3);
}
.prof-empty h3 { font-size: 18px; font-weight: 700; color: var(--text); }
.prof-empty p  { font-size: 14px; line-height: 1.5; }

/* ── POST VIEWER MODAL ───────────────────────────────────── */
.prof-post-modal-overlay {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0,0,0,0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.prof-post-modal {
  position: relative;
  max-width: 560px; width: 100%;
  max-height: 92vh;
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden;
  background: var(--surface);
}
.prof-post-modal-close {
  position: absolute; top: 10px; right: 10px;
  background: rgba(0,0,0,0.5); border: none;
  color: white; width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}
.prof-post-modal-media {
  width: 100%; max-height: 76vh;
  object-fit: contain; background: #000;
}
.prof-post-modal-caption {
  padding: 12px 16px;
  font-size: 14px; color: var(--text-2); margin: 0;
}

/* ── FOLLOWERS/FOLLOWING MODAL ───────────────────────────── */
.prof-user-list-modal {
  background: var(--surface);
  border-radius: 16px; overflow: hidden;
  width: 100%; max-width: 360px;
  max-height: 70vh;
  display: flex; flex-direction: column;
}
.prof-user-list-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.prof-user-list-header h3 {
  font-size: 16px; font-weight: 700; color: var(--text); margin: 0;
}
.prof-user-list-header button {
  background: none; border: none; color: var(--text-2);
  font-size: 18px; cursor: pointer; padding: 4px;
}
.prof-user-list {
  overflow-y: auto; flex: 1;
}
.prof-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  transition: background var(--transition);
}
.prof-user-row:hover { background: var(--surface-2); }
.prof-user-row-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.prof-user-row-avatar-placeholder {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; color: #000; font-size: 16px;
}
.prof-user-row-name { font-size: 14px; font-weight: 500; color: var(--text); }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .prof-wrap { padding: 20px 16px 40px; }
  .prof-header { gap: 20px; }
  .prof-stats  { gap: 16px; }
  .prof-stat-num { font-size: 15px; }
}

/* Profile back button */
.prof-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none;
  color: var(--text-2); font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  cursor: pointer; padding: 4px 0;
  transition: color var(--transition);
  margin-bottom: -4px;
}
.prof-back-btn:hover { color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   INSTAGRAM-STYLE POST MODAL (from profile grid)
   ═══════════════════════════════════════════════════════════ */

.ipost-card {
  background: var(--surface);
  border-radius: 16px;
  width: 100%; max-width: 520px;
  max-height: 94vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

/* Header */
.ipost-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ipost-avatar-wrap { cursor: pointer; flex-shrink: 0; }
.ipost-avatar {
  width: 38px; height: 38px;
  border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border);
}
.ipost-avatar-placeholder {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: 15px; color: #000;
}
.ipost-header-info {
  flex: 1; display: flex; flex-direction: column; gap: 1px;
}
.ipost-username {
  font-size: 14px; font-weight: 700; color: var(--text);
  cursor: pointer;
}
.ipost-username:hover { color: var(--accent); }
.ipost-time { font-size: 11px; color: var(--text-3); }
.ipost-close {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition);
  flex-shrink: 0;
}
.ipost-close:hover { color: var(--text); }

/* Media */
.ipost-media-wrap {
  background: #000;
  display: flex; align-items: center; justify-content: center;
  max-height: 54vh; overflow: hidden;
  flex-shrink: 0;
}
.ipost-media {
  width: 100%; max-height: 54vh;
  object-fit: contain; display: block;
}

/* Actions row */
.ipost-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 6px;
  flex-shrink: 0;
}
.ipost-action-btn {
  background: none; border: none; color: var(--text-2);
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; padding: 4px;
  transition: color var(--transition), transform var(--transition);
}
.ipost-action-btn:hover { color: var(--text); transform: scale(1.1); }
.ipost-action-count { font-size: 12px; font-weight: 700; }
.ipost-rating-summary {
  margin-left: auto;
  font-size: 12px; color: var(--text-2);
  background: var(--surface-2);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}

/* Caption */
.ipost-caption {
  padding: 4px 14px 6px;
  font-size: 13px; color: var(--text-2); line-height: 1.4;
  flex-shrink: 0;
}
.ipost-caption-user { font-weight: 700; color: var(--text); margin-right: 5px; }

/* Rating bar inside modal */
.ipost-rbar-wrap {
  padding: 6px 14px 16px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}

/* Override rating bar styles for dark modal context */
.ipost-rbar-wrap .rbar-fill    { background: rgba(255,255,255,0.7); }
.ipost-rbar-wrap .rbar-value   { color: var(--text); font-size: 20px; }
.ipost-rbar-wrap .rbar-labels  { color: var(--text-3); }
.ipost-rbar-wrap .rbar-thumb   { font-size: 20px; }

/* Override .prof-post-modal-overlay for ipost — keep centered flex */
.prof-post-modal-overlay:has(.ipost-card) {
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════
   SEARCH / EXPLORE PAGE
   ═══════════════════════════════════════════════════════════ */

.search-wrap {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ── Search bar ──────────────────────────────────────────── */
.search-bar-wrap {
  padding: 14px 16px 10px;
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.search-input-wrap {
  position: relative;
  display: flex; align-items: center;
}
.search-icon {
  position: absolute; left: 12px;
  color: var(--text-3); pointer-events: none;
  flex-shrink: 0;
}
.search-input {
  width: 100%; padding: 10px 40px 10px 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body); font-size: 15px;
  outline: none;
  transition: border-color var(--transition);
}
.search-input::placeholder { color: var(--text-3); }
.search-input:focus { border-color: var(--text-2); }
.search-clear {
  position: absolute; right: 10px;
  background: none; border: none; color: var(--text-3);
  font-size: 14px; cursor: pointer; padding: 4px;
  transition: color var(--transition);
}
.search-clear:hover { color: var(--text); }

/* ── Content area ────────────────────────────────────────── */
.search-content {
  flex: 1; overflow-y: auto;
  min-height: 0;
}

.search-loading {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
}
.search-empty {
  padding: 48px 24px; text-align: center;
  color: var(--text-3); font-size: 15px;
}

/* ── Section headers ─────────────────────────────────────── */
.search-section-divider {
  display: flex; align-items: center;
  padding: 16px 16px 10px;
}
.search-section-title-inline {
  font-size: 14px; font-weight: 700;
  color: var(--text-2);
}
.search-divider {
  height: 1px; background: var(--border);
  margin: 12px 16px;
}

/* ── Posts grid ──────────────────────────────────────────── */
.search-posts-wrap { padding: 0 0 32px; }
.search-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 2px;
}
.search-post-tile {
  aspect-ratio: 1; position: relative;
  overflow: hidden; background: var(--surface-2);
  cursor: pointer;
}
.search-post-tile:hover .search-tile-media { transform: scale(1.04); }
.search-tile-media {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.3s ease; display: block;
}
.search-tile-play {
  position: absolute; bottom: 5px; right: 5px;
  background: rgba(0,0,0,0.5); border-radius: 4px;
  padding: 3px 5px; display: flex; align-items: center;
}
.search-tile-trophy {
  position: absolute; top: 5px; right: 5px;
  background: rgba(0,0,0,0.55); border-radius: 50%;
  padding: 4px; color: #f59e0b;
  display: flex; align-items: center;
}
.search-post-tile--top {
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
}

.search-load-more-wrap {
  padding: 20px; display: flex; justify-content: center;
}

/* ── User list (search results + suggested) ──────────────── */
.search-suggested { padding: 12px 0; }
.search-section-title {
  font-size: 15px; font-weight: 700;
  color: var(--text-2);
  padding: 0 16px 8px; display: block;
}
.search-user-list { display: flex; flex-direction: column; }
.search-user-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; cursor: pointer;
  transition: background var(--transition);
}
.search-user-row:hover { background: var(--surface-2); }
.search-user-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border);
}
.search-user-avatar-ph {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: 17px; color: #000;
}
.search-user-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   COMMENTS BOTTOM SHEET — mirrors Flutter CommentsBottomSheet
   ═══════════════════════════════════════════════════════════ */

.cm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.cm-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  z-index: 0;
  pointer-events: all;
}

/* Panel */
.cm-panel {
  position: relative; z-index: 2;
  pointer-events: all;
  width: 100%; max-width: 480px;
  height: 70vh;
  background: rgba(18,18,18,0.97);
  border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.cm-panel.open { transform: translateY(0); }

/* Handle */
.cm-handle-wrap { padding: 10px 0 4px; display: flex; justify-content: center; flex-shrink: 0; }
.cm-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; }

/* Header */
.cm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 12px; flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.cm-title { font-size: 17px; font-weight: 700; color: white; }
.cm-close-btn {
  background: rgba(255,255,255,0.1); border: none;
  color: white; width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.cm-close-btn:hover { background: rgba(255,255,255,0.2); }

/* Comments list */
.cm-list {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.cm-loading { height: 100px; display: flex; align-items: center; justify-content: center; }
.cm-empty { text-align: center; color: rgba(255,255,255,0.5); font-size: 14px; padding: 40px 20px; }

/* Comment card */
.cm-card {
  padding: 10px 16px;
  transition: background 0.15s;
}
.cm-card:hover { background: rgba(255,255,255,0.03); }
.cm-card-optimistic { opacity: 0.6; }

.cm-card-main {
  display: flex; align-items: flex-start; gap: 10px;
}
.cm-avatar-wrap { flex-shrink: 0; }
.cm-avatar {
  border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.15);
}
.cm-avatar-ph {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; color: #000;
}

/* Body */
.cm-body { flex: 1; min-width: 0; }
.cm-name-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.cm-username {
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9);
  cursor: pointer;
}
.cm-username:hover { color: var(--accent); }
.cm-verified { flex-shrink: 0; }
.cm-text { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.4; margin: 0 0 4px; word-break: break-word; }
.cm-meta { display: flex; align-items: center; gap: 12px; }
.cm-date { font-size: 11px; color: rgba(255,255,255,0.4); }
.cm-reply-link {
  background: none; border: none; color: rgba(255,255,255,0.55);
  font-size: 11px; font-weight: 600; cursor: pointer; padding: 0;
  transition: color var(--transition);
}
.cm-reply-link:hover { color: white; }

/* Actions (like + menu) */
.cm-actions { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.cm-like-btn {
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: rgba(255,255,255,0.5); padding: 2px;
  transition: color var(--transition), transform 0.15s;
}
.cm-like-btn:hover { transform: scale(1.2); }
.cm-like-btn.liked { color: #ff4d4d; }
.cm-like-count { font-size: 11px; font-weight: 600; line-height: 1; }
.cm-menu-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.4); padding: 2px;
  transition: color var(--transition);
}
.cm-menu-btn:hover { color: white; }

/* Popup menu */
.cm-popup-menu {
  position: absolute; right: 0;
  background: #2a2a2a; border: 1px solid var(--border);
  border-radius: 8px; z-index: 10;
  min-width: 110px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.cm-popup-menu button {
  display: block; width: 100%; padding: 10px 14px;
  background: none; border: none; text-align: left;
  color: rgba(255,255,255,0.85); font-size: 13px; cursor: pointer;
}
.cm-popup-menu button:hover { background: rgba(255,255,255,0.07); }

/* Replies */
.cm-replies { padding-left: 42px; }
.cm-reply-card {
  padding: 7px 0 7px 10px;
  border-left: 2px solid rgba(255,255,255,0.08);
  margin-bottom: 2px;
}
.cm-reply-card .cm-text { font-size: 13px; }
.cm-show-more {
  background: none; border: none;
  color: rgba(255,255,255,0.45); font-size: 12px;
  cursor: pointer; padding: 4px 0 6px;
  transition: color var(--transition);
}
.cm-show-more:hover { color: rgba(255,255,255,0.8); }

/* Input bar */
.cm-input-bar {
  flex-shrink: 0; border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,10,0.95);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
}
.cm-reply-hint {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.55);
  margin-bottom: 8px; padding: 0 4px;
}
.cm-reply-hint button {
  background: none; border: none; color: rgba(255,255,255,0.4);
  cursor: pointer; font-size: 13px;
}
.cm-input-row { display: flex; align-items: center; gap: 10px; }
.cm-input-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0;
}
.cm-input-avatar-ph {
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; color: #000; font-size: 14px;
}
.cm-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 24px;
  color: white; font-family: var(--font-body); font-size: 14px;
  padding: 9px 16px; outline: none;
  transition: border-color var(--transition);
}
.cm-input::placeholder { color: rgba(255,255,255,0.35); }
.cm-input:focus { border-color: rgba(255,255,255,0.4); }
.cm-post-btn {
  background: white; color: #000;
  border: none; border-radius: 20px;
  padding: 9px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
  transition: opacity var(--transition);
}
.cm-post-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.cm-post-btn:hover:not(:disabled) { opacity: 0.85; }
.cm-banned-warning {
  margin-top: 6px; padding: 6px 10px;
  background: rgba(255,79,79,0.2); color: #ff8080;
  font-size: 12px; border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════
   ACTIVITY / NOTIFICATIONS PAGE
   ═══════════════════════════════════════════════════════════ */

.act-wrap {
  width: 100%; max-width: 640px;
  margin: 0 auto;
  padding: 0 0 60px;
  display: flex; flex-direction: column;
}

/* Header */
.act-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: var(--bg); z-index: 10;
}
.act-title {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 800; color: var(--text);
  margin: 0;
}
.act-mark-all {
  background: none; border: none;
  color: var(--text-3); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 4px 8px;
  transition: color var(--transition);
}
.act-mark-all:hover { color: var(--text-2); }

.act-loading {
  height: 200px; display: flex; align-items: center; justify-content: center;
}
.act-empty {
  padding: 64px 24px; display: flex; flex-direction: column;
  align-items: center; gap: 12px; text-align: center;
  color: var(--text-3); font-size: 15px;
}

/* Rows */
.act-list { display: flex; flex-direction: column; }

.act-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
}
.act-row:hover { background: var(--surface-2); }
.act-row--unread { background: rgba(var(--accent-rgb, 255,215,0), 0.04); }
.act-row--unread::before {
  content: '';
  display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  align-self: center;
  margin-right: -4px;
}

.act-row-left {
  display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
}
.act-row-right { flex-shrink: 0; }

/* Avatar + icon badge */
.act-avatar-wrap {
  position: relative; flex-shrink: 0;
  width: 44px; height: 44px;
  cursor: pointer;
}
.act-avatar {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border);
}
.act-avatar-ph {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: 17px; color: #fff;
}
.act-icon-badge {
  position: absolute; bottom: -2px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  border: 2px solid var(--bg);
}

/* Text */
.act-text-wrap { flex: 1; min-width: 0; }
.act-text {
  font-size: 14px; color: var(--text-2);
  margin: 0 0 2px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.act-sender {
  font-weight: 700; color: var(--text);
  cursor: pointer;
}
.act-sender:hover { color: var(--accent); }
.act-time { font-size: 12px; color: var(--text-3); }

/* Thumbnail */
.act-thumb {
  width: 50px; height: 50px; border-radius: 8px;
  overflow: hidden; background: var(--surface-2);
  cursor: pointer; position: relative;
}
.act-thumb-media {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.act-thumb-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: white;
  background: rgba(0,0,0,0.35);
}

/* ═══════════════════════════════════════════════════════════
   UPLOAD / NEW POST MODAL
   ═══════════════════════════════════════════════════════════ */

.upl-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.upl-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 820px;
  max-height: 90vh; overflow: hidden;
  display: flex; flex-direction: column;
  transform: scale(0.95); opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.upl-modal.open { transform: scale(1); opacity: 1; }

/* Header */
.upl-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.upl-title { font-size: 16px; font-weight: 700; color: var(--text); }
.upl-cancel {
  background: none; border: none; color: var(--text-2);
  font-size: 14px; cursor: pointer; padding: 4px 8px;
  transition: color var(--transition);
}
.upl-cancel:hover { color: var(--text); }
.upl-post-btn {
  background: var(--accent); color: #000;
  border: none; border-radius: 8px;
  padding: 7px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: opacity var(--transition);
}
.upl-post-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.upl-post-btn:hover:not(:disabled) { opacity: 0.85; }

/* Body */
.upl-body {
  display: flex; flex: 1; overflow: hidden;
  min-height: 0;
}

/* Left: media */
.upl-media-col {
  flex: 1; border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: stretch; padding: 20px;
  min-width: 0;
}

.upl-drop-zone {
  flex: 1; min-height: 300px;
  border: 2px dashed var(--border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}
.upl-drop-zone:hover, .upl-drop-zone.drag-over {
  border-color: var(--accent);
  background: rgba(255,215,0,0.03);
}
.upl-drop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-3); text-align: center; padding: 24px;
  pointer-events: none;
}
.upl-drop-hint { font-size: 15px; font-weight: 600; color: var(--text-2); margin: 0; }
.upl-drop-sub  { font-size: 12px; color: var(--text-3); margin: 0; }

.upl-preview-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  max-height: 400px;
}
.upl-change-btn {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(0,0,0,0.6); color: white;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 6px;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.upl-file-error {
  font-size: 12px; color: #ff4d4d; margin-top: 8px; text-align: center;
}

/* Right: caption */
.upl-caption-col {
  width: 300px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
  overflow-y: auto;
}

.upl-user-row {
  display: flex; align-items: center; gap: 10px;
}
.upl-user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; border: 1.5px solid var(--border);
  flex-shrink: 0;
}
.upl-user-avatar-ph {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; color: #000;
  font-size: 15px; flex-shrink: 0;
}
.upl-user-name { font-size: 14px; font-weight: 700; color: var(--text); }

.upl-caption-input {
  width: 100%; background: none; border: none;
  color: var(--text); font-family: var(--font-body); font-size: 15px;
  line-height: 1.5; resize: none; outline: none;
  padding: 0;
}
.upl-caption-input::placeholder { color: var(--text-3); }

.upl-caption-counter {
  font-size: 12px; color: var(--text-3); text-align: right;
  border-top: 1px solid var(--border); padding-top: 8px;
}

.upl-warning {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-3);
  line-height: 1.5; margin-top: auto;
  padding: 10px 12px;
  background: rgba(239,68,68,0.08);
  border-radius: 8px; border: 1px solid rgba(239,68,68,0.2);
}
.upl-warning svg { flex-shrink: 0; margin-top: 1px; stroke: #ef4444; }
.upl-warning strong { color: #ef4444; }

/* Progress bar */
.upl-progress {
  height: 3px; background: var(--border); flex-shrink: 0;
}
.upl-progress-bar {
  height: 100%; background: var(--accent);
  width: 0; transition: width 0.3s ease;
}

/* Mobile: stack vertically */
@media (max-width: 600px) {
  .upl-body { flex-direction: column; overflow-y: auto; }
  .upl-media-col { border-right: none; border-bottom: 1px solid var(--border); min-height: 260px; }
  .upl-caption-col { width: 100%; }
  .upl-drop-zone { min-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════
   EDIT PROFILE MODAL
   ═══════════════════════════════════════════════════════════ */

.ep-overlay {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

.ep-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column;
  transform: scale(0.95); opacity: 0;
  transition: transform 0.28s ease, opacity 0.28s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.ep-modal.open { transform: scale(1); opacity: 1; }

/* Header */
.ep-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: sticky; top: 0;
  background: var(--surface); z-index: 1;
}
.ep-title { font-size: 16px; font-weight: 700; color: var(--text); }
.ep-cancel {
  background: none; border: none; color: var(--text-2);
  font-size: 14px; cursor: pointer; padding: 4px 8px;
  transition: color var(--transition);
}
.ep-cancel:hover { color: var(--text); }
.ep-save-btn {
  background: var(--accent); color: #000;
  border: none; border-radius: 8px;
  padding: 7px 18px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: opacity var(--transition);
}
.ep-save-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ep-save-btn:hover:not(:disabled) { opacity: 0.85; }

/* Body */
.ep-body { padding: 24px 24px 20px; display: flex; flex-direction: column; gap: 24px; }

/* Avatar */
.ep-avatar-section {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ep-avatar-wrap {
  width: 96px; height: 96px; border-radius: 50%;
  position: relative; flex-shrink: 0;
  border: 2px solid var(--border);
  overflow: hidden;
}
.ep-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ep-avatar-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800;
  font-size: 34px; color: #000;
}
.ep-avatar-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; cursor: pointer;
  transition: opacity var(--transition);
}
.ep-avatar-wrap:hover .ep-avatar-overlay { opacity: 1; }

.ep-avatar-actions { display: flex; gap: 10px; }
.ep-avatar-btn {
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--accent); font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: 8px; cursor: pointer;
  transition: background var(--transition);
}
.ep-avatar-btn:hover { background: var(--border); }
.ep-avatar-btn--remove { color: #ef4444; }

/* Fields */
.ep-field { display: flex; flex-direction: column; gap: 6px; }
.ep-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.ep-username-display {
  font-size: 15px; color: var(--text-3);
  padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px;
}
.ep-bio-input {
  width: 100%; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-family: var(--font-body); font-size: 15px;
  padding: 12px 14px; line-height: 1.5; resize: none; outline: none;
  transition: border-color var(--transition);
  box-sizing: border-box;
}
.ep-bio-input::placeholder { color: var(--text-3); }
.ep-bio-input:focus { border-color: var(--text-2); }
.ep-bio-counter { font-size: 12px; color: var(--text-3); text-align: right; }

/* Progress */
.ep-progress {
  height: 3px; background: var(--border); flex-shrink: 0;
  border-radius: 0 0 16px 16px;
}
.ep-progress-bar {
  height: 100%; background: var(--accent);
  width: 0; transition: width 0.3s ease;
  border-radius: 0 0 16px 16px;
}