#feed-container,#upload-container,#live-container,#battle-container {
    height:100vh; width:100%;
}

/* --- Mobile topbar compression for TikTok-style feed --- */
@media (max-width: 768px) {
  .vv-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .vv-topbar-inner {
    padding: 0.35rem 0.75rem;
  }

  .vv-nav {
    gap: 0.3rem;
  }

  .vv-nav .pill {
    padding: 0.25rem 0.7rem;
    margin-bottom: 0.2rem;
    font-size: 0.8rem;
  }

  .vv-auth .pill,
  .vv-user {
    font-size: 0.8rem;
  }

  .vv-main {
    padding-top: 0.25rem;
  }
}

/* === Topbar Nav (global) === */

.vv-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid #151b24;
  backdrop-filter: blur(8px);
}

.vv-topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.75rem;
}

.vv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.vv-brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  text-indent: -9999px;
  overflow: hidden;
}

.vv-brand-text {
  font-weight: 600;
  font-size: 1rem;
}

.vv-topbar-nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.vv-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  text-decoration: none;
  color: #e9f2ff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.7);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.vv-nav-btn:hover {
  transform: translateY(-1px);
  border-color: #2ef2a3;
  box-shadow: 0 6px 16px rgba(0,0,0,0.9);
}

/* === Raven Inbox === */

.vv-page.vv-raven {
  max-width: 520px;
  margin: 0.75rem auto 2.5rem;
  padding: 0 0.75rem;
}

.vv-raven-header h1 {
  margin: 0;
  font-size: 1.4rem;
}

.vv-raven-header p {
  margin: 0.15rem 0 0.75rem;
  font-size: 0.9rem;
  opacity: 0.85;
}

.vv-raven-threads {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.vv-raven-thread {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.05);
}

.vv-raven-thread-main {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.vv-raven-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.vv-raven-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.vv-raven-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.vv-raven-username {
  font-weight: 600;
  font-size: 0.95rem;
}

.vv-raven-time {
  font-size: 0.75rem;
  opacity: 0.7;
}

.vv-raven-msg {
  font-size: 0.85rem;
  opacity: 0.9;
}

.vv-raven-unread {
  min-width: 20px;
  padding: 0 0.35rem;
  height: 20px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vv-raven-empty {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* === Global Odin Topbar (V2K) === */

.vv-body {
  margin: 0;
  min-height: 100vh;
  color: #e9f2ff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vv-main {
  padding-top: 56px; /* leave room for fixed header */
}

/* Topbar shell */
.vv-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 1000;
  border-bottom: 1px solid rgba(70, 255, 204, 0.15);
  backdrop-filter: blur(14px);
}

.vv-topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.75rem;
  gap: 0.75rem;
}

/* Brand */
.vv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.vv-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(0, 255, 204, 0.7);
}

.vv-brand-text {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #e9f2ff;
}

/* Center nav */
.vv-topnav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  justify-content: center;
}

.vv-topnav-link {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #b9c6db;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.15s ease-out;
  white-space: nowrap;
}

.vv-topnav-link:hover {
  color: #ffffff;
  border-color: rgba(70, 255, 204, 0.6);
  box-shadow: 0 0 12px rgba(70, 255, 204, 0.5);
}

.vv-topnav-icon {
  font-size: 1.05rem;
  line-height: 1;
}

/* Right side user/auth */
.vv-topuser {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vv-topuser-meta {
  display: flex;
  flex-direction: column;
}

.vv-topuser-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: #e9f2ff;
}

.vv-topuser-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(70, 255, 204, 0.5);
}

.vv-topuser-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Auth buttons when logged out */
.vv-auth-link {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
}

.vv-auth-pill {
  border-radius: 999px;
  border: 1px solid rgba(70, 255, 204, 0.8);
  color: #e9f2ff;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .vv-topbar-inner {
    padding: 0 0.5rem;
    gap: 0.4rem;
  }

  .vv-brand-text {
    display: none;
  }

  .vv-topnav {
    gap: 0.25rem;
    font-size: 0.75rem;
  }

  .vv-topnav-link {
    padding: 0.15rem 0.55rem;
  }

  .vv-topuser-name {
    display: none;
  }
}

/* === V2K Wallet badge in topbar === */
.vv-wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid rgba(70,255,204,0.7);
  box-shadow: 0 0 10px rgba(70,255,204,0.5);
  color: #e9f2ff;
}

#vv-wallet-balance {
  font-weight: 600;
}

/* Mobile shrink */
@media (max-width: 640px) {
  .vv-wallet-chip {
    font-size: 0.7rem;
    padding: 0.05rem 0.4rem;
  }
}

/* === Phase 8: Odin Topbar + TikTok-style header === */

.vv-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.vv-topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.35rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Brand retains the no-bg V2K logo */
.vv-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.vv-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background-color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

.vv-brand-text {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e2f3ff;
}

/* Center nav (Feed / Creator / Store) */
.vv-main-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.vv-nav-link {
  font-size: 0.82rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a1b5d7;
  padding-bottom: 0.18rem;
  border-bottom: 2px solid transparent;
}

.vv-nav-link:hover {
  color: #e2f3ff;
}

/* Active nav state (JS adds .is-active) */
.vv-nav-link.is-active {
  color: #f9fafb;
  border-bottom-color: #22f0a2;
}

/* Right side: wallet chip + Raven + Live */
.vv-top-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.vv-chip-wallet {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(34,240,162,0.55);
  text-decoration: none;
  font-size: 0.78rem;
  color: #e2f3ff;
  white-space: nowrap;
}

.vv-chip-label {
  opacity: 0.8;
}

.vv-chip-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Icon links (Raven, Live) */
.vv-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.45);
  font-size: 0.78rem;
  color: #e5e7eb;
  text-decoration: none;
}

.vv-icon-link:hover {
  border-color: #22f0a2;
  box-shadow: 0 0 12px rgba(34,240,162,0.6);
}

/* Live pill emphasizes streaming */
.vv-live-pill {
  font-weight: 600;
  color: #f97373;
  border-color: rgba(248,113,113,0.7);
}

/* Mobile: compress header layout */
@media (max-width: 640px) {
  .vv-topbar-inner {
    gap: 0.4rem;
  }
  .vv-brand-text {
    display: none; /* keep just the logo on tiny screens */
  }
  .vv-main-nav {
    gap: 0.6rem;
  }
  .vv-nav-link {
    font-size: 0.78rem;
  }
  .vv-chip-wallet {
    padding: 0.12rem 0.45rem;
  }
}

/* === Phase 9: Raven Inbox / Threads === */

.raven-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 1rem;
}

.raven-left.only-thread {
  grid-column: 1 / -1;
}

.raven-header h1 {
  margin: 0 0 0.15rem;
  font-size: 1.1rem;
}

.raven-header p {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Thread list */
.raven-thread-list {
  border-radius: 14px;
  border: 1px solid rgba(30,64,175,0.6);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.raven-thread-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  text-decoration: none;
  color: #e5e7eb;
  border-bottom: 1px solid rgba(15,23,42,0.9);
}

.raven-thread-row:last-child {
  border-bottom: none;
}

.raven-thread-row:hover {
}

.raven-avatar {
  flex: 0 0 auto;
}

.raven-avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #020617;
  font-weight: 700;
  font-size: 0.95rem;
}

.raven-thread-meta {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
}

.raven-thread-top {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  font-size: 0.78rem;
  margin-bottom: 0.1rem;
}

.raven-thread-name {
  font-weight: 600;
}

.raven-thread-time {
  opacity: 0.7;
}

.raven-thread-preview {
  font-size: 0.78rem;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raven-thread-badge {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  padding: 0 0.25rem;
  border-radius: 999px;
  color: #020617;
  font-size: 0.7rem;
  text-align: center;
  font-weight: 700;
}

/* Thread window */
.raven-thread-window {
  margin-top: 0.75rem;
  border-radius: 14px;
  border: 1px solid rgba(30,64,175,0.6);
  max-height: calc(100vh - 11rem);
  overflow-y: auto;
  padding: 0.6rem 0.65rem;
}

.raven-message {
  margin-bottom: 0.4rem;
  display: flex;
  flex-direction: column;
  max-width: 80%;
}

.raven-message.from-me {
  margin-left: auto;
  align-items: flex-end;
}

.raven-message.from-them {
  margin-right: auto;
  align-items: flex-start;
}

.raven-message-bubble {
  border-radius: 16px;
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.3;
}

.raven-message.from-me .raven-message-bubble {
}

.raven-message-meta {
  margin-top: 0.1rem;
  font-size: 0.7rem;
  opacity: 0.7;
}

.raven-message-meta .who {
  margin-right: 0.35rem;
}

/* Composer */
.raven-compose {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
}

.raven-compose textarea {
  flex: 1 1 auto;
  resize: none;
  border-radius: 12px;
  border: 1px solid rgba(30,64,175,0.7);
  color: #e5e7eb;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
}

.raven-compose button {
  flex: 0 0 auto;
  padding: 0 0.8rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #020617;
  font-weight: 700;
  font-size: 0.82rem;
}

/* Right panel */
.raven-right {
  border-radius: 14px;
  border: 1px solid rgba(30,64,175,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
}

.raven-right-placeholder h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.raven-right-placeholder p {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Empty / helper state */
.raven-empty {
  padding: 1.4rem 1rem;
  text-align: center;
}

.raven-empty h2 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.raven-empty p {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.8;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .raven-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .raven-right,
  .desktop-only {
    display: none;
  }
  .raven-thread-window {
    max-height: calc(100vh - 10.5rem);
  }
}

/* === Phase 10: Notifications Center === */

.notify-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2rem;
}

.notify-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.notify-header p {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Filter chips */
.notify-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.notify-chip {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  color: #e5e7eb;
  font-size: 0.78rem;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
}

.notify-chip.is-active {
  border-color: #22f0a2;
  color: #020617;
}

/* List */
.notify-list {
  border-radius: 16px;
  border: 1px solid rgba(30,64,175,0.6);
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
}

.notify-row {
  display: flex;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(15,23,42,0.9);
}

.notify-row:last-child {
  border-bottom: none;
}

.notify-icon {
  flex: 0 0 auto;
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.notify-main {
  flex: 1 1 auto;
  min-width: 0;
}

.notify-title {
  font-size: 0.86rem;
  font-weight: 600;
}

.notify-body {
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 0.1rem;
}

.notify-meta {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  opacity: 0.8;
  display: flex;
  gap: 0.25rem;
}

.notify-empty {
  padding: 1.5rem 1rem;
  text-align: center;
}

.notify-empty h2 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}

.notify-empty p {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.8;
}

/* Badge dot shared (bell + raven) */
.vv-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  height: 30px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.88rem;
  color: #e5e7eb;
}

.vv-icon-emoji {
  font-size: 1.1rem;
}

.vv-badge-dot {
  position: absolute;
  top: 2px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  color: #020617;
  font-size: 0.7rem;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}

/* === Phase 11: Settings / Account Hub === */

.settings-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2.5rem;
}

.settings-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.settings-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

/* Layout */
.settings-grid {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-card {
  border-radius: 18px;
  border: 1px solid rgba(30,64,175,0.7);
  padding: 0.75rem 0.8rem 0.9rem;
}

.settings-card h2 {
  margin: 0 0 0.15rem;
  font-size: 0.98rem;
}

.settings-sub {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  opacity: 0.8;
}

/* Inputs */
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin-bottom: 0.6rem;
}

.settings-field span {
  font-size: 0.8rem;
  opacity: 0.9;
}

.settings-field input,
.settings-field textarea {
  border-radius: 10px;
  border: 1px solid rgba(51,65,85,1);
  color: #e5e7eb;
  font-size: 0.85rem;
  padding: 0.4rem 0.45rem;
  resize: vertical;
}

/* Lines / pills */
.settings-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.82rem;
}

.settings-line.danger {
  margin-top: 0.7rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(148,27,27,0.5);
}

.settings-label {
  font-weight: 500;
}

.settings-pill {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  border: 1px solid rgba(148,163,184,0.8);
}

.settings-pill.muted {
  color: #cbd5f5;
}

.settings-pill.success {
  border-color: #22c55e;
  color: #bbf7d0;
}

.settings-link {
  font-size: 0.78rem;
  color: #38bdf8;
  text-decoration: none;
}

/* Toggles */
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.3rem 0;
}

.settings-note {
  font-size: 0.72rem;
  opacity: 0.78;
}

.settings-switch {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.9);
  cursor: pointer;
  padding: 0;
}

.settings-switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  transition: transform 0.18s ease, background 0.18s ease;
}

.settings-switch.is-on {
  border-color: #22f0a2;
}

.settings-switch.is-on .knob {
  transform: translateX(16px);
}

/* Actions */
.settings-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.4rem;
}

.settings-save-btn {
  border-radius: 999px;
  border: none;
  padding: 0.4rem 1.2rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #020617;
  cursor: pointer;
}

.settings-danger-btn {
  border-radius: 999px;
  border: 1px solid rgba(248,113,113,0.8);
  color: #fecaca;
  font-size: 0.72rem;
  padding: 0.2rem 0.7rem;
}

/* Larger screens */
@media (min-width: 900px) {
  .settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr);
    grid-auto-rows: minmax(min-content, max-content);
    gap: 1rem;
  }
  .settings-card:nth-child(3) {
    grid-column: span 2;
  }
  .settings-actions {
    grid-column: span 2;
  }
}

/* === Phase A: Notifications Center === */

.notif-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2.5rem;
}

.notif-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.notif-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.notif-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.notif-item {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 16px;
  border: 1px solid rgba(51,65,85,0.9);
  padding: 0.55rem 0.7rem;
  font-size: 0.84rem;
}

.notif-item.is-unread {
  border-color: #22f0a2;
  box-shadow: 0 0 16px rgba(34,240,162,0.2);
}

.notif-main {
  flex: 1;
}

.notif-title {
  font-weight: 600;
  margin-bottom: 0.12rem;
}

.notif-body {
  opacity: 0.88;
}

.notif-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.12rem;
  font-size: 0.72rem;
  white-space: nowrap;
}

.notif-type {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.notif-time {
  opacity: 0.76;
}

/* Empty state */
.notif-empty {
  margin-top: 2.3rem;
  text-align: center;
}

.notif-icon {
  font-size: 2.5rem;
  margin-bottom: 0.4rem;
}

.notif-empty h2 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.notif-empty p {
  margin: 0 0 0.8rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.notif-cta {
  display: inline-flex;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: #020617;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

/* === V2K Bottom Mobile Nav (TikTok-style) === */

.vv-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  border-top: 1px solid rgba(51,65,85,0.9);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 60;
}

.vv-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 0.68rem;
  color: #cbd5f5;
  opacity: 0.86;
}

.vv-nav-icon {
  font-size: 1.1rem;
  line-height: 1;
  margin-bottom: 2px;
}

.vv-nav-item[data-active="true"],
.vv-nav-item:focus-visible {
  color: #22f0a2;
  opacity: 1;
}

@media (min-width: 900px) {
  .vv-bottom-nav {
    max-width: 480px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 18px 18px 0 0;
  }
}

.vv-body {
  padding-bottom: 90px;
}

/* === Creator Hub Overview === */

.creator-hub-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.creator-hub-header {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.creator-hub-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #22f0a2;
  box-shadow: 0 0 18px rgba(34,240,162,0.5);
}

.creator-hub-meta {
  flex: 1;
}

.creator-hub-username {
  font-size: 1.2rem;
  font-weight: 700;
}

.creator-hub-subline {
  font-size: 0.84rem;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

.creator-hub-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.82rem;
  opacity: 0.9;
}

.creator-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-top: 0.8rem;
}

.creator-hub-tile {
  position: relative;
  border-radius: 18px;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  color: #e5edff;
  border: 1px solid rgba(51,65,85,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
  font-size: 0.86rem;
}

.creator-hub-tile:hover {
  border-color: #22f0a2;
  box-shadow: 0 0 18px rgba(34,240,162,0.5);
}

.creator-hub-tile .tile-title {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.creator-hub-tile .tile-value {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.creator-hub-tile .tile-sub {
  font-size: 0.78rem;
  opacity: 0.9;
}

/* === Live Directory Grid === */

.live-dir-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.live-dir-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.live-dir-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.live-dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.live-card {
  border-radius: 16px;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(51,65,85,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
  font-size: 0.86rem;
}

.live-card-top {
  display: flex;
  gap: 0.6rem;
}

.live-avatar {
  position: relative;
}

.live-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  object-fit: cover;
}

.live-pill {
  position: absolute;
  bottom: -4px;
  left: 0;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  border-radius: 999px;
  color: #f9fafb;
  font-weight: 700;
}

.live-meta {
  flex: 1;
}

.live-title {
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.live-host {
  font-size: 0.8rem;
  opacity: 0.9;
}

.live-sub {
  font-size: 0.78rem;
  opacity: 0.75;
}

.live-card-footer {
  margin-top: 0.6rem;
  display: flex;
  justify-content: flex-end;
}

.live-join-btn {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  color: #020617;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Empty state */
.live-dir-empty {
  margin-top: 2.2rem;
  text-align: center;
}

.live-dir-icon {
  font-size: 2.4rem;
  margin-bottom: 0.3rem;
}

.live-dir-empty h2 {
  margin: 0 0 0.3rem;
  font-size: 1.1rem;
}

.live-dir-empty p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.86;
}

.live-dir-cta {
  display: inline-flex;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: #020617;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.84rem;
}

/* === Raven Inbox Hub === */

.raven-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.raven-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.raven-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.raven-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
}

.raven-panel {
  border-radius: 16px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(51,65,85,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
  font-size: 0.86rem;
}

.raven-panel h2 {
  margin: 0 0 0.25rem;
  font-size: 1.0rem;
}

.raven-panel p {
  margin: 0 0 0.6rem;
  opacity: 0.86;
}

.raven-cta {
  display: inline-flex;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: #020617;
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
}

/* === Notifications Center === */

.vv-notify-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.vv-notify-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.vv-notify-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.vv-notify-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vv-notify-item {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  border-radius: 14px;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(51,65,85,0.9);
  box-shadow: 0 8px 20px rgba(0,0,0,0.7);
  font-size: 0.84rem;
}

.vv-notify-main {
  flex: 1;
}

.vv-notify-type {
  font-size: 0.75rem;
  opacity: 0.85;
  margin-bottom: 0.1rem;
}

.vv-notify-title {
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.vv-notify-body {
  font-size: 0.8rem;
  opacity: 0.9;
}

.vv-notify-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.74rem;
  opacity: 0.85;
}

.vv-notify-link {
  text-decoration: none;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.9);
  font-size: 0.74rem;
}

.vv-notify-empty {
  margin-top: 2rem;
  text-align: center;
}

.vv-notify-icon {
  font-size: 2.4rem;
  margin-bottom: 0.4rem;
}

/* === Explore / Trending Grid === */

.explore-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.explore-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.explore-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

@media (min-width: 768px) {
  .explore-grid {
    gap: 4px;
  }
}

.explore-card {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.explore-thumb {
  width: 100%;
  padding-top: 135%;
  position: relative;
  overflow: hidden;
}

.explore-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.explore-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #22f0a2;
}

.explore-meta {
  position: absolute;
  left: 4px;
  bottom: 4px;
  right: 4px;
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  padding: 2px 4px;
}

.explore-user {
  font-weight: 600;
}

.explore-time {
  opacity: 0.8;
}

.explore-empty {
  margin-top: 2rem;
  text-align: center;
}

/* === Public Profile Page === */

.profile-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.profile-header {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.profile-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #22f0a2;
  box-shadow: 0 0 18px rgba(34,240,162,0.5);
}

.profile-meta {
  flex: 1;
}

.profile-username {
  font-size: 1.3rem;
  font-weight: 700;
}

.profile-subline {
  font-size: 0.86rem;
  opacity: 0.85;
  margin-bottom: 0.3rem;
}

.profile-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.profile-actions {
  margin-top: 0.4rem;
  display: flex;
  gap: 0.4rem;
}

.profile-btn {
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: none;
  color: #020617;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.profile-btn.secondary {
  border: 1px solid rgba(148,163,184,0.9);
  color: #e5edff;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}

@media (min-width: 768px) {
  .profile-grid {
    gap: 4px;
  }
}

.profile-card {
  position: relative;
}

.profile-thumb {
  width: 100%;
  padding-top: 135%;
  position: relative;
  overflow: hidden;
}

.profile-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #22f0a2;
}

.profile-empty {
  margin-top: 2rem;
  text-align: center;
}

/* === Settings Shell === */

.settings-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.settings-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.settings-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}

.settings-card {
  border-radius: 16px;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(51,65,85,0.9);
  box-shadow: 0 10px 24px rgba(0,0,0,0.7);
  font-size: 0.86rem;
}

.settings-card h2 {
  margin: 0 0 0.25rem;
  font-size: 1.0rem;
}

/* === Creator Hub & Insights === */

.creator-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.creator-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.creator-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.creator-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

@media (max-width: 640px) {
  .creator-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.creator-stat {
  border-radius: 14px;
  padding: 0.5rem 0.6rem;
  border: 1px solid rgba(51,65,85,0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,0.8);
  font-size: 0.8rem;
}

.creator-stat .label {
  opacity: 0.8;
}

.creator-stat .value {
  font-size: 1.1rem;
  font-weight: 700;
}

.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.creator-card {
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(51,65,85,0.95);
  box-shadow: 0 12px 26px rgba(0,0,0,0.85);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.creator-card h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.creator-card p {
  margin: 0;
  font-size: 0.82rem;
  opacity: 0.9;
}

.creator-card:hover {
  transform: translateY(-2px);
  border-color: #22f0a2;
  box-shadow: 0 16px 32px rgba(34,240,162,0.45);
}

.creator-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.75rem;
}

.creator-metric-card {
  border-radius: 16px;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(51,65,85,0.95);
  box-shadow: 0 12px 26px rgba(0,0,0,0.85);
}

.creator-metric-card .value {
  margin: 0.15rem 0 0;
  font-size: 1.3rem;
  font-weight: 700;
}

/* === Live Directory === */

.live-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.live-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.live-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.75rem;
}

.live-card {
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(51,65,85,0.95);
  box-shadow: 0 12px 26px rgba(0,0,0,0.85);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.live-card:hover {
  transform: translateY(-2px);
  border-color: #f97373;
  box-shadow: 0 16px 32px rgba(248,113,113,0.45);
}

.live-thumb {
  position: relative;
  padding-top: 60%;
}

.live-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0b1120;
}

.live-ghost-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: 8px;
  font-size: 0.8rem;
  opacity: 0.9;
}

.live-meta {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.55rem 0.5rem;
  font-size: 0.82rem;
}

.live-host {
  font-weight: 600;
}

.live-viewers {
  opacity: 0.85;
}

.live-empty {
  margin-top: 2rem;
  text-align: center;
}

.live-go-btn {
  display: inline-block;
  margin-top: 0.7rem;
  padding: 0.35rem 1.1rem;
  border-radius: 999px;
  color: #020617;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

/* === Raven Message Hub === */

.raven-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.raven-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.raven-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.raven-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.raven-thread {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  border-radius: 16px;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(51,65,85,0.95);
  box-shadow: 0 10px 24px rgba(0,0,0,0.85);
  font-size: 0.84rem;
}

.raven-thread-main {
  flex: 1;
}

.raven-thread-title {
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.raven-thread-preview {
  opacity: 0.9;
  font-size: 0.8rem;
}

.raven-thread-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.75rem;
  opacity: 0.85;
}

.raven-thread-unread {
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #020617;
  text-align: center;
  font-weight: 700;
  font-size: 0.74rem;
}

.raven-empty {
  margin-top: 2rem;
  text-align: center;
}

.raven-icon {
  font-size: 2.4rem;
  margin-bottom: 0.4rem;
}

/* === Notifications Center === */

.notif-shell {
  max-width: 900px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.notif-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.notif-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.notif-item {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  border-radius: 16px;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(51,65,85,0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,0.85);
  font-size: 0.84rem;
}

.notif-unread {
  border-color: #22f0a2;
  box-shadow: 0 14px 28px rgba(34,240,162,0.40);
}

.notif-main {
  flex: 1;
}

.notif-title a {
  color: #e0f2fe;
  text-decoration: none;
}

.notif-title a:hover {
  text-decoration: underline;
}

.notif-title {
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.notif-body {
  opacity: 0.92;
  font-size: 0.8rem;
}

.notif-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  font-size: 0.75rem;
  opacity: 0.9;
}

.notif-kind {
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.9);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.notif-empty {
  margin-top: 2rem;
  text-align: center;
}

/* === Explore Modern === */

.explore-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.explore-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.explore-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.4rem;
}

@media (min-width: 768px) {
  .explore-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

.explore-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(30,64,175,0.6);
  box-shadow: 0 10px 22px rgba(0,0,0,0.85);
  font-size: 0.78rem;
}

.explore-thumb {
  position: relative;
  padding-top: 135%;
}

.explore-thumb-inner {
  position: absolute;
  inset: 0;
}

.explore-thumb-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.explore-thumb-video {
  display: flex;
  align-items: center;
  justify-content: center;
}

.explore-play-pill {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #020617;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(34,240,162,0.8);
}

.explore-meta {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0.35rem 0.3rem;
}

.explore-user {
  font-weight: 600;
}

.explore-likes {
  opacity: 0.85;
}

.explore-empty {
  margin-top: 2rem;
  text-align: center;
}

/* === Public Profile === */

.pubprof-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.pubprof-header {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.pubprof-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid #22f0a2;
  box-shadow: 0 0 18px rgba(34,240,162,0.7);
}

.pubprof-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pubprof-main h1 {
  margin: 0 0 0.15rem;
  font-size: 1.2rem;
}

.pubprof-main p {
  margin: 0 0 0.3rem;
  font-size: 0.86rem;
  opacity: 0.9;
}

.pubprof-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.pubprof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.4rem;
}

.pubprof-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(51,65,85,0.9);
}

.pubprof-thumb {
  position: relative;
  padding-top: 135%;
}

.pubprof-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pubprof-empty {
  margin-top: 2rem;
  text-align: center;
}

/* === Settings Shell === */

.settings-shell {
  max-width: 700px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 3.5rem;
}

.settings-header h1 {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.settings-header p {
  margin: 0 0 0.7rem;
  font-size: 0.86rem;
  opacity: 0.85;
}

.settings-section {
  margin-bottom: 0.9rem;
}

.settings-section h2 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.settings-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.settings-footnote {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  opacity: 0.8;
}

/* === Global app shell === */

.v2k-body {
  margin: 0;
  padding: 0;
  color: #e5e7eb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.v2k-app-shell {
  min-height: 100vh;
  padding-bottom: 64px; /* space for bottom nav */
  box-sizing: border-box;
}

/* === Bottom Nav (mobile-first, TikTok-style) === */

.v2k-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid rgba(30,64,175,0.9);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.95);
  z-index: 80;
}

.v2k-bottom-nav .nav-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #9ca3af;
  font-size: 0.68rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: none;
  cursor: pointer;
}

.v2k-bottom-nav .nav-item:focus {
  outline: none;
}

.v2k-bottom-nav .nav-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.v2k-bottom-nav .nav-label {
  line-height: 1;
}

/* Center FAB (V2K logo) */

.nav-item-center {
  flex: 0;
  width: 60px;
  height: 60px;
  margin-bottom: 16px;
  border-radius: 999px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 28px rgba(34,240,162,0.9);
}

.nav-center-logo {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background-color: #020617;
}

/* Active state */

.v2k-bottom-nav .nav-item-active {
  color: #e5f9ff;
}

.v2k-bottom-nav .nav-item-active .nav-icon {
  text-shadow: 0 0 10px rgba(34,240,162,0.9);
}

/* Desktop tweak: slightly taller nav, less intrusive */

@media (min-width: 768px) {
  .v2k-bottom-nav {
    height: 64px;
  }
  .v2k-app-shell {
    padding-bottom: 72px;
  }
}

/* === Generic page layout shells === */

.v2k-page {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2.5rem;
  box-sizing: border-box;
}

.v2k-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.v2k-page-header h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

.v2k-page-header p {
  margin: 0.2rem 0 0;
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Explore/Profile grids (like creator page tiles) */

.v2k-explore-grid,
.v2k-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}

.v2k-tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,0.25);
}

.v2k-tile-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.v2k-tile-media {
  position: relative;
  width: 100%;
  padding-top: 130%; /* vertical style thumb */
  overflow: hidden;
}

.v2k-tile-media img,
.v2k-tile-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2k-tile-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-weight: 700;
}

.v2k-tile-tag {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
}

.v2k-tile-tag-video {
  border: 1px solid rgba(248,250,252,0.6);
}

.v2k-tile-meta {
  padding: 4px 6px 6px;
}

.v2k-tile-user {
  font-size: 0.75rem;
  color: #9ca3af;
}

.v2k-tile-caption {
  font-size: 0.78rem;
  margin-top: 2px;
  color: #e5e7eb;
}

/* Empty state */

.v2k-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: #9ca3af;
  font-size: 0.9rem;
}

/* Profile header */

.v2k-profile-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
}

.v2k-profile-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #22f0a2;
  box-shadow: 0 0 16px rgba(34,240,162,0.7);
}

.v2k-profile-main h1 {
  margin: 0;
  font-size: 1.2rem;
}

.v2k-profile-bio {
  margin: 4px 0;
  font-size: 0.85rem;
  color: #d1d5db;
}

.v2k-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 2px;
}

.v2k-profile-actions {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Buttons */

.btn-primary {
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  color: #020617;
  cursor: pointer;
}

.btn-ghost {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  color: #e5e7eb;
  cursor: pointer;
}

/* Settings + notifications cards/lists */

.v2k-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.v2k-card {
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(31,41,55,0.9);
  box-shadow: 0 0 22px rgba(0,0,0,0.7);
}

.v2k-card h2 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
}

.v2k-card p {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

.v2k-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.v2k-list-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  border: 1px solid rgba(30,64,175,0.7);
}

.v2k-list-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 6px;
}

.v2k-list-title {
  font-size: 0.86rem;
  font-weight: 600;
}

.v2k-list-body {
  font-size: 0.8rem;
  color: #d1d5db;
  margin-top: 2px;
}

.v2k-list-meta {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 2px;
}

/* Mobile tweaks */

@media (max-width: 640px) {
  .v2k-page {
    padding-inline: 0.5rem;
  }
  .v2k-profile-header {
    grid-template-columns: auto 1fr;
  }
}

/* ===== Topbar main nav (V2K) ===== */
.v2k-main-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
  font-size: 0.82rem;
}

.v2k-nav-link {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  color: #cbd5f5;
  border: 1px solid transparent;
  white-space: nowrap;
}

.v2k-nav-link:hover {
  border-color: rgba(148, 163, 255, 0.7);
}

.v2k-nav-pill {
  border-color: rgba(248, 250, 252, 0.6);
}

/* Mobile: compress nav */
@media (max-width: 768px) {
  .v2k-main-nav {
    font-size: 0.72rem;
    gap: 0.3rem;
    margin-left: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
  }
}

/* ===== Discover / Explore ===== */
.v2k-page-discover {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2.5rem;
}

.discover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}

.discover-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 255, 0.22);
}

.discover-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #e5edff;
}

.discover-thumb {
  width: 100%;
  aspect-ratio: 9/16;
  display: flex;
  align-items: center;
  justify-content: center;
}

.discover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.discover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #9ca3af;
}

.discover-meta {
  padding: 0.3rem 0.4rem 0.45rem;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.discover-user {
  font-weight: 600;
}

.discover-time {
  opacity: 0.65;
}

/* Mobile tightening */
@media (max-width: 640px) {
  .v2k-page-discover {
    padding: 0.5rem 0.4rem 2.5rem;
  }
}

/* ===== Creator public profile ===== */
.creator-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2.5rem;
}

.creator-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.creator-avatar {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(56, 189, 248, 0.7);
  flex-shrink: 0;
}

.creator-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.creator-handle {
  font-size: 1.2rem;
  font-weight: 700;
}

.creator-stats {
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  opacity: 0.85;
}

.creator-actions {
  margin-top: 0.2rem;
}

.creator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}

.creator-grid-item {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(31, 41, 55, 0.9);
}

.creator-grid-thumb {
  width: 100%;
  aspect-ratio: 9/16;
}

.creator-grid-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creator-grid-fallback {
  width: 100%;
  height: 100%;
  padding: 0.4rem;
  font-size: 0.7rem;
  color: #9ca3af;
}

/* Mobile */
@media (max-width: 640px) {
  .creator-page {
    padding: 0.5rem 0.4rem 2.5rem;
  }
  .creator-header {
    gap: 0.6rem;
  }
}

/* ===== Live directory ===== */
.v2k-page-live {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2.5rem;
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.live-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(248, 113, 113, 0.45);
}

.live-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
}

.live-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.5rem;
  padding: 0.16rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  color: #f9fafb;
  font-weight: 700;
}

.live-meta {
  padding: 0.4rem 0.6rem 0.55rem;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.live-title {
  font-weight: 600;
}

.live-user {
  opacity: 0.9;
}

.live-extra {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  opacity: 0.75;
  font-size: 0.72rem;
}

/* ===== Global V2K layout helpers ===== */
.v2k-page {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 2.5rem;
}

.v2k-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.v2k-page-header h1 {
  margin: 0;
  font-size: 1.4rem;
}

.v2k-page-header p {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.v2k-card {
  border-radius: 16px;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(148, 163, 255, 0.25);
}

.v2k-card-highlight {
  border-color: rgba(34, 197, 94, 0.7);
}

.v2k-card-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.v2k-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}

.v2k-card-link h3 {
  margin: 0 0 0.25rem;
}

.v2k-card-link p {
  margin: 0 0 0.35rem;
  font-size: 0.86rem;
  opacity: 0.9;
}

.v2k-list,
.v2k-list-plain {
  list-style: none;
  padding: 0;
  margin: 0;
}

.v2k-list-item {
  display: flex;
  gap: 0.55rem;
  border-radius: 12px;
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(51, 65, 85, 0.85);
  margin-bottom: 0.35rem;
}

.v2k-list-item-unread {
  border-color: rgba(59, 130, 246, 0.9);
}

.v2k-list-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.32rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.v2k-list-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.v2k-list-body {
  font-size: 0.8rem;
  opacity: 0.9;
}

.v2k-list-meta {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 0.12rem;
}

.v2k-pill {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid rgba(148, 163, 255, 0.7);
}

.v2k-pill-alert {
  border-color: rgba(248, 113, 113, 0.9);
}

.v2k-empty {
  padding: 1rem 0.5rem;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Reuse existing ghost button style or define it lightly */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 255, 0.8);
  color: #e5edff;
  text-decoration: none;
  font-size: 0.8rem;
}

.btn-ghost:hover {
}

/* ===== Settings ===== */
.settings-row {
  display: flex;
  gap: 0.65rem;
  padding: 0.45rem 0.1rem;
  margin-bottom: 0.25rem;
  align-items: flex-start;
}

.settings-row input[type="checkbox"] {
  margin-top: 0.3rem;
}

.settings-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.settings-desc {
  font-size: 0.8rem;
  opacity: 0.8;
}

.settings-footer {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-start;
}

.settings-status {
  font-size: 0.78rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-status-show {
  opacity: 0.9;
}

/* ===== Upload form ===== */
.upload-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.upload-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.upload-row label {
  font-size: 0.85rem;
  font-weight: 600;
}

.upload-row input[type="text"],
.upload-row input[type="file"],
.upload-row textarea,
.upload-row select {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 255, 0.45);
  padding: 0.35rem 0.55rem;
  font-size: 0.87rem;
  color: #e5edff;
}

.upload-row textarea {
  resize: vertical;
}

.upload-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

/* ===== Settings ===== */
.settings-row {
  display: flex;
  gap: 0.65rem;
  padding: 0.45rem 0.1rem;
  margin-bottom: 0.25rem;
  align-items: flex-start;
}

.settings-row input[type="checkbox"] {
  margin-top: 0.3rem;
}

.settings-title {
  font-size: 0.9rem;
  font-weight: 600;
}

.settings-desc {
  font-size: 0.8rem;
  opacity: 0.8;
}

.settings-footer {
  margin-top: 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-start;
}

.settings-status {
  font-size: 0.78rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-status-show {
  opacity: 0.9;
}

/* ===== Upload form ===== */
.upload-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.upload-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.upload-row label {
  font-size: 0.85rem;
  font-weight: 600;
}

.upload-row input[type="text"],
.upload-row input[type="file"],
.upload-row textarea,
.upload-row select {
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 255, 0.45);
  padding: 0.35rem 0.55rem;
  font-size: 0.87rem;
  color: #e5edff;
}

.upload-row textarea {
  resize: vertical;
}

.upload-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

/* ===== Feed media sizing (TikTok-style) ===== */
.v2k-feed,
.feed-list {
  max-width: 520px;
  margin: 0 auto;
}

/* Generic card wrapper names we’ve used */
  max-width: 520px;
  margin: 0 auto 1rem auto;
}

/* Main media frame: 9:16, centered, with overflow hidden */
.feed-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Any img/video inside feed cards should obey the frame */
.feed-media img,
.feed-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills like TikTok, crops edges if needed */
  display: block;
}

/* Safety net: any media directly in the feed column */
.v2k-feed img,
.v2k-feed video {
  max-width: 100%;
  max-height: calc(100vh - 140px);
  object-fit: cover;
}

/* === V2K FEED COLUMN (TikTok-style) === */
.v2k-feed-shell {
  min-height: 100vh;
  padding-bottom: 80px; /* space for bottom bar */
}

.v2k-feed {
  max-width: 520px;
  margin: 0 auto;
  padding: 0.5rem 0.5rem 1rem;
}

/* Card wrapper */
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 0.85rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.9);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Media frame: 9:16 like TikTok */
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Meta below media */
  padding: 0.6rem 0.75rem 0.65rem;
}

  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin-bottom: 0.45rem;
}

  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(0, 255, 180, 0.6);
  flex-shrink: 0;
}
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  flex: 1;
  min-width: 0;
}

  font-size: 0.9rem;
  font-weight: 700;
}

  font-size: 0.8rem;
  opacity: 0.9;
  margin-top: 0.15rem;
}

/* Action row */
  display: flex;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-top: 0.3rem;
}

.feed-btn {
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.18rem 0.55rem;
  cursor: pointer;
}

/* Empty state */
.empty-feed {
  text-align: center;
  opacity: 0.7;
  margin-top: 2rem;
}

/* === Bottom bar + FABs === */
.v2k-bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 60;
}

.bottom-item {
  flex: 1;
  text-align: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.65;
}

.bottom-item-active {
  opacity: 1;
  font-weight: 700;
}

/* Upload FAB in bottom bar center */
.fab-upload {
  position: relative;
  z-index: 61;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  box-shadow: 0 10px 24px rgba(0,0,0,0.9);
  transform: translateY(-18px);
}

/* Floating Go Live FAB */
.fab-live {
  position: fixed;
  right: 1.1rem;
  bottom: 80px;
  z-index: 70;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.9);
}

/* Mobile-first: full width; desktop centers the column */
@media (min-width: 960px) {
  .v2k-feed-shell {
    display: flex;
    justify-content: center;
  }
}

/* --- V2K HEADER LOGO CLAMP --- */
.nav-logo img,
img.v2k-logo,
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px;
  object-fit: cover;
}

/* --- V2K HEADER LOGO CLAMP (feed) --- */
.v2k-nav .nav-left img,
.nav-logo img,
img.v2k-logo,
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px;
  object-fit: cover;
}

/* --- BASE LAYOUT --- */
html, body {
  height: 100%;
}

.v2k-body {
  margin: 0;
  padding: 0;
  color: #f8f8f8;
}

.v2k-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top nav */
.v2k-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}

/* --- MOBILE-FIRST FEED COLUMN --- */
/* main feed area becomes a scroll container with snap */
.v2k-main {
  flex: 1 1 auto;
  height: calc(100vh - 120px); /* header + bottom nav approx */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

/* each direct child (cards/sections) snaps into place */
.v2k-main > * {
  scroll-snap-align: start;
}

/* generic media card layout */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* wrapper around img/video for 9:16 framing */
.media-frame {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* actual media */
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* fallbacks for older markup where media isn't wrapped */
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* bottom nav bar (if present) stays fixed height on phones */
.v2k-bottom-nav {
  flex: 0 0 56px;
}

/* --- TABLET / DESKTOP: center the feed column --- */
@media (min-width: 768px) {
  .v2k-main {
    max-width: 540px;
    margin: 0 auto;
  }
}

/* --- V2K HEADER LOGO CLAMP (feed) --- */
.v2k-nav .nav-left img,
.nav-logo img,
img.v2k-logo,
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px;
  object-fit: cover;
}

/* --- BASE LAYOUT --- */
html, body {
  height: 100%;
}

.v2k-body {
  margin: 0;
  padding: 0;
  color: #f8f8f8;
}

.v2k-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top nav */
.v2k-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
}

/* --- MOBILE-FIRST FEED COLUMN --- */
/* main feed area becomes a scroll container with snap */
.v2k-main {
  flex: 1 1 auto;
  height: calc(100vh - 120px); /* header + bottom nav approx */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

/* each direct child (cards/sections) snaps into place */
.v2k-main > * {
  scroll-snap-align: start;
}

/* generic media card layout */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

/* wrapper around img/video for 9:16 framing */
.media-frame {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 9 / 16;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* actual media */
.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* fallbacks for older markup where media isn't wrapped */
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

/* bottom nav bar (if present) stays fixed height on phones */
.v2k-bottom-nav {
  flex: 0 0 56px;
}

/* --- TABLET / DESKTOP: center the feed column --- */
@media (min-width: 768px) {
  .v2k-main {
    max-width: 540px;
    margin: 0 auto;
  }
}

/* NAV LOGO + AVATAR SIZE GUARD */
.v2k-nav .nav-left img,
.nav-logo-img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 999px;
  object-fit: cover;
}

/* Reset body/html so nothing weird sits above pages */
html, body {
  margin: 0;
  padding: 0;
}

/* --- NAV LOGO SIZE --- */
.nav-logo-link img{
  height:32px;
  width:auto;
  display:block;
}

/* --- PHONE-FIRST LAYOUT --- */
.v2k-main{
  max-width:480px;
  margin:0 auto;
  padding:0 0 72px; /* space above bottom nav */
}

/* --- FEED SCROLL-SNAP --- */
.feed-shell{
  height:calc(100vh - 56px); /* minus top nav */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
  padding:0;
  margin:0;
}

  scroll-snap-align:start;
  margin:0 0 1rem;
  border-radius:16px;
  overflow:hidden;
}

/* Media sizing so images aren't massive */
  width:100%;
}

.feed-media{
  display:block;
  width:100%;
  max-height:70vh;
  object-fit:cover;
}

  padding:0.5rem 0.75rem 0.75rem;
  font-size:0.9rem;
  color:#f5f5f5;
}

/* Bottom nav basic layout */
.v2k-bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  backdrop-filter:blur(8px);
  z-index:50;
}

.v2k-bottom-nav .bottom-item{
  flex:1;
  text-align:center;
  font-size:0.75rem;
  color:#ccc;
  text-decoration:none;
}

.v2k-bottom-nav .bottom-item.active{
  color:#fff;
}

/* Center FAB */
.fab-upload{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  border:none;
  font-size:1.5rem;
  cursor:pointer;
}


sudo systemctl restart v2ksocial.service
sudo systemctl reload nginx

body, .v2k-body {
}
/* Global Odin dark background */
body,
.v2k-body {
  background: #0b0d12 !important;          /* Odin dark steel-blue */
  background-color: #0b0d12 !important;
}

/* Main shells should NOT force white */
.v2k-main,
.feed-shell,
.profile-page,
.admin-shell {
  background: transparent !important;
}
/* === FORCE GLOBAL ODIN BACKGROUND, NO HERO IMAGE === */
html,
body,
.v2k-body,
.v2k-app {
  background: #0b0d12 !important;          /* dark grey/blue */
  background-color: #0b0d12 !important;
}

/* make main shells transparent so the dark body shows through */
.v2k-main,
.feed-shell,
.profile-page,
.admin-shell {
  background: transparent !important;
}
body, .v2k-body, .v2k-app {
  background: #0b0d12 !important;      /* dark grey/blue steel */
  background-color: #0b0d12 !important;
}

/* Nuke any leftover hero sections just in case */
.hero, .background-logo, .v2k-hero {
  display: none !important;
}

/* Global flat background – no hero image */
html,
body,
.v2k-body,
.v2k-app,
.v2k-main {
  background-color: #0b0d12;
  background: #0b0d12;
}

/* Make profile / feed shells transparent over that */
.profile-page,
.profile-header,
.user-banner,
.profile-top,
#profile-header,
.feed-shell,
.v2k-feed-shell {
  background: transparent !important;
  background-color: transparent !important;
}

/* === V2K: Global background override (no hero images) === */
html,
body,
.v2k-body,
.v2k-app,
.v2k-main {
  background-color: #0b0d12 !important;  /* flat Odin steel/blue */
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-position: center center !important;
}

/* === V2K: Avatar size fix === */
.nav-avatar-inner img,
.nav-avatar-link img,
.profile-header-avatar img {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block;
}

/* === V2K: Phone-first feed layout + scroll snap === */

/* Main scroll area */
.v2k-main {
  min-height: 100vh;
  overflow-y: auto;
}

/* Center the feed column and keep it narrow like a phone screen */
.feed-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 0.5rem 0.75rem 5rem; /* top, sides, bottom (space for bottom nav) */
}

/* Stack posts vertically */
.feed-column {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Base card look */
  background: rgba(6, 7, 10, 0.96);
  border-radius: 1.5rem;
  padding: 0.5rem;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make the actual media fill the card nicely */
  width: 100%;
  height: 100%;
  border-radius: 1.25rem;
  object-fit: cover;
  display: block;
}

/* Phone-only: full-screen snap scrolling like TikTok */
@media (max-width: 768px) {
  .v2k-main {
    scroll-snap-type: y mandatory;
  }

    min-height: 85vh;       /* almost full screen per post */
    scroll-snap-align: start;
  }
}

/* ===== BOTTOM NAV / FAB BAR (TikTok-style) ===== */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1 1 auto;
  padding-bottom: 70px; /* space for bottom nav */
}

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: rgba(4, 4, 10, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
}

.bottom-nav .nav-item {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #f5f5f5;
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bottom-nav .nav-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}

.bottom-nav .nav-item[data-tab="live"] .nav-icon {
  font-size: 20px;
}

.bottom-nav .nav-item:active,
.bottom-nav .nav-item:focus {
  transform: scale(0.96);
}

.nav-center {
  position: relative;
  width: 70px;
  display: flex;
  justify-content: center;
}

.fab-main {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  background: radial-gradient(circle at 30% 0%, #16f2ff, #0077ff 40%, #ff7b1a 100%);
  box-shadow: 0 0 12px rgba(0, 255, 255, 0.5), 0 0 24px rgba(255, 122, 0, 0.5);
  color: #050509;
  border: 2px solid #11131a;
  margin-top: -32px;
}

.fab-main:active {
  transform: translateY(2px) scale(0.97);
}

/* ===== TOP BAR ===== */
.top-bar {
  height: 56px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: radial-gradient(circle at 0% 0%, #00ffd0 0, #05060a 40%, #05060a 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-logo {
  height: 40px;
  width: auto;
}

.top-title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.top-title-main {
  font-size: 15px;
  font-weight: 700;
}

.top-title-sub {
  font-size: 10px;
  opacity: 0.75;
}

.top-bar-right {
  font-size: 12px;
}

/* ===== LIVE PAGE LAYOUT ===== */
.page-live,
.page-live-watch,
.page-live-hub {
  padding: 12px;
}

.page-live .live-grid,
.page-live-watch .live-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .page-live .live-grid,
  .page-live-watch .live-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.live-video-card,
.live-chat-card {
  background: rgba(10, 10, 18, 0.95);
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.live-video-card h2,
.live-chat-card h2 {
  margin: 0 0 8px;
  font-size: 14px;
}

#live-local-video,
#live-remote-video {
  width: 100%;
  max-height: 420px;
  border-radius: 12px;
  background: #000;
}

.live-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.live-actions input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 5, 10, 0.9);
  color: #f5f5f5;
  font-size: 12px;
}

.btn-primary,
.btn-danger {
  padding: 6px 10px;
  border-radius: 999px;
  border: none;
  font-size: 12px;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(135deg, #18ffff, #00b0ff);
  color: #020308;
}

.btn-danger {
  background: linear-gradient(135deg, #ff5252, #ff1744);
  color: #fff;
}

.live-status,
.live-viewers {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.85;
}

.live-log {
  max-height: 420px;
  overflow-y: auto;
  font-size: 11px;
  display: flex;
  flex-direction: column-reverse;
}

/* ===== LIVE CHAT INPUT BAR ===== */
.live-chat-input {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

.live-chat-input input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 5, 10, 0.9);
  color: #f5f5f5;
  font-size: 12px;
}

/* ===== LIVE GIFT OVERLAY ===== */
.live-video-shell {
  position: relative;
}

.live-gift-overlay {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.75), rgba(5, 16, 24, 0.95));
  border: 1px solid rgba(0, 255, 200, 0.3);
  box-shadow: 0 0 10px rgba(0, 255, 200, 0.25);
  font-size: 11px;
}

.live-gift-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.live-gift-title {
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.live-gift-target {
  opacity: 0.8;
}

.live-gift-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  margin-bottom: 4px;
}

.live-gift-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00f5ff, #00ff87, #ffb300);
  transition: width 0.25s ease-out;
}

.live-gift-last {
  font-size: 10px;
  opacity: 0.9;
}

/* temp test gift button wrapper */
.live-gift-test {
  margin-top: 8px;
}

/* ===== LIVE HUB GRID ===== */
.live-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.live-hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  border-radius: 14px;
  text-decoration: none;
  color: #f5f5f5;
  background: radial-gradient(circle at 0% 0%, rgba(0,255,170,0.16), rgba(5,6,12,0.96));
  border: 1px solid rgba(0, 255, 200, 0.35);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
  font-size: 12px;
}

.live-hub-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(0, 255, 200, 0.35);
}

.live-hub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.live-pill {
  background: linear-gradient(135deg, #ff1744, #ff9100);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.live-hub-viewers {
  opacity: 0.9;
  font-size: 11px;
}

.live-hub-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.live-hub-host-name {
  font-weight: 500;
}

.live-hub-footer {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.8;
}

/* ===== GIFT TRAY (VIEWER) ===== */
.live-gift-tray {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.gift-chip {
  flex: 0 0 calc(25% - 6px);
  min-width: 70px;
  border-radius: 12px;
  border: none;
  padding: 4px 6px;
  font-size: 11px;
  background: linear-gradient(135deg, #0a0c16, #111929);
  color: #f5f5f5;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  line-height: 1.2;
}

.gift-chip span {
  display: block;
  font-size: 10px;
  opacity: 0.8;
}

.gift-chip:active {
  transform: scale(0.95);
  box-shadow: 0 0 10px rgba(0,255,200,0.3);
}

@media (max-width: 480px) {
  .gift-chip {
    flex: 1 0 calc(50% - 6px);
  }
}

/* ===== WALLET UI ===== */
.page-wallet,
.page-wallet-store {
  padding: 12px;
}

.wallet-card {
  background: radial-gradient(circle at 0% 0%, rgba(0,255,170,0.18), rgba(5,6,12,0.96));
  border-radius: 18px;
  padding: 14px;
  border: 1px solid rgba(0, 255, 200, 0.4);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
  margin-bottom: 12px;
}

.wallet-card-compact {
  margin-bottom: 16px;
}

.wallet-balance-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.wallet-balance-value {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.wallet-balance-number {
  font-size: 26px;
  font-weight: 800;
}

.wallet-balance-unit {
  font-size: 12px;
  opacity: 0.8;
}

.wallet-balance-subtext {
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.85;
}

.wallet-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wallet-info-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.wallet-info-card {
  background: rgba(8, 10, 18, 0.96);
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
}

/* Wallet store */
.wallet-pack-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.wallet-pack-card {
  background: rgba(8, 10, 18, 0.96);
  border-radius: 14px;
  padding: 10px;
  border: 1px solid rgba(0, 255, 200, 0.35);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-pack-name {
  font-weight: 700;
}

.wallet-pack-coins {
  font-size: 13px;
}

.wallet-pack-tagline {
  font-size: 11px;
  opacity: 0.85;
}

.wallet-pack-price {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 700;
}

.wallet-pack-btn {
  margin-top: 6px;
}

.wallet-note {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.8;
}

/* Wallet pill in top bar */
.wallet-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  margin-right: 8px;
  text-decoration: none;
  background: linear-gradient(135deg, rgba(0,255,200,0.15), rgba(0,140,255,0.25));
  border: 1px solid rgba(0, 255, 200, 0.4);
  color: #f5f5f5;
}
.wallet-pill:active {
  transform: scale(0.96);
}

.wallet-pill-balance {
  margin-left: 4px;
  font-weight: 700;
  font-size: 11px;
}

/* LIVE NOW pill in top bar */
.live-now-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 11px;
  text-decoration: none;
  background: linear-gradient(135deg, #ff1744, #ff9100);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #00ffab;
  margin-right: 4px;
  box-shadow: 0 0 8px rgba(0, 255, 171, 0.8);
}

/* Viewer balance line under video */
.live-balance-line {
  font-size: 11px;
  margin-bottom: 4px;
  opacity: 0.9;
}

.live-gift-pulse {
  animation: liveGiftPulse 0.6s ease-out;
}

@keyframes liveGiftPulse {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(0,255,200,0.0);
  }
  30% {
    transform: scale(1.03);
    text-shadow: 0 0 12px rgba(0,255,200,0.9);
  }
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(0,255,200,0.0);
  }
}

.wallet-history-table-wrapper {
  max-height: 420px;
  overflow: auto;
  margin-top: 6px;
}

.wallet-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.wallet-history-table th,
.wallet-history-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.wallet-history-table th {
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10px;
  opacity: 0.9;
}

.wallet-history-table tr:nth-child(even) {
  background: rgba(255,255,255,0.02);
}

.wallet-admin-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.wallet-admin-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.wallet-admin-form .form-row-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

.wallet-admin-form input[type="text"],
.wallet-admin-form input[type="number"] {
  background: rgba(8,10,18,0.95);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  padding: 6px 8px;
  color: #f5f5f5;
}

.wallet-admin-form label {
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Mobile stacking */
@media (max-width: 720px) {
  .wallet-admin-form {
    grid-template-columns: 1fr;
  }
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 11px;
  text-decoration: none;
  background: linear-gradient(135deg, #455a64, #90a4ae);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.admin-pill:hover {
  filter: brightness(1.1);
}

.wallet-payout-estimate,
.wallet-tier {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255,255,255,0.12);
}

.wallet-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.wallet-store-card {
  background: radial-gradient(circle at top, rgba(0,255,200,0.08), rgba(0,0,0,0.9));
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(0,255,200,0.18);
  box-shadow: 0 0 16px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-store-name {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.wallet-store-coins {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.wallet-store-coins-num {
  font-size: 20px;
  font-weight: 700;
}

.wallet-store-coins-unit {
  font-size: 11px;
  opacity: 0.85;
}

.wallet-store-price {
  margin: 2px 0;
  font-size: 13px;
}

.wallet-store-price-sub {
  font-size: 9px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.wallet-store-tagline {
  margin: 2px 0 6px 0;
  font-size: 11px;
  opacity: 0.9;
}

.wallet-store-form .btn-primary {
  width: 100%;
}

/* --- Profile Page --- */

.page-profile {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 10px 80px 10px;
}

.profile-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.profile-avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  border: 2px solid rgba(0,255,200,0.4);
  padding: 3px;
  box-shadow: 0 0 18px rgba(0,0,0,0.6);
}

.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.profile-main-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-username-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-username {
  font-size: 18px;
  font-weight: 700;
}

.profile-tier-pill {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00ffc8, #00897b);
  color: #020408;
}

.profile-subline {
  font-size: 12px;
  opacity: 0.9;
}

.profile-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.profile-stat {
  min-width: 70px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.profile-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.profile-stat-value {
  font-size: 13px;
  font-weight: 600;
}

.profile-stat-unit {
  font-size: 10px;
  opacity: 0.85;
}

.profile-creator-strip {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  background: radial-gradient(circle at top left, rgba(0,255,200,0.18), rgba(0,0,0,0.9));
  border: 1px solid rgba(0,255,200,0.25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.profile-creator-strip-empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.6);
}

.creator-est {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.creator-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.creator-value {
  font-size: 16px;
  font-weight: 700;
}

.creator-note {
  font-size: 10px;
  opacity: 0.75;
}

.creator-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.btn-primary-sm,
.btn-ghost-sm {
  font-size: 11px;
  padding: 4px 10px;
}

.btn-primary-sm {
  border-radius: 999px;
}

.btn-ghost-sm {
  border-radius: 999px;
}

.profile-bio {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.9;
}

.profile-actions-row {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-section {
  margin-top: 10px;
}

.profile-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  margin-bottom: 6px;
}

.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px;
}

.profile-media-card {
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.16);
  display: flex;
  flex-direction: column;
}

.profile-media-thumb img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.profile-media-fallback {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0.7;
}

.profile-media-caption {
  padding: 4px 6px;
  font-size: 11px;
  opacity: 0.95;
}

.profile-empty {
  font-size: 12px;
  opacity: 0.85;
}

/* Mobile */
@media (max-width: 720px) {
  .profile-header {
    grid-template-columns: 1fr;
  }
  .profile-avatar-wrap {
    width: 72px;
    height: 72px;
  }
}

/* --- Leaderboard Page --- */

.page-leaderboard {
  max-width: 960px;
  margin: 0 auto;
  padding: 10px 10px 80px 10px;
}

.leaderboard-card {
  background: rgba(4,6,12,0.95);
  border-radius: 14px;
  border: 1px solid rgba(0,255,200,0.12);
  box-shadow: 0 0 18px rgba(0,0,0,0.7);
  padding: 8px;
}

.leaderboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leaderboard-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.leaderboard-row:last-child {
  border-bottom: none;
}

.leaderboard-row-me {
  background: radial-gradient(circle at left, rgba(0,255,200,0.14), transparent);
}

.leaderboard-rank {
  font-size: 13px;
  font-weight: 700;
  width: 32px;
  text-align: center;
}

.leaderboard-avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
}

.leaderboard-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.leaderboard-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.leaderboard-username-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.leaderboard-username {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #e0f2f1;
}

.leaderboard-username:hover {
  text-decoration: underline;
}

.leaderboard-tier-pill {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #00ffc8, #00897b);
  color: #020408;
}

.leaderboard-meta {
  font-size: 10px;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 4px;
}

.leaderboard-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.leaderboard-stat-block {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-end;
}

.leaderboard-stat-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.leaderboard-stat-value {
  font-size: 13px;
  font-weight: 600;
}

.leaderboard-stat-unit {
  font-size: 10px;
  opacity: 0.85;
}

/* Top bar ranks pill */
.ranks-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  margin-right: 8px;
  border-radius: 999px;
  font-size: 11px;
  text-decoration: none;
  background: linear-gradient(135deg, #ffb300, #ff6f00);
  color: #020408;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ranks-pill:hover {
  filter: brightness(1.1);
}

/* Mobile layout tweaks */
@media (max-width: 720px) {
  .leaderboard-row {
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
  }
  .leaderboard-stats {
    grid-column: 3;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
  }
}

/* Wallet rank strip */
.wallet-rank-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.wallet-rank-main {
  flex: 1;
}

.wallet-rank-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Live pages */

.page-live {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 10px 80px 10px;
}

.live-shell {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(0, 1.4fr);
  gap: 10px;
}

.live-video-column {
  min-width: 0;
}

.live-video-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  min-height: 260px;
}

.live-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 10px;
  font-size: 12px;
  opacity: 0.85;
  text-align: center;
}

.live-video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
}

.live-host-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.7);
  border-radius: 999px;
  padding: 3px 7px;
  border: 1px solid rgba(0,255,200,0.30);
  pointer-events: auto;
}

.live-host-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
}

.live-host-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-host-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.live-host-name {
  font-size: 12px;
  font-weight: 600;
}

.live-host-sub {
  font-size: 10px;
  opacity: 0.9;
}

.live-status-pill,
.live-room-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  pointer-events: auto;
}

.live-status-host {
  background: linear-gradient(135deg, #00ffc8, #00897b);
  color: #020408;
}

.live-status-watch {
  background: linear-gradient(135deg, #ff6f00, #ffb300);
  color: #020408;
}

.live-room-pill {
  align-self: flex-end;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(255,255,255,0.25);
  color: #eceff1;
}

/* Side column */

.live-side-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-side-card {
  background: rgba(4,6,12,0.95);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 8px;
}

.live-side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.live-side-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.live-side-body {
  font-size: 11px;
}

.live-wallet-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.live-wallet-label {
  opacity: 0.85;
  font-size: 11px;
}

.live-wallet-value {
  font-weight: 600;
}

.live-wallet-actions {
  display: flex;
  gap: 6px;
}

.live-wallet-note {
  font-size: 10px;
  opacity: 0.85;
}

/* Gift tray */

.live-gift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.gift-button {
  border: 1px solid rgba(0,255,200,0.25);
  background: radial-gradient(circle at top, rgba(0,255,200,0.12), rgba(0,0,0,0.9));
  border-radius: 10px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.gift-button .gift-name {
  font-weight: 600;
}

.gift-button .gift-cost {
  font-size: 10px;
  opacity: 0.9;
}

/* Chat placeholder */

.live-chat-body {
  min-height: 80px;
}

.live-chat-placeholder {
  font-size: 11px;
  opacity: 0.8;
}

/* Live list */

.live-list {
  background: rgba(4,6,12,0.95);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 8px;
}

.live-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.live-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.live-list-row:last-child {
  border-bottom: none;
}

.live-list-title {
  font-size: 12px;
  font-weight: 600;
}

.live-list-sub {
  font-size: 10px;
  opacity: 0.85;
}

.live-list-actions {
  display: flex;
}

/* Mobile layout tweaks */

@media (max-width: 900px) {
  .live-shell {
    grid-template-columns: 1fr;
  }
}

/* Live gift storm overlay */

.live-gift-storm {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.live-gift-float {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(0,255,200,0.35);
  box-shadow: 0 0 10px rgba(0,0,0,0.8);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.live-gift-float-show {
  opacity: 1;
  transform: translateY(0);
}

.live-gift-float-hide {
  opacity: 0;
  transform: translateY(-6px);
}

.live-controls-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.live-controls-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* --- Admin / Odin Bank pages --- */

.page-admin {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 10px 80px 10px;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-card {
  background: rgba(4,6,12,0.96);
  border-radius: 14px;
  border: 1px solid rgba(0,255,200,0.18);
  padding: 8px 10px;
  box-shadow: 0 0 18px rgba(0,0,0,0.8);
}

.admin-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.admin-number {
  font-size: 20px;
  font-weight: 700;
  margin: 2px 0 4px 0;
}

.admin-sub {
  font-size: 11px;
  opacity: 0.8;
}

.admin-label {
  margin-top: 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.admin-value {
  font-size: 13px;
  font-weight: 500;
}

.admin-card-table {
  margin-top: 10px;
}

.admin-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.admin-table th,
.admin-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.admin-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.02);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-form-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-form-row label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.admin-form-row input {
  background: rgba(0,0,0,0.6);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.16);
  padding: 4px 6px;
  color: #e0f2f1;
  font-size: 12px;
}

.admin-form-row input:focus {
  outline: none;
  border-color: rgba(0,255,200,0.6);
  box-shadow: 0 0 8px rgba(0,255,200,0.4);
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .page-admin {
    padding: 8px 6px 80px 6px;
  }
}

/* === V2K GLOBAL THEME (chrome teal-to-orange) === */

:root {
  /* pulled and brightened from the logo */
  --v2k-teal: #4ac2f0;
  --v2k-teal-deep: #1b5b73;
  --v2k-orange: #ff7a2f;
  --v2k-orange-deep: #c24a12;
  --v2k-metal: #d3dde8;
  --v2k-metal-soft: #9aa5b3;
  --v2k-bg: #05070a;
  --v2k-bg-soft: #0b1016;
}

/* Body + shell */

body.theme-odin {
  min-height: 100vh;
  background:
    radial-gradient(circle at top, #151b24 0, #05070a 45%, #020306 70%, #000000 100%);
  color: var(--v2k-metal);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.app-shell {
  max-width: 1200px;
  margin: 0 auto;
}

/* Top bar */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background:
    linear-gradient(90deg,
      rgba(74,194,240,0.12),
      rgba(5,7,10,0.96),
      rgba(255,122,47,0.12));
  border-bottom: 1px solid rgba(211,221,232,0.18);
  backdrop-filter: blur(10px);
}

.top-logo {
  height: 32px;
  display: block;
}

.top-title-main {
  font-size: 14px;
  font-weight: 700;
}

.top-title-sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.8;
}

.top-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.top-user {
  font-size: 11px;
  opacity: 0.9;
}

/* Buttons */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.4);
  background: linear-gradient(135deg, var(--v2k-orange), var(--v2k-teal));
  color: #050608;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(1.06);
}

.btn-primary-sm {
  padding: 3px 9px;
  font-size: 10px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(154,165,179,0.6);
  background: transparent;
  color: var(--v2k-metal);
  font-size: 11px;
  text-decoration: none;
  cursor: pointer;
}

.btn-ghost:hover {
  background: rgba(11,16,22,0.9);
}

.btn-ghost-sm {
  padding: 2px 8px;
  font-size: 10px;
}

.btn-link {
  font-size: 11px;
  text-decoration: none;
  color: var(--v2k-metal);
  opacity: 0.9;
}

.btn-link:hover {
  opacity: 1;
}

.btn-logout {
  opacity: 0.8;
}

/* Pills */

.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: radial-gradient(circle at top, rgba(74,194,240,0.35), rgba(8,12,18,0.95));
  font-size: 11px;
}

.wallet-pill-balance {
  font-weight: 600;
}

.live-now-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: radial-gradient(circle at top, rgba(255,122,47,0.5), rgba(24,0,0,0.9));
  font-size: 11px;
  color: #ffe9d9;
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ff3b3b;
}

/* Bottom nav + FAB */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 6px 6px;
  background: linear-gradient(180deg, rgba(5,7,10,0.1), #020306);
  border-top: 1px solid rgba(211,221,232,0.18);
}

.nav-item {
  flex: 1;
  text-align: center;
  font-size: 10px;
  text-decoration: none;
  color: var(--v2k-metal-soft);
}

.nav-icon {
  font-size: 16px;
}

.nav-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.nav-center {
  position: relative;
  flex: 0 0 auto;
}

.fab-main {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(0,0,0,0.8);
  background: conic-gradient(from 210deg, var(--v2k-teal), var(--v2k-orange), var(--v2k-teal));
  color: #050608;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(0,0,0,0.9);
}

/* Flash messages */

.flash-container {
  position: fixed;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  max-width: 420px;
  width: 90%;
}

.flash {
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(5,7,10,0.96);
  border: 1px solid rgba(211,221,232,0.4);
}

.flash-success {
  border-color: rgba(74,194,240,0.6);
}

.flash-danger {
  border-color: rgba(255,122,47,0.7);
}

.flash-info {
  border-color: rgba(154,165,179,0.7);
}

/* Main page wrapper */

.app-main {
  padding: 8px 10px 70px 10px;
}

/* Small screen tweaks */

@media (max-width: 720px) {
  .top-title-sub {
    display: none;
  }
  .top-bar {
    padding-inline: 6px;
  }
  .app-main {
    padding-inline: 6px;
  }
}

/* --- Generic page + header --- */

.page {
  max-width: 1100px;
  margin: 0 auto;
}

.page-header h1 {
  font-size: 20px;
  margin-bottom: 4px;
}

.page-header p {
  font-size: 11px;
  opacity: 0.85;
}

/* --- Ranks page --- */

.page-ranks {
  padding: 8px 10px 80px 10px;
}

.ranks-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  margin-bottom: 8px;
}

.ranks-sub {
  font-size: 11px;
  opacity: 0.85;
}

.ranks-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tier-pill {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(211,221,232,0.35);
}

.tier-allfather {
  background: radial-gradient(circle at top, rgba(255,122,47,0.9), rgba(0,0,0,0.5));
  border-color: rgba(255,122,47,0.9);
}

.tier-warrior {
  background: radial-gradient(circle at top, rgba(255,122,47,0.65), rgba(0,0,0,0.5));
  border-color: rgba(255,122,47,0.7);
}

.tier-rising {
  background: radial-gradient(circle at top, rgba(74,194,240,0.55), rgba(0,0,0,0.5));
  border-color: rgba(74,194,240,0.7);
}

.tier-starter {
  background: rgba(11,16,22,0.9);
  border-color: rgba(154,165,179,0.7);
}

.ranks-card {
  background: rgba(4,6,12,0.96);
  border-radius: 14px;
  border: 1px solid rgba(211,221,232,0.16);
  padding: 8px 10px;
  box-shadow: 0 0 18px rgba(0,0,0,0.8);
  margin-bottom: 10px;
}

.ranks-secondary {
  margin-top: 6px;
}

.ranks-section-header {
  margin-bottom: 4px;
}

.ranks-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
}

.ranks-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.ranks-table th,
.ranks-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ranks-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.ranks-row:nth-child(odd) td {
  background: rgba(255,255,255,0.01);
}

.ranks-row-1 td {
  border-bottom-color: rgba(255,122,47,0.7);
}

.ranks-user-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ranks-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(211,221,232,0.35);
}

.ranks-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ranks-avatar-sm {
  width: 22px;
  height: 22px;
}

.ranks-username {
  font-size: 12px;
  font-weight: 600;
}

.ranks-user-sub {
  font-size: 10px;
  opacity: 0.8;
}

.ranks-rank-cell {
  width: 40px;
}

.ranks-info {
  font-size: 11px;
  opacity: 0.9;
  margin-top: 6px;
}

.ranks-info ul {
  padding-left: 18px;
}

/* Mobile tweaks */

@media (max-width: 720px) {
  .page-ranks {
    padding-inline: 6px;
  }
  .ranks-hero {
    flex-direction: column;
  }
}

/* --- Search pill in top bar --- */

.ranks-pill + .search-pill {
  margin-left: 2px;
}

.search-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11,16,22,0.9);
  border: 1px solid rgba(154,165,179,0.7);
  font-size: 11px;
  text-decoration: none;
  color: var(--v2k-metal-soft);
}

/* --- Profile header + counts --- */

.page-profile {
  padding: 8px 10px 80px 10px;
}

.profile-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.profile-header-left {
  display: flex;
  gap: 8px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(211,221,232,0.4);
}

.profile-avatar-sm {
  width: 48px;
  height: 48px;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.profile-username {
  font-size: 16px;
  font-weight: 700;
}

.profile-sub {
  font-size: 11px;
  opacity: 0.85;
}

.profile-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.profile-count {
  display: inline-flex;
  flex-direction: column;
  min-width: 54px;
  text-decoration: none;
  color: var(--v2k-metal);
}

.profile-count-number {
  font-size: 13px;
  font-weight: 600;
}

.profile-count-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.profile-header-right {
  display: flex;
  align-items: center;
}

/* Follow button */

.profile-follow-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(135deg, var(--v2k-teal), var(--v2k-orange));
  color: #050608;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.profile-following {
  background: rgba(11,16,22,0.9);
  color: var(--v2k-metal);
}

/* Profile media grid */

.profile-media-section {
  margin-top: 6px;
}

.profile-section-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
}

.profile-media-card {
  background: rgba(4,6,12,0.96);
  border-radius: 10px;
  border: 1px solid rgba(211,221,232,0.12);
  overflow: hidden;
}

.profile-media-thumb {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
}

.profile-media-thumb img,
.profile-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-media-caption {
  font-size: 10px;
  padding: 3px 5px 5px;
  opacity: 0.9;
}

.profile-empty {
  font-size: 11px;
  opacity: 0.85;
}

/* User list (followers/following/search) */

.user-list {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
}

.user-list-item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.user-list-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  text-decoration: none;
  color: var(--v2k-metal);
}

.user-list-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(211,221,232,0.3);
}

.user-list-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-list-meta {
  display: flex;
  flex-direction: column;
}

.user-list-name {
  font-size: 13px;
  font-weight: 600;
}

.user-list-sub {
  font-size: 10px;
  opacity: 0.8;
}

/* Search page */

.page-search {
  padding: 8px 10px 80px 10px;
}

.search-form {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  margin-bottom: 6px;
}

.search-form input[type="text"] {
  flex: 1;
  background: rgba(5,7,10,0.9);
  border-radius: 999px;
  border: 1px solid rgba(154,165,179,0.8);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--v2k-metal);
}

.search-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(74,194,240,0.9);
  box-shadow: 0 0 8px rgba(74,194,240,0.5);
}

.search-results-label {
  font-size: 11px;
  opacity: 0.85;
}

/* Small screen tweaks */

@media (max-width: 720px) {
  .page-profile,
  .page-search {
    padding-inline: 6px;
  }

  .profile-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .profile-header-right {
    align-self: flex-end;
  }
}

/* --- Feed media cards / actions (shared) --- */

  background: rgba(4,6,12,0.96);
  border-radius: 14px;
  border: 1px solid rgba(211,221,232,0.12);
  overflow: hidden;
  box-shadow: 0 0 18px rgba(0,0,0,0.85);
}

  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
}

.media-avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(211,221,232,0.35);
}

.media-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-meta {
  display: flex;
  flex-direction: column;
  font-size: 11px;
}

.media-username-link {
  text-decoration: none;
  color: var(--v2k-metal);
  font-weight: 600;
}

.media-subline {
  font-size: 9px;
  opacity: 0.75;
}

  padding: 4px 6px 6px;
}

.media-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.media-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(154,165,179,0.6);
  background: rgba(5,7,10,0.9);
  font-size: 10px;
  color: var(--v2k-metal);
  cursor: pointer;
}

.media-icon-heart {
  font-size: 11px;
}

.media-count {
  font-size: 10px;
}

.media-action-like.is-liked {
  border-color: rgba(255,122,47,0.85);
  background: radial-gradient(circle at top, rgba(255,122,47,0.7), rgba(5,7,10,0.95));
  color: #ffe9d9;
}

.media-action-like.is-liked .media-icon-heart {
  filter: drop-shadow(0 0 4px rgba(255,122,47,0.9));
}

/* --- Profile extras --- */

.profile-bio {
  font-size: 11px;
  margin-top: 2px;
  opacity: 0.9;
}

.profile-link {
  font-size: 11px;
  color: var(--v2k-teal);
  text-decoration: none;
  word-break: break-all;
}

.profile-link:hover {
  text-decoration: underline;
}

/* Edit profile page */

.page-edit-profile {
  padding: 8px 10px 80px 10px;
  max-width: 600px;
  margin: 0 auto;
}

.edit-profile-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.form-input,
.form-textarea {
  background: rgba(5,7,10,0.9);
  border-radius: 10px;
  border: 1px solid rgba(154,165,179,0.8);
  padding: 6px 8px;
  font-size: 12px;
  color: var(--v2k-metal);
}

.form-textarea {
  resize: vertical;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: rgba(74,194,240,0.9);
  box-shadow: 0 0 8px rgba(74,194,240,0.5);
}

.edit-profile-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

:root {
  --v2k-teal: #4ac2f0;
  --v2k-orange: #ff7a2f;
  --v2k-metal: #e3edf7;
}

/* Profile list / social tabs */

.page-profile-list {
  padding: 8px 10px 72px 10px;
}

.profile-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 10px;
}

.profile-tab {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  border-radius: 999px;
  border: 1px solid rgba(154,165,179,0.7);
  font-size: 11px;
  text-decoration: none;
  color: var(--v2k-metal);
  background: rgba(5,7,10,0.95);
}

.profile-tab.is-active {
  border-color: var(--v2k-orange);
  background: radial-gradient(circle at top, rgba(255,122,47,0.9), rgba(5,7,10,0.98));
  color: #fff5eb;
}

.profile-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(14,18,26,0.9);
}

.pli-left {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--v2k-metal);
}

.pli-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(154,165,179,0.8);
}

.pli-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pli-username {
  font-size: 12px;
  font-weight: 600;
}

/* Search page */

.page-search {
  padding: 8px 10px 72px 10px;
}

.search-form {
  display: flex;
  gap: 6px;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(154,165,179,0.8);
  background: rgba(5,7,10,0.9);
  color: var(--v2k-metal);
  font-size: 12px;
}

.search-input:focus {
  outline: none;
  border-color: var(--v2k-teal);
  box-shadow: 0 0 10px rgba(74,194,240,0.5);
}

.search-user-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.search-user-item {
  border-bottom: 1px solid rgba(14,18,26,0.9);
}

.search-user-link {
  display: flex;
  padding: 6px 2px;
  gap: 8px;
  text-decoration: none;
  color: var(--v2k-metal);
}

.search-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(154,165,179,0.9);
}

.search-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-username {
  font-size: 13px;
  font-weight: 600;
}

.search-bio {
  font-size: 11px;
  opacity: 0.9;
}

.profile-stats-strip {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.profile-stat {
  min-width: 60px;
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid rgba(154,165,179,0.8);
  background: radial-gradient(circle at top, rgba(74,194,240,0.25), rgba(5,7,10,0.96));
  text-align: center;
}

.profile-stat-number {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--v2k-metal);
}

.profile-stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
}

.page-upload {
  padding: 10px 12px 80px 12px;
}

.upload-card {
  margin-top: 10px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(154,165,179,0.7);
  background: radial-gradient(circle at top, rgba(74,194,240,0.15), rgba(5,7,10,0.98));
}

.upload-form .form-group {
  margin-bottom: 10px;
}

.form-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  color: var(--v2k-metal);
  opacity: 0.9;
}

.form-input-file {
  width: 100%;
  font-size: 11px;
  padding: 6px 0;
  color: var(--v2k-metal);
}

.form-input-textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(154,165,179,0.8);
  background: rgba(5,7,10,0.92);
  color: var(--v2k-metal);
  font-size: 12px;
  padding: 6px 8px;
  resize: vertical;
}

.form-input-textarea:focus {
  outline: none;
  border-color: var(--v2k-teal);
  box-shadow: 0 0 10px rgba(74,194,240,0.4);
}

.upload-actions {
  margin-top: 10px;
  text-align: right;
}

.preview-media {
  margin-bottom: 8px;
}

.preview-image,
.preview-video {
  width: 100%;
  max-height: 360px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(154,165,179,0.9);
}

.preview-caption {
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--v2k-metal);
}

.preview-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.preview-tools {
  display: flex;
  gap: 6px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.preview-thumb-select {
  margin: 6px 0 10px;
}

.thumb-slider {
  width: 100%;
}

.thumb-hint {
  font-size: 10px;
  opacity: 0.75;
  margin-top: 2px;
}

/* Full-screen media viewer overlay */
.media-viewer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.96);
  z-index: 2200;
  display: none;
  flex-direction: column;
}

.media-viewer-backdrop.is-open {
  display: flex;
}

.media-viewer-header {
  height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--v2k-metal);
  font-size: 13px;
}

.media-viewer-close {
  border: none;
  background: transparent;
  color: var(--v2k-metal);
  font-size: 16px;
  cursor: pointer;
}

.media-viewer-inner {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

.media-viewer-item {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 8px 8px 24px;
  box-sizing: border-box;
}

.media-viewer-media {
  max-height: 70vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-viewer-media video,
.media-viewer-media img {
  max-height: 70vh;
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(154,165,179,0.9);
  object-fit: cover;
}

.media-viewer-caption {
  margin-top: 8px;
  width: 100%;
  font-size: 13px;
  color: var(--v2k-metal);
}

.page-feed {
  height: calc(100vh - 56px); /* account for bottom bar */
  display: flex;
  flex-direction: column;
  padding: 0;
}

.feed-header {
  padding: 8px 12px 4px;
}

.feed-scroll {
  flex: 1;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

  min-height: calc(100vh - 56px - 44px); /* full viewport minus header + bottom bar */
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 6px 12px;
  box-sizing: border-box;
}

  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.feed-media {
  width: 100%;
  max-height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feed-media video,
.feed-media img {
  max-height: 70vh;
  max-width: 100%;
  border-radius: 22px;
  border: 1px solid rgba(154,165,179,0.95);
  object-fit: cover;
}

.feed-meta {
  margin-top: 8px;
  padding: 0 4px;
}

.feed-userline {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.feed-username {
  font-weight: 600;
  font-size: 13px;
  color: var(--v2k-teal);
  text-decoration: none;
}

.feed-username:hover {
  text-decoration: underline;
}

.feed-username-ghost {
  opacity: 0.6;
}

.feed-caption {
  font-size: 13px;
  color: var(--v2k-metal);
}

/* --- FEED TWEAKS: slightly shorter cards & media --- */
.page-feed {
  height: calc(100vh - 56px);
}

  /* was: calc(100vh - 56px - 44px) ~ full viewport */
  min-height: calc(100vh - 56px - 80px); /* leave a bit more breathing room */
}

.feed-media video,
.feed-media img {
  /* was max-height: 70vh; */
  max-height: 62vh;
}

/* --- FEED ALIGNMENT FIX: keep snap, but pin media to top of card --- */
  /* keep existing min-height + snap, but override flex alignment */
  align-items: flex-start;     /* was: center */
  justify-content: flex-start; /* was: center */
  padding-top: 8px;            /* small, consistent top padding */
}

  margin-top: 0;
}

/* Feed header inside scroll: tighter spacing so first card is closer */
.feed-header {
  padding: 8px 12px 4px;
  margin-bottom: 4px;
}

/* --- FEED MEDIA SHELL & OVERLAYS --- */
.feed-media-shell {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* feed-media already controls the video/image box */
.feed-meta-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 70px; /* sit above bottom nav bar */
  padding: 8px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none; /* buttons re-enable */
}

.feed-meta-left {
  max-width: 70%;
  pointer-events: auto;
}

.feed-meta-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

/* Author + caption bottom-left */
.feed-username {
  font-weight: 600;
  font-size: 13px;
  color: var(--v2k-teal);
  text-decoration: none;
}

.feed-username:hover {
  text-decoration: underline;
}

.feed-caption {
  margin-top: 2px;
  font-size: 12px;
  color: var(--v2k-metal);
  max-height: 3.6em;
  overflow: hidden;
}

/* Right-side action buttons */
.feed-icon-btn {
  border: none;
  background: rgba(5, 5, 5, 0.6);
  border-radius: 999px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: var(--v2k-metal);
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.feed-icon-btn:hover {
  background: rgba(10, 10, 10, 0.9);
}

.feed-icon {
  font-size: 16px;
  line-height: 1;
}

.feed-icon-label {
  font-size: 10px;
  margin-top: 1px;
}

/* Views counter bottom-center */
.feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--v2k-metal);
  background: rgba(5, 5, 5, 0.6);
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
}

.feed-like-btn-active {
  background: rgba(255, 64, 96, 0.85);
  color: #fff;
}

.feed-like-btn-active .feed-icon {
  transform: scale(1.05);
}

/* override: place views under right-side stack, bottom-right */
.feed-meta-right {
  position: relative;
}

.feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  right: 0;
  bottom: 0;          /* hugs bottom of overlay block */
  left: auto;
  transform: none;
  margin-top: 6px;
}

/* TUNE: spacing between right-side stack and views pill */
.feed-meta-right {
  position: relative;      /* already set earlier, safe to repeat */
  padding-bottom: 32px;    /* lift Like/Chat/Share/Save up */
}

.feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
}

/* SOUND TOGGLE TOP-RIGHT OF CARD */
.feed-sound-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  border: none;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.8);
  color: var(--v2k-metal);
  font-size: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.feed-sound-toggle.sound-on {
  background: rgba(0, 200, 150, 0.85);
  color: #fff;
}

/* Like count under heart */
.feed-like-count {
  font-size: 11px;
}

/* Ensure right stack + views have clean spacing */
.feed-meta-right {
  position: relative;
  padding-bottom: 32px;
}

.feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  right: 0;
  bottom: -4px;
  left: auto;
  transform: none;
  margin-top: 6px;
}

/* --- V2K center FAB logo --- */
.v2k-fab-logo {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  border-radius: 999px;
  border: none;
  padding: 6px;
  background: radial-gradient(circle at 30% 0%, #ffffff15 0, #000000 60%);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 200, 180, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 60;
}

.v2k-fab-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* slight glow when open */
.v2k-fab-logo.is-open {
  box-shadow: 0 0 22px rgba(0, 200, 180, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
}

/* --- Drawer panel --- */
.v2k-fab-panel {
  position: fixed;
  inset: 0;
  z-index: 59;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

.v2k-fab-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

.v2k-fab-panel-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.85));
}

.v2k-fab-panel-sheet {
  position: relative;
  margin: 0 12px 96px;
  max-width: 520px;
  width: 100%;
  background: rgba(5, 6, 10, 0.98);
  border-radius: 24px;
  padding: 14px 14px 18px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.9);
  border: 1px solid rgba(0, 200, 180, 0.35);
}

.v2k-fab-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
}

.v2k-fab-panel-title {
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5f5f5;
}

.v2k-fab-panel-close {
  border: none;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  font-size: 16px;
  background: rgba(20, 20, 24, 0.95);
  color: #ccc;
  cursor: pointer;
}

.v2k-fab-panel-strip {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.v2k-fab-panel-strip::-webkit-scrollbar {
  height: 5px;
}

.v2k-fab-panel-strip::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00c8b4, #ff8800);
  border-radius: 999px;
}

.v2k-fab-link {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: #f5f5f5;
  background: linear-gradient(135deg, #00c8b4, #ff8800);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

.v2k-fab-link:hover {
  filter: brightness(1.1);
}

/* keep old center FAB below ours if it still exists */
.bottom-nav button,
.bottom-nav .fab-main {
  z-index: 30;
}

/* Hide the extra injected logo button if it exists */
#v2k-fab-logo {
  display: none;
}

/* Use the V2K logo on the existing center FAB in the bottom nav */
.bottom-nav .fab-main {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: radial-gradient(circle at 30% 0%, #ffffff15 0, #000000 60%);
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.9), 0 0 24px rgba(0, 200, 180, 0.4);
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;   /* hide any arrow icon text */
  font-size: 0;         /* hide label text */
}

/* Glow when drawer is open */
.bottom-nav .fab-main.is-open {
  box-shadow: 0 0 22px rgba(0, 200, 180, 0.8), 0 0 40px rgba(255, 140, 0, 0.6);
}

/* Center FAB as flat V2K logo, no glow */
.bottom-nav .fab-main {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;                 /* no glow */
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;
  font-size: 0;
}

/* Even when "open", keep it flat (no glow) */
.bottom-nav .fab-main.is-open {
  box-shadow: none;
}

/* Panel already acts as left/right slider via horizontal scroll.
   Make it feel more like a side slider ribbon. */
.v2k-fab-panel-sheet {
  max-width: 640px;
}

.v2k-fab-panel-strip {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.v2k-fab-panel-strip::-webkit-scrollbar {
  height: 4px;
}

.v2k-fab-panel-strip::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00c8b4, #ff8800);
  border-radius: 999px;
}

/* Center FAB as flat V2K logo, no glow, no text */
.bottom-nav .fab-main {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;
  font-size: 0;
}

.bottom-nav .fab-main.is-open {
  box-shadow: none;
}

/* Ensure center FAB is flat V2K logo and clickable area for panel */
.bottom-nav .fab-main {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;
  font-size: 0;
}

.bottom-nav .fab-main.is-open {
  box-shadow: none;
}

/* Center FAB = V2K logo trigger, no glow */
.bottom-nav .fab-main {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;
  font-size: 0;
}
.bottom-nav .fab-main.is-open {
  box-shadow: none;
}

/* Center FAB = V2K logo trigger, no glow */
.bottom-nav .fab-main {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;
  font-size: 0;
}
.bottom-nav .fab-main.is-open {
  box-shadow: none;
}

.bottom-nav .fab-main {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;
  font-size: 0;
}
.bottom-nav .fab-main.is-open {
  box-shadow: none;
}

/* Center FAB = V2K logo trigger, no glow */
.bottom-nav .fab-main {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  z-index: 60;
  background-image: url("../img/v2k_logo_no_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%;
  color: transparent;
  font-size: 0;
}
.bottom-nav .fab-main.is-open {
  box-shadow: none;
}

/* === FAB horizontal scroll menu (V2K Social) === */
.nav-center {
  position: relative;
}

.fab-wrapper {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 40;
}

.fab-main {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-decoration: none;
}

/* pill menu */
.fab-menu {
  margin-top: 0.5rem;
  max-width: 90vw;
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  backdrop-filter: blur(18px);
  background: rgba(8, 10, 20, 0.95);
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.fab-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fab-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.fab-scroll::-webkit-scrollbar {
  height: 4px;
}

.fab-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

.fab-link {
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 220, 255, 0.35);
  text-decoration: none;
}

@media (min-width: 900px) {
  .fab-wrapper {
    bottom: 1.6rem;
  }
}

/* === FAB horizontal scroll menu (V2K Social) === */
.nav-center {
  position: relative;
}

.fab-wrapper {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 40;
}

.fab-main {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  text-decoration: none;
}

/* pill menu under the FAB */
.fab-menu {
  margin-top: 0.5rem;
  max-width: 90vw;
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
  backdrop-filter: blur(18px);
  background: rgba(8, 10, 20, 0.95);
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.fab-menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.fab-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.fab-scroll::-webkit-scrollbar {
  height: 4px;
}

.fab-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

.fab-link {
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(120, 220, 255, 0.35);
  text-decoration: none;
}

@media (min-width: 900px) {
  .fab-wrapper {
    bottom: 1.6rem;
  }
}

/* === V2K: FAB-only bottom strip === */

/* Keep a slim bottom strip for the FAB to sit on */
.bottom-nav {
  height: 52px;
  padding: 4px 0;
}

/* Hide legacy bottom-nav icons (we use the FAB menu now) */
.bottom-nav .nav-item {
  display: none;
}

/* Slide FAB down a bit so it overlaps the strip */
.fab-wrapper {
  bottom: 0.2rem;
}

/* Make the FAB a bit smaller */
.fab-main {
  width: 54px;
  height: 54px;
  font-size: 1.7rem;
}

/* === V2K FAB final tuning: smaller, lower, menu above === */

/* Put menu above the FAB by reversing column order and dropping wrapper lower */
.fab-wrapper {
  flex-direction: column-reverse;  /* menu above, fab below */
  bottom: -0.3rem;                 /* sit lower over the bottom strip */
}

/* Menu: a bit slimmer and pops upward */
.fab-menu {
  margin-top: 0;
  margin-bottom: 0.4rem;
  max-width: 80vw;
  padding: 0.25rem 0.5rem;
}

/* Smaller FAB button */
.fab-main {
  width: 46px;
  height: 46px;
  font-size: 1.5rem;
}

/* Slimmer pills in the scroll menu */
.fab-link {
  font-size: 0.75rem;
  padding: 0.22rem 0.7rem;
}

/* === V2K FAB: extremely low placement + half-size button === */

/* Push FAB almost to the bottom edge */
.fab-wrapper {
  bottom: -1rem !important;       /* lower than before */
  flex-direction: column-reverse; /* menu above the FAB */
}

/* Half-size FAB */
.fab-main {
  width: 34px !important;
  height: 34px !important;
  font-size: 1.1rem !important;
}

/* Slimmer horizontal menu above FAB */
.fab-menu {
  margin-bottom: 0.45rem !important;
  padding: 0.2rem 0.45rem !important;
  max-width: 75vw !important;
}

/* Smaller menu pills */
.fab-link {
  font-size: 0.7rem !important;
  padding: 0.18rem 0.55rem !important;
}

/* === V2K FAB: raise popup above button a bit more === */
.fab-menu {
  margin-bottom: 0.85rem !important;  /* was ~0.45rem, now higher */
}

/* === V2K FAB: lift popup more (half FAB height adjustment) === */
.fab-menu {
  margin-bottom: 1.25rem !important;  /* raised significantly */
}

/* === V2K FAB: additional 5px lift === */
.fab-menu {
  margin-bottom: 1.55rem !important;
}

/* === V2K FAB MENU: Teal pill + orange text === */

/* Individual pill buttons */
.fab-link {
  background: rgba(0, 180, 200, 0.18) !important;    /* subtle teal glow */
  border: 1px solid rgba(0, 200, 220, 0.45) !important;  /* teal edge */
  color: #ff9a3c !important;                         /* soft bright orange text */
  transition: background 0.15s ease, color 0.15s ease;
}

/* Hover effect – more teal + brighter orange */
.fab-link:hover {
  background: rgba(0, 200, 220, 0.28) !important;
  color: #ffa94f !important;
}

/* === V2K: Hide specific top bar pills === */

/* Hide Ranks pill */
.top-bar-right .ranks-pill {
  display: none !important;
}

/* Hide Admin pill (for admins only) */
.top-bar-right .admin-pill {
  display: none !important;
}

/* Hide Wallet pill */
.top-bar-right .wallet-pill {
  display: none !important;
}

/* === V2K: Hide top bar Search + Live indicators === */

.top-bar-right .search-pill {
  display: none !important;
}

.top-bar-right .live-now-pill {
  display: none !important;
}

/* === Hide logout from top bar === */
.top-bar-right .btn-logout {
  display: none !important;
}

/* === V2K TOP BAR SIZE REDUCTION === */

/* Shrink total height */
.top-bar {
  height: 48px !important;   /* half size (original ~90px) */
  padding: 4px 8px !important;
}

/* Adjust left side (logo + name) */
.top-bar-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Smaller logo */
.top-logo {
  height: 32px !important;
  width: auto !important;
}

/* Shrink the V2K Social title */
.top-title-main {
  font-size: 0.95rem !important;
  line-height: 1rem !important;
}

.top-title-sub {
  font-size: 0.55rem !important;
  opacity: 0.65 !important;
  margin-top: -3px !important;
}

/* Right side (username) cleanup */
.top-user {
  font-size: 0.85rem !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* === V2K TOP BAR: ultra-slim, teal→orange glass === */
.top-bar {
  height: 26px !important;  /* about half of the previous 48px */
  padding: 2px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: linear-gradient(
    90deg,
    rgba(0, 120, 150, 0.92) 0%,
    rgba(0, 185, 210, 0.88) 55%,
    rgba(255, 140, 60, 0.60) 100%
  ) !important;   /* more teal, less orange */
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4) !important;
}

/* Left: logo + title */
.top-bar-left {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Smaller logo to fit the new height */
.top-logo {
  height: 20px !important;
  width: auto !important;
}

/* Title text compacted */
.top-title-main {
  font-size: 0.8rem !important;
  line-height: 0.9rem !important;
}

.top-title-sub {
  font-size: 0.5rem !important;
  line-height: 0.6rem !important;
  opacity: 0.7 !important;
  margin-top: -2px !important;
}

/* Right side: user info cleaned up */
.top-bar-right {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* Username chip */
.top-user {
  font-size: 0.75rem !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.30) !important;
  border: 1px solid rgba(0, 0, 0, 0.5) !important;
}

/* === V2K BOTTOM STRIP: Odin glass + teal→orange gradient === */
.bottom-nav {
  height: 26px !important;  /* match the new top bar height */
  padding: 2px 0 !important;
  background: linear-gradient(
    90deg,
    rgba(0, 120, 150, 0.92) 0%,
    rgba(0, 185, 210, 0.88) 55%,
    rgba(255, 140, 60, 0.60) 100%
  ) !important; /* same teal-dominant gradient */
  backdrop-filter: blur(12px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.40) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide any leftover nav items (we're FAB-only now) */
.bottom-nav .nav-item {
  display: none !important;
}

/* === MORE TRANSLUCENT / SEE-THROUGH TOP BAR === */
.top-bar {
  background: linear-gradient(
    90deg,
    rgba(0, 120, 150, 0.55) 0%,     /* was ~0.92 → now more transparent */
    rgba(0, 185, 210, 0.50) 55%,    /* softened */
    rgba(255, 140, 60, 0.35) 100%   /* lighter orange tint */
  ) !important;
  backdrop-filter: blur(16px) !important; /* stronger glass effect */
}

/* === MORE TRANSLUCENT / SEE-THROUGH BOTTOM STRIP === */
.bottom-nav {
  background: linear-gradient(
    90deg,
    rgba(0, 120, 150, 0.55) 0%,
    rgba(0, 185, 210, 0.50) 55%,
    rgba(255, 140, 60, 0.35) 100%
  ) !important;
  backdrop-filter: blur(16px) !important;
}

/* === V2K: Add 2px more height to TOP BAR === */
.top-bar {
  height: 28px !important;   /* was 26px → now 28px */
  padding: 3px 8px !important; /* adjust padding so logo/user still fit clean */
}

/* === V2K: Add 2px more height to BOTTOM STRIP === */
.bottom-nav {
  height: 28px !important;   /* was 26px → now 28px */
  padding: 3px 0 !important;
}

/* === V2K FAB: lower by exactly 2px === */
.fab-wrapper {
  bottom: -1.2rem !important;   /* was -1rem → lowered 2px */
}

/* === V2K TOP BAR: Gunmetal Grey/Blue === */
.top-bar {
  background: linear-gradient(
    90deg,
    rgba(20, 28, 38, 0.72) 0%,    /* deep gunmetal */
    rgba(30, 44, 58, 0.70) 50%,   /* steel blue */
    rgba(45, 60, 78, 0.60) 100%   /* softer blue-grey fade */
  ) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45) !important;
}

/* === V2K BOTTOM STRIP: Gunmetal Grey/Blue === */
.bottom-nav {
  background: linear-gradient(
    90deg,
    rgba(20, 28, 38, 0.72) 0%,    
    rgba(30, 44, 58, 0.70) 50%,   
    rgba(45, 60, 78, 0.60) 100%   
  ) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.45) !important;
}

/* === V2K FEED: Taller post cards for new UI frame === */

/* Main media card */
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding: 8px !important;
  min-height: calc(100vh - 120px) !important; 
  /* 100vh minus ~top+bottom+extra spacing */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Media container (image/video wrapper) */
.media-content {
  flex: 1 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}

/* Actual image/video size */
.media-content img,
.media-content video {
  max-height: calc(100vh - 150px) !important;
  width: auto !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

/* Text/content area */
.media-caption,
.media-info {
  padding-top: 4px !important;
  padding-bottom: 6px !important;
}

/* Slight increase to spacing between posts */
.feed-container {
  gap: 14px !important;
}

/* === V2K FEED: Phone-style main post frame === */

/* Center the main media card, size it like a phone, and stretch it between bars */
  margin: 6px auto !important;
  padding: 10px !important;
  width: min(420px, 100%) !important;              /* phone width on desktop, full on mobile */
  height: calc(100vh - 80px) !important;           /* fills space between top + bottom bars */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Ensure the inner media area uses the available height */
.media-content {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Image / video fit inside the frame like a phone screen */
.media-content img,
.media-content video {
  max-height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
  border-radius: 6px !important;
}

/* On small screens, allow a bit more flexibility */
@media (max-width: 600px) {
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 80px) !important;
  }
}

/* === PICTURES: keep width, add +20px height === */
.media-content img {
  height: calc(100% + 20px) !important;   /* taller */
  max-height: calc(100% + 20px) !important;
  object-fit: contain !important;
}

/* === VIDEOS: +2px wider on left +2px wider on right (+4px total) === */
/* and taller like pictures */
.media-content video {
  width: calc(100% + 4px) !important;     /* 2px each side */
  margin-left: -2px !important;           /* center the expansion */
  margin-right: -2px !important;

  height: calc(100% + 20px) !important;   /* match picture height increase */
  max-height: calc(100% + 20px) !important;

  object-fit: contain !important;
  border-radius: 6px !important;
}

/* === V2K: Full-screen vertical post cards (TikTok style) === */

/* Post container fills viewport between top/bottom bars */
  margin: 0 auto !important;
  padding: 0 !important;
  width: min(450px, 100%) !important;     /* centered phone width */
  height: calc(100vh - 60px) !important;  /* EXACT viewport fill */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Media area: full vertical TikTok viewport */
.media-content {
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

/* === Full vertical images === */
.media-content img {
  height: 100% !important;       /* FULL SCREEN HEIGHT */
  width: auto !important;        /* Auto width like TikTok */
  max-width: none !important;
  object-fit: contain !important;
}

/* === Full vertical videos === */
.media-content video {
  height: 100% !important;       /* FULL SCREEN HEIGHT */
  width: auto !important;        /* Auto width like TikTok */
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

/* consistent spacing between posts */
.feed-container {
  gap: 12px !important;
}

/* === V2K TikTok-style fullscreen vertical posts === */

/* Outer feed area: center the main post column */
.app-main {
  display: flex;
  justify-content: center;
}

/* Any direct child card in the main feed column */
.app-main > div > div:first-child {
  /* This usually targets the main card wrapper in your feed column */
}

/* Generic post card: full-height phone viewport */
.app-main .post-card,
.app-main .media-frame {
  margin: 0 auto !important;
  padding: 0 !important;
  width: min(450px, 100%) !important;      /* phone width */
  height: calc(100vh - 70px) !important;   /* between top/bottom bars */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Inner media wrapper inside any feed card */
.app-main .post-card .media-content,
.app-main .media-frame .media-content,
.app-main .post-card .media-main,
.app-main .media-frame .media-main {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Images: full-height vertical, width auto like TikTok */
.app-main .post-card img,
.app-main .media-frame img {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Videos: same behavior as images */
.app-main .post-card video,
.app-main .media-frame video {
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

/* === MOBILE FULLSCREEN TIKTOK STYLE === */
@media (max-width: 768px) {

  /* Main area: no extra padding, center content */
  .app-main {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Feed column + card: full viewport width, no rounded corners */
  .feed-container,
  .post-card,
  .media-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    height: calc(100vh - 72px) !important;  /* between top + bottom bars */
  }

  /* Inner media wrapper: fill the card */
  .media-content,
  .media-main {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* Images: fill screen, crop like TikTok */
  .media-content img,
  .media-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* COVER = no black bars */
  }

  /* Videos: same behavior as images */
  .media-content video,
  .media-main video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
}

/* === GLOBAL 2PX SIDE BARS (desktop + mobile) === */
.post-card,
.media-frame {
  width: calc(100vw - 4px) !important;     /* 2px on each side */
  max-width: calc(100vw - 4px) !important;
  margin-left: 2px !important;
  margin-right: 2px !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* INNER MEDIA WRAPPER ALSO HONORS THE SIDE BARS */
.media-content,
.media-main {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* IMAGES — full height, slight cropping allowed */
.media-content img,
.media-main img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* VIDEOS — same behavior */
.media-content video,
.media-main video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* ==== MOBILE TRUE FULLSCREEN POSTS (TikTok style) ==== */
@media (max-width: 768px) {

  html, body {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove padding/margins around main area on mobile */
  .app-main {
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
  }

  .feed-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Main post card: full width, full height between top + bottom bars */
  .post-card,
  .media-frame {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    height: calc(100vh - 56px) !important;  /* 28px top bar + 28px bottom strip */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /* Inner media wrapper: fill the card */
  .media-content,
  .media-main {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  /* Images: fill full viewport (crop as needed) */
  .media-content img,
  .media-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* Videos: same behavior as images */
  .media-content video,
  .media-main video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
}

/* ===== MOBILE: TRUE TIKTOK FULLSCREEN IN FEED ===== */
@media (max-width: 768px) {

  /* No horizontal scroll */
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  .app-shell,
  .app-main {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Any main feed column wrapper: full viewport width */
  .app-main > div {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Any card/frame in the feed: full-screen frame between bars */
  .app-main .post-card,
  .app-main .media-frame,
  .app-main .feed-item {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    height: calc(100vh - 56px) !important; /* 28px top + 28px bottom */
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Inner wrapper around media: fill the frame */
  .app-main .media-content,
  .app-main .media-main,
  .app-main .feed-media {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /* IMAGES: edge-to-edge fullscreen */
  .app-main img {
    width: 100vw !important;
    height: calc(100vh - 56px) !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* VIDEOS: same as images */
  .app-main video {
    width: 100vw !important;
    height: calc(100vh - 56px) !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
  }
}

/* ===================================================================
   MOBILE FEED POST SIZING — EXACT PER JARL VALHALLA VIKING
   =================================================================== */
@media (max-width: 768px) {

  /* Shared sizing for post wrapper */
  .post-card,
  .media-frame {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .media-content,
  .media-main {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /* ================================
     PICTURE POSTS — keep width, +100px height
     ================================ */
  .media-content img,
  .media-main img {
    width: 100% !important;           /* KEEP current width */
    height: calc(100% + 100px) !important;  /* +100px taller */
    object-fit: cover !important;
    display: block !important;
    border-radius: 4px !important;    /* optional */
  }

  /* ================================
     VIDEO POSTS — +20px width, +75px height
     ================================ */
  .media-content video,
  .media-main video {
    width: calc(100% + 20px) !important;   /* +20px wider */
    height: calc(100% + 75px) !important;  /* +75px taller */
    margin-left: -10px !important;         /* center the +20px */
    margin-right: -10px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 4px !important;         /* optional */
  }
}

/* ==========================================================
   MOBILE FEED POST SIZING — EXACT PER VALHALLA VIKING
   ========================================================== */
@media (max-width: 768px) {

  /* Center all cards in the feed */
  .post-card,
  .media-frame {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
  }

  .media-content,
  .media-main {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /* ================================
     PICTURE POSTS — +100px height
     ================================ */
  .media-content img,
  .media-main img {
    width: 100% !important;                /* keep width */
    height: calc(100% + 100px) !important; /* +100px taller */
    object-fit: cover !important;
    display: block !important;
  }

  /* ================================
     VIDEO POSTS — +40px width, +100px height
     ================================ */
  .media-content video,
  .media-main video {
    width: calc(100% + 40px) !important;   /* 20px each side wider */
    margin-left: -20px !important;         /* re-center */
    margin-right: -20px !important;

    height: calc(100% + 100px) !important; /* +100px taller */

    object-fit: cover !important;
    display: block !important;
  }
}

/* ==========================================================
   V2K SOCIAL – UNIVERSAL POST LAYOUT (MOBILE + DESKTOP)
   Fit-to-screen, keep aspect, centered both ways
   ========================================================== */

/* Center the feed column */
.feed-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Main post card: centered, fixed phone-style width, full height between bars */
.post-card,
.media-frame {
  width: min(480px, 100vw - 16px) !important;          /* phone width on desktop, inset on mobile */
  height: calc(100vh - 80px) !important;               /* between top + bottom bars (adjust if needed) */
  margin: 8px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Inner wrapper that actually holds the media */
.media-content,
.media-main,
.feed-media {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* ===== IMAGES: fit inside card, keep aspect, no crop ===== */
.app-main .post-card img,
.app-main .media-frame img {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ===== VIDEOS: same behavior as images ===== */
.app-main .post-card video,
.app-main .media-frame video {
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ==========================================================
   V2K FEED – FULLSCREEN POSTS (IMAGE + VIDEO)
   Card fills between top/bottom bars, no white border.
   ========================================================== */

/* The main post card wrapper */
.post-card,
.media-frame {
  width: 100vw !important;
  max-width: 100vw !important;
  height: calc(100vh - 56px) !important;   /* 28px top bar + 28px bottom strip */
  margin: 0 auto !important;
  padding: 0 !important;

  border: none !important;                 /* remove white border */
  border-radius: 0 !important;             /* remove rounded corners */
  background: transparent !important;

  box-sizing: border-box !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Inner wrapper that actually holds the media */
.media-content,
.media-main,
.feed-media {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* IMAGES – fill card, keep aspect, may crop (TikTok-style) */
.post-card img,
.media-frame img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* VIDEOS – same behavior as images */
.post-card video,
.media-frame video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ODIN — FEED CARD EXPANSION */
.feed-card,
.media-card {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto 30px auto;
    border-radius: 18px;
    overflow: hidden;
}

.feed-card video,
.feed-card img,
.media-card video,
.media-card img {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: cover;
    border-radius: 16px;
}

/* === ODIN: VERTICAL SNAP SCROLL FOR FEED === */
body.feed-page {
  scroll-behavior: smooth;
}

.feed-main,
.feed-scroll,
.feed-column {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}

.feed-card,
.media-card {
  scroll-snap-align: start;
}

/* === ODIN: MEDIA DELETE ICON (TOP-RIGHT, SMALL) === */
.feed-card,
.media-card {
  position: relative;
}

.media-delete-form {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
}

.media-card .media-delete-btn,
.feed-card .media-delete-btn {
  background: rgba(0, 0, 0, 0.65);
  border: none;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  cursor: pointer;
}

.media-card .media-delete-btn:hover,
.feed-card .media-delete-btn:hover {
  background: rgba(255, 64, 64, 0.9);
}

/* ODIN: MEDIA DELETE ICON (TOP-RIGHT) */
.feed-card,
.media-card {
  position: relative;
}

.media-delete-form {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
}

.media-card .media-delete-btn,
.feed-card .media-delete-btn {
  background: rgba(0, 0, 0, 0.65);
  border: none;
  color: #ffffff;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  cursor: pointer;
}

.media-card .media-delete-btn:hover,
.feed-card .media-delete-btn:hover {
  background: rgba(255, 64, 64, 0.9);
}

/* ODIN: Auth card layout for email + reset flows */
.page-auth,
.page-auth-email {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
}

.auth-card {
  background: rgba(8, 8, 12, 0.95);
  border-radius: 18px;
  padding: 24px 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.6);
}

.auth-card h1 {
  margin: 0 0 12px;
  font-size: 1.4rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.auth-form input {
  background: #050509;
  border-radius: 10px;
  border: 1px solid rgba(120, 255, 200, 0.18);
  padding: 8px 10px;
  color: #f5f5f5;
}

.auth-footer-link {
  margin-top: 16px;
  font-size: 0.9rem;
  text-align: center;
}

/* ODIN: Admin Intermail */
.admin-intermail-card {
  margin-top: 16px;
}

.admin-intermail-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-intermail-form .form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.admin-intermail-form input[type="text"],
.admin-intermail-form input[type="email"],
.admin-intermail-form input[type="password"],
.admin-intermail-form textarea {
  width: 100%;
  background: #050509;
  border-radius: 10px;
  border: 1px solid rgba(120, 255, 200, 0.2);
  padding: 8px 10px;
  color: #f5f5f5;
}

.admin-intermail-form .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.95rem;
}

.admin-intermail-form .form-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* ODIN: Admin base styles */
.page-admin .admin-nav {
  display: flex;
  gap: 12px;
  margin: 12px 0 16px 0;
  flex-wrap: wrap;
}

.admin-nav-link {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(120, 255, 200, 0.2);
  font-size: 0.9rem;
  text-decoration: none;
  color: #e5fdf7;
  background: radial-gradient(circle at top left, rgba(0,255,200,0.12), transparent);
}

.admin-nav-link-active,
.admin-nav-link:hover {
  border-color: rgba(120, 255, 200, 0.75);
  box-shadow: 0 0 12px rgba(120, 255, 200, 0.35);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.admin-card-link {
  text-decoration: none;
  color: inherit;
}

.admin-card-link h2 {
  margin-top: 0;
}

.admin-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.admin-stat-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(10, 40, 40, 0.9);
  border: 1px solid rgba(120, 255, 200, 0.4);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.admin-stat-pill .label {
  font-size: 0.78rem;
  opacity: 0.8;
}

.admin-stat-pill .value {
  font-size: 0.95rem;
  font-weight: 600;
}

/* ODIN: Admin Intermail */
.admin-intermail-card {
  margin-top: 16px;
}

.admin-intermail-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-intermail-form .form-row label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.admin-intermail-form input[type="text"],
.admin-intermail-form input[type="email"],
.admin-intermail-form textarea {
  width: 100%;
  background: #050509;
  border-radius: 10px;
  border: 1px solid rgba(120, 255, 200, 0.2);
  padding: 8px 10px;
  color: #f5f5f5;
}

.admin-intermail-form .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.95rem;
}

.admin-intermail-form .form-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

/* ============================
   ODIN: ADMIN NAV — CHROME PILL STYLE
   ============================ */

.page-admin .admin-nav {
  display: flex;
  gap: 14px;
  margin: 16px 0 20px 0;
  flex-wrap: wrap;
}

/* Pill base look */
.admin-nav-link {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: #c9fff4;
  background: linear-gradient(135deg, rgba(0,255,200,0.25), rgba(0,255,200,0.05));
  border: 1px solid rgba(120,255,200,0.25);
  box-shadow:
    inset 0 0 8px rgba(0,255,200,0.25),
    0 0 6px rgba(0,255,200,0.15);
  transition: 0.15s ease;
}

/* Chrome highlight glow on hover */
.admin-nav-link:hover {
  border-color: rgba(120,255,200,0.8);
  box-shadow:
    inset 0 0 12px rgba(0,255,200,0.4),
    0 0 10px rgba(0,255,200,0.45),
    0 0 15px rgba(0,255,200,0.3);
  color: #ffffff;
}

/* Active pill (current page) */
.admin-nav-link-active {
  background: linear-gradient(135deg, rgba(0,255,200,0.45), rgba(0,255,200,0.15));
  border-color: rgba(120,255,200,1);
  color: #ffffff;
  box-shadow:
    inset 0 0 14px rgba(0,255,200,0.5),
    0 0 14px rgba(0,255,200,0.4),
    0 0 22px rgba(0,255,200,0.3);
}

/* ============================
   ODIN: LIGHTER HYPERLINKS IN ADMIN PAGES
   ============================ */

.page-admin a {
  color: #a8fff0;
  text-decoration: underline;
}

.page-admin a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(120,255,200,0.5);
}

/* ODIN: Admin Bans */
.admin-bans-card {
  margin-top: 16px;
}

.admin-bans-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.admin-bans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-bans-table th,
.admin-bans-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(120, 255, 200, 0.12);
  text-align: left;
}

.admin-bans-table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

.ban-reason {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ban-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(120, 255, 200, 0.4);
  font-size: 0.72rem;
}

.ban-pill-perm {
  background: linear-gradient(135deg, rgba(255,64,64,0.5), rgba(255,0,0,0.15));
  border-color: rgba(255,160,160,0.9);
}

.ban-pill-none {
  border-style: dashed;
  opacity: 0.6;
}

.ban-actions-cell {
  min-width: 210px;
}

.ban-form,
.unban-form {
  margin: 4px 0;
}

.ban-form-inline {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.ban-form-inline input[type="number"] {
  width: 64px;
  background: #050509;
  border-radius: 8px;
  border: 1px solid rgba(120, 255, 200, 0.2);
  color: #f5f5f5;
  padding: 3px 6px;
  font-size: 0.78rem;
}

.ban-perm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.ban-form input[type="text"] {
  width: 100%;
  background: #050509;
  border-radius: 8px;
  border: 1px solid rgba(120, 255, 200, 0.2);
  color: #f5f5f5;
  padding: 4px 6px;
  font-size: 0.78rem;
  margin-bottom: 4px;
}

.ban-buttons-row {
  display: flex;
  gap: 4px;
}

.btn-primary-xs {
  font-size: 0.75rem;
  padding: 3px 8px;
}

.btn-odin-ghost.btn-odin-xs {
  font-size: 0.75rem;
  padding: 3px 8px;
}

/* ======== INTERMAIL ADMIN PAGE ======== */

.admin-intermail-card {
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(120,255,200,0.2);
}

.intermail-form .form-group {
  margin-bottom: 14px;
}

.intermail-form input[type="text"],
.intermail-form select,
.intermail-form textarea {
  width: 100%;
  background: #050509;
  color: #d8fff2;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(120,255,200,0.25);
}

.intermail-form select:hover,
.intermail-form input:hover,
.intermail-form textarea:hover {
  border-color: rgba(120,255,200,0.6);
  box-shadow: 0 0 10px rgba(120,255,200,0.3);
}


/* === Odin: Login page alt link (Register CTA) === */
.auth-alt-link {
  margin-top: 16px;
  text-align: center;
  font-size: 0.95rem;
  opacity: 0.9;
}
.auth-alt-link a {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,255,200,0.4);
}
.auth-alt-link a:hover {
  border-bottom-color: rgba(0,255,200,0.9);
}

/* ===== LOGIN PAGE REGISTER PROMPT ===== */
.login-register-prompt {
  margin-top: 18px;
  text-align: center;
  font-size: 1.0rem;
  color: #d0fff5;
  opacity: 0.95;
}

.register-here-link {
  margin-left: 6px;
  color: #9dffe8;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,255,200,0.35);
  transition: 0.15s ease;
}

.register-here-link:hover {
  color: #ffffff;
  border-bottom-color: rgba(0,255,200,0.85);
  text-shadow: 0 0 8px rgba(0,255,200,0.5);
}

/* =========================
   AUTH PAGES (LOGIN / REGISTER)
   ========================= */

.page-auth {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-shell {
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  gap: 20px;
  background: radial-gradient(circle at top left, rgba(0,255,200,0.15), transparent 55%),
              radial-gradient(circle at bottom right, rgba(0,150,255,0.12), transparent 55%);
  border-radius: 24px;
  padding: 22px;
  border: 1px solid rgba(140,255,230,0.25);
  box-shadow: 0 0 35px rgba(0,0,0,0.8);
}

@media (max-width: 820px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .auth-left {
    display: none;
  }
}

.auth-left {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-brand-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.auth-logo-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0,255,200,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(0,255,200,0.2), rgba(0,0,0,0.9));
  box-shadow: 0 0 18px rgba(0,255,200,0.5);
}

.auth-logo-text {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.auth-brand-copy h1 {
  margin: 0;
  font-size: 1.6rem;
}

.auth-brand-copy p {
  margin: 4px 0 0;
  opacity: 0.8;
}

.auth-bullets {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 0.95rem;
  opacity: 0.9;
}
.auth-bullets li {
  margin-bottom: 4px;
}

.auth-right {
  display: flex;
  align-items: center;
}

.auth-card {
  width: 100%;
  background: rgba(5,5,10,0.94);
  border-radius: 18px;
  padding: 20px 18px;
  border: 1px solid rgba(120,255,200,0.3);
  box-shadow: 0 0 24px rgba(0,0,0,0.9);
}

.auth-card h2 {
  margin: 0 0 6px;
  font-size: 1.4rem;
}

.auth-subtitle {
  margin: 0 0 14px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.auth-form-grid {
  margin-top: 6px;
}

.form-row {
  margin-bottom: 10px;
}

.form-row-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

@media (max-width: 600px) {
  .form-row-2col {
    grid-template-columns: minmax(0, 1fr);
  }
}

.auth-card .form-group label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.9rem;
}

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="date"] {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(120,255,200,0.3);
  background: #05050a;
  color: #e8fffe;
  font-size: 0.95rem;
}

.auth-card input:focus {
  outline: none;
  border-color: rgba(120,255,200,0.8);
  box-shadow: 0 0 0 1px rgba(120,255,200,0.5);
}

.field-note {
  font-size: 0.8rem;
  opacity: 0.8;
}

.tos-box {
  margin-top: 2px;
}

.tos-label {
  font-size: 0.85rem;
  line-height: 1.35;
}
.tos-label input[type="checkbox"] {
  margin-right: 6px;
}

.btn-block {
  width: 100%;
  text-align: center;
}

.auth-alt-login {
  text-align: center;
  margin-top: 6px;
  font-size: 0.92rem;
}
.auth-alt-login a {
  margin-left: 4px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,255,200,0.4);
}
.auth-alt-login a:hover {
  border-bottom-color: rgba(0,255,200,0.85);
}

.email-verify-note {
  margin-top: 8px;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* flash messages inside auth card */
.flash-container {
  margin-bottom: 10px;
}
.flash {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.flash-success {
  background: rgba(0,180,120,0.15);
  border: 1px solid rgba(0,200,140,0.7);
}
.flash-danger {
  background: rgba(180,0,60,0.18);
  border: 1px solid rgba(255,80,120,0.8);
}
.flash-warning {
  background: rgba(200,150,0,0.18);
  border: 1px solid rgba(255,210,90,0.8);
}

/* === ODIN: TIKTOK-STYLE FEED LAYOUT (SNAP SCROLL) ======================= */

.page-feed {
  height: 100vh;
  overflow: hidden;
}

.feed-shell {
  height: 100%;
  width: 100%;
}

.feed-scroll {
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}

.feed-card {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feed-card-inner {
  position: relative;
  height: 100%;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Main media area */
.feed-media-wrapper {
  max-height: 90vh;
  max-width: 90vw;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feed-media-img,
.feed-media-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RIGHT ICON STACK – MIDDLE RIGHT */
.feed-meta-right {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.feed-icon-btn {
  border: none;
  outline: none;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.4rem 0.6rem;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}

.feed-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.feed-icon-label {
  margin-top: 0.25rem;
  font-size: 0.75rem;
}

/* BOTTOM-LEFT USER / CAPTION */
.feed-meta-bottom {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  max-width: 60%;
  color: #f8f9fa;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9);
}

.feed-meta-username {
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.feed-meta-username-link {
  color: #4be6ff;
  text-decoration: none;
}

.feed-meta-username-link:hover {
  text-decoration: underline;
}

.feed-meta-caption {
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.feed-meta-subline {
  font-size: 0.7rem;
  opacity: 0.75;
}

/* Small-screen tweaks */
@media (max-width: 768px) {
  .feed-meta-right {
    right: 0.75rem;
  }

  .feed-meta-bottom {
    left: 0.75rem;
    bottom: 1rem;
    max-width: 70%;
  }
}

/* === TIKTOK NARROW POST WIDTH FIX === */
.feed-media-wrapper {
  width: 65vw !important;     /* narrower like TikTok */
  max-width: 420px !important;
  height: 85vh !important;    /* tall vertical */
  border-radius: 18px;
  overflow: hidden;
  margin: 0 auto;
  background: #000;
}

/* tighten on mobile */
@media (max-width: 768px) {
  .feed-media-wrapper {
    width: 82vw !important;
    max-width: 360px !important;
    height: 82vh !important;
  }
}



/* =========================================
   TIKTOK FEED: TALL + NARROW 9:16 POSTS
   ========================================= */

.feed-card-inner {
    max-width: 380px !important;     /* Narrow like TikTok */
    width: 100%;
    margin: 0 auto;
}

/* Wrapper that controls the actual displayed media */
.feed-media-wrapper {
    width: 100% !important;
    max-width: 380px !important;
    height: 680px !important;         /* Tall vertical video */
    max-height: 680px !important;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

/* Make videos + images fill the tall vertical space */
.feed-media-img,
.feed-media-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Desktop slightly wider */
@media (min-width: 900px) {
    .feed-card-inner,
    .feed-media-wrapper {
        max-width: 420px !important;
        height: 740px !important;
        max-height: 740px !important;
    }
}


/* =====================================================
   STICKY TOP NAV BAR — NEVER MOVES (TikTok style)
   ===================================================== */

.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999 !important;
    background: rgba(10, 10, 12, 0.95); /* Dark Odin fog */
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Push feed down so it doesn’t sit under navbar */
body {
    padding-top: 64px !important;
}


/* =====================================================
   TIKTOK-VERTICAL POST SIZING
   Narrow, tall, centered, fits between bars
   ===================================================== */

.feed-post-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    scroll-snap-align: start;
    padding-top: 10px;
}

/* Max width — like TikTok (narrow, centered) */
.feed-card {
    width: 420px;              /* TikTok vertical width */
    max-width: 90vw;           /* Never overflow mobile */
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    position: relative;
}

/* Make posts taller like TikTok */
.feed-media {
    width: 100%;
    aspect-ratio: 9 / 16;       /* TRUE TikTok aspect */
    object-fit: cover;
}

/* Space for sticky header + bottom bar */
.feed-scroll-area {
    padding-top: 72px !important;   /* Space under sticky top bar */
    padding-bottom: 120px !important; /* Space above FAB bottom bar */
}

/* Stick the right-side like/share/save stack */
.feed-meta-right {
    position: absolute;
    right: -60px;    /* sits outside card, TikTok style */
    top: 40%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Username at bottom-left */
.feed-username-position {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-weight: 600;
    font-size: 16px;
    z-index: 10;
    text-shadow: 0 0 6px black;
}


/* =====================================================
   RAISE TOP BAR (3X HEIGHT)
   Push it upward so the feed begins lower
   ===================================================== */

.top-bar,
.v2k-topbar,
.nav-top,
.header-bar {
    position: sticky !important;
    top: -120px !important;      /* moves the bar UP (default is ~40px) */
    z-index: 9999 !important;
}

/* Make sure body does NOT overlap the bar */
body {
    padding-top: 140px !important;   /* maintain spacing for the raised header */
}


/* ---- RESET TOP BAR POSITION (NO BIG GAP) ---- */
.top-bar,
.v2k-topbar,
.nav-top,
.header-bar {
    position: sticky !important;
    top: 0 !important;          /* stick right at the top */
    z-index: 9999 !important;
}

/* Reduce the body padding we previously set too large */
body {
    padding-top: 64px !important;   /* small buffer under the bar */
}
/* ODIN: Fixed overlay top bar */
.site-header,
.top-bar,
.v2k-topbar,
.nav-top,
.header-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
}

/* ODIN: prevent content from sliding under the bar */
body {
  padding-top: 72px !important;  /* adjust if bar height changes */
}
/* ODIN: Raise each feed post upward */
.feed-post,
.media-card,
.feed-card,
.post-wrapper {
    margin-top: -20px !important;
}
/* ODIN: Raise posts a bit more */
.feed-post,
.media-card,
.feed-card,
.post-wrapper {
    margin-top: -40px !important;
}
/* ODIN: Adjust post dimensions */
.media-card,
.feed-post,
.feed-card,
.post-wrapper {
    width: calc(100% - 100px) !important;   /* shrink width */
    max-width: 480px !important;            /* tighter phone size */
    height: calc(100% - 20px) !important;   /* shrink height */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ODIN: Restore container to original */
.media-card,
.feed-card,
.feed-post,
.post-wrapper {
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ODIN: Shrink ONLY the actual media area */
.feed-media,
.feed-media-video,
.feed-media-img,
.media-content,
.media-wrapper video,
.media-wrapper img {
    width: calc(100% - 100px) !important;   /* 100px narrower */
    height: calc(100% - 20px) !important;   /* 20px shorter */
    object-fit: cover !important;
    margin: 0 auto !important;
    display: block !important;
}


/* ODIN: Expand the post container 10% wider and taller */
.media-card,
.feed-card,
.feed-post,
.post-wrapper,
.feed-card-inner,
.feed-media-wrapper {
    width: 110% !important;          /* 10% wider */
    max-width: none !important;      /* allow full room */
    height: 110% !important;         /* 10% taller */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Keep centered */
.feed-card,
.media-card {
    margin: 0 auto !important;
}


/* ================================
   ODIN: CONTAINER 10% NARROWER
   ================================ */
.media-card,
.feed-card,
.feed-post,
.post-wrapper,
.feed-card-inner,
.feed-media-wrapper {
    width: 90% !important;            /* container 10% narrower */
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ======================================
   ODIN: MEDIA (VIDEO/IMAGE) 20% SMALLER
   ====================================== */
.feed-media,
.feed-media-video,
.feed-media-img,
.media-content,
.media-wrapper video,
.media-wrapper img {
    width: 80% !important;            /* 20% narrower */
    height: 80% !important;           /* 20% shorter */
    object-fit: cover !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Keep centered in layout */
.feed-card,
.media-card {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================
   ODIN UPDATE: CONTAINER +10% WIDER & CENTERED
   ============================================ */
.media-card,
.feed-card,
.feed-post,
.post-wrapper,
.feed-card-inner,
.feed-media-wrapper {
    width: 110% !important;      /* container 10% wider */
    max-width: 110% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: translateX(-5%);  /* recenter offset because 110% widens evenly */
}


/* ============================================
   ODIN PATCH: CENTER PHOTO/VIDEO VERTICALLY
   ============================================ */
.feed-media-wrapper,
.media-card-media,
.feed-card-media {
    display: flex !important;
    align-items: center !important;   /* vertical center */
    justify-content: center !important;
}

/* ensure media does not stretch weird */
.feed-media-wrapper img,
.feed-media-wrapper video {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;    /* keep original proportions */
}

/* ============================================
   ODIN PATCH: MEDIA POSITION TWEAKS
   Move media slightly right & upward
   ============================================ */
.feed-media-wrapper img,
.feed-media-wrapper video,
.media-card-media img,
.media-card-media video {
    position: relative !important;
    left: 20px !important;      /* shift right */
    top: -20% !important;       /* raise upward */
}

/* ============================================
   ODIN: UNIVERSAL MEDIA ASPECT RATIO CONTROL
   Forces correct proportions like TikTok
   ============================================ */
.feed-media-wrapper,
.media-card-media {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;      /* vertical TikTok ratio */
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.feed-media-wrapper img,
.feed-media-wrapper video,
.media-card-media img,
.media-card-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;         /* perfect framing, no distortion */
    border-radius: 12px !important;
}

/* ============================================
   ODIN: SHRINK MEDIA 10%, KEEP PERFECT RATIO
   ============================================ */
.feed-media-wrapper img,
.feed-media-wrapper video,
.media-card-media img,
.media-card-media video {
    width: 90% !important;        /* SHRINK 10% */
    height: auto !important;      /* KEEP ASPECT RATIO */
    object-fit: cover !important;
    border-radius: 12px !important;
    margin: 0 auto !important;    /* center it */
    display: block !important;
}

/* ================================================================
   ODIN: PERFECT FIT — IMAGES & VIDEOS SCALE INSIDE CONTAINER
   - No stretching
   - No cropping
   - Maintain aspect ratio perfectly
   - Centered inside the post frame
   ============================================================== */

.feed-media-wrapper img,
.feed-media-wrapper video,
.media-card-media img,
.media-card-media video {
    width: 100% !important;       /* fill container width */
    height: 100% !important;      /* fill container height */
    object-fit: contain !important; /* keep aspect ratio, no crop */
    display: block !important;
    margin: 0 auto !important;
    background-color: #000;       /* matches TikTok style / prevents gaps */
}

/* ================================================================
   ODIN: RAISE ALL POSTS UP 10PX
   ============================================================== */

.feed-media-container,
.media-card,
.media-card-media,
.feed-item {
    margin-top: -10px !important;   /* lift everything by 10px */
}

/* ================================================================
   ODIN: SHRINK FEED CONTAINER, VIDEOS, AND PHOTOS BY 10PX WIDTH
   ============================================================== */

/* Main container */
.feed-media-container {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
}

/* Media card */
.media-card {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
}

/* Actual media (video + photo) maintain aspect */
.media-card-media img,
.media-card-media video {
    width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
    height: auto !important;
    object-fit: contain !important;
}
/* ================================================================
   ODIN: FEED CONTAINER BETWEEN TOP + BOTTOM BARS, PHONE WIDTH
   - Container sits just under sticky top bar
   - Bottom touches top of bottom FAB/nav bar
   - Width matches a phone-sized viewport
   - Photos/videos fit inside container, keep aspect ratio
   ============================================================== */

/* Center feed on page */
.feed-page {
  display: flex;
  justify-content: center;
}

/* Main scroll area: bounded by top + bottom bars, phone width */
.feed-main {
  margin: 0 auto;
  max-width: 430px; /* phone width-ish */
  padding-top: var(--top-nav-height, 72px);     /* just below sticky top bar */
  padding-bottom: var(--bottom-nav-height, 88px); /* just above bottom bar */
}

/* Vertical viewport between bars */
.feed-media-container {
  position: relative;
  width: 100%;
  max-width: 430px; /* match phone width */
  height: calc(100vh - var(--top-nav-height, 72px) - var(--bottom-nav-height, 88px));
  display: flex;
  align-items: center;   /* center item vertically in this window */
  justify-content: center;
}

/* One post per “screen”, fills the gap between bars */
.media-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* keep media centered inside */
}

/* Media wrapper */
.media-card-media {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Actual image / video: fit perfectly in container, keep aspect */
.media-card-media img,
.media-card-media video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover; /* no crop, perfect fit */
}
/* ================================================================
   ODIN: TIKTOK-STYLE LAYOUT
   - Creator name + caption bottom-left
   - Like/Comment/Share stack mid-right but pulled LEFT by ~100px
   ============================================================== */

/* --- LIKE STACK (move left 100px) --- */
.feed-meta-right,
.media-right-stack {
  position: absolute;
  right: 20px;  /* original */
  right: 120px; /* moved LEFT ~100px */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 20;
}

/* Icons */
.feed-icon-btn,
.media-like-btn {
  background: rgba(0,0,0,0.35);
  padding: 10px 14px;
  border-radius: 18px;
  color: #fff;
  font-size: 20px;
}

/* --- CREATOR NAME + CAPTION (TIKTOK bottom-left) --- */
.media-bottom-left {
  position: absolute;
  bottom: 32px;
  left: 18px;
  z-index: 25;
  color: #fff;
  text-shadow: 0 0 4px #000, 0 0 8px #000;
  max-width: 80%;
  font-family: sans-serif;
}

.media-bottom-left .creator-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.media-bottom-left .creator-caption {
  font-size: 15px;
  opacity: 0.95;
  line-height: 1.3;
}
/* ================================================================
   ODIN: TIKTOK-STYLE LAYOUT
   - Creator name + caption bottom-left
   - Like/Comment/Share stack mid-right but pulled LEFT by ~100px
   ============================================================== */

/* --- LIKE STACK (move left 100px) --- */
.feed-meta-right,
.media-right-stack {
  position: absolute;
  right: 20px;  /* original */
  right: 120px; /* moved LEFT ~100px */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 18px;
  z-index: 20;
}

/* Icons */
.feed-icon-btn,
.media-like-btn {
  background: rgba(0,0,0,0.35);
  padding: 10px 14px;
  border-radius: 18px;
  color: #fff;
  font-size: 20px;
}

/* --- CREATOR NAME + CAPTION (TIKTOK bottom-left) --- */
.media-bottom-left {
  position: absolute;
  bottom: 32px;
  left: 18px;
  z-index: 25;
  color: #fff;
  text-shadow: 0 0 4px #000, 0 0 8px #000;
  max-width: 80%;
  font-family: sans-serif;
}

.media-bottom-left .creator-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}

.media-bottom-left .creator-caption {
  font-size: 15px;
  opacity: 0.95;
  line-height: 1.3;
}
/* === FEED TIKTOK-STYLE OVERLAY LAYOUT OVERRIDES === */

/* Center the phone-style feed column */
.page-feed {
  display: flex;
  justify-content: center;
}

.feed-shell {
  width: 100%;
  max-width: 480px;   /* phone-first width */
}

.feed-card {
  margin: 0 auto 16px;
}

/* Card = black rounded container, media + overlays inside */
.feed-card-inner {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #000;
}

/* Media wrapper */
.feed-media-wrapper {
  position: relative;
}

/* Video / image fill the card, like TikTok */
.feed-media-img,
.feed-media-video {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: cover;   /* crop to fill while keeping aspect */
}

/* --- RIGHT-SIDE LIKE / CHAT / SHARE STACK --- */
.feed-meta-right {
  position: absolute;
  right: 12px;
  bottom: 96px;        /* floats roughly middle-right above caption bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
}

/* --- BOTTOM-LEFT CREATOR NAME + CAPTION --- */
.feed-meta-bottom {
  position: absolute;
  left: 12px;
  bottom: 16px;
  max-width: 70%;
  color: #fff;
  z-index: 3;
}

.feed-meta-username-link {
  font-weight: 600;
  font-size: 0.95rem;
}

.feed-meta-caption {
  font-size: 0.85rem;
  margin-top: 4px;
}

.feed-meta-subline {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 2px;
}

/* Icon buttons in the right stack */
.feed-icon-btn {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}

.feed-icon {
  font-size: 1.3rem;
}

/* Slightly wider column on tablet/desktop */
@media (min-width: 768px) {
  .feed-shell {
    max-width: 540px;
  }
}

/* === TITLE POSITION ADJUSTMENT (MOVE RIGHT 40px, UP 10px) === */
.feed-meta-bottom {
  left: 52px !important;      /* default 12px → +40px */
  bottom: 26px !important;    /* default 16px → +10px */
}

/* === TITLE POSITION ADJUSTMENT: LIFT UP +50PX === */
.feed-meta-bottom {
  bottom: 76px !important;   /* raised from 26px → 76px */
}

/* === TITLE POSITION ADJUSTMENT: LIFT UP +100PX === */
.feed-meta-bottom {
  bottom: 176px !important;   /* moved WAY up from 76px → 176px */
}

/* === SHIFT ENTIRE FEED CARD UP 20PX + LEFT 5PX === */
.feed-card {
  position: relative !important;
  top: -20px !important;      /* raise upward */
  left: -5px !important;      /* shift left */
}

/* Keep media aligned with the card */
.feed-media-wrapper {
  position: relative !important;
  left: -5px !important;
  top: -20px !important;
}

/* Ensure overlay stack follows the move */
.feed-meta-right,
.feed-meta-bottom {
  left: calc(12px - 5px) !important;
  bottom: calc(var(--orig-bottom, 176px)) !important; /* Keeps your raised title */
}

/* === MOVE CARD + MEDIA LEFT 5PX === */
.feed-card-inner,
.feed-media-wrapper,
.feed-media-img,
.feed-media-video {
  position: relative !important;
  left: -5px !important;
}

/* === MOVE OVERLAY (LIKES STACK + TITLE) RIGHT 10PX === */
.feed-meta-right {
  right: -10px !important;    /* move entire stack right */
}

.feed-meta-bottom {
  left: calc(52px + 10px) !important;  /* you previously moved left → add 10px more */
}

/* ensures caption stays aligned */
.feed-meta-caption, 
.feed-meta-username-link {
  position: relative;
}

/* === CARD → LEFT 5PX === */
.feed-card {
  position: relative !important;
  left: -5px !important;
}

/* === MEDIA (VIDEO & IMAGE) → RIGHT 5PX === */
.feed-media-wrapper,
.feed-media-img,
.feed-media-video {
  position: relative !important;
  left: 5px !important;
}

/* === LIKE STACK → RIGHT EDGE OF CARD === */
.feed-meta-right {
  right: 0px !important;     /* slam to edge cleanly */
  margin-right: 6px !important; /* tiny padding so it looks perfect */
}

/* === TITLE/CAPTION → MOVE UP 10PX FROM CURRENT POSITION === */
.feed-meta-bottom {
  bottom: calc(176px + 10px) !important;  /* was 176 → now 186px */
}

/* === REMOVE LEFT SIDEBAR COMPLETELY === */
.left-sidebar,
.sidebar,
.nav-left,
.feed-left,
#sidebar,
aside {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* === MOVE IMAGES + VIDEOS RIGHT 2PX === */
.feed-media-wrapper,
.feed-media-img,
.feed-media-video {
  position: relative !important;
  left: 2px !important;
}

/* === MOVE IMAGES + VIDEOS RIGHT +4PX === */
.feed-media-wrapper,
.feed-media-img,
.feed-media-video {
  position: relative !important;
  left: 4px !important;
}

/* === MOVE ENTIRE FEED CARD RIGHT 5PX === */
.feed-card {
  position: relative !important;
  left: 5px !important;
}

/* === RAISE ENTIRE FEED CARD UP BY 10PX === */
.feed-card {
  position: relative !important;
  top: -10px !important;
}

/* === RAISE ALL FEED CARDS UPWARD BY 20PX === */
.feed-card {
  position: relative !important;
  top: -20px !important;
}

/* === RAISE ALL FEED CARDS UPWARD BY 100PX === */
.feed-card {
  position: relative !important;
  top: -100px !important;
}

/* Force media to fully cover card so no background shows */
.feed-media-img,
.feed-media-video {
  height: 100% !important;
  object-fit: cover !important;
}

/* === FORCE CARD HEIGHT TO MATCH MEDIA HEIGHT EXACTLY === */
.feed-card-inner {
  height: auto !important;
  min-height: unset !important;
  padding: 0 !important;
}

/* Kill any leftover extra spacing in wrapper */
.feed-media-wrapper {
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===== V2K FEED RESET — TIKTOK STYLE ===== */

/* Center the feed column */
.page-feed {
  display: flex;
  justify-content: center;
}

.feed-shell {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Card centered, no crazy offsets */
.feed-card {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 24px 0;
}

/* Card container wraps media, rounded edges */
.feed-card-inner {
  position: relative !important;
  overflow: hidden;
  border-radius: 18px;
  background: #000; /* TikTok-style dark behind video */
  height: auto !important;
  min-height: unset !important;
  padding: 0 !important;
}

/* Media wrapper — no offsets */
.feed-media-wrapper {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* PHOTO / VIDEO — fill the card width, stay centered */
.feed-media-img,
.feed-media-video {
  position: relative !important;
  left: 0 !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 80vh;
  object-fit: cover;
}

/* RIGHT-SIDE LIKE / CHAT / SHARE STACK */
.feed-meta-right {
  position: absolute !important;
  right: 12px !important;      /* right edge of card */
  bottom: 90px !important;     /* about mid-right above caption */
  display: flex;
  flex-direction: vertical;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
}

/* BOTTOM-LEFT USERNAME + CAPTION */
.feed-meta-bottom {
  position: absolute !important;
  left: 12px !important;       /* bottom-left of card */
  bottom: 16px !important;     /* just above bottom edge */
  max-width: 70%;
  color: #fff;
  z-index: 3;
}

.feed-meta-username-link {
  font-weight: 600;
  font-size: 0.95rem;
}

.feed-meta-caption {
  font-size: 0.85rem;
  margin-top: 4px;
}

.feed-meta-subline {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 2px;
}

/* Icon buttons in stack */
.feed-icon-btn {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 8px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}

.feed-icon {
  font-size: 1.3rem;
}

/* Slightly wider column on bigger screens */
@media (min-width: 768px) {
  .feed-shell {
    max-width: 480px;
  }
}

/* === MOBILE FIRST / NO HORIZONTAL SCROLL === */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* App shell + main content never wider than viewport */
.app-shell,
.app-main,
.page-feed,
.feed-shell {
  max-width: 100%;
  overflow-x: hidden;
}

/* Feed column centered, phone-first */
.page-feed {
  display: flex;
  justify-content: center;
}

.feed-shell {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Desktop: just center the phone column, no extra scrolling */
@media (min-width: 768px) {
  .app-main {
    display: flex;
    justify-content: center;
  }
}

/* === V2K MEDIA SIZE FIX (no giant zoom) === */
@media (max-width: 768px) {
  .feed-card-inner {
    height: auto !important;
  }

  .feed-media-wrapper {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow: hidden;
    margin: 0 auto !important;
  }

  .feed-media-img,
  .feed-media-video {
    display: block !important;
    width: 100% !important;        /* match top/bottom bar width */
    max-width: 100vw !important;
    height: auto !important;       /* let height follow aspect ratio */
    max-height: none !important;

    object-fit: contain !important;  /* show whole image/video */
    object-position: center center !important;
    margin: 0 auto !important;
  }
}

/* =====================================================
   V2K MOBILE FEED – SNAP + LESS ZOOM + AUDIO POSITION
   ===================================================== */
@media (max-width: 768px) {

  html, body {
    height: 100% !important;
    overflow-x: hidden !important;    /* no side-dragging */
  }

  /* Scroll container: vertical snap like TikTok */
  .feed-scroll {
    height: 100vh !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scroll-snap-type: y mandatory !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Each post = one viewport */
  .feed-card {
    height: 100vh !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  .feed-card-inner,
  .feed-media-wrapper {
    position: relative !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  /* LESS ZOOM: fit full height, keep full image, letterbox sides if needed */
  .feed-media-img,
  .feed-media-video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;

    height: 100vh !important;
    width: auto !important;
    max-height: 100vh !important;
    max-width: 100vw !important;

    object-fit: contain !important;    /* show whole frame, less zoom */
    object-position: center center !important;
  }

  /* AUDIO TOGGLE – inside picture, top-right corner */
  .audio-toggle {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 30 !important;
  }
}

/* ============================================
   V2K MOBILE – SMALLER, CENTERED MEDIA
   (Overrides previous full-screen rules)
   ============================================ */
@media (max-width: 768px) {

  /* Keep snap behavior from earlier block, but
     center content in the card instead of stretching */
  .feed-card-inner,
  .feed-media-wrapper {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #000 !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make photos/videos smaller and not zoomed */
  .feed-media-img,
  .feed-media-video {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;

    /* Shrink size */
    max-height: 80vh !important;   /* 80% of screen height */
    max-width: 90vw !important;    /* 90% of screen width */
    width: auto !important;
    height: auto !important;

    object-fit: contain !important;   /* no cropping */
    object-position: center center !important;
    margin: 0 auto !important;
  }
}

/* ===== V2K Smaller Media v2 ===== */
@media (max-width: 768px) {

  .feed-media-img,
  .feed-media-video {
    max-height: 65vh !important;   /* smaller height */
    max-width: 80vw !important;    /* smaller width */

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }
}

/* ===== V2K Smaller Media (10% Reduction) ===== */
@media (max-width: 768px) {

  .feed-media-img,
  .feed-media-video {
    max-height: 59vh !important;   /* 10% smaller */
    max-width: 72vw !important;    /* 10% smaller */

    width: auto !important;
    height: auto !important;

    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }
}

/* ============================================================
   V2K TikTok Mode – True 9:16 Vertical Media Frame on Mobile
   ============================================================ */
@media (max-width: 768px) {

  /* Each post is a 9:16 vertical frame */
  .feed-card,
  .feed-card-inner,
  .feed-media-wrapper {
    width: 100vw !important;
    height: calc(100vw * 16 / 9) !important;   /* 9:16 ratio */
    max-height: 100vh !important;
    margin: 0 auto !important;
    background: #000 !important;
    overflow: hidden !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Media fits inside 9:16 without distortion */
  .feed-media-img,
  .feed-media-video {
    width: 100% !important;         /* fill width of 9:16 frame */
    height: 100% !important;        /* fill height of 9:16 frame */
    object-fit: cover !important;   /* TikTok-style full fill */
    object-position: center center !important;
    transform: none !important;
    position: relative !important;
  }

}

/* ============================================
   DESKTOP: Centered 9:16 card like a phone
   ============================================ */
@media (min-width: 769px) {

  .page-feed {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .feed-shell {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    padding-top: 16px !important;
  }

  /* Each post is a 9:16 frame centered */
  .feed-card,
  .feed-card-inner,
  .feed-media-wrapper {
    width: 420px !important;
    height: calc(420px * 16 / 9) !important;  /* 9:16 */
    max-height: 90vh !important;
    margin: 16px auto !important;
    background: #000 !important;
    overflow: hidden !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Media fills the 9:16 frame, TikTok-style */
  .feed-media-img,
  .feed-media-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    position: relative !important;
    transform: none !important;
  }
}


/* ============================================
   10% SHRINK FOR FEED CARDS & MEDIA
   ============================================ */

/* Feed Card Width (Shrink 10%) */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  transform: scale(0.90) !important;   /* shrink 10% */
  transform-origin: top center !important;
}

/* Shrink the actual media (images/videos) by 10% */
.feed-card img,
.feed-card video,
.feed-media-wrapper img,
.feed-media-wrapper video,
.feed-media-img,
.feed-media-video,
.feed-image,
.feed-video {
  transform: scale(0.90) !important;  /* shrink 10% */
  transform-origin: center center !important;
}

/* Keep layout spacing correct after shrink */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* ============================================
   +10% ENLARGE FOR FEED CARDS & MEDIA
   ============================================ */

.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  transform: scale(1.10) !important;   /* enlarge 10% */
  transform-origin: top center !important;
}

.feed-card img,
.feed-card video,
.feed-media-wrapper img,
.feed-media-wrapper video,
.feed-media-img,
.feed-media-video,
.feed-image,
.feed-video {
  transform: scale(1.10) !important;  /* enlarge 10% */
  transform-origin: center center !important;
}

/* Maintain spacing when enlarged */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* ============================================
   ZOOM OUT PHOTOS/VIDEOS TO FIT (NO CROPPING)
   ============================================ */

/* Feed card container stays normal size */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  overflow: hidden !important;
}

/* Zoom OUT all media so the FULL photo/video fits */
.feed-card img,
.feed-card video,
.feed-media-wrapper img,
.feed-media-wrapper video,
.feed-media-img,
.feed-media-video,
.feed-image,
.feed-video {
  width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;
  object-fit: contain !important;   /* FULL MEDIA FITS - ZOOM OUT */
  object-position: center center !important;
  transform: none !important;       /* cancel old zoom rules */
}

/* Optional: limit max width so PCs don’t stretch it huge */
@media (min-width: 900px) {
  .feed-card,
  .feed-card-inner,
  .feed-media-wrapper {
    max-width: 380px !important;
    margin: 0 auto !important;
  }
}

/* ====================================================
   ZOOM OUT FEED CARDS SO THEY FIT THE PHOTO/VIDEO SIZE
   ==================================================== */

/* Feed card automatically sizes itself based on media */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  width: auto !important;
  height: auto !important;
  max-width: 90% !important;     /* prevent giant width */
  max-height: 90vh !important;   /* prevent giant height */
  margin: 12px auto !important;
  padding: 0 !important;
  background: #000 !important;
  overflow: hidden !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Media shrinks the card (container flexes around real size) */
.feed-card img,
.feed-card video,
.feed-media-wrapper img,
.feed-media-wrapper video,
.feed-media-img,
.feed-media-video,
.feed-image,
.feed-video {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;

  object-fit: contain !important;    /* show whole image/video */
  object-position: center !important;
  border-radius: 12px !important;
  transform: none !important;        /* remove previous scaling */
}

/* Desktop sanity cap */
@media (min-width: 900px) {
  .feed-card,
  .feed-card-inner,
  .feed-media-wrapper {
    max-width: 380px !important;
  }
}

/* ============================================
   OVERLAYS ZOOMED OUT TO FIT CARDS/MEDIA
   ============================================ */

/* Make sure cards are positioning context for overlays */
.app-main .feed-card,
.app-main .feed-card-inner,
.app-main .feed-media-wrapper {
  position: relative !important;
  overflow: hidden !important;
}

/* Right-side overlay stack (likes/share/etc.) */
.app-main .media-right-stack {
  transform: scale(0.65) !important;        /* zoom OUT 15% */
  transform-origin: center right !important;
  right: 8px !important;
  top: 30% !important;
  translate: 0 -50%;
  max-width: 20% !important;
}

/* Individual overlay buttons (like/chat/share) */
.app-main .media-like-btn,
.app-main .media-right-stack .feed-icon-btn,
.app-main .media-right-stack button {
  width: 42px !important;
  height: 70px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  font-size: 0.9rem !important;
}

/* Bottom-left creator name/caption overlay */
.app-main .media-bottom-left {
  transform: scale(0.90) !important;        /* zoom OUT 10% */
  transform-origin: left bottom !important;
  left: 8px !important;
  bottom: 8px !important;
  padding: 4px 8px !important;
  max-width: 80% !important;
}

/* Creator name + caption text sizing */
.app-main .media-bottom-left .creator-name {
  font-size: 0.85rem !important;
  line-height: 1.1 !important;
}

.app-main .media-bottom-left .creator-caption {
  font-size: 0.75rem !important;
  line-height: 1.2 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow: hidden !important;
}

/* Safety: overlays never overflow card bounds */
.app-main .media-right-stack,
.app-main .media-bottom-left {
  pointer-events: auto;
  box-sizing: border-box;
}

/* =====================================================
   SNAP SCROLL ZOOM-OUT TO MATCH SMALLER CARDS & MEDIA
   ===================================================== */

/* Main scroll container */
.snap-scroll,
.snap-container,
.snap-frame,
.app-main {
  scroll-snap-type: y mandatory !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Shrink snap frame height so it fits the zoomed-out cards */
.snap-frame,
.snap-item,
.feed-shell {
  height: auto !important;
  min-height: 88vh !important;  /* Zoom-out: was 100vh, now smaller */
  max-height: 90vh !important;  /* keeps perfect fit with media */
  scroll-snap-align: start !important;
  scroll-margin-top: 0 !important;
}

/* Prevent gigantic invisible hitboxes */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  scroll-snap-stop: always !important;
  padding: 0 !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

/* Ensure scrolling remains smooth after zoom-out */
.snap-scroll::-webkit-scrollbar {
  display: none !important;
}

.snap-scroll {
  scrollbar-width: none !important;
  overscroll-behavior-y: contain !important;
}

/* =============================================
   +10% TALLER FEED CARDS + PHOTOS + VIDEOS
   ============================================= */

/* Increase card height by 10% */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  height: calc(100% * 1.10) !important;     /* +10% taller */
  max-height: calc(90vh * 1.10) !important;
  overflow: hidden !important;
}

/* Increase all photos and videos by 10% vertically */
.feed-card img,
.feed-card video,
.feed-media-wrapper img,
.feed-media-wrapper video,
.feed-media-img,
.feed-media-video,
.feed-image,
.feed-video {
  height: calc(100% * 1.10) !important;     /* +10% taller media */
  width: auto !important;
  max-height: calc(80vh * 1.10) !important;
  object-fit: cover !important;             /* stays clean edge-to-edge */
  object-position: center !important;
}


/* =============================================
   -10% SHORTER FEED CARDS + PHOTOS + VIDEOS
   ============================================= */

/* Reduce card height by 10% */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  height: calc(100% * 0.90) !important;      /* 10% shorter */
  max-height: calc(90vh * 0.90) !important;
  overflow: hidden !important;
}

/* Reduce all photos and videos height by 10% */
.feed-card img,
.feed-card video,
.feed-media-wrapper img,
.feed-media-wrapper video,
.feed-media-img,
.feed-media-video,
.feed-image,
.feed-video {
  height: calc(100% * 0.90) !important;      /* 10% shorter media */
  width: auto !important;
  max-height: calc(80vh * 0.90) !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* =============================================
   -10% SHORTER FEED CARDS + PHOTOS + VIDEOS
   ============================================= */

/* Reduce card height by 10% */
.feed-card,
.feed-card-inner,
.feed-media-wrapper {
  height: calc(100% * 0.90) !important;      /* 10% shorter */
  max-height: calc(90vh * 0.90) !important;
  overflow: hidden !important;
}

/* Reduce all photos and videos height by 10% */
.feed-card img,
.feed-card video,
.feed-media-wrapper img,
.feed-media-wrapper video,
.feed-media-img,
.feed-media-video,
.feed-image,
.feed-video {
  height: calc(100% * 0.90) !important;      /* 10% shorter media */
  width: auto !important;
  max-height: calc(80vh * 0.90) !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* ============================================
   UPLOAD PREVIEW CROP UI (PHOTOS + VIDEOS)
   ============================================ */

.upload-preview-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 12px 32px;
  text-align: center;
}

.upload-preview-title {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.upload-preview-frame {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

/* 9:16 crop frame like TikTok */
.crop-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border-radius: 14px;
  margin: 0 auto;
}

/* The media we are "cropping" via transform */
.crop-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.12s ease-out;
}

/* Crop controls */
.crop-controls {
  margin: 12px 0 18px;
  text-align: left;
}

.crop-control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.crop-control-row label {
  min-width: 64px;
  font-size: 0.85rem;
}

.crop-control-row input[type="range"] {
  flex: 1;
}

.upload-preview-submit {
  margin-top: 8px;
  padding: 8px 18px;
  border-radius: 999px;
}

/* Allow extreme zoom-out in preview */
.crop-media {
  transform-origin: center center !important;
  will-change: transform;
}

/* --- Upload preview crop: avoid cutting sides by default --- */
.crop-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #000;
  border-radius: 14px;
  margin: 0 auto;
}

.crop-media {
  width: 100%;
  height: 100%;
  object-fit: contain !important;      /* show full pic/vid by default */
  object-position: center center;
  transition: transform 0.12s ease-out;
  transform-origin: center center;
}

/* ==========================================================
   V2K GLOBAL 9:16 POST FRAME (TIKTOK-STYLE AUTO CROP)
   Applies to feed, profile, explore, and any post cards
   ========================================================== */

/* Main post/card containers become 9:16 vertical frames */
.app-main .feed-card,
.app-main .feed-card-inner,
.app-main .feed-media-wrapper,
.app-main .media-card,
.app-main .media-card-media,
.app-main .media-frame,
.app-main .media-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 430px !important;          /* TikTok-style phone width */
  margin: 12px auto !important;
  aspect-ratio: 9 / 16 !important;      /* TRUE vertical 9:16 frame */
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* On desktop, keep it centered and not too huge */
@media (min-width: 900px) {
  .app-main .feed-card,
  .app-main .feed-card-inner,
  .app-main .feed-media-wrapper,
  .app-main .media-card,
  .app-main .media-card-media,
  .app-main .media-frame,
  .app-main .media-wrapper {
    max-width: 380px !important;
  }
}

/* Any post media inside those frames auto-crops to 9:16 */
.app-main .feed-card img,
.app-main .feed-card video,
.app-main .feed-media-wrapper img,
.app-main .feed-media-wrapper video,
.app-main .feed-image,
.app-main .feed-video,
.app-main .feed-media-img,
.app-main .feed-media-video,
.app-main .media-card-media img,
.app-main .media-card-media video,
.app-main .media-content img,
.app-main .media-content video,
.app-main .media-wrapper img,
.app-main .media-wrapper video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;         /* AUTO CROP to fill 9:16 */
  object-position: center center !important;
  transform: none !important;           /* kill old scale/translate hacks */
  border-radius: 16px !important;
}

/* Make sure overlays stay on top of the 9:16 frame */
.app-main .media-right-stack,
.app-main .media-bottom-left {
  position: absolute !important;
  z-index: 5 !important;
}

/* Right overlay (likes/share) */
.app-main .media-right-stack {
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Bottom-left overlay (creator + caption) */
.app-main .media-bottom-left {
  left: 10px !important;
  bottom: 10px !important;
  max-width: 70% !important;
}

/* ==========================================================
   V2K AUTO 9:16 ADJUSTER
   Forces ALL existing post content (old + new) to render
   in a perfect 9:16 vertical frame like TikTok.
   ========================================================== */

/* 9:16 FRAME FOR MAIN POST CONTAINERS (FEED / PROFILE / EXPLORE) */
.app-main .feed-card,
.app-main .feed-card-inner,
.app-main .feed-media-wrapper,
.app-main .media-card,
.app-main .media-card-media,
.app-main .media-frame,
.app-main .media-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 430px !important;
  margin: 12px auto !important;
  aspect-ratio: 9 / 16 !important;      /* AUTO 9:16 FRAME */
  overflow: hidden !important;
  background: #000 !important;
  border-radius: 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* DESKTOP WIDTH CAP */
@media (min-width: 900px) {
  .app-main .feed-card,
  .app-main .feed-card-inner,
  .app-main .feed-media-wrapper,
  .app-main .media-card,
  .app-main .media-card-media,
  .app-main .media-frame,
  .app-main .media-wrapper {
    max-width: 380px !important;
  }
}

/* AUTO-CROP MEDIA TO FILL 9:16 PERFECTLY */
.app-main .feed-card img,
.app-main .feed-card video,
.app-main .feed-media-wrapper img,
.app-main .feed-media-wrapper video,
.app-main .feed-image,
.app-main .feed-video,
.app-main .feed-media-img,
.app-main .feed-media-video,
.app-main .media-card-media img,
.app-main .media-card-media video,
.app-main .media-content img,
.app-main .media-content video,
.app-main .media-wrapper img,
.app-main .media-wrapper video {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: cover !important;          /* FILL 9:16, NO BARS */
  object-position: center center !important;
  border-radius: 16px !important;

  /* KILL ANY OLD TRANSFORMS / ZOOMS */
  transform: none !important;
}

/* KEEP OVERLAYS LOCKED TO THE FRAME */
.app-main .media-right-stack,
.app-main .media-bottom-left {
  position: absolute !important;
  z-index: 5 !important;
}

/* Right overlay stack (likes/share/etc.) */
.app-main .media-right-stack {
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Bottom-left creator/caption overlay */
.app-main .media-bottom-left {
  left: 10px !important;
  bottom: 10px !important;
  max-width: 70% !important;
}

/* Ensure text inside bottom-left stays readable */
.app-main .media-bottom-left .creator-name {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}
.app-main .media-bottom-left .creator-caption {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
}

/* ============================================
   SITEWIDE AUDIO TOGGLE (PROFILE PAGE)
   ============================================ */

.audio-toggle-card {
  margin: 16px auto 24px;
  padding: 12px 14px;
  max-width: 480px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(15, 23, 42, 0.9);
}

body[data-audio-mode="off"] .audio-toggle-card {
  border-color: rgba(248, 113, 113, 0.8);
}

.audio-toggle-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.audio-toggle-sub {
  font-size: 0.8rem;
  opacity: 0.8;
  margin-bottom: 10px;
}

.audio-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 36px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  background: radial-gradient(circle at 0% 0%, #22c55e 0%, #16a34a 40%, #0f172a 100%);
  color: #e5e7eb;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.audio-toggle-btn.is-off {
  background: radial-gradient(circle at 0% 0%, #f97373 0%, #b91c1c 40%, #0f172a 100%);
}

.audio-toggle-knob {
  position: absolute;
  left: 6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #020617;
  box-shadow: 0 0 4px rgba(15, 23, 42, 0.8);
}

.audio-toggle-btn.is-off .audio-toggle-knob {
  background: #111827;
}

.audio-toggle-text {
  white-space: nowrap;
}


/* --- Admin/owner delete buttons --- */
.feed-delete-form {
  margin-top: 0.5rem;
}
.feed-delete-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.profile-delete-form {
  margin-top: 0.25rem;
}
.profile-delete-btn {
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  background: rgba(255,0,0,0.15);
  border-radius: 999px;
  border: 1px solid rgba(255,0,0,0.4);
  cursor: pointer;
}



/* === Upload / Preview scroll fix (2025-11-19) === */
/* Ensure pages (especially upload preview with tools) can scroll fully */
html, body {
  height: 100%;
}

body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Generic upload layouts: allow vertical scrolling inside if present */
.upload-page,
.upload-preview-page,
.upload-layout,
.upload-preview-layout {
  max-height: none;
  height: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

\n
/* === Profile media grid mobile sizing (2025-11-19) === */
/* Force 9:16 vertical thumbs like TikTok, not giant tall blocks */
.profile-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.profile-media-card {
  position: relative;
  overflow: hidden;
}

/* Thumb container: 9:16 aspect, full width, auto height from aspect */
.profile-media-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

/* Actual media fills the thumb neatly */
.profile-media-thumb img,
.profile-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Optional: keep captions from blowing the card up */
.profile-media-caption {
  font-size: 0.75rem;
  line-height: 1.1;
  max-height: 2.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
\n\n
/* === Upload page: keep submit button reachable on small screens (2025-11-19) === */
.upload-submit-btn {
  position: fixed;
  bottom: 96px;           /* sit just above bottom nav bar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
}

/* Make sure upload screens can scroll fully */
.page-upload,
body.page-upload,
.upload-page-root,
.upload-main {
  min-height: 100vh;
  padding-bottom: 140px;  /* room so content isn't hidden under nav or button */
}

/* If upload uses a central column container, allow overflow scroll */
.upload-page-root,
.upload-main-inner,
.upload-preview-body {
  overflow-y: auto;
}
\n
/* === V2K FIX: FULL SCROLLABLE UPLOAD PREVIEW PAGE === */
.page-upload-preview,
.upload-preview-shell {
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
  padding-bottom: 240px !important; /* extra space under POST button */
}

/* Extra gap you requested */
.upload-bottom-spacer {
  width: 100%;
  height: 200px; /* ensures scroll-down room on phones */
}

/* Prevent any container from blocking scroll */
.upload-preview-frame,
.crop-controls,
.upload-preview-form {
  position: relative !important;
}
/* === V2K MOBILE PROFILE GRID FIX (TikTok-style tiles) === */
@media (max-width: 768px) {
  .profile-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-media-card {
    margin: 0;
  }

  .profile-media-thumb {
    width: 100%;
    /* 9:16 tile, not full-page tall */
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 8px;
  }

  .profile-media-thumb img,
  .profile-media-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* === V2K MOBILE HARD OVERRIDE: PROFILE GRID TILE HEIGHT === */
@media (max-width: 768px) {
  .profile-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .profile-media-card {
    margin: 0;
  }

  .profile-media-thumb {
    width: 100%;
    aspect-ratio: 9 / 16;
    max-height: 260px;
    height: auto !important;        /* kill any 100vh-style rules */
    overflow: hidden;
    border-radius: 8px;
  }

  .profile-media-thumb img,
  .profile-media-thumb video {
    width: 100%;
    height: 100% !important;        /* fill tile, don’t stretch page */
    object-fit: cover;
    display: block;
  }
}
/* === V2K MOBILE FIX: PROFILE HEADER OVERLAP === */
@media (max-width: 768px) {
  .profile-header,
  .profile-main,
  .page-profile .page-header {
    position: relative;
    z-index: 5;
  }

  /* Ensure VIDEOS & POSTS grid starts below the header/avatar */
  .page-profile .profile-media-section,
  .profile-media-section {
    margin-top: 16px !important;
  }
}


/* --- Edit Profile avatar preview --- */
.edit-profile-avatar-preview {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.edit-profile-avatar-preview .avatar-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.edit-profile-avatar-preview .avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-profile-avatar-preview .avatar-help-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  max-width: 260px;
}

/* Mobile tweak */
@media (max-width: 640px) {
  .edit-profile-avatar-preview {
    flex-direction: row;
    align-items: center;
  }
}

/* --- V2K Social: adjust watch/feed snap position --- */
.feed-card {
  /* snap each post to the top-ish instead of too low */
  scroll-snap-align: start;
  scroll-margin-top: 80px;  /* raise or lower snap point; try 80–120px */
}

/* --- V2K Social: correct top snap position globally --- */
.feed-scroll,
.page-feed,
.page,
body {
    scroll-padding-top: 120px !important;
}

/* remove card-based padding we added earlier */
.feed-card {
    scroll-margin-top: 0 !important;
}

/* --- V2K Social: adjust snap position (tighter to top bar) --- */
.feed-scroll,
.page-feed,
.page,
body {
    scroll-padding-top: 40px !important;
}

/* --- V2K FEED SCROLL CLEANUP (single scrollbar, better snap) --- */

/* Let the browser/body own scrolling */
html, body {
  height: 100%;
  overflow-y: auto;
}

/* Feed/page wrappers should NOT create their own scrollbars */
.page-feed,
.feed-scroll {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  scroll-snap-type: none !important;
}

/* Use the body as the only snap container */
body {
  scroll-snap-type: y mandatory;
  scroll-padding-top: 40px; /* tweak this to move cards higher/lower */
}

/* Make sure each feed card snaps nicely */
.feed-card {
  scroll-snap-align: start;
}

/* === V2K FEED SCROLLBAR & SNAP OVERRIDES (GLOBAL) === */

/* Make sure the browser/body is the only obvious scrollbar */
html, body {
  height: 100%;
}

/* Hide inner scrollbars (page + feed containers) */
.page,
.page-feed,
.feed-scroll {
  scrollbar-width: none;              /* Firefox */
}
.page::-webkit-scrollbar,
.page-feed::-webkit-scrollbar,
.feed-scroll::-webkit-scrollbar {
  display: none;                      /* Chrome / Edge / Safari */
}

/* Nudge feed cards higher when they snap */
.feed-card {
  scroll-snap-align: start;
  margin-top: -40px;   /* pulls card up a bit */
  padding-top: 40px;   /* keeps content from being cut off */
}

/* On phones, pull a little more so it feels like TikTok */
@media (max-width: 768px) {
  .feed-card {
    margin-top: -60px;
    padding-top: 60px;
  }
}

/* === FEED OVERLAY LAYOUT FIX (TITLE + LIKE STACK) === */

/* Make each feed card a positioning context */
.feed-card {
  position: relative;
}

/* Overlay blocks: left = username/caption, right = like/share stack */
.feed-meta,
.feed-meta-right {
  position: absolute;
  bottom: 80px;              /* sit above bottom nav bar */
  z-index: 5;
}

/* Left side: username + caption */
.feed-meta {
  left: 24px;
  max-width: 60vw;           /* prevent text from running under buttons */
}

.feed-userline {
  margin-bottom: 4px;
}

.feed-caption {
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Right side: vertical stack of buttons */
.feed-meta-right {
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* Make sure the icon buttons don’t get huge */
.feed-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Mobile: push overlay a bit higher so it clears bottom chrome */
@media (max-width: 768px) {
  .feed-meta,
  .feed-meta-right {
    bottom: 96px;
  }
}

/* === OVERRIDE: raise username + like stack higher on screen === */
.feed-card .feed-meta,
.feed-card .feed-meta-right {
  bottom: 140px !important;   /* was ~80px — push higher */
}

/* Desktop: keep it nice and tight inside frame */
@media (min-width: 1024px) {
  .feed-card .feed-meta {
    left: 32px;
    max-width: 55vw;
  }
  .feed-card .feed-meta-right {
    right: 32px;
  }
}

/* Mobile: even higher to clear browser chrome + bottom bar */
@media (max-width: 768px) {
  .feed-card .feed-meta,
  .feed-card .feed-meta-right {
    bottom: 190px !important;
  }
}

/* === FEED OVERLAY TWEAKS === */
/* Smaller username + caption, raised up, pulled in toward the frame */

.feed-card .feed-username {
  font-size: 0.9rem !important;   /* smaller username */
  font-weight: 600;
}

.feed-card .feed-caption {
  font-size: 0.8rem !important;   /* smaller caption */
  line-height: 1.2;
  max-width: 70%;
}

/* Base: lift overlays up */
.feed-card .feed-meta {
  bottom: 130px !important;
}

.feed-card .feed-meta-right {
  bottom: 190px !important;       /* like stack way higher */
}

/* Desktop layout – center text under video, like stack near frame edge */
@media (min-width: 1024px) {
  .feed-card .feed-meta {
    left: 50%;
    transform: translateX(-50%);
    max-width: 440px;
  }

  .feed-card .feed-meta-right {
    right: calc(50% - 240px);     /* roughly video’s right edge */
  }
}

/* Mobile – even higher to clear bottom chrome & FAB bar */
@media (max-width: 768px) {
  .feed-card .feed-meta {
    bottom: 170px !important;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
  }

  .feed-card .feed-meta-right {
    bottom: 210px !important;
    right: 24px;
  }
}



/* Global: push text and like stack much higher */
.feed-card .feed-meta {
  bottom: 210px !important;
}

.feed-card .feed-meta-right {
  bottom: 280px !important;
}

/* Desktop – tuned for tall 9:16 posts */
@media (min-width: 1024px) {
  .feed-card .feed-meta {
    bottom: 230px !important;
    left: 50%;
    transform: translateX(-50%);
    max-width: 420px;
  }

  .feed-card .feed-meta-right {
    bottom: 300px !important;
    right: calc(50% - 240px);
  }
}

/* Mobile – extra clearance above the bottom nav bar */
@media (max-width: 768px) {
  .feed-card .feed-meta {
    bottom: 190px !important;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
  }

  .feed-card .feed-meta-right {
    bottom: 250px !important;
    right: 20px;
  }
}

/* --- EXTREME BOOST FOR LIKE STACK --- */

/* Global giant raise */
.feed-card .feed-meta-right {
  bottom: 360px !important;
  right: 30px !important;
}

/* Desktop */
@media (min-width: 1024px) {
  .feed-card .feed-meta-right {
    bottom: 420px !important;  /* raised even higher */
    right: calc(50% - 260px) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .feed-card .feed-meta-right {
    bottom: 330px !important;
    right: 20px !important;
  }
}


/* === V2K FEED OVERLAY OVERRIDES (2025-11-19) === */
/* Force consistent positioning for username/caption + like stack */

.feed-card {
  position: relative;
}

/* Username + caption */
.feed-card .feed-meta {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 72px;          /* raise text up from very bottom */
  font-size: 0.85rem;    /* smaller on desktop */
  line-height: 1.3;
}

/* Like / views stack */
.feed-card .feed-meta-right {
  position: absolute;
  right: 8%;
  bottom: 130px;         /* much higher than before */
}

/* Desktop tuning */
@media (min-width: 1024px) {
  .feed-card .feed-meta {
    bottom: 90px;
    font-size: 0.9rem;
  }

  .feed-card .feed-meta-right {
    bottom: 150px;
  }
}

/* === V2K FEED OVERLAY – TIKTOK STYLE (2025-11-19) === */
/* Anchor overlays to the media frame, not the whole page/card */

.feed-card .feed-media-outer {
  position: relative;          /* reference box for overlays */
}

/* Username + caption (bottom-left over media) */
.feed-card .feed-meta {
  position: absolute;
  left: 4%;
  right: 26%;                  /* leave room for like stack on the right */
  bottom: 5%;
  font-size: 0.85rem;
  line-height: 1.3;
  z-index: 5;
}

/* Like stack – right middle, vertical */
.feed-card .feed-meta-right {
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  z-index: 6;
}

/* Make sure the like buttons don’t get huge */
.feed-card .feed-meta-right .feed-icon-btn {
  padding: 0.3rem 0.5rem;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .feed-card .feed-meta {
    font-size: 0.78rem;
    left: 5%;
    right: 28%;
    bottom: 6%;
  }

  .feed-card .feed-meta-right {
    right: 5%;
    gap: 0.6rem;
  }
}

/* --- Raise overlays higher on the media frame (TikTok-style tweak) --- */
.feed-card .feed-meta {
  bottom: 10% !important;   /* move text up a bit */
}

.feed-card .feed-meta-right {
  top: 38% !important;      /* move like stack much higher */
}

/* Mobile: a touch higher still */
@media (max-width: 768px) {
  .feed-card .feed-meta {
    bottom: 12% !important;
  }
  .feed-card .feed-meta-right {
    top: 35% !important;
  }
}

/* --- DOUBLE HEIGHT LIFT FOR USER/CAPTION + LIKE STACK --- */

/* Raise username/caption much higher */
.feed-card .feed-meta {
  bottom: 22% !important;   /* doubled from 10–12% */
}

/* Raise like stack aggressively into TikTok vertical zone */
.feed-card .feed-meta-right {
  top: 22% !important;       /* doubled height from ~38% → 22% */
}

/* Mobile – even more aggressive */
@media (max-width: 768px) {
  .feed-card .feed-meta {
    bottom: 25% !important;
  }
  .feed-card .feed-meta-right {
    top: 18% !important;
  }
}

/* --- REWIRE LIKE STACK FOR TRUE TIKTOK POSITION --- */

.feed-card {
  position: relative !important;
}

/* Like stack: force outside the media bounding box */
.feed-card .feed-meta-right {
  position: absolute !important;
  right: 35px !important;         /* push outward */
  bottom: 32% !important;         /* BIG movement upward */
  z-index: 99999 !important;
  transform: translateY(50%);
}

/* Desktop – even higher & more outward */
@media (min-width: 1024px) {
  .feed-card .feed-meta-right {
    right: 50px !important;
    bottom: 38% !important;
  }
}

/* Username + Caption – raise ABOVE black bar */
.feed-card .feed-meta {
  bottom: 30% !important;
  left: 20px !important;
  max-width: 75%;
}

/* ==== TIKTOK-STYLE FEED OVERLAYS (OVERRIDE EVERYTHING) ==== */

.feed-card {
  position: relative !important;
}

/* Make both overlays absolute and above everything */
.feed-card .feed-meta,
.feed-card .feed-meta-right {
  position: absolute !important;
  z-index: 50 !important;
}

/* Username + caption: bottom-left above the nav bar */
.feed-card .feed-meta {
  left: 40px !important;
  right: 140px !important;        /* leave room for like stack on the right */
  bottom: 120px !important;       /* raise well above very bottom */
  transform: none !important;     /* kill old center translate */
  text-align: left !important;
}

/* Like stack: right side, mid-lower like TikTok */
.feed-card .feed-meta-right {
  right: 40px !important;
  bottom: 160px !important;       /* higher than caption */
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Mobile tweaks – pull everything in a bit */
@media (max-width: 768px) {
  .feed-card .feed-meta {
    left: 16px !important;
    right: 96px !important;
    bottom: 90px !important;
  }
  .feed-card .feed-meta-right {
    right: 16px !important;
    bottom: 120px !important;
  }
}

.feed-card .feed-meta-right {
  bottom: 220px !important;  /* higher */
  right: 24px !important;    /* closer to the right edge */
}

/* Mobile tweak: also higher + closer to edge */
@media (max-width: 768px) {
  .feed-card .feed-meta-right {
    bottom: 160px !important;
    right: 12px !important;
  }
}

/* ======================
   V2K FEED: OVERLAY LAYOUT
   (username/caption + like stack all aligned consistently)
   ====================== */

/* Ensure feed card is the positioning container */
.feed-card {
  position: relative;
  overflow: hidden;
}

/* Media centered, but overlays ignore its height */
.feed-card .feed-media-wrapper,
.feed-card video,
.feed-card img {
  display: block;
  margin: 0 auto;
}

/* LEFT SIDE: username + caption block */
.feed-meta {
  position: absolute;
  left: 5%;
  bottom: 14%;
  max-width: 45%;
  color: #fff;
  z-index: 5;
}

/* Fine text sizing */
.feed-meta .feed-username {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.feed-meta .feed-caption {
  font-size: 0.78rem;
  line-height: 1.2;
}

/* RIGHT SIDE: like stack (heart + count + views pill) */
.feed-meta-right {
  position: absolute;
  right: 4%;
  bottom: 18%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 6;
}

/* Heart button itself */
.feed-like-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

/* Like count text under heart */
.feed-like-count {
  margin-top: 2px;
  font-size: 0.8rem;
}

/* Views pill near bottom-right – keep where we liked it */
.feed-views-pill {
  position: absolute;
  right: 4%;
  bottom: 9%;
  font-size: 0.8rem;
}

/* --- Mobile tuning (phones) --- */
@media (max-width: 768px) {
  .feed-meta {
    left: 6%;
    bottom: 18%;
    max-width: 52%;
  }
  .feed-meta .feed-username {
    font-size: 0.9rem;
  }
  .feed-meta .feed-caption {
    font-size: 0.75rem;
  }

  .feed-meta-right {
    right: 5%;
    bottom: 22%;
  }

  .feed-like-btn {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }

  .feed-views-pill {
    right: 5%;
    bottom: 10%;
  }
}

/* ===========================================
   V2K FEED / WATCH: TikTok-style overlay
   - video centered
   - username + caption bottom-left
   - like stack bottom-right
   =========================================== */

/* Make sure each feed card is the positioning anchor */
.page-feed .feed-card,
.page-watch .feed-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Media centered; overlays float on top */
.page-feed .feed-card .feed-media-wrapper,
.page-watch .feed-card .feed-media-wrapper {
  position: relative;
  margin: 0 auto;
}

/* ---------------- LEFT: USERNAME + CAPTION ---------------- */

.page-feed .feed-meta,
.page-watch .feed-meta {
  position: absolute;
  left: 5%;
  bottom: 14%;
  max-width: 46%;
  color: #ffffff;
  z-index: 20;
  pointer-events: none; /* taps go to video on mobile */
}

.page-feed .feed-meta .feed-username,
.page-watch .feed-meta .feed-username {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.page-feed .feed-meta .feed-caption,
.page-watch .feed-meta .feed-caption {
  font-size: 0.78rem;
  line-height: 1.25;
  word-break: break-word;
}

/* ---------------- RIGHT: LIKE STACK (HEART / FUTURE ICONS) ---------------- */

.page-feed .feed-meta-right,
.page-watch .feed-meta-right {
  position: absolute;
  right: 5%;
  bottom: 19%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 21;
}

/* Heart button (circle) */
.page-feed .feed-meta-right .feed-like-btn,
.page-watch .feed-meta-right .feed-like-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}

/* Like count under heart */
.page-feed .feed-meta-right .feed-like-count,
.page-watch .feed-meta-right .feed-like-count {
  font-size: 0.78rem;
  margin-top: 2px;
}

/* Generic icon buttons (comments/share) if added later */
.page-feed .feed-meta-right .feed-icon-btn,
.page-watch .feed-meta-right .feed-icon-btn {
  background: transparent;
  border: none;
  color: #ffffff;
}

/* ---------------- VIEWS PILL (BOTTOM-RIGHT) ---------------- */

.page-feed .feed-views-pill,
.page-watch .feed-views-pill {
  position: absolute;
  right: 5%;
  bottom: 8%;
  font-size: 0.8rem;
  z-index: 19;
}

/* ---------------- MOBILE TUNING ---------------- */

@media (max-width: 768px) {
  .page-feed .feed-meta,
  .page-watch .feed-meta {
    left: 6%;
    bottom: 18%;
    max-width: 52%;
  }

  .page-feed .feed-meta .feed-username,
  .page-watch .feed-meta .feed-username {
    font-size: 0.9rem;
  }

  .page-feed .feed-meta .feed-caption,
  .page-watch .feed-meta .feed-caption {
    font-size: 0.75rem;
  }

  .page-feed .feed-meta-right,
  .page-watch .feed-meta-right {
    right: 6%;
    bottom: 23%;
  }

  .page-feed .feed-meta-right .feed-like-btn,
  .page-watch .feed-meta-right .feed-like-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .page-feed .feed-views-pill,
  .page-watch .feed-views-pill {
    right: 6%;
    bottom: 10%;
  }
}

/* ===========================================
   FINAL OVERRIDE: force TikTok-style layout
   for feed/watch overlays regardless of old rules
   =========================================== */

.feed-card .feed-media-wrapper {
  position: relative;
}

/* -------- Bottom-left: username + caption -------- */

.feed-card .feed-meta {
  position: absolute !important;
  left: 5% !important;
  bottom: 14% !important;
  max-width: 46% !important;
  z-index: 20 !important;
  color: #ffffff;
  pointer-events: none;
}

.feed-card .feed-meta .feed-username {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.feed-card .feed-meta .feed-caption {
  font-size: 0.78rem;
  line-height: 1.25;
  word-break: break-word;
}

/* -------- Bottom-right: like stack (heart + count) -------- */

.feed-card .feed-meta-right {
  position: absolute !important;
  right: 5% !important;
  bottom: 19% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 21 !important;
}

.feed-card .feed-meta-right .feed-like-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
}

.feed-card .feed-meta-right .feed-like-count {
  font-size: 0.78rem;
  margin-top: 2px;
}

/* -------- Bottom-right: views pill -------- */

.feed-card .feed-views-pill,
.feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  right: 5% !important;
  bottom: 8% !important;
  z-index: 19 !important;
  font-size: 0.8rem;
}

/* -------- Mobile tuning -------- */

@media (max-width: 768px) {
  .feed-card .feed-meta {
    left: 6% !important;
    bottom: 18% !important;
    max-width: 52% !important;
  }

  .feed-card .feed-meta-right {
    right: 6% !important;
    bottom: 23% !important;
  }

  .feed-card .feed-meta-right .feed-like-btn {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .feed-card .feed-views-pill,
  .feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
    bottom: 10% !important;
  }
}

/* --- Pixel fine-tuning on top of TikTok overlay --- */

/* Creator / caption: up 10px, right 5px */
.feed-card .feed-meta {
  transform: translate(5px, -10px);
}

/* Like stack: up 50px, right 100px */
.feed-card .feed-meta-right {
  transform: translate(100px, -50px);
}

/* Views pill: up 4px */
.feed-card .feed-views-pill,
.feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
}
/* ===== DEBUG: V2K feed layer colors (temporary) ===== */

/* Whole card area (anchor for positioning) */
.page-feed .feed-card {
  background: rgba(0, 255, 255, 0.06);   /* teal wash */
  outline: 1px solid rgba(0, 255, 255, 0.6);
}

/* Media wrapper (the box that holds img/video) */
.page-feed .feed-card .feed-media-wrapper {
  background: rgba(0, 0, 255, 0.06);     /* blue wash */
  outline: 1px solid rgba(0, 0, 255, 0.6);
}

/* Left overlay: username + caption */
.page-feed .feed-meta-left,
.page-feed .feed-meta {
  background: rgba(255, 165, 0, 0.10);   /* orange wash */
  outline: 1px dashed rgba(255, 165, 0, 0.85);
}

/* Right overlay: like stack */
.page-feed .feed-meta-right {
  background: rgba(255, 0, 0, 0.10);     /* red wash */
  outline: 1px dashed rgba(255, 0, 0, 0.85);
}

/* Views block */
.page-feed .feed-meta-views {
  background: rgba(0, 255, 0, 0.10);     /* green wash */
  outline: 1px dashed rgba(0, 255, 0, 0.85);
}

/* ===== END DEBUG: remove once positions are correct ===== */
/* =====================================================
   FEED / WATCH OVERLAY – FINAL OVERRIDE
   - All cards same anchor
   - Username + caption: bottom-left (inside media width)
   - Like / views stack: bottom-right, vertical stack
   ===================================================== */

/* Make every feed card the positioning anchor */
.page-feed .feed-card,
.page-watch .feed-card {
  position: relative;
}

/* (Keep debug border so we can still see the card bounds) */
.page-feed .feed-card,
.page-watch .feed-card {
  border: 2px solid #00f5ff;
}

/* ---------- LEFT SIDE: username + caption ---------- */
.page-feed .feed-card .feed-meta,
.page-watch .feed-card .feed-meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;                 /* distance above bottom of card */
  width: 100%;
  max-width: 480px;             /* same as your media max width */
  padding: 4px 12px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0); /* transparent – only for layout */
}

.page-feed .feed-card .feed-username,
.page-watch .feed-card .feed-username {
  font-size: 13px;
  font-weight: 600;
}

.page-feed .feed-card .feed-caption,
.page-watch .feed-card .feed-caption {
  font-size: 12px;
  line-height: 1.3;
  max-width: 75%;               /* keep text from colliding with stack */
}

/* ---------- RIGHT SIDE: like / views stack ---------- */
.page-feed .feed-card .feed-meta-right,
.page-watch .feed-card .feed-meta-right {
  position: absolute;
  bottom: 90px;                 /* sit a bit above caption */
  left: 50%;
  transform: translateX(210px); /* push to the right of centered media */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;                     /* space between heart + views pill */
}

/* Make every child in the stack line up cleanly */
.page-feed .feed-card .feed-meta-right > *,
.page-watch .feed-card .feed-meta-right > * {
  margin: 0;
}

/* Mobile tweak: screen is narrower, so pull stack in a bit */
@media (max-width: 600px) {
  .page-feed .feed-card .feed-meta-right,
  .page-watch .feed-card .feed-meta-right {
    transform: translateX(170px);
    bottom: 80px;
  }

  .page-feed .feed-card .feed-meta,
  .page-watch .feed-card .feed-meta {
    bottom: 64px;
    max-width: 420px;
  }
}

/* =======================================================
   V2K Social – Feed/Watch overlay FINAL override
   - All overlays are anchored to the feed-card
   - Same position for every media post
   - Pushed up into the media area (TikTok-style)
   ======================================================= */

.page-feed .feed-card,
.page-watch .feed-card {
  position: relative;
}

/* Creator + caption block (orange debug box) */
.page-feed .feed-meta,
.page-watch .feed-meta {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 120px !important; /* raise higher into frame */
}

/* Like stack (heart + count – red debug box) */
.page-feed .feed-meta-right,
.page-watch .feed-meta-right {
  position: absolute;
  right: 40px;
  bottom: 140px !important; /* higher than caption block */
}

/* Views pill (bottom-right) */
.page-feed .feed-views,
.page-watch .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  right: 40px;
  bottom: 80px !important; /* a bit above the bottom of card */
}

/* ================================
   V2K FEED – TikTok-style overlay
   Anchor everything to card center
   ================================ */

.page-feed .feed-card,
.page-watch .feed-card {
  position: relative;
}

/* Username + caption: bottom-left of video */
.page-feed .feed-card .feed-meta,
.page-watch .feed-card .feed-meta {
  position: absolute !important;
  bottom: 100px !important;        /* a bit higher */
  left: 50% !important;
  transform: translateX(-220px) !important;  /* push left from center */
}

/* Like stack: bottom-right of video */
.page-feed .feed-card .feed-like-stack,
.page-watch .feed-card .feed-like-stack {
  position: absolute !important;
  bottom: 110px !important;        /* ~50px higher than before */
  left: 50% !important;
  transform: translateX(220px) !important;   /* push right from center */
}

/* Views pill: just under like stack */
.page-feed .feed-card .feed-views-badge,
.page-watch .feed-card .feed-views-badge {
  position: absolute !important;
  bottom: 60px !important;         /* slightly raised */
  left: 50% !important;
  transform: translateX(220px) !important;   /* same horizontal as like stack */
}


/* ============================================
   V2K FEED / WATCH – FINAL OVERLAY LAYOUT
   (Overrides earlier debug styles)
   ============================================ */

/* Card: same size, centered, all posts */
.page-feed .feed-card,
.page-watch .feed-card {
  position: relative;
  width: min(420px, 90vw);        /* phone-first, but fixed for desktop */
  height: min(700px, 80vh);       /* keeps space for bottom bar */
  margin: 40px auto 56px auto;    /* center column, space above/below */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Remove debug border on card */
.page-feed .feed-card,
.page-watch .feed-card {
  border: none !important;
}

/* Media wrapper: fills card, keeps aspect ratio */
.page-feed .feed-card .feed-media-wrapper,
.page-watch .feed-card .feed-media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Actual <img>/<video>: letterbox inside, like TikTok */
.page-feed .feed-card .feed-media-wrapper img,
.page-feed .feed-card .feed-media-wrapper video,
.page-watch .feed-card .feed-media-wrapper img,
.page-watch .feed-card .feed-media-wrapper video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;  /* keeps full image visible */
}

/* --- COMMON OVERLAY BASE (we rely on these classes) --- */

.feed-overlay-caption,
.feed-overlay-likestack,
.feed-overlay-views {
  position: absolute;
  z-index: 5;
  color: #ffffff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Username + caption bottom-left */
.feed-overlay-caption {
  left: 8%;
  right: 24%;              /* leave room for like stack */
  bottom: 5rem;            /* consistent across all cards */
  font-size: 0.95rem;
  line-height: 1.25;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
  background: transparent !important;
  padding: 0;
}

/* Heart + like count right side */
.feed-overlay-likestack {
  right: 8%;
  bottom: 5.5rem;          /* a hair higher than caption */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: transparent !important;
  padding: 0;
}

/* The button itself – no debug box */
.feed-overlay-likestack .feed-like-btn {
  background: rgba(0,0,0,0.5);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
}

/* Views pill bottom-right under heart */
.feed-overlay-views {
  right: 8%;
  bottom: 3.1rem;          /* sits just under like stack */
  font-size: 0.85rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
}

/* Kill the debug teal/orange/red layers we added earlier */
.page-feed .feed-card.debug-card-border,
.page-watch .feed-card.debug-card-border,
.feed-overlay-caption.debug-caption-bg,
.feed-overlay-likestack.debug-likestack-bg,
.feed-overlay-views.debug-views-bg {
  border: none !important;
  background: transparent !important;
}

/* Small screens tweak – lift overlays a bit more */
@media (max-width: 768px) {
  .feed-overlay-caption {
    bottom: 4.5rem;
    left: 6%;
    right: 26%;
  }
  .feed-overlay-likestack {
    bottom: 5rem;
    right: 6%;
  }
  .feed-overlay-views {
    bottom: 2.6rem;
    right: 6%;
  }
}

/* ======================================================
   V2K FEED: FIXED CARD SIZE (TIKTOK STYLE)
   - Every .feed-card same width/height
   - Media centered with object-fit: contain
   - Overlays pinned to consistent spots
   ====================================================== */

.page-feed .feed-card,
.page-watch .feed-card {
  position: relative;
  width: min(480px, 90vw);   /* phone friendly, max ~480px */
  height: min(720px, 82vh);  /* consistent height on desktop */
  margin: 1.5rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  overflow: hidden;
}

/* Media wrapper fills the card */
.page-feed .feed-media-wrapper,
.page-watch .feed-media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image / video centered in the wrapper */
.page-feed .feed-media-wrapper img,
.page-feed .feed-media-wrapper video,
.page-watch .feed-media-wrapper img,
.page-watch .feed-media-wrapper video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Full-card overlay anchor (already present, just reinforcing) */
.page-feed .feed-media-overlay,
.page-watch .feed-media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* only child controls clickable */
}

/* Bottom-left: creator + caption */
.page-feed .feed-meta-left,
.page-watch .feed-meta-left {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  max-width: 60%;
  pointer-events: auto;
}

/* Bottom-right vertical like stack */
.page-feed .feed-meta-right,
.page-watch .feed-meta-right {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: auto;
}

/* Views pill sits just above bottom-right edge */
.page-feed .feed-views-pill,
.page-watch .feed-views-pill {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  transform: translateY(-4.0rem); /* lift it above the heart stack */
  pointer-events: auto;
}

/* TEMP DEBUG COLORS – can remove once layout is perfect */
.page-feed .feed-card,
.page-watch .feed-card {
}

.page-feed .feed-meta-left,
.page-watch .feed-meta-left {
}

.page-feed .feed-meta-right,
.page-watch .feed-meta-right {
}

/* ======================================================
   V2K FEED: FIXED CARD SIZE (TIKTOK STYLE)
   - Every .feed-card same width/height
   - Media centered with object-fit: contain
   - Overlays pinned to consistent spots
   ====================================================== */

.page-feed .feed-card,
.page-watch .feed-card {
  position: relative;
  width: min(480px, 90vw);   /* phone friendly, max ~480px */
  height: min(720px, 82vh);  /* consistent height on desktop */
  margin: 1.5rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  overflow: hidden;
}

/* Media wrapper fills the card */
.page-feed .feed-media-wrapper,
.page-watch .feed-media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image / video centered in the wrapper */
.page-feed .feed-media-wrapper img,
.page-feed .feed-media-wrapper video,
.page-watch .feed-media-wrapper img,
.page-watch .feed-media-wrapper video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Full-card overlay anchor (already present, just reinforcing) */
.page-feed .feed-media-overlay,
.page-watch .feed-media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* only child controls clickable */
}

/* Bottom-left: creator + caption */
.page-feed .feed-meta-left,
.page-watch .feed-meta-left {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  max-width: 60%;
  pointer-events: auto;
}

/* Bottom-right vertical like stack */
.page-feed .feed-meta-right,
.page-watch .feed-meta-right {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: auto;
}

/* Views pill sits just above bottom-right edge */
.page-feed .feed-views-pill,
.page-watch .feed-views-pill {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  transform: translateY(-4.0rem); /* lift it above the heart stack */
  pointer-events: auto;
}

/* TEMP DEBUG COLORS – can remove once layout is perfect */
.page-feed .feed-card,
.page-watch .feed-card {
}

.page-feed .feed-meta-left,
.page-watch .feed-meta-left {
}

.page-feed .feed-meta-right,
.page-watch .feed-meta-right {
}
/* --- V2K override: lift caption/meta block on feed & watch --- */
.page-feed .feed-meta-left,
.page-watch .feed-meta-left {
  bottom: 82px !important;   /* adjust height of the whole orange card */
}
/* -------------------------------------------------
   V2K FEED: small TikTok-style like stack card
   -------------------------------------------------- */

/* Right-side stack = compact pill card */
.page-feed .feed-card .feed-meta-right,
.page-watch .feed-card .feed-meta-right {
  position: absolute;
  right: calc(50% - 210px);   /* near right edge of 9:16 media */
  bottom: 120px;              /* above caption bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
  z-index: 10;
}

/* Small circular buttons in the stack */
.feed-icon-btn {
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.page-feed .feed-card .feed-meta-right .feed-icon-btn,
.page-watch .feed-card .feed-meta-right .feed-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.page-feed .feed-card .feed-meta-right .feed-icon,
.page-watch .feed-card .feed-meta-right .feed-icon {
  font-size: 18px;
  line-height: 1;
}

.page-feed .feed-card .feed-meta-right .feed-icon-label,
.page-watch .feed-card .feed-meta-right .feed-icon-label {
  font-size: 11px;
  margin-top: 2px;
}

/* Heart highlight when liked */
.feed-like-btn.liked .feed-icon {
  filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.9));
}

/* Caption (orange) card already used; just make sure it
   stays as a single bar hugging bottom, above logo bar. */
.page-feed .feed-meta-left,
.page-watch .feed-meta-left {
  position: absolute;
  left: calc(50% - 180px);
  right: calc(50% - 180px);
  bottom: 82px;               /* lifted off very bottom */
  max-width: 360px;
  margin: 0 auto;
  padding: 8px 10px 10px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* --- Chat overlay bottom sheet --- */
.v2k-chat-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75vh;
  background: rgba(2, 5, 10, 0.96);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 30px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.v2k-chat-header {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}

.v2k-chat-header-title {
  font-weight: 600;
}

.v2k-chat-close {
  cursor: pointer;
  font-size: 18px;
}

.v2k-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 4px;
  font-size: 13px;
}

.v2k-chat-message {
  margin-bottom: 6px;
}

.v2k-chat-message-username {
  font-weight: 600;
  margin-right: 4px;
}

.v2k-chat-input-row {
  display: flex;
  padding: 8px 10px 10px;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.v2k-chat-input-row input[type="text"] {
  flex: 1;
  border-radius: 999px;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.v2k-chat-input-row input[type="text"]::placeholder {
  color: rgba(255,255,255,0.5);
}

.v2k-chat-input-row button {
  border-radius: 999px;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
/* -------------------------------------------------
   V2K FEED: small TikTok-style like stack card
   -------------------------------------------------- */

/* Right-side stack = compact pill card */
.page-feed .feed-card .feed-meta-right,
.page-watch .feed-card .feed-meta-right {
  position: absolute;
  right: calc(50% - 210px);   /* near right edge of 9:16 media */
  bottom: 120px;              /* above caption bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
  z-index: 10;
}

/* Small circular buttons in the stack */
.feed-icon-btn {
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  padding: 0;
}

.page-feed .feed-card .feed-meta-right .feed-icon-btn,
.page-watch .feed-card .feed-meta-right .feed-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.page-feed .feed-card .feed-meta-right .feed-icon,
.page-watch .feed-card .feed-meta-right .feed-icon {
  font-size: 18px;
  line-height: 1;
}

.page-feed .feed-card .feed-meta-right .feed-icon-label,
.page-watch .feed-card .feed-meta-right .feed-icon-label {
  font-size: 11px;
  margin-top: 2px;
}

/* Heart highlight when liked */
.feed-like-btn.liked .feed-icon {
  filter: drop-shadow(0 0 6px rgba(255, 80, 80, 0.9));
}

/* Caption (orange) card already used; just make sure it
   stays as a single bar hugging bottom, above logo bar. */
.page-feed .feed-meta-left,
.page-watch .feed-meta-left {
  position: absolute;
  left: calc(50% - 180px);
  right: calc(50% - 180px);
  bottom: 82px;               /* lifted off very bottom */
  max-width: 360px;
  margin: 0 auto;
  padding: 8px 10px 10px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* --- Chat overlay bottom sheet --- */
.v2k-chat-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 75vh;
  background: rgba(2, 5, 10, 0.96);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 30px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  z-index: 9999;
}

.v2k-chat-header {
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 14px;
}

.v2k-chat-header-title {
  font-weight: 600;
}

.v2k-chat-close {
  cursor: pointer;
  font-size: 18px;
}

.v2k-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 4px;
  font-size: 13px;
}

.v2k-chat-message {
  margin-bottom: 6px;
}

.v2k-chat-message-username {
  font-weight: 600;
  margin-right: 4px;
}

.v2k-chat-input-row {
  display: flex;
  padding: 8px 10px 10px;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.v2k-chat-input-row input[type="text"] {
  flex: 1;
  border-radius: 999px;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.v2k-chat-input-row input[type="text"]::placeholder {
  color: rgba(255,255,255,0.5);
}

.v2k-chat-input-row button {
  border-radius: 999px;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}
/* --- Creator mini analytics panel on feed cards --- */
.page-feed .feed-card .creator-panel,
.page-watch .feed-card .creator-panel {
  position: absolute;
  left: 12px;
  bottom: 110px;            /* same vertical band as like stack on the right */
  display: flex;
  flex-direction: column;   /* vertical stack */
  gap: 4px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  font-size: 11px;
  line-height: 1.2;
  z-index: 8;
}

.creator-panel-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.creator-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

.creator-pill-icon {
  margin-right: 4px;
  font-size: 11px;
}

.creator-pill-count {
  font-weight: 600;
}
/* --- Creator panel v2: TikTok-style icon stack on right, above view pill --- */
.page-feed .feed-card .creator-panel,
.page-watch .feed-card .creator-panel {
  position: absolute;
  right: 16px;          /* near the views pill on the right */
  left: auto;
  bottom: 110px;        /* sits above the orange caption band / views */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  backdrop-filter: none;
  z-index: 8;
}

.creator-panel-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.creator-pill {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.creator-pill-icon {
  font-size: 18px;
  margin: 0;
}

.creator-pill-count {
  font-size: 11px;
  margin-top: 2px;
}

/* === V2K LIVE LAYOUT OVERRIDES (host + viewer) ====================== */

.page-live {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem 4.5rem;
}

.page-live .live-shell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Ensure both columns render */
.page-live .live-video-column,
.page-live .live-side-column {
  width: 100%;
}

/* Desktop: two-column grid */
@media (min-width: 960px) {
  .page-live .live-shell {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr);
    align-items: flex-start;
  }
}

.live-side-column {
  display: block;
}

.live-side-card {
  margin-bottom: 1rem;
}
/* Creator stack: tighter right-side placement, no background card */
.page-feed .feed-card .creator-panel,
.page-watch .feed-card .creator-panel {
  position: absolute;
  right: 24px;          /* a little more inward from the edge */
  left: auto;
  bottom: 130px;        /* sits clearly above the caption/views band */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  z-index: 8;
}

.page-feed .feed-card .creator-panel .creator-pill,
.page-watch .feed-card .creator-panel .creator-pill {
  background: transparent !important;
  box-shadow: none !important;
}
/* Base icon + count colors */
.page-feed .feed-card .creator-panel .creator-pill-icon,
.page-watch .feed-card .creator-panel .creator-pill-icon {
  color: #f5f5f5;   /* bright white/chrome */
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
}

.page-feed .feed-card .creator-panel .creator-pill-count,
.page-watch .feed-card .creator-panel .creator-pill-count {
  color: #f5f5f5;
  font-weight: 600;
}

/* Teal like heart */
.page-feed .feed-card .creator-panel .creator-pill-like .creator-pill-icon,
.page-watch .feed-card .creator-panel .creator-pill-like .creator-pill-icon {
  color: #00e0ff;  /* V2K teal */
}

/* Favorite star – bright white/chrome */
.page-feed .feed-card .creator-panel .creator-pill-favorite .creator-pill-icon,
.page-watch .feed-card .creator-panel .creator-pill-favorite .creator-pill-icon {
  color: #ffffff;
}

/* ===== V2K FEED LAYOUT RESCUE: SINGLE SCROLL, STACKED CARDS ===== */

/* 1) Turn feed-scroll into a normal block container */
.feed-scroll,
.feed-scroll-area {
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* 2) Make the list a simple vertical stack */
.feed-list {
  display: block !important;
  padding-top: 20px !important;
  padding-bottom: 60px !important;
}

/* 3) Cards must flow, no fixed centering tricks */
.feed-card,
.feed-card-inner {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto 40px auto !important;   /* space between cards */
  max-width: 420px;
}

/* 4) Images/videos respect card size, don’t break layout */
.feed-card video,
.feed-card img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}
/* --- Odin: TikTok-style right stack + low caption on FEED only --- */

.page-feed .feed-card-inner {
  position: relative;
}

/* Caption + stack as overlay near bottom of phone frame */
.page-feed .feed-meta-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;               /* lower number = closer to bottom */
  width: 100%;
  max-width: min(430px, 100% - 32px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Let overlay contents still be clickable */
.page-feed .feed-meta-left,
.page-feed .feed-meta-right {
  pointer-events: auto;
}

/* Right-side VERTICAL icon stack like TikTok */
.page-feed .feed-meta-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Heart/chat/share/save buttons as round icons */
.page-feed .feed-icon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
}

/* Views line just under the caption text */
.page-feed .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  text-align: left;
}
/* --- Odin: TikTok-style right stack + low caption on FEED --- */

/* Make each card a positioning context */
.feed-main .feed-card-inner {
  position: relative;
}

/* Caption + stack row as an overlay near the bottom of the phone frame */
.feed-main .feed-meta-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 72px;                /* lower = closer to bottom, tweak as needed */
  width: 100%;
  max-width: min(430px, 100% - 32px);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Right side: vertical TikTok-style stack */
.feed-main .feed-meta-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Round icon buttons */
.feed-main .feed-icon-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
}

/* Views text sits just under caption on the left */
.feed-main .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  text-align: left;
}
/* === Odin FEED tuning: caption lower, stack on right === */

/* Make sure the card is the positioning context */
.feed-main .feed-card-inner {
  position: relative;
}

/* Caption + views band (yellow) – centered and LOWER */
.feed-main .feed-meta-row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 32px;               /* ↓ smaller = closer to bottom */
  width: 100%;
  max-width: min(430px, 100% - 32px);
  display: block;             /* so right stack can float free */
}

/* Right-hand vertical stack (red debug box with heart etc) */
.feed-main .feed-meta-right {
  position: absolute;
  /* push it to the right side of the phone frame */
  right: calc(50% - 230px);   /* tweak this if it’s not hugging the frame */
  bottom: 120px;              /* ↑ bigger = higher on the card */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Make the like button itself a round icon, not a long bar */
.feed-main .feed-like-btn {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  padding: 4px 10px;
}

/* === FEED META LAYOUT OVERRIDE (2025-11-20) =========================== */
/* Force card + overlay + stack into final TikTok-style positions.      */

.page-feed .feed-card {
  position: relative;
}

/* Yellow caption bar across bottom of the video */
.page-feed .feed-card .feed-meta-overlay {
  position: absolute !important;
  left: 10%;
  right: 10%;
  bottom: 74px;                 /* just above the heart bar */
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  outline: 1px dotted rgba(255, 215, 0, 0.9);  /* yellow debug */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.page-feed .feed-card .feed-meta-left {
  flex: 1 1 auto;
  min-width: 0;
}

/* Red like/chat/share/fav stack on the right side */
.page-feed .feed-card .feed-meta-right {
  position: absolute !important;
  right: 22px;
  bottom: 150px;                /* move up above caption bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  outline: 1px dotted rgba(255, 0, 0, 0.9);    /* red debug */
}

/* Individual buttons in the stack */
.page-feed .feed-card .feed-meta-right .feed-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Heart icon color + size */
.page-feed .feed-card .feed-meta-right .feed-like-btn .feed-icon {
  font-size: 22px;
  color: #00e6e6; /* teal heart */
}

/* Labels + numbers */
.page-feed .feed-card .feed-meta-right .feed-icon-label,
.page-feed .feed-card .feed-meta-right .feed-like-count {
  font-size: 11px;
  color: #ffffff;
}

/* === AGE-FEED META LAYOUT OVERRIDE (TikTok-style) ==================== */
/* body has class .age-feed, so target that instead of .page-feed       */

.age-feed .feed-card {
  position: relative;
}

/* Yellow bar: user line + caption + views, near bottom of video */
.age-feed .feed-card .feed-meta-overlay {
  position: absolute !important;
  left: 10%;
  right: 10%;
  bottom: 110px;               /* lower this number to move closer to heart bar */
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
  outline: 1px dotted rgba(255, 215, 0, 0.9);  /* YELLOW debug: overlay area */
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.age-feed .feed-card .feed-meta-left {
  flex: 1 1 auto;
  min-width: 0;
}

/* Red like/chat/share/fav stack on the right side of the card */
.age-feed .feed-card .feed-meta-right {
  position: absolute !important;   /* pull out of the yellow overlay flow */
  right: 24px;
  bottom: 190px;                    /* vertical position above yellow bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  outline: 1px dotted rgba(255, 0, 0, 0.9);    /* RED debug: like stack */
}

/* Buttons in the stack */
.age-feed .feed-card .feed-meta-right .feed-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Teal heart */
.age-feed .feed-card .feed-meta-right .feed-like-btn .feed-icon {
  font-size: 22px;
  color: #00e6e6;
}

/* Counts / labels in stack */
.age-feed .feed-card .feed-meta-right .feed-icon-label,
.age-feed .feed-card .feed-meta-right .feed-like-count {
  font-size: 11px;
  color: #ffffff;
}

/* --- FORCE LIKE STACK TO MIDDLE-RIGHT OF CARD ---------------------- */
.age-feed .feed-card,
.page-feed .feed-card {
  position: relative;
}

/* Very specific so it wins over earlier rules */
.age-feed .feed-card .feed-meta-right,
.page-feed .feed-card .feed-meta-right,
.feed-card .feed-meta-right {
  position: absolute !important;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  outline: 1px dotted rgba(255, 0, 0, 0.9); /* debug: like stack box */
}

/* Heart inside stack: teal, pop a bit */
.feed-card .feed-meta-right .feed-like-btn .feed-icon {
  font-size: 22px;
  color: #00e6e6;
}

/* Counts in the stack: white text */
.feed-card .feed-meta-right .feed-icon-label,
.feed-card .feed-meta-right .feed-like-count {
  font-size: 11px;
  color: #ffffff;
}

/* --- Position the yellow username/caption + Views bar lower on the card --- */
.age-feed .feed-card .feed-meta-overlay,
.page-feed .feed-card .feed-meta-overlay,
.feed-card .feed-meta-overlay {
  position: absolute !important;
  left: 24px;
  right: 24px;
  bottom: 56px;            /* smaller number = closer to the bottom */
  transform: none !important;
}

/* --- Like stack: right-middle vertical position TikTok style --- */
.feed-card .feed-meta-right {
  position: absolute !important;
  top: 50% !important;           /* vertically center */
  right: 20px !important;        /* push to edge */
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: 10 !important;
}

/* --- Like stack: push 10px further right --- */
.feed-card .feed-meta-right {
  right: 30px !important;   /* changed from 20px → 30px */
}

/* --- Like stack: pull left 20px --- */
.feed-card .feed-meta-right {
  right: -20px !important;   /* moved from 30px toward the left */
}

/* --- Views pill bar: separate from like stack, near bottom-left --- */
.feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  left: 18px;
  bottom: 90px;          /* lower it a lot; adjust later if needed */
  z-index: 25;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #f5f5f5;
  font-size: 11px;
  line-height: 1.2;
  pointer-events: none;  /* don’t block taps/swipes */
}

.feed-card .feed-views-label {
  opacity: 0.8;
  margin-right: 4px;
}

.feed-card .feed-views-count {
  font-weight: 600;
}

/* --- Views pill: shift LEFT 100px --- */
.feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
}

/* --- Views pill: shift right 200px from previous spot --- */
.feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
}

/* --- Views pill: move DOWN 100px --- */
.feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  top: 100px !important;   /* push it down */
}

/* --- Views pill: move UP 50px (now at 50px total) --- */
.feed-card .feed-views {
  position: absolute;
  top: 75px;
  left: 20px;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  text-shadow: 0 0 6px #000;
}
/* --- FORCE VIEWS OVERLAY ON TOP OF MEDIA --- */
.feed-card-inner {
  position: relative; /* anchor for absolute children */
}

.feed-views {
  position: absolute;
  z-index: 40;          /* above media + overlays */
  left: 20px;           /* same line-up as username */
  bottom: 90px;         /* adjust as needed */
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 0 6px #000;
}

/* === FORCE VIEWS POSITION (OVERRIDE ALL) === */
.feed-views {
    position: absolute !important;
    top: 50px !important;
    left: 100px !important;
    z-index: 9999 !important;
}

/* === DEBUG: make Views pill visible & centered === */
.feed-views {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9999 !important;

  background: rgba(0,0,0,0.75);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 14px;
}

/* --- OVERRIDE: hard position Views pill on feed cards --- */
.page-feed .feed-card {
  position: relative;
}

.page-feed .feed-card .feed-views {
  position: absolute !important;
  top: 50px !important;
  left: 100px !important;
  margin: 0 !important;
  z-index: 40 !important;
  background: rgba(0,0,0,0.70);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  line-height: 1.2;
  color: rgba(226,232,240,0.85);
}

/* Views line under username/caption on feed cards */
.page-feed .feed-meta-left .feed-views {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: rgba(226,232,240,0.9);
  display: inline-block;
}
/* === V2K FEED: TIKTOK-STYLE CARD OVERRIDES === */

.page-feed .feed-card {
  position: relative;
  max-width: 420px;
  margin: 32px auto;
}

.page-feed .feed-card-inner {
  position: relative;
  padding: 16px;
  border: 1px solid #00ffd5;
  border-radius: 20px;
  background: #05090f;
}

/* 9:16 media frame */
.page-feed .feed-media-frame {
  border-radius: 18px;
  overflow: hidden;
}

.page-feed .feed-media {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 9 / 16;
}

/* Right-side icon stack (heart / chat / save / fav) */
.page-feed .feed-meta-right {
  position: absolute;
  right: 24px;
  bottom: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.page-feed .feed-icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.page-feed .feed-icon-heart {
  color: #00ffd5;           /* teal heart */
}

.page-feed .feed-icon-label,
.page-feed .feed-like-count {
  color: #ffffff;           /* white numbers / labels */
  font-weight: 600;
}

/* Creator panel: bottom-left overlay */
.page-feed .creator-panel {
  position: absolute;
  left: 28px;
  bottom: 88px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-feed .creator-avatar img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #00ffd5;
  object-fit: cover;
}

.page-feed .creator-name {
  font-weight: 700;
  color: #ffffff;
}

.page-feed .creator-tagline {
  font-size: 0.8rem;
  color: #cccccc;
}

/* Caption + views band at the very bottom */
.page-feed .feed-footer-row {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-feed .feed-caption {
  max-width: 70%;
  font-size: 0.85rem;
  color: #e5e5e5;
}

.page-feed .feed-caption-username {
  font-weight: 700;
  margin-right: 6px;
}

.page-feed .feed-views-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #00ffd5;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}

.page-feed .feed-views-label {
  opacity: 0.8;
}

.page-feed .feed-views-count {
  font-weight: 700;
}
/* --- V2K FEED: fine-tune caption + views alignment --- */

.page-feed .feed-footer-row {
  position: absolute;
  left: 40px;      /* pull in from border a bit more */
  right: 40px;
  bottom: 40px;    /* lift everything slightly above bottom */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-feed .feed-caption {
  max-width: 65%;
}

.page-feed .feed-views-pill {
  margin-left: auto;      /* force pill to hug the right side */
}

/* === V2K FEED — TIKTOK-STYLE OVERRIDES === */

/* Feed scroll: vertical snap like TikTok */
.page-feed .feed-scroll {
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 0 3.5rem;  /* room above bottom bar */
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}

/* Each card is one snap page */
.page-feed .feed-card {
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  margin: 0 auto 1.5rem;
}

/* Outer shell holds media + overlay */
.page-feed .feed-media-shell {
  position: relative;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 9:16 vertical media box, phone-first */
.page-feed .feed-media {
  position: relative;
  width: min(480px, 100vw - 32px);
  aspect-ratio: 9 / 16;
  border-radius: 24px;
  overflow: hidden;
  margin: 0 auto;
}

/* Video / image fill the frame, no stretching */
.page-feed .feed-video,
.page-feed .feed-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay pinned inside the frame, bottom-left like TikTok */
.page-feed .feed-meta-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.25rem;
  box-sizing: border-box;
}

.page-feed .feed-meta-left {
  max-width: 70%;
  pointer-events: auto;
}

.page-feed .feed-meta-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  pointer-events: auto;
}

/* Username + caption */
.feed-username {
  font-weight: 600;
  font-size: 0.95rem;
}

.feed-caption {
  font-size: 0.9rem;
  margin-top: 0.35rem;
}

/* Icon stack (heart/chat/share/save) */
.feed-icon-btn {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.85rem;
}

.feed-icon {
  font-size: 1.2rem;
  line-height: 1;
}

/* Views text under the stack */
.feed-views {
  margin-top: 0.25rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Sound toggle in top-right of the frame */
.feed-sound-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 5;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  background: rgba(0, 0, 0, 0.5);
  font-size: 1rem;
}

/* === KILL OLD WATCH-STYLE FRAMES ON FEED ONLY === */
.page-feed .watch-frame,
.page-feed .video-container,
.page-feed .video-frame,
.page-feed .rounded-frame,
.page-feed .overlay-card,
.page-feed .bubble-card,
.page-feed .video-box,
.page-feed .frame-border,
.page-feed .glow-frame,
.page-feed .teal-frame {
  all: unset !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove leftover radius and outlines */
.page-feed * {
  border-radius: 0 !important;
  outline: none !important;
}

/* === FEED: NEUTRALIZE OLD FRAME ON .feed-card-inner === */
.page-feed .feed-card-inner {
  position: relative;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border-radius: 0 !important;

  /* keep it as a simple flex wrapper */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Make the card itself just a container, no frame */
.page-feed article.feed-card {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* === V2K FEED — FINAL ALIGNMENT PASS === */

/* Make each feed card fill width but center content */
.page-feed article.feed-card {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Inner wrapper just centers the shell */
.page-feed .feed-card-inner {
  width: 100%;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Shell holds the 9:16 media centered */
.page-feed .feed-media-shell {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 9:16 frame centered */
.page-feed .feed-media {
  position: relative;
  width: min(420px, 100vw - 32px);
  aspect-ratio: 9 / 16;
  margin: 0 auto !important;
  border-radius: 20px;
  overflow: hidden;
  left: auto !important;
  right: auto !important;
}

/* Video / image fill frame */
.page-feed .feed-video,
.page-feed .feed-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay: bottom area, left text / right icons */
.page-feed .feed-meta-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  padding: 1rem;
  box-sizing: border-box;
  background: transparent !important;
}

/* Left: username + caption at bottom-left */
.page-feed .feed-meta-left {
  max-width: 70%;
  pointer-events: auto;
  background: transparent !important;
}

/* Right: icon column at bottom-right */
.page-feed .feed-meta-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem;
  align-items: center;
  justify-content: flex-end;
  pointer-events: auto;
  background: transparent !important;
}

/* Kill old big brown caption card */
.page-feed .feed-caption {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0.25rem;
  font-size: 0.85rem;
  line-height: 1.3;
  color: #f5f5f5;
}

/* Username styling */
.page-feed .feed-username {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  color: #00e5ff;
}

/* Icon buttons: small, round, stacked */
.page-feed .feed-icon-btn {
  border: none !important;
  border-radius: 999px !important;
  padding: 0.35rem 0.55rem;
  background: rgba(0, 0, 0, 0.45) !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.8rem;
}

.page-feed .feed-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.page-feed .feed-icon-label {
  margin-top: 0.15rem;
  font-size: 0.7rem;
}

/* Views text just under stack, subtle */
.page-feed .feed-views {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: #f5f5f5;
  opacity: 0.8;
}

/* Sound toggle top-right of frame */
.page-feed .feed-sound-toggle {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 5;
  border: none;
  border-radius: 999px;
  padding: 0.25rem 0.45rem;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.9rem;
}

/* === FINAL ICON STACK FIX — TIKTOK POSITIONING === */

/* Move icons to bottom-right */
.page-feed .feed-meta-right {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 0.75rem !important;
  pointer-events: auto;
}

/* Icon circle button */
.page-feed .feed-icon-btn {
  background: rgba(0,0,0,0.55) !important;
  border-radius: 50% !important;
  padding: 0.55rem !important;
  width: 48px !important;
  height: 48px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icon itself */
.page-feed .feed-icon {
  font-size: 1.2rem !important;
}

/* Label below icon */
.page-feed .feed-icon-label {
  margin-top: 0.15rem !important;
  font-size: 0.7rem !important;
  color: #fff !important;
  text-shadow: 0 0 4px #000;
}

/* Views under stack */
.page-feed .feed-views {
  font-size: 0.75rem;
  color: #fff;
  margin-top: 0.2rem;
  text-align: center;
}

/* Move the caption/username lower-left to match TikTok */
.page-feed .feed-meta-left {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: 70%;
}

/* Caption spacing tighter */
.page-feed .feed-caption {
  margin-top: 0.3rem !important;
  font-size: 0.85rem;
}

/* ======== ULTRA-FORCE ICON STACK TO BOTTOM RIGHT ======== */

.page-feed .feed-meta-right {
  position: absolute !important;
  right: 0.75rem !important;
  bottom: 1.25rem !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;

  z-index: 9999 !important;
  pointer-events: auto;
}

/* ======== SHRINK ICON BUTTONS FURTHER (TikTok size) ======== */

.page-feed .feed-icon-btn {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: rgba(0,0,0,0.55) !important;
  border-radius: 50% !important;
}

.page-feed .feed-icon {
  font-size: 1rem !important;
}

.page-feed .feed-icon-label {
  font-size: 0.6rem !important;
  margin-top: 0.15rem !important;
  text-shadow: 0 0 3px #000;
}

/* Force views label into stack */
.page-feed .feed-views {
  order: 99 !important;
  margin-top: 0.25rem !important;
  color: white !important;
  font-size: 0.65rem !important;
}

/* === TIKTOK POSITION: ICON STACK MIDDLE-RIGHT === */
.page-feed .feed-meta-right {
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  right: 0.75rem !important;
  left: auto !important;
  transform: translateY(-50%) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9999 !important;
}

/* Icon buttons: smaller, clean circles */
.page-feed .feed-icon-btn {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.55) !important;
  box-shadow: none !important;
}

/* Emoji/heart size */
.page-feed .feed-icon {
  font-size: 0.95rem !important;
}

/* Text labels under icons */
.page-feed .feed-icon-label {
  margin-top: 0.1rem !important;
  font-size: 0.6rem !important;
  color: #fff !important;
  text-shadow: 0 0 3px #000;
}

/* Views line at bottom of stack */
.page-feed .feed-views {
  margin-top: 0.2rem !important;
  font-size: 0.65rem !important;
  color: #fff !important;
}

/* Ensure caption stays bottom-left */
.page-feed .feed-meta-left {
  position: absolute !important;
  left: 0.75rem !important;
  bottom: 0.75rem !important;
  max-width: 65% !important;
}

/* === FIX VIEWS POSITION UNDER ICON STACK === */
.page-feed .feed-views {
  position: static !important;
  align-self: center !important;
  display: block !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0.25rem 0 0 0 !important;
  text-align: center !important;
}

/* === LOCK VIEWS DIRECTLY UNDER ICON STACK === */

/* Give the stack a little room at the bottom for the views label */
.page-feed .feed-meta-right {
  padding-bottom: 1.2rem !important;
}

/* Position views relative to the icon stack */
.page-feed .feed-views {
  position: absolute !important;
  top: 100% !important;              /* just below the bottom of the stack */
  left: 50% !important;
  transform: translate(-50%, 4px) !important;

  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;

  font-size: 0.65rem !important;
  color: #fff !important;
  text-shadow: 0 0 3px #000;
}

/* === FEED: REMOVE ANY BLUR / DEV OVERLAY === */
.page-feed .feed-media-shell,
.page-feed .feed-media,
.page-feed .feed-media * {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  opacity: 1 !important;
}

/* === REMOVE UNWANTED CENTER BLUR LENS ON FEED === */

/* The shell that's covering the video */
.feed-media-shell {
  filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
}

/* The media container */
.feed-media {
  filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
}

/* Remove any before/after pseudo-element overlays */
.feed-media-shell::before,
.feed-media-shell::after,
.feed-media::before,
.feed-media::after {
  content: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
}

/* Kill any global blur masks accidentally applied */
.feed-card-inner,
.feed-card,
.feed-media-container {
  filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
}

/* LIVE Tappable / Clickable Preview */
.live-video-shell {
  width: 360px;
  height: 480px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin: 20px auto;
  cursor: pointer;
  user-select: none;
  border-radius: 8px;
}


/* --- LIVE LOBBY (V2K LIVE Explore) --- */

.live-lobby-page {
  padding: 16px;
}

.live-lobby-title {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.live-lobby-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.live-lobby-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.2);
  text-decoration: none;
  color: #fff;
}

.live-lobby-card:hover {
  border-color: rgba(0, 255, 255, 0.6);
}

.live-lobby-avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #00ffcc;
}

.live-lobby-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
}

.live-lobby-username {
  font-weight: 600;
}

.live-lobby-tagline {
  opacity: 0.8;
}

.live-lobby-room {
  font-size: 0.75rem;
  opacity: 0.7;
}

.live-lobby-empty {
  opacity: 0.7;
  font-size: 0.9rem;
}

/* --- LIVE BATTLE SCORE STRIP --- */

.live-battle-score {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.75rem;
}

.live-battle-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.live-battle-label {
  opacity: 0.7;
}

.live-battle-value {
  font-weight: 700;
  font-size: 0.9rem;
}

/* === LIVE EXPLORE LOBBY === */

.live-explore-page {
  padding: 16px;
}

.live-explore-title {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.live-explore-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.live-explore-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  color: #fff;
  align-items: center;
}

.live-explore-card:hover {
  background: rgba(0, 0, 0, 0.9);
}

.live-explore-avatar-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.live-explore-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.live-explore-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #00ffd5;
  box-shadow: 0 0 8px rgba(0, 255, 213, 0.7);
  pointer-events: none;
}

/* Base ring = live; you can later add blue/green variations */
.live-ring-live {
  border-color: #ff2f5d;
  box-shadow: 0 0 10px rgba(255, 47, 93, 0.9);
}

.live-explore-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.live-explore-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.live-explore-stats {
  font-size: 0.8rem;
  opacity: 0.8;
  display: flex;
  gap: 4px;
  align-items: center;
}

.live-explore-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.06);
}

.live-explore-badge-battle {
  background: linear-gradient(90deg, #ff2f5d, #ff8a00);
}

.live-explore-empty {
  margin-top: 40px;
  text-align: center;
  opacity: 0.8;
}

/* Live layout tweaks for viewer/host */
.live-page {
  min-height: 100vh;
}

/* Chat log scroll area */
.live-chat-log {
  max-height: 40vh;
  overflow-y: auto;
}

/* Live score row (host vs cohost vs viewers) */
.live-score-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px 0;
  justify-content: center;
}

.live-score-pill {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 200, 0.4);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  white-space: nowrap;
}

/* Co-host row spacing */
.live-cohost-row {
  margin-top: 8px;
  font-size: 12px;
}

.live-cohost-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Ensure chat area scrolls nicely on small screens */
.live-chat-log {
  max-height: 40vh;
  overflow-y: auto;
}

/* Live Explore lobby */

.live-lobby-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.live-lobby-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 255, 200, 0.25);
  text-decoration: none;
  color: #eee;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.live-lobby-card:hover {
  border-color: rgba(0, 255, 200, 0.6);
  transform: translateY(-1px);
}

.live-lobby-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: radial-gradient(circle at 30% 20%, #1a1a1a, #000);
}

/* Status rings */
.live-ring-online {
  box-shadow: 0 0 0 2px rgba(0, 200, 0, 0.8);
}

.live-ring-offline {
  box-shadow: 0 0 0 2px rgba(80, 80, 80, 0.9);
}

.live-ring-live {
  box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.9);
  animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0% { box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.9); }
  70% { box-shadow: 0 0 0 6px rgba(255, 0, 0, 0.1); }
  100% { box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.4); }
}

.live-lobby-meta {
  flex: 1;
}

.live-lobby-username {
  font-size: 14px;
  font-weight: 600;
}

.live-lobby-viewers {
  font-size: 12px;
  opacity: 0.8;
}

.live-lobby-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 0, 0.8);
  color: #ff8080;
  text-transform: uppercase;
}

.live-lobby-empty {
  padding: 16px;
  font-size: 14px;
  opacity: 0.8;
}

/* ===========================
   Raven DM basic layout
   =========================== */

.raven-page {
  padding: 16px;
}

.raven-title {
  margin: 0 0 12px 0;
  font-size: 18px;
}

.raven-inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.raven-thread-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 200, 0.25);
  cursor: pointer;
}

.raven-thread-item .rt-name {
  font-weight: 600;
  font-size: 14px;
}

.raven-thread-item .rt-last {
  flex: 1;
  margin: 0 8px;
  font-size: 12px;
  opacity: 0.8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.raven-thread-item .rt-unread {
  min-width: 20px;
  text-align: center;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #ff3b3b;
  color: #fff;
}

/* Thread view */

.raven-thread-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  padding: 8px;
  gap: 8px;
}

.raven-thread-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(0, 255, 200, 0.25);
}

.raven-thread-log .msg {
  margin-bottom: 6px;
  max-width: 80%;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 13px;
}

.raven-thread-log .msg.me {
  margin-left: auto;
  background: rgba(0, 255, 200, 0.15);
  text-align: right;
}

.raven-thread-log .msg.them {
  margin-right: auto;
  background: rgba(255, 255, 255, 0.05);
}

.raven-thread-log .msg .media {
  display: block;
  margin-top: 4px;
  max-width: 180px;
  border-radius: 8px;
}

.raven-thread-form {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(0, 255, 200, 0.25);
}

#raven-msg-text {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #f5f5f5;
  font-size: 14px;
}

#raven-send-btn {
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 13px;
}

/* Live tap breakdown lane */
.live-tap-breakdown {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  font-size: 12px;
  opacity: 0.9;
}

.live-tap-breakdown span span {
  font-weight: 600;
}

/* ============================
   RAVEN MESSENGER – INBOX / THREAD
   ============================ */

.raven-page {
  padding: 16px;
  max-width: 640px;
  margin: 0 auto;
}

.raven-title {
  font-size: 20px;
  margin-bottom: 12px;
  text-align: left;
}

.raven-inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.raven-thread-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.raven-thread-item:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

.raven-thread-item .rt-name {
  font-weight: 600;
  font-size: 14px;
}

.raven-thread-item .rt-last {
  flex: 1;
  margin: 0 8px;
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.raven-thread-item .rt-unread {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #0ff;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

/* Thread view */
.raven-thread-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 8px 80px;
  box-sizing: border-box;
}

.raven-thread-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* message bubbles */
.raven-thread-log .msg {
  max-width: 80%;
  padding: 6px 8px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.3;
  word-wrap: break-word;
  margin: 2px 0;
}

.raven-thread-log .msg.me {
  align-self: flex-end;
  background: linear-gradient(135deg, #00ffd5, #00aaff);
  color: #000;
  border-bottom-right-radius: 2px;
}

.raven-thread-log .msg.them {
  align-self: flex-start;
  background: rgba(255,255,255,0.07);
  border-bottom-left-radius: 2px;
}

.raven-thread-log .msg .media {
  display: block;
  margin-top: 4px;
  max-width: 220px;
  max-height: 220px;
  border-radius: 10px;
  object-fit: cover;
}

/* input bar */
.raven-thread-form {
  display: flex;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.8);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box;
}

#raven-msg-text {
  flex: 1;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
}

#raven-send-btn {
  border-radius: 999px;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #00ffd5, #00aaff);
  color: #000;
}

#raven-send-btn:active {
  transform: scale(0.97);
}

/* Raven Button on Profile */
.profile-btn-raven {
  display: inline-block;
  padding: 6px 14px;
  margin-left: 6px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(135deg, #00ffd5, #00aaff);
  color: #000;
}
.profile-btn-raven:active { transform: scale(0.97); }


/* Raven Button on Profile */
.profile-btn-raven {
  display: inline-block;
  padding: 6px 14px;
  margin-left: 6px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
  background: linear-gradient(135deg, #00ffd5, #00aaff);
  color: #000;
}
.profile-btn-raven:active { transform: scale(0.97); }


/* === Raven FAB position override (move right ~100px from center FAB) === */
.vv-raven-fab {
  position: fixed;
  z-index: 1100;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  bottom: 118px;               /* just above bottom nav */
  left: calc(50% + 110px);     /* shift to the right of main FAB */
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .vv-raven-fab {
    bottom: 110px;
    left: calc(50% + 90px);
  }
}

/* Raven text link on bottom nav */
.bottom-nav .nav-raven {
  font-size: 0.8rem;
  padding: 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

.bottom-nav .nav-raven:hover {
  opacity: 1;
}

/* Raven menu item */
.fab-menu-item {
  display: block;
  padding: 10px 15px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* FAB menu generic item (upload, live, raven, etc.) */
.fab-menu-item {
  display: block;
  padding: 10px 14px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
}
.nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #0ea5e9;
  color: white;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
}

@import "raven_fix.css";