@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --bg: #06060A;
  --bg2: #0C0C12;
  --card: #0F0F16;
  --card2: #16161F;
  --card3: #1E1E2A;
  --card4: #252533;
  --line: #1C1C28;
  --line2: #252533;
  --fg: #F0F0F5;
  --fg2: #D8D8E8;
  --muted: #9A9AB8;
  --muted2: #6E6E88;
  --accent: #C9A84C;
  --accent2: #A07828;
  --accent3: #E4C46A;
  --accent4: #F0D898;
  --accent-glow: rgba(201,168,76,0.15);
  --accent-glow2: rgba(201,168,76,0.06);
  --red: #E04545;
  --sidebar-w: 260px;
  --header-h: 64px;
  --tabbar-h: 76px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --blur: blur(20px) saturate(180%);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-accent: 0 0 40px rgba(201,168,76,0.2), 0 4px 20px rgba(0,0,0,0.6);
  --shadow-modal: 0 32px 80px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06) inset;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 100%;
  overflow: hidden;
  font-feature-settings: 'kern' 1, 'liga' 1, 'ss01' 1;
}

/* Noise texture overlay for premium feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

a { color: var(--accent); text-decoration: none; }

/* ── GLOBAL TOPBAR (full-width fixed) ── */
.global-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  height: var(--header-h);
  background: rgba(6, 6, 10, 0.92);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
  width: 100%;
}

/* Variant: topbar that contains the category-chips bar as a second row */
.global-topbar.global-topbar--with-chips {
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding: 0;
  gap: 0;
}
.global-topbar.global-topbar--with-chips .global-topbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: var(--header-h);
  width: 100%;
}
/* Chips bar living inside the global header (second row) */
.yt-chips-bar--in-header {
  position: static !important;
  top: auto !important;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: none !important;
  padding: 8px 16px !important;
}
/* Only show the in-header chips bar on the home page */
body:not(.page-home-active) .yt-chips-bar--in-header { display: none; }
/* CSS-only fallback: if body class isn't set, detect active home page via :has() */
@supports selector(:has(*)) {
  body:has(#page-home.active) .yt-chips-bar--in-header { display: flex; }
  body:not(:has(#page-home.active)) .yt-chips-bar--in-header { display: none; }
}

/* When the topbar has the chips row, increase top padding so the Rapid for
   You header and feed grid aren't tucked under the second row. The chips
   row is ~50px tall (8+8 padding + chip height). */
@supports selector(:has(*)) {
  body:has(.global-topbar--with-chips) .app-layout {
    padding-top: calc(var(--header-h) + 50px);
  }
}
/* Mobile: chips row is slightly shorter (8+8 padding + 28-ish chip) */
@media (max-width: 700px) {
  @supports selector(:has(*)) {
    body:has(.global-topbar--with-chips) .app-layout {
      padding-top: calc(var(--header-h) + 46px);
    }
  }
}

/* ── LAYOUT ── */
.app-layout {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  z-index: 1;
  padding-top: var(--header-h);
}

/* Ambient background glow */
.app-layout::before {
  content: '';
  position: fixed;
  top: -200px;
  left: -100px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: rgba(12, 12, 18, 0.95);
  backdrop-filter: var(--blur);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  height: 100%;
  overflow-y: auto;
  z-index: 10;
  position: relative;
}

.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(201,168,76,0.15) 30%, rgba(201,168,76,0.08) 70%, transparent);
  pointer-events: none;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 20px 32px;
  cursor: pointer;
  color: var(--fg);
  text-decoration: none;
}

.app-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(212,175,97,0.25), 0 0 0 1px rgba(212,175,97,0.15);
}

.app-icon-badge {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(212,175,97,0.3), 0 0 0 1px rgba(212,175,97,0.2);
  display: inline-block;
  margin-bottom: 14px;
}

.logo-wordmark {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -1px;
}

.gold-dot { color: var(--accent); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  flex: 1;
}

.nav-item { 
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  color: var(--fg2); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: var(--transition);
  border: none; background: none; text-align: left; width: 100%;
  letter-spacing: -0.1px;
}

.nav-item:hover { background: var(--card2); color: var(--fg2); }
.nav-item.active {
  background: linear-gradient(135deg, rgba(201,168,76,0.18), rgba(201,168,76,0.08));
  color: var(--accent3);
  font-weight: 600;
  border: 1px solid rgba(201,168,76,0.2);
}
.nav-item.active .nav-icon { color: var(--accent); }

.nav-icon { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: 1; }

.sidebar-bottom {
  padding: 16px 12px 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

/* ── MAIN CONTENT ── */
.main-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg);
}

.page {
  display: none;
  flex: 1;
  overflow-y: auto;
  height: 100%;
  scroll-behavior: smooth;
}
.page::-webkit-scrollbar { width: 4px; }
.page::-webkit-scrollbar-track { background: transparent; }
.page::-webkit-scrollbar-thumb { background: var(--card3); border-radius: 4px; }

.page.active { display: block; }

/* Shorts page needs overflow hidden so inner container scrolls */
#page-shorts { overflow: hidden !important; }

/* ── HEADERS ── */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(6, 6, 10, 0.85);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
  min-height: var(--header-h);
}

/* Legacy non-global headers (kept for fallback) */
.sticky-header:not(.global-header) {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.7px;
  background: linear-gradient(135deg, var(--fg) 40%, var(--fg2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-actions { display: flex; gap: 8px; align-items: center; }

.icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--line2);
  background: var(--card2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  cursor: pointer;
  transition: var(--transition);
}
.icon-btn:hover { background: var(--card3); color: var(--fg); border-color: var(--line2); }

/* ── FEED TABS ── */
.feed-tabs {
  display: flex;
  gap: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.feed-tab {
  padding: 14px 18px;
  border: none; background: none;
  color: var(--muted);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color .2s;
  white-space: nowrap;
  letter-spacing: 0.1px;
}

.feed-tab::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  opacity: 0;
  border-radius: 2px 2px 0 0;
  transition: opacity .2s;
}

.feed-tab.active { color: var(--fg); font-weight: 700; }
.feed-tab.active::after { opacity: 1; }

/* ── CHIPS ── */
.chips-bar {
  display: flex;
  gap: 7px;
  padding: 14px 24px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-bar::-webkit-scrollbar { display: none; }

.chip {
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--line2); background: rgba(22,22,31,0.6);
  color: var(--fg2); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: var(--transition);
  letter-spacing: 0.1px; backdrop-filter: blur(8px);
}
.chip:hover { border-color: rgba(201,168,76,0.3); color: var(--fg2); background: var(--card2); }
.chip.active {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  border-color: transparent;
  color: #06060A;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(201,168,76,0.25);
}

/* ── FEATURED SCROLL ── */
.featured-section { padding: 0 24px; margin-bottom: 4px; }
.section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--fg2);
  font-weight: 700;
  padding: 0 24px;
  opacity: 0.7;
}

.featured-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 14px 0 4px;
  scrollbar-width: none;
}
.featured-scroll::-webkit-scrollbar { display: none; }

.featured-card {
  flex-shrink: 0;
  width: 300px;
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
  position: relative;
}
.featured-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}
.featured-card:hover {
  transform: translateY(-3px) scale(1.005);
  border-color: rgba(201,168,76,0.25);
  box-shadow: var(--shadow-accent);
}

.featured-thumb {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--card2);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  overflow: hidden;
  position: relative;
}
.featured-thumb img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s ease; }
.featured-card:hover .featured-thumb img { transform: scale(1.04); }

/* Gradient overlay on featured thumb */
.featured-thumb::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(transparent, rgba(6,6,10,0.6));
  pointer-events: none;
}

.featured-meta {
  padding: 12px 14px 14px;
}
.featured-title {
  font-size: 13px; font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-bottom: 6px;
  color: var(--fg);
  letter-spacing: -0.1px;
}
.featured-sub { font-size: 11px; color: var(--muted); letter-spacing: 0.1px; }

.feat-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  color: #06060A;
  font-size: 9px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: .5px; text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(201,168,76,0.4);
}

/* ── VIDEO FEED (row layout) ── */
.video-feed { padding: 0 24px 120px; display: flex; flex-direction: column; gap: 0; }

.video-row {
  display: flex; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: var(--transition);
  border-radius: var(--radius-xs);
}
.video-row:hover {
  background: rgba(22,22,31,0.5);
  padding-left: 12px; padding-right: 12px;
  margin: 0 -12px;
  border-color: transparent;
}

.video-row-thumb {
  flex-shrink: 0;
  width: 168px; aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--card2);
  position: relative;
}
.video-row-thumb img { width:100%; height:100%; object-fit:cover; transition: transform 0.3s ease; }
.video-row:hover .video-row-thumb img { transform: scale(1.03); }
.video-row-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:24px; background: linear-gradient(135deg, var(--card2), var(--card3)); }

.duration-badge {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(4px);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 5px;
  letter-spacing: 0.2px;
}

/* Play icon overlay on hover */
.video-row-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 0.2s;
  border-radius: var(--radius-sm);
}
.video-row:hover .video-row-thumb::after { background: rgba(0,0,0,0.15); }

.video-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.video-row-title {
  font-size: 14px; font-weight: 600; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--fg);
  letter-spacing: -0.1px;
}
.video-row-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg2); flex-wrap: wrap; opacity: 0.75; }
.dot { width: 2px; height: 2px; border-radius: 50%; background: var(--muted2); flex-shrink: 0; }
.short-badge {
  font-size: 9px; background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #06060A;
  padding: 2px 7px; border-radius: 999px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── VIDEO GRID 2-col ── */
.video-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 0 24px 120px;
}

.video-grid-card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
  position: relative;
}
.video-grid-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none; z-index: 1;
}
.video-grid-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(201,168,76,0.08);
}

.video-grid-thumb {
  width: 100%; aspect-ratio: 16/9;
  background: var(--card2);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.video-grid-thumb img { width:100%; height:100%; object-fit:cover; transition: transform 0.3s ease; }
.video-grid-card:hover .video-grid-thumb img { transform: scale(1.04); }

.video-grid-info { padding: 10px 12px 13px; }
.video-grid-title {
  font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--fg); letter-spacing: -0.1px;
}
.video-grid-meta { font-size: 11px; color: var(--fg2); opacity: 0.7; }

/* ── RAPID (YouTube-Shorts style) ── */
#page-shorts {
  position: relative;
  overflow: hidden;
  background: #0f0f0f;
  display: none;
}
#page-shorts.active { display: block; }

.rapid-shell {
  position: relative;
  width: 100%;
  height: 100%;
  background: #0f0f0f;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.rapid-shell::-webkit-scrollbar { display: none; }

.rapid-slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0f0f0f;
}

.rapid-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* MOBILE defaults: edge-to-edge fullscreen player */
.rapid-player {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  border-radius: 0;
}
.rapid-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000;
}
.rapid-poster {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(2px) brightness(.7);
}

/* Bottom creator + title overlay (always visible, like YT Shorts) */
.rapid-overlay-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 60px 16px 28px;
  background: linear-gradient(transparent 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,.92) 100%);
  z-index: 3;
  color: #fff;
  pointer-events: none;
}
.rapid-overlay-info > * { pointer-events: auto; }
.rapid-overlay-creator {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.rapid-overlay-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  overflow: hidden; background: #2a2a2a;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  border: 1px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}
.rapid-overlay-avatar img,
.rapid-overlay-avatar span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; object-fit: cover; }
.rapid-overlay-name {
  font-weight: 700; font-size: 14px;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rapid-overlay-follow {
  background: #fff; color: #0f0f0f;
  border: none; border-radius: 999px;
  padding: 7px 14px; font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.rapid-overlay-follow:hover { background: #e5e5e5; }
.rapid-overlay-title {
  font-size: 14px; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* ── ACTION RAIL — floating circular buttons next to player (YouTube Shorts) ── */
.rapid-actions-rail {
  position: absolute;
  right: 16px; bottom: 90px;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 4;
  align-items: center;
}
.rapid-rail-btn {
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0;
  font-family: inherit;
}
.rapid-rail-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease;
}
.rapid-rail-btn:hover .rapid-rail-icon { background: rgba(255,255,255,0.22); }
.rapid-rail-icon svg { width: 24px; height: 24px; color: #fff; }
.rapid-rail-count {
  font-size: 12px; font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.rapid-rail-avatar-icon {
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.rapid-rail-avatar-icon img,
.rapid-rail-avatar-icon span {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a2a;
  font-weight: 700;
}

/* Up/down nav buttons — visible on desktop next to player */
.rapid-nav-stack {
  display: none;
  position: absolute;
  right: -64px; top: 50%;
  transform: translateY(-50%);
  flex-direction: column; gap: 12px;
  z-index: 5;
}
.rapid-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease;
}
.rapid-nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.22);
}
.rapid-nav-btn:disabled { opacity: .35; cursor: default; }
.rapid-nav-btn svg { width: 20px; height: 20px; }

.shorts-loader {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
  width: 100%;
}

/* ── DESKTOP: centered tall 9:16 player with action rail floating just to its right ── */
@media (min-width: 900px) {
  .rapid-shell {
    background: #0f0f0f;
  }
  .rapid-slide {
    padding: 0 24px;
  }
  .rapid-stage {
    /* Stage holds the player + a floating actions rail attached to its right edge */
    width: auto;
    height: auto;
    max-height: calc(100vh - 24px);
  }
  .rapid-player {
    position: relative;
    height: min(900px, calc(100vh - 24px));
    aspect-ratio: 9 / 16;
    width: auto;
    max-width: 506px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  }
  .rapid-video { object-fit: contain; background: #000; }

  /* Action rail sits just outside the player on its right (YT Shorts web look) */
  .rapid-actions-rail {
    position: absolute;
    right: -68px;
    bottom: 0;
    top: auto;
    gap: 18px;
    padding-bottom: 12px;
  }
  .rapid-rail-icon {
    background: rgba(255,255,255,0.08);
  }
  .rapid-rail-btn:hover .rapid-rail-icon {
    background: rgba(255,255,255,0.18);
  }
  .rapid-rail-count { color: #f1f1f1; }

  .rapid-nav-stack { display: flex; }

  /* Push overlay info down a bit since title fits within the player */
  .rapid-overlay-info { padding: 50px 16px 18px; }
  .rapid-overlay-title { font-size: 14px; }
}

/* MOBILE adjustments */
@media (max-width: 899px) {
  .rapid-nav-stack { display: none; }
  .rapid-actions-rail {
    right: 8px;
    bottom: 100px;
    gap: 18px;
  }
  .rapid-rail-icon {
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(10px);
  }
}

/* ── CREATORS ── */
.creators-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 14px;
  padding: 16px 24px 120px;
}

.creator-card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  padding: 24px 16px 20px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.creator-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(201,168,76,0.04) 0%, transparent 100%);
  pointer-events: none;
}
.creator-card:hover {
  transform: translateY(-3px);
  border-color: rgba(201,168,76,0.22);
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 20px rgba(201,168,76,0.08);
}

.creator-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, var(--card3), var(--card4));
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; overflow: hidden; flex-shrink: 0;
  border: 2px solid rgba(201,168,76,0.2);
  box-shadow: 0 0 0 4px rgba(201,168,76,0.06), 0 4px 16px rgba(0,0,0,0.4);
  transition: var(--transition);
}
.creator-card:hover .creator-avatar { border-color: rgba(201,168,76,0.4); box-shadow: 0 0 0 4px rgba(201,168,76,0.12), 0 4px 20px rgba(0,0,0,0.5); }
.creator-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

.creator-name { font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--fg); letter-spacing: -0.2px; }
.creator-handle { font-size: 11px; color: var(--fg2); font-weight: 500; opacity: 0.75; }
.creator-followers { font-size: 12px; color: var(--accent); font-weight: 700; }
.creator-badge-pill {
  font-size: 9px;
  background: linear-gradient(90deg, var(--accent2), var(--accent3));
  color: #06060A;
  padding: 3px 10px; border-radius: 999px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  box-shadow: 0 2px 8px rgba(201,168,76,0.3);
}

/* ── EXPLORE CATEGORIES ── */
.explore-cats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  padding: 0 24px;
}

.explore-cat-card {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: var(--radius-sm);
  padding: 18px 14px;
  cursor: pointer;
  transition: var(--transition);
  display: flex; flex-direction: column; gap: 7px;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.explore-cat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.04), transparent);
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.explore-cat-card:hover {
  border-color: rgba(201,168,76,0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 15px rgba(201,168,76,0.06);
}
.explore-cat-card:hover::before { opacity: 1; }
.explore-cat-icon { font-size: 26px; }
.explore-cat-name { font-size: 13px; font-weight: 700; color: var(--fg); letter-spacing: -0.1px; }
.explore-cat-count { font-size: 11px; color: var(--muted); font-weight: 500; }

/* ── SEARCH ── */
.search-bar-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--card2);
  border-radius: 999px;
  padding: 10px 18px;
  flex: 1;
  border: 1px solid var(--line2);
  transition: var(--transition);
}
.search-bar-wrap:focus-within {
  border-color: rgba(201,168,76,0.3);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.08);
}
.search-icon { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.search-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--fg); font-size: 14px; font-family: inherit;
}
.search-input::placeholder { color: var(--muted); }
.search-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }

/* ── PROFILE ── */
.profile-hero {
  background: linear-gradient(180deg, rgba(201,168,76,0.06) 0%, var(--bg) 70%);
  padding: 36px 24px 28px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 10px;
  position: relative; overflow: hidden;
}
.profile-hero::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 300px; height: 200px;
  background: radial-gradient(ellipse, rgba(201,168,76,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.profile-avatar-lg {
  width: 92px; height: 92px; border-radius: 50%;
  background: linear-gradient(135deg, var(--card3), var(--card4));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  border: 2px solid rgba(201,168,76,0.3);
  box-shadow: 0 0 0 6px rgba(201,168,76,0.08), 0 8px 30px rgba(0,0,0,0.5);
  overflow: hidden; margin-bottom: 4px;
}
.profile-avatar-lg img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.profile-display-name { font-size: 22px; font-weight: 800; letter-spacing: -0.7px; color: var(--fg); }
.profile-username { font-size: 13px; color: var(--muted); font-weight: 500; }

.profile-stats-row {
  display: flex; gap: 0;
  margin: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.profile-stat {
  flex: 1; text-align: center;
  padding: 16px 8px;
  border-right: 1px solid var(--line);
  transition: background 0.2s;
}
.profile-stat:last-child { border-right: none; }
.profile-stat:hover { background: var(--card2); }
.profile-stat-num { font-size: 22px; font-weight: 800; color: var(--accent3); letter-spacing: -0.5px; }
.profile-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 3px; font-weight: 600; }

.profile-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); padding: 20px 24px 8px; }

.profile-menu-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--line);
  cursor: pointer; transition: var(--transition);
}
.profile-menu-item:hover { background: var(--card); }
.profile-menu-icon { font-size: 18px; width: 28px; text-align: center; opacity: 0.8; }
.profile-menu-label { font-size: 14px; font-weight: 500; flex: 1; color: var(--fg2); }
.profile-menu-arrow { color: var(--muted2); font-size: 18px; }

.profile-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 0 120px;
}
.profile-video-thumb {
  aspect-ratio: 1;
  background: var(--card2);
  overflow: hidden; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.profile-video-thumb img { width:100%; height:100%; object-fit:cover; transition: transform 0.3s; }
.profile-video-thumb:hover img { transform: scale(1.05); }
.profile-video-thumb:hover { opacity: .85; }

/* ── AUTH SIDEBAR BUTTON ── */
.sidebar-auth-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #06060A;
  border: none; cursor: pointer;
  font-size: 13px; font-weight: 700;
  transition: var(--transition);
  letter-spacing: 0.1px;
  box-shadow: 0 4px 20px rgba(201,168,76,0.25);
}
.sidebar-auth-btn:hover { opacity: .88; box-shadow: 0 6px 28px rgba(201,168,76,0.35); }
.sidebar-user-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  cursor: pointer;
}
.sidebar-user-card:hover { background: var(--card2); }
.sidebar-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--card3), var(--card4));
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; overflow: hidden; flex-shrink: 0;
  border: 1.5px solid rgba(201,168,76,0.25);
}
.sidebar-user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--fg); }
.sidebar-user-handle { font-size: 11px; color: var(--muted); }

/* ── MODAL ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(20px) saturate(120%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: overlayIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal-box {
  background: var(--card);
  border: 1px solid var(--line2);
  border-radius: 24px;
  padding: 36px 32px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  animation: modalIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-box::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.video-modal-box {
  /* YouTube-style: player(1280) + gap(24) + rail(400) + padding(24*2) = 1752 */
  max-width: 1752px;
  width: calc(100% - 48px);
  padding: 24px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--card);
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  margin: 24px auto;
}

.video-modal-close-btn {
  position: fixed;
  top: 24px; right: 24px;
  z-index: 10000;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(10px) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  width: 40px !important; height: 40px !important;
  font-size: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.video-modal-close-btn:hover {
  background: rgba(0,0,0,0.9) !important;
  transform: scale(1.05);
}

.video-modal-player video {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
  max-height: 60vh;
  object-fit: contain;
}

.modal-close {
  position: absolute; top: 18px; right: 18px;
  background: var(--card3); border: 1px solid var(--line2); color: var(--muted);
  width: 34px; height: 34px; border-radius: 50%;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: var(--transition);
  z-index: 1;
}
.modal-close:hover { color: var(--fg); background: var(--card4); }

.auth-logo {
  font-size: 30px; font-weight: 900; letter-spacing: -1.5px;
  text-align: center; margin-bottom: 22px;
}

.tab-row { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.tab-btn {
  flex: 1; padding: 11px; border: none; background: none;
  color: var(--muted); font-size: 13px; font-weight: 500;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .15s; margin-bottom: -1px; font-family: inherit;
  letter-spacing: 0.1px;
}
.tab-btn.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 700; }

.form-input {
  width: 100%; padding: 13px 16px; margin-bottom: 12px;
  background: var(--card2); border: 1px solid var(--line2);
  border-radius: var(--radius-sm); color: var(--fg);
  font-size: 14px; font-family: inherit; outline: none; transition: var(--transition);
}
.form-input:focus { border-color: rgba(201,168,76,0.4); box-shadow: 0 0 0 3px rgba(201,168,76,0.08); }
.form-input::placeholder { color: var(--muted); }

.btn-primary {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  color: #06060A; border: none; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: var(--transition); letter-spacing: 0.1px;
  box-shadow: 0 4px 20px rgba(201,168,76,0.3);
}
.btn-primary:hover { opacity: .9; box-shadow: 0 6px 28px rgba(201,168,76,0.4); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.auth-error {
  background: rgba(224,69,69,.12);
  border: 1px solid rgba(224,69,69,0.4);
  color: #ff6b6b;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 14px;
}
.gold-link { color: var(--accent3); }
.gold-link:hover { color: var(--accent4); }

/* ── VIDEO MODAL CONTENT ── */
.video-modal-player {
  width: 100%; aspect-ratio: 16/9;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.video-modal-player iframe { width:100%; height:100%; border: none; }
.video-modal-player img { width:100%; height:100%; object-fit:cover; }

/* ── HLS quality picker (Auto / 1080 / 720 / 480 / 360) ── */
.stack-quality-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  pointer-events: auto;
}
.stack-quality-btn:hover { background: rgba(0,0,0,0.78); transform: translateY(-1px); }
.stack-quality-menu {
  position: absolute;
  bottom: 50px;
  right: 14px;
  z-index: 6;
  min-width: 110px;
  padding: 6px;
  background: rgba(14,14,18,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 2px;
}
.stack-quality-menu.hidden { display: none; }
.stack-q-row {
  appearance: none;
  background: transparent;
  border: none;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.stack-q-row:hover { background: rgba(255,255,255,0.08); }
.stack-q-row.active { background: rgba(255,255,255,0.14); font-weight: 700; }
.video-modal-info { padding: 18px 22px 22px; background: var(--card); }
.video-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.3px; color: var(--fg); }
.video-modal-meta { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:13px; flex-wrap:wrap; }

/* ── BOTTOM TABBAR (mobile only) — matches iOS app tab bar exactly ── */
.bottom-tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(8,8,10,0.94);
  backdrop-filter: var(--blur);
  border-top: 0.5px solid rgba(255,255,255,0.08);
  padding: 10px 0 env(safe-area-inset-bottom, 12px);
  z-index: 20;
  justify-content: space-around;
}

.tab-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 4px 4px;
  border: none; background: none;
  color: var(--muted); font-size: 10px; font-weight: 600;
  cursor: pointer; transition: color .2s;
  letter-spacing: 0.1px;
  font-family: inherit;
}
.tab-item.active { color: var(--accent3); }
.tab-item svg { transition: transform .18s cubic-bezier(0.34,1.56,0.64,1); }
.tab-item.active svg { transform: scale(1.15); }

/* ── SKELETONS ── */
.skel {
  background: linear-gradient(90deg, var(--card2) 25%, var(--card3) 50%, var(--card2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 6px;
}

.skel-thumb { width: 168px; aspect-ratio: 16/9; border-radius: var(--radius-sm); }
.skel-line { height: 11px; margin-bottom: 8px; }

.video-row-skel { display: flex; gap: 16px; padding: 14px 24px; }
.skel-info { flex: 1; padding-top: 4px; }

.featured-skel {
  flex-shrink: 0; width: 300px; height: 185px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

.creator-skel {
  border-radius: var(--radius); height: 185px;
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}

/* ── SPINNER ── */
.spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid var(--line2);
  border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center; padding: 64px 24px;
  color: var(--muted);
}
.empty-state-icon { font-size: 44px; margin-bottom: 14px; opacity: 0.7; }
.empty-state-title { font-size: 17px; font-weight: 700; color: var(--fg2); margin-bottom: 6px; letter-spacing: -0.2px; }
.empty-state-sub { font-size: 13px; font-weight: 500; }

/* ── ANIMATIONS ── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.fade-in { animation: fadeIn .35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* Stagger animation for grid items */
.fade-in:nth-child(1) { animation-delay: 0s; }
.fade-in:nth-child(2) { animation-delay: 0.04s; }
.fade-in:nth-child(3) { animation-delay: 0.08s; }
.fade-in:nth-child(4) { animation-delay: 0.12s; }
.fade-in:nth-child(5) { animation-delay: 0.16s; }
.fade-in:nth-child(6) { animation-delay: 0.20s; }

/* ── HIDDEN ── */
.hidden { display: none !important; }

/* ── SCROLLBAR ── */
* { scrollbar-width: thin; scrollbar-color: var(--card3) transparent; }

/* ── RESPONSIVE ── */

/* Tablet / small desktop */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .creators-grid-4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Mobile */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .bottom-tabbar { display: flex; }
  .page { padding-bottom: var(--tabbar-h); }

  .video-row-thumb { width: 120px; }
  .creators-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .video-grid-2col { grid-template-columns: repeat(2, 1fr); }
  .explore-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-videos-grid { grid-template-columns: repeat(3, 1fr); }
  .featured-card { width: 260px; }

  .chips-bar { padding: 12px 16px; }
  .section-label { padding: 0 16px; }
  .featured-section { padding: 0 16px; }
  .video-feed { padding: 0 16px 120px; }
  .creators-grid-4 { padding: 12px 16px 120px; }
  .video-grid-2col { padding: 0 16px 120px; }
  .explore-cats-grid { padding: 0 16px; }

  /* Shrink topbar elements on mobile */
  .global-topbar { padding: 10px 12px; gap: 8px; }
  .gh-icon { width: 28px; height: 28px; }
  .gh-wordmark { font-size: 14px; letter-spacing: 1.5px; }
  .gh-search-wrap { padding: 7px 10px; }
  .hamburger-btn { width: 34px; height: 34px; }
  .icon-btn { width: 34px; height: 34px; }

  /* Modal bottom-sheet on mobile */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal-box {
    border-radius: 24px 24px 0 0;
    max-height: 92vh;
    padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .video-modal-box { border-radius: 16px 16px 0 0; }
  .paywall-box {
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh;
  }
  .feature-tiles-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Age gate — centred full-screen modal on mobile */
  .age-gate-overlay { align-items: center; padding: 16px; }
  .age-gate-box {
    border-radius: 24px;
    max-width: 100%;
    width: 100%;
    padding: 32px 20px 28px;
  }

  /* Profile hero */
  .profile-upgrade-row { flex-direction: column; }

  /* Ensure bottom tabbar clears safe area */
  .bottom-tabbar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  :root { --tabbar-h: 68px; }

  /* Better touch hit targets */
  .nav-item, .chip, .btn-primary, .tab-item,
  .dropdown-item, .profile-menu-item {
    min-height: 44px;
  }
  .tab-item { min-height: unset; }
}

/* ═══════════════════════════════════════════════
   MOBILE WEB ENHANCEMENTS
═══════════════════════════════════════════════ */

/* Remove tap highlight on all interactive elements */
* { -webkit-tap-highlight-color: transparent; }

/* Touch action optimization */
.video-row, .featured-card, .creator-card, .video-grid-card, .explore-cat-card {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Momentum scrolling for all scroll areas */
.page, .featured-scroll, .chips-bar, .shorts-container {
  -webkit-overflow-scrolling: touch;
}

/* ── INSTALL BANNER (iOS Add to Home Screen) ── */
.install-banner {
  position: fixed;
  bottom: calc(var(--tabbar-h) + 8px);
  left: 12px; right: 12px;
  background: linear-gradient(135deg, rgba(15,15,22,0.98), rgba(12,12,18,0.98));
  backdrop-filter: var(--blur);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 50;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.1) inset;
  animation: slideUpBanner 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUpBanner { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.install-banner-icon { width:44px; height:44px; border-radius:10px; overflow:hidden; flex-shrink:0; box-shadow:0 2px 10px rgba(201,168,76,0.3); }
.install-banner-icon img { width:100%; height:100%; }
.install-banner-text { flex:1; min-width: 0; }
.install-banner-title { font-size:14px; font-weight:700; color:var(--fg); margin-bottom:2px; }
.install-banner-sub { font-size:12px; color:var(--muted); line-height:1.4; }
.install-banner-close { background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:4px; flex-shrink:0; }
.install-banner-install-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  color: #06060A;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

/* ── PULL TO REFRESH INDICATOR ── */
.ptr-indicator {
  position: absolute;
  top: -48px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--card2);
  border: 1px solid var(--line2);
  display: flex; align-items: center; justify-content: center;
  transition: top 0.2s;
  z-index: 5;
}

/* ── VIDEO ROW — larger touch targets on mobile ── */
@media (max-width: 768px) {
  .video-row {
    padding: 12px 0;
    gap: 12px;
    -webkit-active-state: highlight;
    active-state: highlight;
  }
  .video-row:active {
    opacity: 0.75;
    transform: scale(0.99);
    transition: all 0.1s;
  }
  .creator-card:active, .featured-card:active, .video-grid-card:active {
    opacity: 0.8;
    transform: scale(0.97);
    transition: all 0.1s;
  }

  /* Wider featured cards on small screens */
  .featured-card { width: 240px; }

  /* Bigger section labels */
  .section-label { font-size: 11px; letter-spacing: 1.8px; }

  /* Full-bleed feed tabs */
  .feed-tabs { padding: 0 16px; }
  .feed-tab { padding: 13px 14px; font-size: 14px; }

  /* Chips bigger touch targets */
  .chip { padding: 8px 18px; font-size: 13px; min-height: 36px; }

  /* Bigger profile stats */
  .profile-stat { padding: 18px 8px; }
  .profile-stat-num { font-size: 24px; }
}

/* Small phones */
@media (max-width: 480px) {
  .video-row-thumb { width: 104px; }
  .video-row-title { font-size: 13px; }
  .gh-wordmark { display: none; } /* hide wordmark on very small screens to save space */
  .gh-signup-btn { font-size: 11px; padding: 0 10px; height: 30px; }
  .creators-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .video-grid-2col { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hero-stats-bar { padding: 12px 16px; }
  .hero-stat-num { font-size: 15px; }

  /* Prevent iOS zoom on input focus */
  .form-input,
  .dob-select,
  .search-input,
  select, input, textarea {
    font-size: 16px !important;
  }
}

/* Prevent iOS zoom on all inputs */
@media (max-width: 768px) {
  .form-input,
  .dob-select,
  .search-input {
    font-size: 16px;
  }
}

/* Landscape on small phones */
@media (max-height: 500px) and (max-width: 900px) {
  .bottom-tabbar { padding: 6px 0 6px; }
  :root { --tabbar-h: 56px; }
}

/* ── GOLD DIVIDER ACCENT ── */
.gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
  margin: 0 24px;
}

/* ── HERO STATS BAR ── */
.hero-stats-bar {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(201,168,76,0.04) 0%, transparent 100%);
  gap: 0;
}
.hero-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hero-stat-num {
  font-size: 18px; font-weight: 800; letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--accent3), var(--accent4));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-stat-lbl {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted);
}
.hero-stat-sep {
  width: 1px; height: 32px;
  background: linear-gradient(180deg, transparent, var(--line2), transparent);
}

/* ── HOVER PLAY INDICATOR ── */
.play-indicator {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
  background: rgba(0,0,0,0.3);
  border-radius: inherit;
}
.play-indicator svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8)); }
.video-row-thumb:hover .play-indicator,
.video-grid-thumb:hover .play-indicator,
.featured-thumb:hover .play-indicator { opacity: 1; }

/* ═══════════════════════════════════════════════
   AGE GATE
═══════════════════════════════════════════════ */
/* Age gate uses JS to set display:none — do NOT use !important here */
.age-gate-overlay {
  display: flex;
  z-index: 9999;
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(24px) saturate(160%);
}
/* When hidden class applied, JS directly sets style.display = 'none' */
.age-gate-box {
  max-width: 400px; width: 100%;
  padding: 40px 32px 32px; text-align: center;
  border: 1px solid rgba(201,168,76,0.2);
  background: linear-gradient(145deg, #0F0F16, #0C0C12);
  box-shadow: 0 0 80px rgba(201,168,76,0.08), var(--shadow-modal);
  animation: fadeScaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.age-gate-logo { display: flex; justify-content: center; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(201,168,76,0.4)); }
.age-gate-title { font-size: 28px; font-weight: 900; letter-spacing: 4px; color: var(--fg); margin-bottom: 20px; }
.age-gate-subtitle { font-size: 18px; font-weight: 700; color: var(--fg); margin-bottom: 10px; }
.age-gate-body { font-size: 14px; color: var(--fg2); line-height: 1.6; margin-bottom: 24px; opacity: 0.85; }
.age-gate-body strong { color: var(--fg); }
.age-gate-dob-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 10px; text-align: left; }
.age-gate-dob-row { display: flex; gap: 8px; margin-bottom: 16px; }
.dob-select { flex: 1; padding: 12px 8px; border-radius: 12px; background: var(--card3); border: 1px solid var(--line2); color: var(--fg); font-family: inherit; font-size: 14px; outline: none; cursor: pointer; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; text-align: center; }
.dob-select:focus { border-color: var(--accent); }
.dob-select option { background: var(--card3); }
.age-gate-error { background: rgba(224,69,69,0.1); border: 1px solid rgba(224,69,69,0.3); color: #E04545; font-size: 13px; font-weight: 600; padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; text-align: left; }
.age-gate-btn { width: 100%; margin-bottom: 16px; }
.age-gate-footer { font-size: 11px; color: var(--muted2); line-height: 1.5; }
@keyframes shake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-8px)} 30%{transform:translateX(8px)} 45%{transform:translateX(-6px)} 60%{transform:translateX(6px)} 75%{transform:translateX(-3px)} 90%{transform:translateX(3px)} }
.shake { animation: shake 0.55s cubic-bezier(0.36,0.07,0.19,0.97) both; }

/* ═══════════════════════════════════════════════
   PAYWALL MODALS
═══════════════════════════════════════════════ */
.paywall-box { max-height: 90vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; padding: 32px 28px 28px; }
.paywall-box::-webkit-scrollbar { width: 4px; }
.paywall-box::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 2px; }
.paywall-hero { text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.paywall-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.pro-icon-wrap { background: radial-gradient(circle,rgba(201,168,76,0.25) 0%,rgba(201,168,76,0.05) 100%); border: 2px solid rgba(201,168,76,0.4); box-shadow: 0 0 30px rgba(201,168,76,0.15); }
.vplus-icon-wrap { background: radial-gradient(circle,rgba(212,175,97,0.3) 0%,rgba(212,175,97,0.05) 100%); border: 2px solid rgba(212,175,97,0.45); box-shadow: 0 0 30px rgba(212,175,97,0.2); }
.paywall-tier-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: var(--accent3); margin-bottom: 6px; }
.vplus-label { color: #D4AF61; }
.paywall-headline { font-size: 22px; font-weight: 800; color: var(--fg); margin-bottom: 6px; line-height: 1.2; }
.paywall-sub { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.paywall-pill { display: inline-block; padding: 6px 14px; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--accent3); }
.vplus-pill { background: rgba(212,175,97,0.1); border-color: rgba(212,175,97,0.3); color: #D4AF61; }
.slots-banner { background: linear-gradient(135deg,rgba(201,168,76,0.12),rgba(201,168,76,0.04)); border: 1px solid rgba(201,168,76,0.3); border-radius: 14px; padding: 16px 18px; margin-bottom: 20px; }
.vplus-slots-banner { background: linear-gradient(135deg,rgba(212,175,97,0.14),rgba(212,175,97,0.04)); border-color: rgba(212,175,97,0.3); }
.slots-banner-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.slots-label { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--accent3); }
.slots-price { font-size: 28px; font-weight: 900; color: var(--fg); margin-bottom: 2px; }
.slots-price-period { font-size: 14px; font-weight: 500; color: var(--muted); }
.slots-sub { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.slots-meter-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.slots-left { color: var(--accent3); font-weight: 600; }
.slots-taken { color: var(--muted); }
.slots-bar-track { height: 6px; background: var(--card3); border-radius: 999px; overflow: hidden; }
.slots-bar-fill { height: 100%; background: linear-gradient(90deg,var(--accent2),var(--accent3)); border-radius: 999px; transition: width 1s cubic-bezier(0.4,0,0.2,1); }
.vplus-bar { background: linear-gradient(90deg,#A07828,#D4AF61); }
.plan-compare { border-radius: 14px; overflow: hidden; border: 1px solid var(--line2); margin-bottom: 20px; }
.plan-row { padding: 16px 18px; }
.free-plan { background: var(--card2); }
.pro-plan { background: linear-gradient(135deg,rgba(201,168,76,0.07),rgba(201,168,76,0.02)); border-top: 1px solid var(--line2); }
.plan-row-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.plan-name { font-size: 14px; font-weight: 700; color: var(--fg2); }
.plan-price { font-size: 14px; font-weight: 700; color: var(--muted); }
.plan-name.gold,.plan-price.gold { color: var(--accent3); }
.plan-feature { font-size: 13px; color: var(--muted); margin-bottom: 5px; padding-left: 4px; }
.feature-tiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.feature-tile { background: var(--card2); border-radius: 12px; padding: 14px 12px; text-align: center; border: 1px solid var(--line); }
.ft-icon { font-size: 22px; margin-bottom: 6px; }
.ft-title { font-size: 12px; font-weight: 700; color: var(--fg2); margin-bottom: 3px; }
.ft-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }
.benefits-list { background: var(--card2); border-radius: 14px; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--line); }
.benefit-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.benefit-row:last-child { border-bottom: none; }
.benefit-icon { font-size: 18px; width: 28px; flex-shrink: 0; }
.benefit-text { flex: 1; font-size: 14px; font-weight: 500; color: var(--fg2); }
.benefit-check { font-size: 13px; color: #4CD964; font-weight: 700; }
.vplus-pricing-card { background: linear-gradient(135deg,rgba(212,175,97,0.15),rgba(139,107,47,0.06)); border: 1px solid rgba(212,175,97,0.35); border-radius: 14px; padding: 20px; text-align: center; margin-bottom: 20px; }
.vplus-price { font-size: 44px; font-weight: 900; background: linear-gradient(135deg,#F5D76E,#D4AF61); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.vplus-price-period { font-size: 18px; font-weight: 500; }
.vplus-price-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.paywall-cta { width: 100%; margin-bottom: 12px; font-size: 15px; }
.vplus-cta { background: linear-gradient(135deg,#F5D76E 0%,#D4AF61 100%); box-shadow: 0 0 30px rgba(212,175,97,0.3),0 4px 20px rgba(0,0,0,0.5); }
.vplus-cta:hover { background: linear-gradient(135deg,#F8DF7E 0%,#DFB96A 100%); }
.paywall-terms { font-size: 11px; color: var(--muted2); line-height: 1.6; text-align: center; }

/* ═══════════════════════════════════════════════
   SIDEBAR UPGRADE BUTTONS
═══════════════════════════════════════════════ */
.sidebar-upgrade-btns { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; padding: 0 8px; }
.sidebar-upgrade-btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: var(--transition); }
.pro-upgrade-btn { background: rgba(201,168,76,0.1); border-color: rgba(201,168,76,0.25); color: var(--accent3); }
.pro-upgrade-btn:hover { background: rgba(201,168,76,0.18); border-color: rgba(201,168,76,0.5); }
.vplus-upgrade-btn { background: rgba(212,175,97,0.1); border-color: rgba(212,175,97,0.25); color: #D4AF61; }
.vplus-upgrade-btn:hover { background: rgba(212,175,97,0.18); border-color: rgba(212,175,97,0.5); }

/* ═══════════════════════════════════════════════
   TIER BADGES
═══════════════════════════════════════════════ */
.sidebar-tier-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.pro-badge { background: rgba(201,168,76,0.15); color: var(--accent3); border: 1px solid rgba(201,168,76,0.3); }
.vplus-badge { background: rgba(212,175,97,0.15); color: #D4AF61; border: 1px solid rgba(212,175,97,0.3); }
.profile-tier-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-top: 8px; }
.pro-tier { background: rgba(201,168,76,0.12); color: var(--accent3); border: 1px solid rgba(201,168,76,0.35); }
.vplus-tier { background: rgba(212,175,97,0.12); color: #D4AF61; border: 1px solid rgba(212,175,97,0.35); }

/* ═══════════════════════════════════════════════
   HAMBURGER MENU
═══════════════════════════════════════════════ */
.hamburger-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--line2);
  background: var(--card2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg);
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.hamburger-btn:hover { background: var(--card3); border-color: rgba(201,168,76,0.3); }

.hamburger-dropdown {
  position: fixed;
  top: calc(var(--header-h) + 6px);
  left: 12px;
  right: auto;
  background: var(--card2);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 8px;
  min-width: 240px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 1px 0 rgba(255,255,255,0.05) inset;
  z-index: 9999;
  animation: dropdownIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dropdownIn { from { opacity: 0; transform: scale(0.95) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.dropdown-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  border: none; background: none; color: var(--fg);
  font-family: inherit; font-size: 14px; font-weight: 600;
  width: 100%; text-align: left;
}
.dropdown-item:hover { background: var(--card3); }
.dropdown-item-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dropdown-item-icon.shop { background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.2); }
.dropdown-item-icon.pro { background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.25); }
.dropdown-item-icon.vplus { background: rgba(212,175,97,0.12); border: 1px solid rgba(212,175,97,0.25); }
.dropdown-divider { height: 1px; background: var(--line); margin: 6px 0; }
.dropdown-item-label { flex: 1; }
.dropdown-item-sub { font-size: 11px; font-weight: 500; color: var(--fg2); margin-top: 1px; opacity: 0.7; }
.dropdown-item-col { display: flex; flex-direction: column; }
.dropdown-item-arrow { color: var(--muted2); font-size: 14px; }

/* header-wrap for position:relative (dropdown positioning) */
.header-wrap { position: relative; }

/* ═══════════════════════════════════════════════
   GLOBAL HEADER (same across all pages)
   Order: [hamburger] [icon+name] [search] [signin] [bell]
═══════════════════════════════════════════════ */
/* .global-header retained for legacy/mobile fallback only */
.global-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: var(--header-h);
  width: 100%;
}

/* Hamburger only */
.gh-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Icon + wordmark */
.gh-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  cursor: pointer;
}

.gh-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 7px;
  box-shadow: 0 2px 12px rgba(212,175,97,0.25), 0 0 0 1px rgba(212,175,97,0.12);
}

.gh-wordmark {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--fg);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

/* Search stretches to fill remaining space */
.gh-center {
  flex: 1;
  min-width: 0;
}

/* Right actions (signin + bell) */

.gh-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card2);
  border-radius: 999px;
  padding: 9px 16px;
  border: 1px solid var(--line2);
  transition: var(--transition);
}
.gh-search-wrap:focus-within {
  border-color: rgba(201,168,76,0.3);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.07);
}

/* ── SIGN UP BUTTON (header) ── */
.gh-signup-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  height: 34px;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  color: #06060A;
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(201,168,76,0.35);
}
.gh-signup-btn:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(201,168,76,0.45); }
.gh-signup-btn:active { transform: translateY(0); }
.gh-signup-btn.gh-signup-btn-dark {
  background: rgba(0,0,0,0.45);
  color: var(--accent3);
  border: 1px solid rgba(212,175,97,0.45);
  box-shadow: none;
}
.gh-signup-btn.gh-signup-btn-dark:hover { background: rgba(212,175,97,0.15); }
.gh-signup-btn.hidden { display: none !important; }

/* Compact on small screens */
@media (max-width: 420px) {
  .gh-signup-btn { font-size: 11px; padding: 0 10px; height: 30px; letter-spacing: 0; }
}

.gh-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gh-bell {
  position: relative;
  color: var(--accent) !important;
}
.gh-bell svg {
  stroke: var(--accent);
  filter: drop-shadow(0 0 6px rgba(201,168,76,0.4));
}
.gh-bell:hover svg {
  stroke: var(--accent3);
  filter: drop-shadow(0 0 10px rgba(201,168,76,0.65));
}

/* ── Create button: gold circle with + ── */
.gh-create-wrap { flex-shrink: 0; }
.gh-create-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #D4AF61 0%, #B8922A 100%);
  border: none; color: #0A0A0A;
  cursor: pointer; transition: var(--transition);
  box-shadow: 0 2px 10px rgba(212,175,97,0.35);
}
.gh-create-btn:hover {
  background: linear-gradient(135deg, #E5C47A 0%, #C9A23B 100%);
  box-shadow: 0 4px 18px rgba(212,175,97,0.55);
  transform: scale(1.07);
}
.gh-create-btn:active { transform: scale(0.95); }

/* Create dropdown menu — portal, fixed so never clipped */
.gh-create-menu-portal {
  position: fixed;
  background: var(--card2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  min-width: 280px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.06) inset;
  overflow: hidden;
  z-index: 10000;
}
.gh-create-menu-portal:not(.hidden) {
  animation: dropIn 0.18s cubic-bezier(.22,.68,0,1.2);
}
@keyframes dropIn { from { opacity:0; transform: translateY(-8px) scale(0.96); } to { opacity:1; transform: translateY(0) scale(1); } }
.gh-create-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 13px 16px;
  background: none; border: none;
  color: var(--fg); cursor: pointer;
  font-family: inherit; transition: background 0.12s;
  text-align: left;
}
.gh-create-item:hover { background: var(--card3); }
.gh-create-item-muted { opacity: 0.6; }
.gh-create-item-muted:hover { opacity: 0.88; background: var(--card3); }
.gh-create-item-icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent3); flex-shrink: 0;
}
.gh-create-item-icon-muted {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
  color: var(--muted);
}
.gh-create-item-title { font-size: 14px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 6px; }
.gh-create-item-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.gh-create-item-text { display: flex; flex-direction: column; }
.gh-create-divider { height: 1px; background: var(--line2); margin: 3px 0; }
.gh-coming-soon-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  letter-spacing: 0.4px; color: var(--muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px; padding: 1px 5px; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════
   REAL APP ICON
═══════════════════════════════════════════════ */
.app-icon-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════
   GOLD-ONLY CHIPS (no emoji icons)
═══════════════════════════════════════════════ */
.chips-bar .chip { font-weight: 600; letter-spacing: 0.3px; }
.chips-bar .chip.active { color: #06060A; }





/* ═══════════════════════════════════════════════
   PROFILE UPGRADE CARDS
═══════════════════════════════════════════════ */
.profile-upgrade-row { display: flex; gap: 12px; padding: 0 16px 20px; }
.profile-upgrade-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; border-radius: 14px; cursor: pointer; font-family: inherit; border: 1px solid transparent; transition: var(--transition); text-align: center; }
.pro-card { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.25); }
.pro-card:hover { background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201,168,76,0.15); }
.vplus-card { background: rgba(212,175,97,0.08); border-color: rgba(212,175,97,0.25); }
.vplus-card:hover { background: rgba(212,175,97,0.15); border-color: rgba(212,175,97,0.5); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(212,175,97,0.15); }
.puc-icon { font-size: 26px; }
.puc-title { font-size: 14px; font-weight: 700; color: var(--fg2); }
.puc-sub { font-size: 11px; color: var(--muted); }


/* ═══════════════════════════════════════════════
   UPLOAD PAGE — YouTube-style
═══════════════════════════════════════════════ */

/* Page shell — only show when active (overrides .page { display:none }) */
.upload-page { display: none; flex-direction: column; overflow: hidden; height: 100%; position: relative; background: var(--bg); }
.upload-page.active { display: flex !important; }

/* ── Top bar ── */
.yt-upload-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 60px; flex-shrink: 0; background: var(--bg2); border-bottom: 1px solid var(--line); z-index: 10; }
.yt-upload-topbar-left { display: flex; align-items: center; gap: 16px; }
.yt-upload-topbar-title { font-size: 17px; font-weight: 700; color: var(--fg); letter-spacing: -0.3px; }
.yt-upload-close-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.yt-upload-close-btn:hover { background: var(--card2); color: var(--fg); }
.yt-upload-save-btn { height: 36px; padding: 0 20px; background: var(--accent); color: #06060A; border: none; border-radius: 18px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--transition); box-shadow: 0 2px 12px rgba(201,168,76,0.3); }
.yt-upload-save-btn:hover:not(:disabled) { background: var(--accent3); box-shadow: 0 4px 20px rgba(201,168,76,0.45); }
.yt-upload-save-btn:disabled { background: var(--card3); color: var(--muted2); cursor: not-allowed; box-shadow: none; }

/* ── Select (file-pick) screen ── */
.yt-upload-select-screen { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 40px 20px; background: var(--bg); cursor: default; transition: var(--transition); }
.yt-upload-select-screen.yt-dz-drag { background: rgba(201,168,76,0.04); }
.yt-upload-select-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 480px; text-align: center; }
.yt-upload-select-icon { width: 96px; height: 96px; border-radius: 50%; background: var(--card2); border: 1.5px solid var(--line2); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.yt-upload-select-title { font-size: 22px; font-weight: 700; color: var(--fg); letter-spacing: -0.4px; }
.yt-upload-select-sub { font-size: 14px; color: var(--muted); line-height: 1.5; }
.yt-upload-select-btn { margin-top: 8px; height: 40px; padding: 0 24px; background: var(--accent); color: #06060A; border: none; border-radius: 20px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--transition); box-shadow: 0 3px 16px rgba(201,168,76,0.3); }
.yt-upload-select-btn:hover { background: var(--accent3); box-shadow: 0 6px 24px rgba(201,168,76,0.45); transform: translateY(-1px); }
.yt-upload-select-note { font-size: 12px; color: var(--muted2); line-height: 1.6; max-width: 360px; }
.yt-link { color: var(--accent3); text-decoration: underline; text-underline-offset: 2px; }

/* ── Details layout ── */
.yt-upload-details { flex: 1; display: flex; overflow: hidden; }
.yt-upload-details-left { flex: 1; padding: 28px 32px; overflow-y: auto; max-width: 780px; display: flex; flex-direction: column; gap: 24px; scrollbar-width: thin; scrollbar-color: var(--card3) transparent; }
.yt-upload-details-left::-webkit-scrollbar { width: 6px; }
.yt-upload-details-left::-webkit-scrollbar-thumb { background: var(--card3); border-radius: 3px; }
.yt-upload-details-right { width: 280px; flex-shrink: 0; padding: 28px 20px 28px 0; display: flex; flex-direction: column; gap: 16px; }

/* Steps */
.yt-upload-steps { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.yt-upload-step { display: flex; align-items: center; gap: 10px; }
.yt-upload-step-line { flex: 1; height: 2px; background: var(--line2); width: 40px; margin: 0 8px; }
.yt-step-circle { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line2); background: none; color: var(--muted); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.yt-step-circle.active { border-color: var(--accent); background: var(--accent); color: #06060A; }
.yt-step-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.yt-upload-step:first-child .yt-step-label { color: var(--fg2); }

/* Form fields */
.yt-field-group { display: flex; flex-direction: column; gap: 8px; }
.yt-field-label { font-size: 14px; font-weight: 600; color: var(--fg2); display: flex; align-items: center; gap: 8px; }
.yt-field-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.yt-optional-tag { font-size: 11px; font-weight: 600; color: var(--muted2); background: var(--card2); border: 1px solid var(--line2); padding: 2px 8px; border-radius: 999px; }
.yt-field-counter-wrap { position: relative; }
.yt-field-counter { position: absolute; bottom: 12px; right: 14px; font-size: 11px; color: var(--muted2); pointer-events: none; }
.yt-input { width: 100%; background: transparent; border: 1px solid var(--line2); border-radius: 4px; color: var(--fg); font-family: inherit; font-size: 14px; padding: 12px 14px; outline: none; transition: var(--transition); resize: none; }
.yt-input::placeholder { color: var(--muted2); }
.yt-input:focus { border-color: var(--accent3); box-shadow: 0 0 0 2px rgba(201,168,76,0.12); }
.yt-textarea { min-height: 100px; padding-bottom: 32px; }

/* Thumbnail row */
.yt-thumb-row { display: flex; gap: 12px; }
.yt-thumb-option { cursor: pointer; }
.yt-thumb-preview-box { width: 160px; aspect-ratio: 16/9; border: 2px dashed var(--line2); border-radius: 8px; background: var(--card); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: var(--transition); }
.yt-thumb-preview-box:hover { border-color: var(--accent3); background: rgba(201,168,76,0.04); }
.yt-thumb-label { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.yt-auto-thumb { border-style: solid; }
.yt-reset-btn { background: none; border: none; color: var(--accent3); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; transition: var(--transition); }
.yt-reset-btn:hover { color: var(--accent4); }

/* Category chips */
.yt-cats-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.upv2-cat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 4px; border: 1px solid var(--line2); background: var(--card); color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; transition: var(--transition); font-family: inherit; white-space: nowrap; }
.upv2-cat-chip:hover { border-color: var(--line); color: var(--fg2); }
.upv2-cat-chip.selected { background: rgba(201,168,76,0.1); color: var(--accent3); border-color: rgba(201,168,76,0.4); font-weight: 700; }

/* Toggle row */
.yt-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.yt-toggle-title { font-size: 14px; font-weight: 600; color: var(--fg2); }
.yt-toggle-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.yt-affiliate-group { display: flex; flex-direction: column; gap: 10px; }
.yt-error { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 6px; background: rgba(224,69,69,0.07); border: 1px solid rgba(224,69,69,0.22); font-size: 13px; color: #ff7070; line-height: 1.5; }
.yt-progress-wrap { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line2); border-radius: 6px; }
.yt-progress-header { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 500; }
.yt-progress-track { background: var(--card3); border-radius: 2px; height: 4px; overflow: hidden; }
.yt-progress-fill { height: 100%; border-radius: 2px; background: var(--accent); transition: width 0.3s ease; }
.yt-publish-mobile { display: none; width: 100%; height: 44px; background: var(--accent); color: #06060A; border: none; border-radius: 22px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.yt-publish-mobile:hover:not(:disabled) { background: var(--accent3); }
.yt-publish-mobile:disabled { background: var(--card3); color: var(--muted2); cursor: not-allowed; }

/* Video preview card */
.yt-video-preview-card { background: var(--card); border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }
.yt-video-preview-thumb { width: 100%; aspect-ratio: 16/9; background: var(--card2); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.yt-video-preview-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.yt-preview-dur-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.85); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.yt-video-preview-info { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.yt-video-preview-label { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }
.yt-video-preview-fname { font-size: 13px; color: var(--fg2); font-weight: 500; word-break: break-all; }
.yt-change-file-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--accent3); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; transition: var(--transition); width: fit-content; }
.yt-change-file-btn:hover { color: var(--accent4); }
.yt-video-link-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--card2); }
.yt-video-link-text { font-size: 12px; color: var(--muted); }

/* Frame picker */
.upv2-frame-modal { position: fixed; inset: 0; z-index: 300; }
.upv2-frame-modal.hidden { display: none; }
.upv2-frame-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(5px); }
.upv2-frame-modal-sheet { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 620px; background: var(--card); border-radius: 24px 24px 0 0; padding: 8px 22px 36px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line2); box-shadow: var(--shadow-modal); }
.upv2-frame-modal-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--card4); margin: 6px auto 2px; }
.upv2-frame-modal-header { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 700; color: var(--fg); }
.upv2-frame-close-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--card2); border: 1px solid var(--line2); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.upv2-frame-close-btn:hover { background: var(--card3); color: var(--fg2); }
.upv2-frame-video { width: 100%; border-radius: 8px; background: #000; max-height: 260px; object-fit: contain; border: 1px solid var(--line2); }
.upv2-scrubber-wrap { display: flex; align-items: center; gap: 12px; }
.upv2-scrubber { flex: 1; -webkit-appearance: none; height: 4px; background: var(--card3); border-radius: 2px; outline: none; cursor: pointer; }
.upv2-scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.upv2-frame-capture-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: var(--accent); color: #06060A; border: none; border-radius: 8px; padding: 13px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.upv2-frame-capture-btn:hover { background: var(--accent3); }

/* Success overlay */
.upload-success-overlay { position: absolute; inset: 0; background: rgba(6,6,10,0.97); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 40px; animation: fadeIn 0.3s ease; }
.upv2-success-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(201,168,76,0.1) 0%, transparent 70%); }
.upload-success-icon { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; background: rgba(201,168,76,0.12); border: 2px solid rgba(201,168,76,0.4); display: flex; align-items: center; justify-content: center; }
.upload-success-title { position: relative; z-index: 1; font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -0.5px; }
.upload-success-sub { position: relative; z-index: 1; font-size: 14px; color: var(--muted); max-width: 320px; line-height: 1.7; }
.upv2-success-done-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #06060A; border: none; border-radius: 20px; padding: 12px 32px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--transition); margin-top: 8px; }
.upv2-success-done-btn:hover { background: var(--accent3); }

/* Toggle switch */
.upload-toggle-switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; cursor: pointer; }
.upload-toggle-switch input { opacity: 0; width: 0; height: 0; }
.upload-toggle-thumb { position: absolute; inset: 0; background: var(--card3); border-radius: 14px; transition: 0.25s; border: 1px solid var(--line2); }
.upload-toggle-thumb::before { content: ''; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; background: var(--fg2); border-radius: 50%; transition: 0.25s; }
.upload-toggle-switch input:checked + .upload-toggle-thumb { background: var(--accent); border-color: var(--accent); }
.upload-toggle-switch input:checked + .upload-toggle-thumb::before { transform: translateX(20px); background: #06060A; }

/* Responsive */
@media (max-width: 900px) { .yt-upload-details-right { width: 220px; padding-right: 16px; } .yt-upload-details-left { padding: 20px 20px 20px 24px; } .yt-thumb-preview-box { width: 120px; } }
@media (max-width: 700px) { .yt-upload-details { flex-direction: column; overflow-y: auto; } .yt-upload-details-right { width: 100%; padding: 0 16px 16px; order: -1; } .yt-video-preview-thumb { aspect-ratio: 16/5; } .yt-upload-details-left { padding: 16px; overflow-y: visible; } .yt-upload-save-btn { display: none; } .yt-publish-mobile { display: block; } }

/* Legacy refs */
.upload-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.upload-back-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: var(--card2); color: var(--fg2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
/* (legacy duplicate kept scoped to .active) */

/* Section labels */
.upv2-section-label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); padding: 0 2px; }
.upv2-section-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* Header */
.upv2-header { display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 60px; background: rgba(6,6,10,0.96); backdrop-filter: var(--blur); border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; z-index: 10; }
.upv2-header-icon-wrap { width: 28px; height: 28px; border-radius: 50%; background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.3); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.upv2-back-btn { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line2); background: var(--card2); color: var(--fg2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.upv2-back-btn:hover { background: var(--card3); border-color: var(--muted2); color: var(--fg); }
.upv2-back-btn:active { transform: scale(0.9); }
.upv2-header-center { flex: 1; text-align: center; }
.upv2-header-title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--fg); letter-spacing: -0.3px; }
.upv2-header-sub { font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: 0.1px; }

/* Publish pill */
.upv2-submit-pill { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, #b8892a 0%, #e4c46a 55%, #c9a84c 100%); color: #06060A; border: none; border-radius: 22px; padding: 9px 20px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: var(--transition); flex-shrink: 0; box-shadow: 0 0 0 1px rgba(201,168,76,0.3), 0 4px 16px rgba(201,168,76,0.25); }
.upv2-submit-pill:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(201,168,76,0.5), 0 6px 24px rgba(201,168,76,0.4); }
.upv2-submit-pill:disabled { background: var(--card3); color: var(--muted2); cursor: not-allowed; box-shadow: none; }

/* Body layout */
.upv2-body { flex: 1; display: flex; gap: 0; overflow: hidden; }
.upv2-left { width: 44%; min-width: 300px; max-width: 480px; flex-shrink: 0; padding: 24px 18px 24px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.05); scrollbar-width: none; }
.upv2-left::-webkit-scrollbar { display: none; }
.upv2-right { flex: 1; padding: 24px 24px 24px 18px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; scrollbar-width: none; }
.upv2-right::-webkit-scrollbar { display: none; }

/* Media card / dropzone */
.upv2-media-card { border-radius: 18px; overflow: hidden; border: 1px solid rgba(201,168,76,0.15); background: var(--card); position: relative; }
.upv2-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 52px 24px; cursor: pointer; overflow: hidden; transition: var(--transition); min-height: 220px; }
.upv2-dropzone:hover { background: rgba(201,168,76,0.03); }
.upv2-dropzone.upv2-dropzone-drag { background: rgba(201,168,76,0.07); border-color: rgba(201,168,76,0.5); }
.upv2-dropzone-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(201,168,76,0.09) 0%, transparent 70%); }
.upv2-dropzone-icon { position: relative; width: 76px; height: 76px; border-radius: 50%; background: rgba(201,168,76,0.08); border: 1.5px solid rgba(201,168,76,0.25); display: flex; align-items: center; justify-content: center; transition: var(--transition); box-shadow: 0 0 0 12px rgba(201,168,76,0.03), 0 0 30px rgba(201,168,76,0.12); color: var(--accent); }
.upv2-dropzone:hover .upv2-dropzone-icon { background: rgba(201,168,76,0.15); border-color: rgba(201,168,76,0.5); box-shadow: 0 0 0 16px rgba(201,168,76,0.05), 0 0 40px rgba(201,168,76,0.25); transform: scale(1.06); }
.upv2-dropzone-title { font-size: 17px; font-weight: 700; color: var(--fg); letter-spacing: -0.4px; text-align: center; margin-top: 4px; }
.upv2-dropzone-sub { font-size: 13px; color: var(--muted); text-align: center; }
.upv2-dropzone-link { color: var(--accent3); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.upv2-dropzone-formats { font-size: 10px; font-weight: 700; color: var(--muted2); background: rgba(255,255,255,0.04); border: 1px solid var(--line2); padding: 5px 14px; border-radius: 999px; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; }

/* Preview state */
.upv2-preview { position: relative; }
.upv2-preview-inner-wrap { position: relative; }
.upv2-preview-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.upv2-preview-empty { aspect-ratio: 16/9; background: var(--card2); display: flex; align-items: center; justify-content: center; }
.upv2-preview-overlay { position: absolute; top: 10px; right: 10px; display: flex; gap: 8px; align-items: center; }
.upv2-preview-duration { background: rgba(0,0,0,0.82); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 7px; backdrop-filter: blur(8px); }
.upv2-preview-clear-btn { width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.72); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(8px); transition: var(--transition); }
.upv2-preview-clear-btn:hover { background: rgba(220,50,50,0.9); }
.upv2-preview-bottom { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 12px 10px; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; }
.upv2-preview-fname { font-size: 11px; color: rgba(255,255,255,0.8); font-weight: 500; max-width: 65%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upv2-preview-custom-badge { font-size: 10px; font-weight: 800; color: #06060A; background: linear-gradient(135deg, var(--accent2), var(--accent3)); padding: 3px 8px; border-radius: 5px; }

/* Cards */
.upv2-card { background: var(--card); border: 1px solid var(--line2); border-radius: 18px; padding: 18px; position: relative; overflow: hidden; }
.upv2-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); pointer-events: none; }

/* Thumbnail */
.upv2-thumb-card { display: flex; flex-direction: column; gap: 14px; }
.upv2-thumb-preview-wrap { border-radius: 12px; overflow: hidden; background: var(--card2); border: 1px solid var(--line); }
.upv2-thumb-preview { aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: column; overflow: hidden; }
.upv2-thumb-empty-text { font-size: 11px; color: var(--muted2); font-weight: 500; margin-top: 6px; }
.upv2-thumb-btns { display: flex; gap: 9px; }
.upv2-thumb-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; background: linear-gradient(135deg, var(--accent2), var(--accent3)); color: #06060A; border: none; border-radius: 11px; padding: 11px 10px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: var(--transition); box-shadow: 0 3px 12px rgba(201,168,76,0.2); }
.upv2-thumb-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(201,168,76,0.35); }
.upv2-thumb-btn:disabled { background: var(--card3); color: var(--muted2); cursor: not-allowed; box-shadow: none; }
.upv2-thumb-btn-outline { background: transparent; border: 1.5px solid rgba(201,168,76,0.35); color: var(--accent3); box-shadow: none; }
.upv2-thumb-btn-outline:hover:not(:disabled) { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.6); color: var(--accent4); box-shadow: none; }
.upv2-thumb-btn-outline:disabled { border-color: var(--line2); color: var(--muted2); background: transparent; box-shadow: none; }
.upv2-reset-row { display: flex; justify-content: center; }
.upv2-reset-btn { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0; transition: var(--transition); }
.upv2-reset-btn:hover { color: var(--fg2); }

/* Short clip toggle row */
.upv2-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--card); border: 1px solid var(--line2); border-radius: 18px; padding: 16px 18px; }
.upv2-toggle-icon-wrap { width: 36px; height: 36px; border-radius: 50%; background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent); }
.upv2-toggle-text { flex: 1; }
.upv2-toggle-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.upv2-toggle-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Right column fields */
.upv2-field-group { display: flex; flex-direction: column; gap: 8px; }
.upv2-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.9px; text-transform: uppercase; }
.upv2-label-hint { font-size: 10px; font-weight: 500; color: var(--muted2); text-transform: none; letter-spacing: 0; background: var(--card2); border: 1px solid var(--line2); padding: 2px 8px; border-radius: 999px; }
.upv2-required { color: var(--accent3); }
.upv2-input { width: 100%; background: rgba(22,22,31,0.8); border: 1px solid var(--line2); border-radius: 13px; color: var(--fg); font-family: inherit; font-size: 14px; padding: 13px 15px; outline: none; transition: var(--transition); resize: none; }
.upv2-input::placeholder { color: var(--muted2); }
.upv2-input:focus { border-color: rgba(201,168,76,0.5); background: rgba(201,168,76,0.025); box-shadow: 0 0 0 3px rgba(201,168,76,0.09); }
.upv2-textarea { min-height: 90px; }

/* Category chips */
.upv2-cats-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.upv2-cat-chip { display: inline-flex; align-items: center; gap: 5px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(22,22,31,0.6); color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: var(--transition); font-family: inherit; white-space: nowrap; }
.upv2-cat-chip:hover { border-color: rgba(201,168,76,0.35); color: var(--fg2); background: rgba(201,168,76,0.05); }
.upv2-cat-chip.selected { background: linear-gradient(135deg, var(--accent2), var(--accent3)); color: #06060A; border-color: transparent; font-weight: 700; box-shadow: 0 3px 12px rgba(201,168,76,0.3); }

/* Divider */
.upv2-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); margin: 4px 0; }

/* Optional pill */
.upv2-optional-pill { font-size: 10px; font-weight: 700; color: var(--muted2); background: var(--card2); border: 1px solid var(--line2); padding: 3px 9px; border-radius: 999px; letter-spacing: 0.5px; text-transform: uppercase; }

/* Affiliate section */
.upv2-affiliate-card { display: flex; flex-direction: column; gap: 12px; }
.upv2-affiliate-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* Error */
.upv2-error { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: 13px; background: rgba(224,69,69,0.07); border: 1px solid rgba(224,69,69,0.25); font-size: 13px; color: #ff7070; line-height: 1.5; }

/* Progress */
.upv2-progress-wrap { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line2); border-radius: 14px; }
.upv2-progress-step-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.upv2-progress-track { background: var(--card3); border-radius: 5px; height: 6px; overflow: hidden; }
.upv2-progress-fill { height: 100%; border-radius: 5px; background: linear-gradient(90deg, #a07828, #e4c46a, #c9a84c); transition: width 0.3s ease; box-shadow: 0 0 10px rgba(201,168,76,0.45); }

/* Mobile submit */
.upv2-submit-mobile { display: none; width: 100%; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(135deg, #b8892a 0%, #e4c46a 55%, #c9a84c 100%); color: #06060A; border: none; border-radius: 16px; padding: 17px; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 20px rgba(201,168,76,0.3); }
.upv2-submit-mobile:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(201,168,76,0.4); }
.upv2-submit-mobile:disabled { background: var(--card3); color: var(--muted2); cursor: not-allowed; box-shadow: none; }

/* Frame picker modal */
.upv2-frame-modal { position: fixed; inset: 0; z-index: 300; }
.upv2-frame-modal.hidden { display: none; }
.upv2-frame-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.78); backdrop-filter: blur(5px); }
.upv2-frame-modal-sheet { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 620px; background: var(--card); border-radius: 24px 24px 0 0; padding: 8px 22px 36px; display: flex; flex-direction: column; gap: 16px; border-top: 1px solid var(--line2); box-shadow: var(--shadow-modal); }
.upv2-frame-modal-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--card4); margin: 6px auto 2px; }
.upv2-frame-modal-header { display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: 700; color: var(--fg); }
.upv2-frame-close-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--card2); border: 1px solid var(--line2); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.upv2-frame-close-btn:hover { background: var(--card3); color: var(--fg2); }
.upv2-frame-video { width: 100%; border-radius: 13px; background: #000; max-height: 260px; object-fit: contain; border: 1px solid var(--line2); }
.upv2-scrubber-wrap { display: flex; align-items: center; gap: 12px; }
.upv2-scrubber { flex: 1; -webkit-appearance: none; height: 6px; background: var(--card3); border-radius: 3px; outline: none; cursor: pointer; }
.upv2-scrubber::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 2px 8px rgba(201,168,76,0.5); }
.upv2-frame-capture-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; background: linear-gradient(135deg, var(--accent2), var(--accent3)); color: #06060A; border: none; border-radius: 13px; padding: 14px; font-family: inherit; font-size: 14px; font-weight: 800; cursor: pointer; transition: var(--transition); box-shadow: 0 4px 16px rgba(201,168,76,0.3); }
.upv2-frame-capture-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 24px rgba(201,168,76,0.45); }

/* Success overlay */
.upload-success-overlay { position: absolute; inset: 0; background: rgba(6,6,10,0.97); z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 40px; animation: fadeIn 0.3s ease; }
.upv2-success-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(201,168,76,0.1) 0%, transparent 70%); }
.upload-success-icon { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; background: rgba(201,168,76,0.1); border: 2px solid rgba(201,168,76,0.45); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(201,168,76,0.05), 0 0 40px rgba(201,168,76,0.3); }
.upload-success-title { position: relative; z-index: 1; font-size: 26px; font-weight: 800; color: var(--fg); letter-spacing: -0.6px; }
.upload-success-sub { position: relative; z-index: 1; font-size: 14px; color: var(--muted); max-width: 320px; line-height: 1.7; }
.upv2-success-done-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--accent2), var(--accent3)); color: #06060A; border: none; border-radius: 24px; padding: 14px 36px; font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer; transition: var(--transition); box-shadow: 0 6px 28px rgba(201,168,76,0.3); margin-top: 8px; }
.upv2-success-done-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(201,168,76,0.45); }

/* Toggle switch */
.upload-toggle-switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; cursor: pointer; }
.upload-toggle-switch input { opacity: 0; width: 0; height: 0; }
.upload-toggle-thumb { position: absolute; inset: 0; background: var(--card3); border-radius: 14px; transition: 0.25s; border: 1px solid var(--line2); }
.upload-toggle-thumb::before { content: ''; position: absolute; width: 22px; height: 22px; left: 2px; top: 2px; background: var(--fg2); border-radius: 50%; transition: 0.25s; }
.upload-toggle-switch input:checked + .upload-toggle-thumb { background: var(--accent); border-color: var(--accent); }
.upload-toggle-switch input:checked + .upload-toggle-thumb::before { transform: translateX(20px); background: #06060A; }

/* Legacy refs */
.upload-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.upload-back-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); background: var(--card2); color: var(--fg2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); }

/* Responsive */
@media (max-width: 700px) {
  .upv2-body { flex-direction: column; overflow-y: auto; }
  .upv2-left { width: 100%; max-width: 100%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); padding: 18px; overflow-y: visible; }
  .upv2-right { padding: 18px; overflow-y: visible; }
  .upv2-submit-pill { display: none; }
  .upv2-submit-mobile { display: flex; }
  .upv2-header-sub { display: none; }
  .upv2-header { padding: 0 14px; }
}

/* ─── Project Builder (Creator Studio) ─── */
.studio-topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line2); background:var(--bg2); position:sticky; top:0; z-index:10; }
.studio-topbar-left { display:flex; align-items:center; gap:12px; }
.studio-title { font-size:17px; font-weight:800; letter-spacing:-0.3px; color:var(--fg); }
.studio-sub { font-size:11px; color:var(--fg2); opacity:0.7; }
.studio-sync-pill { font-size:11px; font-weight:700; color:#22c55e; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.3); padding:4px 10px; border-radius:999px; }
.studio-body { max-width:980px; margin:0 auto; padding:18px 16px 80px; display:flex; flex-direction:column; gap:14px; }
.studio-hero { background:linear-gradient(140deg, rgba(212,175,55,0.10), var(--card2)); border:1px solid var(--line2); border-radius:16px; padding:18px; }
.studio-hero-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.studio-hero-id { display:flex; align-items:center; gap:12px; }
.studio-avatar { width:46px; height:46px; border-radius:50%; background:var(--card3); display:flex; align-items:center; justify-content:center; font-size:22px; border:1px solid var(--line2); }
.studio-handle { font-size:16px; font-weight:800; letter-spacing:-0.3px; color:var(--fg); }
.studio-handle-sub { font-size:11px; color:var(--fg2); opacity:0.75; }
.studio-range { display:flex; gap:6px; background:var(--card3); border:1px solid var(--line2); border-radius:10px; padding:3px; }
.studio-range-btn { background:transparent; border:none; color:var(--fg2); font-size:12px; font-weight:700; padding:6px 12px; border-radius:7px; cursor:pointer; }
.studio-range-btn.active { background:#d4af37; color:#000; }
.studio-kpi-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
.studio-kpi { background:rgba(0,0,0,0.25); border:1px solid var(--line2); border-radius:12px; padding:12px; }
.studio-kpi-label { font-size:11px; color:var(--fg2); opacity:0.7; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.studio-kpi-val { font-size:22px; font-weight:900; letter-spacing:-0.6px; color:var(--fg); margin-top:2px; }
.studio-kpi-delta { font-size:11px; color:#22c55e; font-weight:700; }
.studio-card { background:var(--card2); border:1px solid var(--line2); border-radius:14px; padding:16px; }
.studio-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.studio-card-title { font-size:14px; font-weight:800; letter-spacing:-0.2px; color:var(--fg); }
.studio-card-sub { font-size:11px; color:var(--fg2); opacity:0.7; }
.studio-chart { width:100%; height:180px; display:block; }
.studio-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.studio-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--card3); border:1px solid var(--line2); border-radius:12px; padding:14px 8px; cursor:pointer; color:var(--fg); font-size:12px; font-weight:700; }
.studio-action span { font-size:22px; }
.studio-action:hover { border-color:rgba(212,175,55,0.4); }
.studio-videos { display:flex; flex-direction:column; gap:8px; }
.studio-row { display:flex; align-items:center; gap:12px; padding:8px; border-radius:10px; cursor:pointer; }
.studio-row:hover { background:var(--card3); }
.studio-row-thumb { width:90px; height:54px; border-radius:8px; overflow:hidden; background:var(--card3); flex-shrink:0; }
.studio-row-thumb img { width:100%; height:100%; object-fit:cover; }
.studio-thumb-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:20px; }
.studio-row-meta { flex:1; min-width:0; }
.studio-row-title { font-size:13px; font-weight:700; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.studio-row-stats { font-size:11px; color:var(--fg2); opacity:0.75; margin-top:2px; }
.studio-row-chev { color:var(--fg2); font-size:18px; opacity:0.5; }
.studio-pill { display:inline-block; font-size:9px; font-weight:800; padding:2px 6px; border-radius:4px; letter-spacing:0.5px; }
.pill-approved { background:rgba(34,197,94,0.18); color:#22c55e; }
.pill-pending { background:rgba(212,175,55,0.18); color:#d4af37; }
.pill-processing { background:rgba(59,130,246,0.18); color:#60a5fa; }
.pill-removed, .pill-rejected { background:rgba(239,68,68,0.18); color:#f87171; }
.studio-inbox { display:flex; flex-direction:column; gap:10px; }
.studio-cm { background:rgba(0,0,0,0.2); border:1px solid var(--line2); border-radius:10px; padding:10px 12px; }
.studio-cm-body { font-size:13px; color:var(--fg); }
.studio-cm-sub { font-size:11px; color:var(--fg2); opacity:0.7; margin-top:4px; }
.studio-empty { text-align:center; padding:24px 12px; color:var(--fg2); opacity:0.7; font-size:13px; }
@media (max-width: 640px) {
  .studio-kpi-grid { grid-template-columns:repeat(2, 1fr); }
  .studio-actions { grid-template-columns:repeat(2, 1fr); }
  .studio-row-thumb { width:72px; height:44px; }
}

/* ─────────────  STACK Studio (YouTube Studio style)  ───────────── */
.studio-page { background:#0f0f0f; min-height:100vh; padding:0 !important; max-width:none !important; }
.studio-page * { box-sizing:border-box; }

/* Header */
.ys-header { display:flex; align-items:center; gap:14px; padding:10px 18px; background:#0f0f0f; border-bottom:1px solid rgba(255,255,255,0.08); position:sticky; top:0; z-index:30; height:56px; }
.ys-back { width:36px; height:36px; border-radius:50%; background:transparent; border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ys-back:hover { background:rgba(255,255,255,0.08); }
.ys-brand { display:flex; align-items:center; gap:10px; min-width:200px; }
.ys-brand-mark { width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg,#d4af37,#f7d066); color:#000; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; }
.ys-brand-title { color:#fff; font-size:15px; font-weight:700; letter-spacing:-0.2px; line-height:1; }
.ys-brand-sub { color:rgba(255,255,255,0.55); font-size:11px; margin-top:2px; }
.ys-search { flex:1; max-width:640px; display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; background:#121212; border:1px solid rgba(255,255,255,0.12); border-radius:999px; color:rgba(255,255,255,0.55); }
.ys-search input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:14px; height:100%; }
.ys-search input::placeholder { color:rgba(255,255,255,0.45); }
.ys-header-right { display:flex; align-items:center; gap:12px; }
.ys-cta { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; background:#d4af37; color:#000; border:none; border-radius:999px; font-weight:700; font-size:13px; cursor:pointer; }
.ys-cta:hover { background:#e5c050; }
.ys-cta-ghost { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.18); border-radius:999px; font-weight:700; font-size:13px; cursor:pointer; }
.ys-avatar { width:34px; height:34px; border-radius:50%; background:#1a1a1a; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; overflow:hidden; }

/* Shell layout */
.ys-shell { display:flex; height:calc(100vh - 56px); background:#0f0f0f; overflow:hidden; }

/* Left rail */
.ys-rail { width:240px; flex-shrink:0; background:#0f0f0f; border-right:1px solid rgba(255,255,255,0.06); height:100%; display:flex; flex-direction:column; overflow:hidden; }
.ys-rail-channel { flex-shrink:0; padding:18px 18px 18px; border-bottom:1px solid rgba(255,255,255,0.06); text-align:center; }
.ys-rail-avatar { width:80px; height:80px; border-radius:50%; background:#1a1a1a; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; font-size:32px; color:#fff; overflow:hidden; }
.ys-rail-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ys-rail-handle { color:rgba(255,255,255,0.55); font-size:11px; margin-bottom:2px; }
.ys-rail-name { color:#fff; font-weight:700; font-size:14px; }
/* Nav scrolls in windowed mode; locked in fullscreen */
.ys-nav { flex:1; display:flex; flex-direction:column; padding:6px; overflow-y:auto; scrollbar-width:none; }
.ys-nav::-webkit-scrollbar { display:none; }
.ys-rail.fullscreen-mode .ys-nav { overflow-y:hidden; }
.ys-nav-item { display:flex; align-items:center; gap:14px; padding:10px 14px; background:transparent; border:none; color:rgba(255,255,255,0.85); cursor:pointer; border-radius:8px; font-size:14px; text-align:left; transition:background 0.15s; }
.ys-nav-item svg { width:20px; height:20px; flex-shrink:0; }
.ys-nav-item:hover { background:rgba(255,255,255,0.06); }
.ys-nav-item.active { background:rgba(255,255,255,0.12); color:#fff; font-weight:600; }
.ys-nav-sep { height:1px; background:rgba(255,255,255,0.06); margin:8px 14px; }

/* Main */
.ys-main { flex:1; padding:28px 40px 80px; overflow-y:auto; min-width:0; }
.ys-tab-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; gap:16px; flex-wrap:wrap; }
.ys-tab-head h1 { color:#fff; font-size:24px; font-weight:600; margin:0; letter-spacing:-0.4px; }
.ys-range { display:flex; gap:4px; background:#1a1a1a; border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:3px; }

/* Sub-tabs (Content / Comments) */
.ys-tabs { display:flex; gap:4px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:18px; overflow-x:auto; }
.ys-subtab { background:transparent; border:none; color:rgba(255,255,255,0.55); padding:12px 16px; cursor:pointer; font-size:14px; font-weight:600; position:relative; white-space:nowrap; }
.ys-subtab.active { color:#fff; }
.ys-subtab.active::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#d4af37; border-radius:2px; }

/* Cards & grids */
.ys-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:start; }
.ys-grid > .ys-card-wide { grid-column:1; grid-row:span 2; }
.ys-grid-3 { grid-template-columns:repeat(3, 1fr); }
.ys-card { background:#1f1f1f; border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:20px; color:#fff; margin-bottom:18px; }
.ys-card-flush { padding:0; overflow:hidden; }
.ys-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ys-card-eyebrow { color:rgba(255,255,255,0.55); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; }
.ys-card-title { color:#fff; font-size:16px; font-weight:600; letter-spacing:-0.2px; }
.ys-link { background:transparent; border:none; color:#3ea6ff; font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.ys-link:hover { text-decoration:underline; }

.ys-bigstat { color:#fff; font-size:36px; font-weight:600; letter-spacing:-1px; line-height:1.1; }
.ys-bigstat-sub { color:rgba(255,255,255,0.55); font-size:12px; margin-top:4px; margin-bottom:14px; }
.ys-mini-kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.06); }
.ys-mini-label { color:rgba(255,255,255,0.55); font-size:11px; text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px; }
.ys-mini-val { color:#fff; font-size:18px; font-weight:600; }

.ys-chart { width:100%; height:160px; display:block; margin-top:8px; }
.ys-chart-tall { height:220px; }

.ys-latest-thumb { width:100%; aspect-ratio:16/9; background:#0f0f0f; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:32px; margin-bottom:14px; }
.ys-latest-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; padding-top:14px; border-top:1px solid rgba(255,255,255,0.06); }

.ys-news { list-style:none; padding:0; margin:0; }
.ys-news li { padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap:2px; }
.ys-news li:last-child { border-bottom:none; }
.ys-news b { color:#fff; font-size:13px; font-weight:600; }
.ys-news span { color:rgba(255,255,255,0.65); font-size:12px; }

/* Inbox / comments */
.ys-inbox { display:flex; flex-direction:column; }
.ys-cmt { display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.06); cursor:pointer; align-items:flex-start; }
.ys-cmt:hover { background:rgba(255,255,255,0.03); }
.ys-cmt:last-child { border-bottom:none; }
.ys-cmt-av { width:36px; height:36px; border-radius:50%; background:#2a2a2a; color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.ys-cmt-av img { width:100%; height:100%; object-fit:cover; }
.ys-cmt-body { flex:1; min-width:0; }
.ys-cmt-head { color:#fff; font-size:13px; margin-bottom:2px; }
.ys-cmt-head b { font-weight:600; }
.ys-cmt-head span { color:rgba(255,255,255,0.55); margin-left:4px; }
.ys-cmt-text { color:rgba(255,255,255,0.85); font-size:13px; line-height:1.5; word-wrap:break-word; }
.ys-cmt-vid { color:rgba(255,255,255,0.5); font-size:11px; margin-top:6px; }
.ys-cmt-thumb { width:80px; height:46px; border-radius:6px; overflow:hidden; flex-shrink:0; background:#0f0f0f; }
.ys-cmt-thumb img { width:100%; height:100%; object-fit:cover; }

/* Project Builder action buttons + form */
.ys-cmt-actions { display:flex; gap:8px; margin-top:8px; }
.ys-cmt-btn { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:#fff; padding:5px 11px; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer; }
.ys-cmt-btn:hover { background:rgba(255,255,255,0.12); }
.ys-cmt-btn-danger { color:#ff6b6b; border-color:rgba(255,107,107,0.3); }
.ys-cmt-btn-danger:hover { background:rgba(255,107,107,0.12); }
.ys-row-actions { display:flex; gap:6px; margin-top:6px; }
.ys-form { display:flex; flex-direction:column; gap:14px; padding:6px 2px; }
.ys-field { display:flex; flex-direction:column; gap:6px; }
.ys-field span { font-size:12px; font-weight:600; color:rgba(255,255,255,0.7); letter-spacing:0.2px; }
.ys-field input, .ys-field textarea { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); color:#fff; padding:10px 12px; border-radius:8px; font-size:14px; font-family:inherit; resize:vertical; }
.ys-field input:focus, .ys-field textarea:focus { outline:none; border-color:#D4AF61; background:rgba(255,255,255,0.06); }
.ys-form-actions { display:flex; gap:8px; margin-top:6px; }
.ys-form-status { font-size:12px; color:rgba(255,255,255,0.6); margin-top:4px; min-height:16px; }
.ys-form-ok { color:#22c55e; }
.ys-form-err { color:#ff6b6b; }

/* Content table */
.ys-table-head { display:grid; grid-template-columns:minmax(0,1fr) 110px 110px 90px 90px 90px; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.08); color:rgba(255,255,255,0.55); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.ys-th-num { text-align:right; }
.ys-rows { display:flex; flex-direction:column; }
.ys-row { display:grid; grid-template-columns:minmax(0,1fr) 110px 110px 90px 90px 90px; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.06); align-items:center; cursor:pointer; }
.ys-row:hover { background:rgba(255,255,255,0.04); }
.ys-row:last-child { border-bottom:none; }
.ys-row-video { display:flex; align-items:center; gap:12px; min-width:0; }
.ys-row-rank { color:rgba(255,255,255,0.55); font-size:13px; font-weight:600; width:20px; text-align:center; }
.ys-row-thumb { width:120px; height:68px; border-radius:6px; overflow:hidden; background:#0f0f0f; flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:center; font-size:24px; }
.ys-row-thumb img { width:100%; height:100%; object-fit:cover; }
.ys-row-dur { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,0.85); color:#fff; font-size:10px; font-weight:600; padding:1px 4px; border-radius:3px; }
.ys-row-meta { flex:1; min-width:0; }
.ys-row-title { color:#fff; font-size:14px; font-weight:500; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.4; }
.ys-row-sub { color:rgba(255,255,255,0.55); font-size:12px; margin-top:4px; }
.ys-cell { color:#fff; font-size:13px; min-width:0; overflow:hidden; }
.ys-cell-video { overflow:hidden; }
.ys-row-meta { overflow:hidden; }
.ys-row-title, .ys-row-sub { overflow:hidden; text-overflow:ellipsis; }
.ys-row-sub { white-space:nowrap; }
.ys-cell-muted { color:rgba(255,255,255,0.65); }
.ys-cell-num { text-align:right; font-variant-numeric:tabular-nums; }
.ys-cell-num b { font-weight:600; display:block; }
.ys-cell-sub { color:rgba(255,255,255,0.55); font-size:11px; margin-top:2px; }

/* Top content rows (Analytics) — own clean layout, not the 6-col grid */
.ys-toprow { display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.06); cursor:default; }
.ys-toprow:last-child { border-bottom:none; }
.ys-toprow:hover { background:rgba(255,255,255,0.04); }
.ys-toprow-rank { color:rgba(255,255,255,0.55); font-size:13px; font-weight:600; width:20px; text-align:center; flex-shrink:0; }
.ys-toprow-meta { flex:1; min-width:0; }
.ys-toprow-num { flex-shrink:0; text-align:right; min-width:64px; font-variant-numeric:tabular-nums; }
.ys-toprow-num b { display:block; color:#fff; font-size:16px; font-weight:700; line-height:1.1; }
.ys-toprow-num span { display:block; color:rgba(255,255,255,0.55); font-size:11px; margin-top:2px; }

/* Money grid */
.ys-money-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.ys-money-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:6px; background:#0f0f0f; border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:16px; cursor:pointer; color:#fff; }
.ys-money-card:hover { border-color:#d4af37; background:rgba(212,175,55,0.06); }
.ys-money-card span { font-size:24px; }
.ys-money-card b { font-size:14px; font-weight:600; }
.ys-money-card i { font-style:normal; color:rgba(255,255,255,0.55); font-size:12px; line-height:1.4; }

.ys-p { color:rgba(255,255,255,0.75); font-size:14px; line-height:1.6; margin:0; }
.ys-empty { padding:40px 20px; text-align:center; color:rgba(255,255,255,0.55); font-size:13px; }

/* Responsive */
@media (max-width: 1100px) {
  .ys-grid { grid-template-columns:1fr; }
  .ys-grid > .ys-card-wide { grid-column:auto; grid-row:auto; }
  .ys-grid-3 { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .ys-rail { width:200px; min-width:200px; }
  .ys-rail-channel { padding:10px 12px 14px; }
  .ys-rail-avatar { width:56px; height:56px; font-size:22px; }
  .ys-rail-handle, .ys-rail-name { display:block; }
  .ys-nav-item { justify-content:flex-start; padding:10px 12px; font-size:13px; gap:12px; }
  .ys-nav-item span { display:inline; }
  .ys-main { padding:22px 14px 80px; }
  .ys-search { display:none; }
  .ys-table-head { grid-template-columns:minmax(0,1fr) 70px 70px; gap:8px; padding:12px 14px; }
  .ys-table-head .ys-th:nth-child(n+5), .ys-table-head .ys-th:nth-child(2) { display:none; }
  .ys-row { grid-template-columns:minmax(0,1fr) 70px 70px; gap:8px; padding:12px 14px; }
  .ys-row .ys-cell:nth-child(n+5), .ys-row .ys-cell:nth-child(2) { display:none; }
  .ys-row-thumb { width:90px; height:54px; }
}
@media (max-width: 560px) {
  .ys-grid-3 { grid-template-columns:1fr; }
  .ys-brand-sub { display:none; }
  .ys-cta span { display:none; }
}

/* ─────────────────────────────────────────
   YOUTUBE-STYLE HOME GRID
   ───────────────────────────────────────── */

/* Sticky chips bar (just under the top header) */
.yt-chips-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  gap: 12px;
  padding: 12px 24px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.yt-chips-bar::-webkit-scrollbar { display: none; }

.yt-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.yt-chip:hover {
  background: rgba(255,255,255,0.08);
}
.yt-chip.active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 600;
}

/* Responsive grid — 1/2/3/4 columns like YouTube */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 16px;
  padding: 24px 24px 24px;
  max-width: 1600px;
  margin: 0 auto;
}
@media (max-width: 1500px) { .yt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .yt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; } }
@media (max-width: 640px)  {
  .yt-grid { grid-template-columns: 1fr; gap: 20px 0; padding: 16px 0 16px; }
  .yt-chips-bar { padding: 10px 14px; gap: 8px; }
  .yt-chip { font-size: 13px; padding: 7px 12px; }
}

/* Infinite-scroll sentinel & spinner */
.home-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 64px;
  padding: 24px 0 120px;
}
.home-sentinel-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--fg);
  opacity: 0;
  transition: opacity .15s ease;
}
.home-sentinel.loading .home-sentinel-spinner {
  opacity: 1;
  animation: home-spin .85s linear infinite;
}
@keyframes home-spin { to { transform: rotate(360deg); } }

/* Pull-to-refresh indicator (touch devices) */
#page-home { position: relative; }
.home-ptr {
  position: absolute;
  top: -56px;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(0);
  transition: transform .15s ease, opacity .15s ease;
  z-index: 5;
}
.home-ptr-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--brass, #d4a85a);
  transition: transform .15s ease;
}
.home-ptr.armed .home-ptr-spinner {
  border-top-color: var(--brass, #d4a85a);
  transform: scale(1.12) rotate(180deg);
}
.home-ptr.refreshing .home-ptr-spinner {
  animation: home-spin .85s linear infinite;
}

/* Card */
.yt-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}
.yt-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--card2);
  border-radius: 0;
  overflow: hidden;
}
.yt-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}
.yt-card:hover .yt-card-thumb img { transform: scale(1.02); }
.yt-card-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
  background: linear-gradient(135deg, var(--card2), var(--card3));
}
.yt-card-dur {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  letter-spacing: 0.2px;
}

.yt-card-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 4px 0;
}
@media (max-width: 640px) { .yt-card-row { padding: 12px 14px 0; } }

.yt-card-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent2), var(--accent3));
  color: #06060A;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.yt-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yt-card-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.yt-card-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.1px;
}
.yt-card-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease;
}
.yt-card-channel:hover { color: var(--fg); }
.yt-verified { color: var(--accent2); flex-shrink: 0; }
.yt-card-sub {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.1px;
}

/* Skeleton */
.yt-card-skel { display: flex; flex-direction: column; }
.skel-thumb-grid {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0;
  margin-bottom: 12px;
}
.skel-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.yt-card-skel .yt-card-row { padding: 0 4px; }
.yt-card-skel .skel-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
@media (max-width: 640px) {
  .yt-card-skel .yt-card-row { padding: 0 14px; }
}

/* ─────────────  PUBLIC PROFILE PAGE (mirrors iOS CreatorProfileView)  ───────────── */
.prof-wrap { max-width: 980px; margin: 0 auto; padding-bottom: 80px; }
.prof-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:80px 20px; color:var(--muted); }
.prof-spinner { width:32px; height:32px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:profSpin 0.9s linear infinite; }
@keyframes profSpin { to { transform: rotate(360deg); } }
.prof-empty, .prof-empty-mini { text-align:center; padding:60px 20px; color:var(--muted); }
.prof-empty-mini { padding:48px 16px; }
.prof-empty-icon { font-size:48px; margin-bottom:12px; }
.prof-empty-title { font-size:18px; font-weight:700; color:var(--fg); margin-bottom:6px; }
.prof-empty-sub { font-size:14px; color:var(--muted); max-width:380px; margin:0 auto; }

.prof-header { position:relative; margin-bottom:64px; }
.prof-banner { width:100%; height:180px; overflow:hidden; border-radius:0 0 var(--radius) var(--radius); background:linear-gradient(135deg, var(--card2), var(--card)); }
.prof-banner-img { width:100%; height:100%; object-fit:cover; display:block; }
.prof-banner-fallback { width:100%; height:100%; background:linear-gradient(135deg, var(--card3), var(--card)); }
.prof-avatar { position:absolute; left:50%; bottom:-56px; transform:translateX(-50%); width:112px; height:112px; border-radius:50%; background:var(--card2); border:3px solid var(--line2); display:flex; align-items:center; justify-content:center; overflow:hidden; box-shadow:var(--shadow-card); }
.prof-avatar.is-pro { border-color:var(--accent); box-shadow:0 0 0 2px rgba(201,168,76,0.18), var(--shadow-card); }
.prof-avatar-img { width:100%; height:100%; object-fit:cover; }
.prof-avatar-emoji { font-size:56px; line-height:1; }
.prof-avatar-initial { font-size:48px; font-weight:800; color:var(--accent); }

.prof-identity { text-align:center; padding:0 20px; }
.prof-name-row { display:inline-flex; align-items:center; gap:8px; }
.prof-name { font-size:24px; font-weight:800; color:var(--fg); letter-spacing:-0.02em; }
.prof-pro-badge { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#0a0a0a; font-size:12px; font-weight:900; }
.prof-handle { color:var(--muted); font-size:14px; margin-top:2px; }
.prof-founder-wrap { margin-top:8px; }
.prof-founder-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border-radius:999px; background:rgba(201,168,76,0.12); color:var(--accent); font-size:11px; font-weight:700; letter-spacing:0.04em; }
.prof-bio { margin:12px auto 0; max-width:520px; color:var(--fg2); font-size:14px; line-height:1.5; }

.prof-stats { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:20px; }
.prof-stat-num { font-size:18px; font-weight:800; color:var(--fg); }
.prof-stat-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-top:2px; }
.prof-stat-div { width:1px; height:28px; background:var(--line2); }

.prof-actions { display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.prof-btn { padding:10px 28px; border-radius:999px; font-size:14px; font-weight:700; border:1px solid transparent; cursor:pointer; transition:var(--transition); }
.prof-btn-primary { background:var(--accent); color:#0a0a0a; }
.prof-btn-primary:hover { background:var(--accent3); }
.prof-btn-secondary { background:var(--card3); color:var(--fg); border-color:var(--line2); }
.prof-btn-secondary:hover { background:var(--card4); }
.prof-btn-ghost { background:transparent; color:var(--fg2); border-color:var(--line2); }
.prof-btn-ghost:hover { background:var(--card2); }

.prof-socials { margin:24px auto 0; max-width:560px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); }
.prof-socials-title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:10px; text-align:left; }
.prof-socials-row { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.prof-socials-row::-webkit-scrollbar { display:none; }
.prof-soc { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:72px; padding:10px 6px; background:var(--card2); border:1px solid var(--line2); border-radius:10px; color:var(--fg2); font-size:11px; font-weight:600; transition:var(--transition); }
.prof-soc:hover { transform:translateY(-2px); border-color:var(--soc-tint, var(--accent)); }
.prof-soc-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:rgba(201,168,76,0.18); color:var(--soc-tint, var(--accent)); font-size:16px; font-weight:800; }
.prof-soc-label { color:var(--muted); }

/* Tip Jar pill — external creator-owned tip URL (Ko-fi / Cash App / PayPal etc.).
   100% to the creator, no platform cut. */
.prof-tipjar { display:flex; align-items:center; gap:12px; margin:18px auto 0; max-width:560px; padding:12px 14px; background:linear-gradient(135deg, rgba(201,168,76,0.14), rgba(201,168,76,0.06)); border:1px solid rgba(201,168,76,0.45); border-radius:14px; text-decoration:none; color:var(--fg); transition:var(--transition); cursor:pointer; }
.prof-tipjar:hover { transform:translateY(-1px); border-color:var(--accent); background:linear-gradient(135deg, rgba(201,168,76,0.22), rgba(201,168,76,0.10)); }
.prof-tipjar-icon { font-size:22px; flex-shrink:0; }
.prof-tipjar-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; text-align:left; }
.prof-tipjar-title { font-size:14px; font-weight:700; color:var(--fg); }
.prof-tipjar-sub { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prof-tipjar-cta { font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap; padding:6px 10px; border:1px solid rgba(201,168,76,0.45); border-radius:999px; flex-shrink:0; }

/* Inline Tip Jar editor on the owner's own profile. Mirrors the Studio
   editor but compact, so creators can paste a URL without leaving the page. */
.prof-tipjar-edit { margin:18px auto 0; max-width:560px; padding:16px; background:linear-gradient(135deg, rgba(201,168,76,0.10), rgba(201,168,76,0.04)); border:1px solid rgba(201,168,76,0.35); border-radius:16px; text-align:left; }
.prof-tipjar-edit-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.prof-tipjar-edit-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:var(--fg); }
.prof-tipjar-pill { font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.06); color:var(--muted); border:1px solid rgba(255,255,255,0.10); white-space:nowrap; max-width:60%; overflow:hidden; text-overflow:ellipsis; }
.prof-tipjar-pill-on { background:rgba(94,212,142,0.14); color:#74e0a3; border-color:rgba(94,212,142,0.40); }
.prof-tipjar-edit-desc { font-size:12px; color:var(--muted); line-height:1.45; margin:4px 0 12px; }
.prof-tipjar-edit-row { display:flex; flex-direction:column; gap:8px; }
.prof-tipjar-input { width:100%; padding:10px 12px; background:rgba(0,0,0,0.30); color:var(--fg); border:1px solid rgba(255,255,255,0.12); border-radius:10px; font:500 14px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; outline:none; transition:border-color .15s ease; }
.prof-tipjar-input:focus { border-color:var(--accent); }
.prof-tipjar-edit-actions { display:flex; flex-wrap:wrap; gap:8px; }
.prof-tipjar-save { font-size:13px; font-weight:800; color:#1a1a1a; background:var(--accent); border:none; padding:9px 16px; border-radius:10px; cursor:pointer; transition:transform .12s ease, opacity .12s ease; }
.prof-tipjar-save:hover { transform:translateY(-1px); opacity:.92; }
.prof-tipjar-ghost { font-size:13px; font-weight:700; color:var(--fg); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); padding:8px 14px; border-radius:10px; cursor:pointer; transition:background .12s ease; }
.prof-tipjar-ghost:hover { background:rgba(255,255,255,0.10); }
.prof-tipjar-status { min-height:16px; margin-top:8px; font-size:12px; color:#74e0a3; }
.prof-tipjar-test { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--accent); text-decoration:none; }
.prof-tipjar-test:hover { text-decoration:underline; }

.prof-tabs { display:flex; gap:4px; padding:0 16px; margin-top:28px; border-bottom:1px solid var(--line); }
.prof-tab { background:transparent; border:none; padding:14px 20px; color:var(--muted); font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; border-bottom:2px solid transparent; transition:var(--transition); }
.prof-tab:hover { color:var(--fg2); }
.prof-tab.active { color:var(--fg); border-bottom-color:var(--accent); }
.prof-tab-icon { font-size:13px; }
.prof-tab-content { padding:20px 16px; }

/* Own-profile sections (mirrors iOS ProfileView) */
.prof-own { display:flex; flex-direction:column; gap:14px; padding:24px 16px 8px; }
.prof-row-link { display:flex; align-items:center; gap:12px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--fg); cursor:pointer; transition:var(--transition); text-decoration:none; }
.prof-row-link:hover { background:var(--card2); border-color:var(--line2); }
.prof-row-icon { width:28px; text-align:center; font-size:18px; color:var(--muted); flex-shrink:0; }
.prof-row-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.prof-row-title { font-size:14px; font-weight:600; color:var(--fg); }
.prof-row-sub { font-size:12px; color:var(--muted); }
.prof-row-chev { color:var(--muted); font-size:18px; margin-left:auto; }

.prof-banner-card { display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; cursor:pointer; transition:var(--transition); border:1px solid transparent; }
.prof-banner-card:hover { transform:translateY(-1px); }
.prof-banner-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; flex-shrink:0; }
.prof-banner-text { flex:1; min-width:0; }
.prof-banner-title { font-size:14px; font-weight:700; }
.prof-banner-sub { font-size:12px; margin-top:3px; opacity:0.85; }
.prof-banner-cta { font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; flex-shrink:0; }

.prof-creator-pro { background:#0a0a0a; border-color:rgba(201,168,76,0.5); color:var(--accent); }
.prof-creator-pro .prof-banner-icon { background:rgba(201,168,76,0.15); color:var(--accent); }
.prof-creator-pro .prof-banner-cta { background:var(--accent); color:#0a0a0a; }
.prof-creator-pro.is-active { background:rgba(201,168,76,0.08); }
.prof-creator-pro.is-active .prof-banner-cta { background:rgba(76,217,100,0.15); color:#4cd964; }

.prof-viewer-plus { background:#fff; border-color:rgba(212,175,97,0.55); color:#8A6A22; }
.prof-viewer-plus .prof-banner-title { color:#D4AF61; }
.prof-viewer-plus .prof-banner-icon { background:rgba(212,175,97,0.18); color:#D4AF61; }
.prof-viewer-plus .prof-banner-cta { background:#D4AF61; color:#0a0a0a; }
.prof-viewer-plus.is-active .prof-banner-cta { background:transparent; color:#D4AF61; font-size:18px; }

.prof-yt { background:#0a0a0a; border-color:rgba(255,0,0,0.5); color:var(--fg); }
.prof-yt-icon { background:rgba(255,0,0,0.15); color:#FF0000; }

.prof-quick-actions { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.prof-qa { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px 8px; background:var(--card); border:1px solid var(--line); border-radius:12px; color:var(--fg2); font-size:12px; font-weight:600; cursor:pointer; transition:var(--transition); }
.prof-qa:hover { background:var(--card2); }
.prof-qa-icon { font-size:22px; line-height:1; }

.prof-monetization { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.prof-mon-head { padding:14px 14px 8px; font-size:18px; font-weight:800; background:linear-gradient(180deg, #F2D17A, #C9A84C 60%, #B28A38); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.prof-monetization .prof-row-link { background:transparent; border:none; border-radius:0; border-top:1px solid var(--line); }
.prof-monetization .prof-row-link:first-of-type { border-top:none; }

.prof-row-card { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.prof-row-head { display:flex; align-items:center; gap:8px; padding:14px 14px 8px; }
.prof-row-h-title { font-size:16px; font-weight:800; color:var(--fg); }
.prof-row-count { font-size:11px; font-weight:600; color:var(--accent); padding:2px 6px; background:rgba(201,168,76,0.15); border-radius:6px; min-width:0; }
.prof-row-count:empty { display:none; }
.prof-row-body { padding:0 0 14px; }
.prof-row-empty { display:flex; align-items:center; gap:10px; justify-content:center; padding:24px; color:var(--muted); font-size:13px; }
.prof-row-empty-icon { font-size:18px; }

.prof-hscroll { display:flex; gap:12px; overflow-x:auto; padding:0 14px 4px; scrollbar-width:none; }
.prof-hscroll::-webkit-scrollbar { display:none; }
.prof-hcard { flex:0 0 160px; cursor:pointer; }
.prof-hthumb { position:relative; width:160px; height:90px; border-radius:8px; overflow:hidden; background:var(--card2); display:flex; align-items:center; justify-content:center; }
.prof-hthumb img { width:100%; height:100%; object-fit:cover; }
.prof-htitle { font-size:12px; font-weight:600; color:var(--fg); margin-top:6px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prof-hsub { font-size:11px; color:var(--muted); margin-top:2px; }

.prof-plcard { flex:0 0 140px; }
.prof-plcover { position:relative; width:140px; height:90px; border-radius:10px; background:linear-gradient(135deg, var(--card2), var(--card3)); display:flex; align-items:center; justify-content:center; }
.prof-plicon { font-size:28px; opacity:0.6; }
.prof-plcount { position:absolute; right:5px; bottom:5px; padding:2px 6px; background:rgba(0,0,0,0.7); color:#fff; font-size:10px; font-weight:700; border-radius:4px; }

.prof-vgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
.prof-vcard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; cursor:pointer; transition:var(--transition); }
.prof-vcard:hover { transform:translateY(-2px); border-color:var(--line2); }
.prof-vthumb { position:relative; aspect-ratio:16/9; background:var(--card2); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prof-vthumb img { width:100%; height:100%; object-fit:cover; }
.prof-vthumb-fallback { font-size:32px; opacity:0.4; }
.prof-vdur { position:absolute; right:6px; bottom:6px; padding:2px 6px; border-radius:4px; background:rgba(0,0,0,0.78); color:#fff; font-size:11px; font-weight:700; }
.prof-vshort { position:absolute; left:6px; top:6px; padding:2px 6px; border-radius:4px; background:var(--accent); color:#0a0a0a; font-size:10px; font-weight:800; letter-spacing:0.04em; }
.prof-vmeta { padding:10px 12px 12px; }
.prof-vtitle { font-size:14px; font-weight:600; color:var(--fg); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prof-vsub { font-size:12px; color:var(--muted); margin-top:4px; }

.prof-store { display:flex; flex-direction:column; gap:28px; }
.prof-store-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding:0 4px; }
.prof-store-head h3 { font-size:16px; font-weight:800; color:var(--fg); }
.prof-store-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:rgba(201,168,76,0.18); color:var(--cat-accent, var(--accent)); font-size:14px; }
.prof-pgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
.prof-pcard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; cursor:pointer; transition:var(--transition); }
.prof-pcard:hover { transform:translateY(-2px); border-color:var(--accent); }
.prof-pthumb { aspect-ratio:1/1; background:var(--card2); border-radius:var(--radius-xs); overflow:hidden; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.prof-pthumb img { width:100%; height:100%; object-fit:cover; }
.prof-pthumb span { font-size:28px; opacity:0.4; }
.prof-ptitle { font-size:13px; font-weight:600; color:var(--fg); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prof-pprice { font-size:13px; font-weight:800; color:var(--accent); margin-top:4px; }

.prof-coupons { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.prof-coupon { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; }
.prof-coupon-brand { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:700; margin-bottom:8px; }
.prof-coupon-code { display:flex; align-items:center; gap:8px; }
.prof-coupon-code code { flex:1; padding:8px 12px; background:var(--card2); border:1px dashed var(--accent); border-radius:8px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; font-weight:700; color:var(--accent); letter-spacing:0.06em; }
.prof-coupon-copy { padding:8px 12px; border-radius:8px; background:var(--accent); color:#0a0a0a; border:none; font-size:12px; font-weight:700; cursor:pointer; }
.prof-coupon-desc { margin-top:10px; font-size:14px; font-weight:700; color:var(--fg); }
.prof-coupon-sub { margin-top:4px; font-size:12px; color:var(--muted); }
.prof-coupon-link { display:inline-block; margin-top:10px; font-size:12px; font-weight:700; color:var(--accent); }
.prof-policy { margin-top:8px; padding:14px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); font-size:11px; color:var(--muted); line-height:1.5; }

@media (max-width: 640px) {
  .prof-banner { height:140px; border-radius:0; }
  .prof-avatar { width:96px; height:96px; bottom:-48px; }
  .prof-header { margin-bottom:56px; }
  .prof-name { font-size:20px; }
  .prof-stats { gap:16px; }
  .prof-vgrid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
  .prof-pgrid { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ─────────────────────────────────────────
   STUDIO — extra styles for new inbox rows,
   pills, ranks, and video cells
   ───────────────────────────────────────── */
.ys-cell-video { display:flex; align-items:center; gap:12px; min-width:0; }
.ys-pill { display:inline-block; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:600; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.85); text-transform:capitalize; letter-spacing:0.2px; }
.ys-pill-published { background:rgba(34,197,94,0.14); color:#9af5a4; }
.ys-pill-pending   { background:rgba(234,179,8,0.16);  color:#facc55; }
.ys-pill-removed   { background:rgba(239,68,68,0.16);  color:#ff8a8a; }
.ys-pill-draft     { background:rgba(120,120,140,0.18); color:#cfd0d6; }
.ys-pill-success   { background:rgba(34,197,94,0.16); color:#9af5a4; }
.ys-pill-muted     { background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.75); }
.ys-card-desc { color:rgba(255,255,255,0.7); margin:6px 0 14px; line-height:1.45; font-size:14px; }
.ys-tipjar-examples { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ys-tipjar-example { font-size:12px; padding:5px 10px; border-radius:999px; background:rgba(201,168,76,0.12); color:#e7c97a; border:1px solid rgba(201,168,76,0.25); }

.ys-inbox-row { display:flex; gap:12px; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.06); align-items:flex-start; }
.ys-inbox-row:last-child { border-bottom:none; }
.ys-inbox-avatar { width:36px; height:36px; border-radius:50%; overflow:hidden; flex-shrink:0; cursor:pointer; background:#2a2a2a; display:flex; align-items:center; justify-content:center; }
.ys-inbox-avatar img { width:100%; height:100%; object-fit:cover; }
.ys-inbox-avatar-fallback { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; }
.ys-inbox-body { flex:1; min-width:0; }
.ys-inbox-head { display:flex; gap:8px; align-items:baseline; margin-bottom:3px; }
.ys-inbox-author { color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.ys-inbox-author:hover { color:#D4AF61; }
.ys-inbox-time { color:rgba(255,255,255,0.5); font-size:11px; }
.ys-inbox-text { color:rgba(255,255,255,0.88); font-size:13px; line-height:1.5; word-wrap:break-word; }
.ys-inbox-meta { color:rgba(255,255,255,0.5); font-size:11px; margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }

.ys-latest-thumb { width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0f0f0f; display:flex; align-items:center; justify-content:center; font-size:36px; margin:8px 0 12px; }
.ys-latest-thumb img { width:100%; height:100%; object-fit:cover; }
.ys-latest-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }

/* ─────────────────────────────────────────────
   VIDEO MODAL — mirrors iOS VideoDetailView
   ───────────────────────────────────────────── */
.vm-player {
  background:#000;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  position:relative;
}
.vm-player video {
  width:100%;
  height:100%;
  display:block;
  background:#000;
  object-fit:contain;
}
/* Center play overlay (only when paused) */
.vm-ctrl-overlay {
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
}
.vm-ctrl-play-center {
  width:64px; height:64px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff; border:0;
  font-size:24px; cursor:pointer; backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, background .15s;
}
.vm-ctrl-play-center:hover { background:rgba(0,0,0,0.75); transform:scale(1.05); }

/* Custom controls — overlaid on the video, YouTube-style auto-fade */
.vm-controls.vm-controls-overlay {
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:8px 14px 10px;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0) 100%);
  opacity:0;
  transform:translateY(4px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
/* Shown via JS when paused / hovered / mouse moves */
.vm-player.vm-show-ctrls .vm-controls.vm-controls-overlay {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
/* Hide center play button while controls bar is visible to avoid double-button feel? Keep it visible only when paused (JS already toggles) */
.vm-controls {
  display:flex; flex-direction:column; gap:8px;
}
.vm-scrub-row {
  display:flex; align-items:center; gap:10px;
}
.vm-time {
  font-variant-numeric:tabular-nums;
  font-size:12px; color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  min-width:42px; text-align:center;
}
.vm-time-cur { text-align:right; }
.vm-time-dur { text-align:left; }
/* Brass-colored scrub bar — no shadow */
.vm-scrub {
  flex:1;
  -webkit-appearance:none; appearance:none;
  height:5px; border-radius:3px;
  outline:none; cursor:pointer;
  background: linear-gradient(to right,
    #C9A84C 0%,
    #C9A84C var(--vm-prog, 0%),
    rgba(255,255,255,0.18) var(--vm-prog, 0%),
    rgba(255,255,255,0.18) 100%);
  box-shadow:none;
}
.vm-scrub::-webkit-slider-runnable-track { height:5px; border-radius:3px; background:transparent; box-shadow:none; }
.vm-scrub::-moz-range-track { height:5px; border-radius:3px; background:rgba(255,255,255,0.18); box-shadow:none; }
.vm-scrub::-moz-range-progress { height:5px; border-radius:3px; background:#C9A84C; box-shadow:none; }
.vm-scrub::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:#C9A84C; cursor:pointer; border:0;
  margin-top:-4.5px;
  box-shadow:none;
  transition:transform .12s;
}
.vm-scrub:hover::-webkit-slider-thumb { transform:scale(1.25); }
.vm-scrub::-moz-range-thumb {
  width:14px; height:14px; border-radius:50%;
  background:#C9A84C; cursor:pointer; border:0;
  box-shadow:none;
}
.vm-scrub:focus { outline:none; box-shadow:none; }

.vm-ctrl-btn {
  background:transparent; color:#fff; border:0;
  width:32px; height:32px; border-radius:50%;
  font-size:14px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.vm-ctrl-btn:hover { background:rgba(255,255,255,0.18); }

/* Bottom button row — kept on the LEFT */
.vm-ctrl-row {
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.vm-ctrl-icon {
  background:transparent; color:#fff; border:0;
  padding:6px; border-radius:50%;
  cursor:pointer; line-height:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity .12s, transform .12s;
  opacity:.92;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.vm-ctrl-icon:hover { opacity:1; transform:scale(1.08); }
.vm-ctrl-icon[aria-expanded="true"] { opacity:1; }
.vm-ctrl-icon svg { display:block; }

/* Closed-Captions button: plain "CC" text label, white. */
.vm-ctrl-cc {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  font-size:13px; font-weight:800; letter-spacing:.5px;
  line-height:1; padding:6px 8px; min-width:34px;
  border-radius:8px;
}
/* Closed-Captions button state. Greyed when no captions, gold dot when available. */
#vm-transcript-btn { position:relative; }
#vm-transcript-btn.vm-cc-off { opacity:.45; cursor:default; }
#vm-transcript-btn.vm-cc-off:hover { transform:none; opacity:.45; }
#vm-transcript-btn.vm-cc-on::after {
  content:""; position:absolute;
  top:4px; right:4px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent3,#d4af37);
  box-shadow:0 0 0 1.5px rgba(0,0,0,0.55), 0 0 6px rgba(212,175,55,0.55);
  pointer-events:none;
}

.vm-ctrl-pill-wrap { position:relative; display:inline-flex; }
.vm-settings-menu {
  position:absolute; bottom:calc(100% + 6px); left:0; z-index:50;
  background:var(--card,#0f0f0f); border:1px solid var(--line2,#262626);
  border-radius:10px; padding:6px; min-width:160px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
}
.vm-settings-head {
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); padding:6px 10px 4px;
}
.vm-settings-item {
  display:block; width:100%; text-align:left;
  background:transparent; border:0; color:var(--text);
  padding:8px 10px; border-radius:6px;
  font-size:13px; cursor:pointer;
}
.vm-settings-item:hover { background:rgba(255,255,255,0.06); }
.vm-settings-item.vm-settings-active { color:#C9A84C; font-weight:700; }
.vm-settings-active::before { content:'✓ '; }

/* Transcript panel in the right rail */
.vm-transcript-panel {
  background:var(--card2,#161616);
  border:1px solid var(--line2,#262626);
  border-radius:14px;
  padding:0;
  margin-bottom:14px;
  display:flex; flex-direction:column;
  max-height:60vh;
}
.vm-transcript-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--line2,#262626);
  font-weight:700; font-size:14px;
}
.vm-transcript-close {
  background:transparent; border:0; color:var(--muted);
  font-size:14px; cursor:pointer; padding:4px 8px; border-radius:6px;
}
.vm-transcript-close:hover { background:rgba(255,255,255,0.06); color:var(--text); }
.vm-transcript-body {
  overflow-y:auto;
  padding:8px;
  display:flex; flex-direction:column; gap:2px;
}
.vm-transcript-cue {
  display:flex; gap:10px; align-items:flex-start;
  text-align:left;
  background:transparent; border:0;
  padding:8px 10px; border-radius:8px;
  cursor:pointer; color:var(--text);
  transition:background .12s;
}
.vm-transcript-cue:hover { background:rgba(201,168,76,0.08); }
.vm-transcript-ts {
  flex:0 0 auto; min-width:50px;
  font-variant-numeric:tabular-nums;
  font-size:12px; color:#C9A84C; padding-top:1px;
}
.vm-transcript-text { font-size:13px; line-height:1.45; }
.vm-transcript-plain { padding:14px; font-size:13px; line-height:1.6; color:var(--text); }
.vm-transcript-empty { padding:24px; text-align:center; color:var(--text); font-size:13px; }
.vm-info { padding:16px 20px 24px; display:flex; flex-direction:column; gap:14px; }
.vm-title { font-size:20px; font-weight:700; line-height:1.3; margin:0; color:var(--text); }
.vm-meta { color:var(--muted); font-size:13px; margin-top:-6px; }
.vm-desc-card { background:var(--card2,#161616); border:1px solid var(--line2,#262626); border-radius:14px; padding:12px 14px; cursor:pointer; transition:background .15s; }
.vm-desc-card:hover { background:var(--card3,#1c1c1c); }
.vm-desc-head { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.vm-desc-label { color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:uppercase; font-size:11px; }
.vm-desc-chevron { color:var(--muted); font-size:14px; }
.vm-desc-preview { margin-top:6px; color:var(--text); font-size:14px; line-height:1.5; }
.vm-desc-full { margin-top:10px; }
.vm-desc-body { color:var(--text); font-size:14px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.vm-chapters { margin-top:14px; border-top:1px solid var(--line2,#262626); padding-top:12px; display:flex; flex-direction:column; gap:4px; }
.vm-chapters-title { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:6px; }
.vm-chapter { display:flex; gap:12px; align-items:center; padding:8px 10px; background:transparent; border:0; border-radius:8px; color:var(--text); cursor:pointer; text-align:left; transition:background .12s; }
.vm-chapter:hover { background:rgba(255,255,255,0.05); }
.vm-chapter-ts { font-variant-numeric:tabular-nums; color:var(--gold,#f5c542); font-size:13px; min-width:54px; }
.vm-chapter-title { font-size:14px; }
.vm-creator { display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line2,#262626); border-bottom:1px solid var(--line2,#262626); }
.vm-creator-avatar { width:42px; height:42px; border-radius:50%; overflow:hidden; background:var(--card3,#1c1c1c); display:flex; align-items:center; justify-content:center; font-weight:700; cursor:pointer; flex-shrink:0; }
.vm-creator-avatar img { width:100%; height:100%; object-fit:cover; }
.vm-creator-info { flex:1; cursor:pointer; min-width:0; }
.vm-creator-name { font-weight:600; font-size:15px; display:flex; align-items:center; gap:5px; }
.vm-verified { color:var(--gold,#f5c542); flex-shrink:0; }
.vm-creator-sub { color:var(--muted); font-size:12px; }
.vm-follow-btn { background:var(--text); color:var(--bg,#06060A); border:0; padding:8px 16px; border-radius:999px; font-weight:700; font-size:13px; cursor:pointer; }
.vm-tip-btn { background:transparent; color:var(--gold,#f5c542); border:1px solid var(--gold,#f5c542); padding:7px 14px; border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; }
.vm-actionbar { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
.vm-actionbar::-webkit-scrollbar { display:none; }
.vm-action { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:var(--card2,#161616); border:1px solid var(--line2,#262626); color:var(--text); padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer; transition:background .12s; }
.vm-action:hover { background:var(--card3,#1c1c1c); }
.vm-action-icon { font-size:15px; }
.vm-comments-preview { background:var(--card2,#161616); border:1px solid var(--line2,#262626); border-radius:14px; padding:12px 14px; cursor:pointer; transition:background .12s; }
.vm-comments-preview:hover { background:var(--card3,#1c1c1c); }
.vm-comments-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.vm-comments-title { font-weight:700; font-size:14px; }
.vm-comments-count { color:var(--muted); font-size:13px; }
.vm-comments-first-row { display:flex; gap:10px; align-items:flex-start; }
.vm-comments-first-text { font-size:13px; line-height:1.45; color:var(--text); }
.vm-comments-first-text b { margin-right:6px; }
.vm-comments { background:var(--card2,#161616); border:1px solid var(--line2,#262626); border-radius:14px; padding:14px; }
.vm-comments-list { display:flex; flex-direction:column; gap:14px; max-height:380px; overflow-y:auto; padding-right:4px; }
.vm-comment { display:flex; gap:10px; }
.vm-comment-avatar { width:32px; height:32px; border-radius:50%; overflow:hidden; background:var(--card3,#1c1c1c); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.vm-comment-avatar img { width:100%; height:100%; object-fit:cover; }
.vm-comment-body { flex:1; min-width:0; }
.vm-comment-head { font-size:12px; color:var(--muted); }
.vm-comment-head b { color:var(--text); margin-right:6px; }
.vm-comment-time { font-size:11px; }
.vm-comment-text { font-size:14px; line-height:1.45; color:var(--text); margin-top:2px; word-break:break-word; }
.vm-comment-form { display:flex; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line2,#262626); }
.vm-comment-form .form-input { flex:1; }
.vm-upnext { margin-top:6px; }
.vm-upnext-title { font-weight:700; font-size:15px; margin-bottom:10px; }
.vm-upnext-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
.vm-upnext-card { display:flex; flex-direction:column; gap:8px; cursor:pointer; border-radius:10px; transition:transform .12s; }
.vm-upnext-card:hover { transform:translateY(-2px); }
.vm-upnext-thumb { position:relative; aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#0f0f0f; display:flex; align-items:center; justify-content:center; font-size:24px; }
.vm-upnext-thumb img { width:100%; height:100%; object-fit:cover; }
.vm-upnext-dur { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.85); color:#fff; font-size:11px; padding:2px 6px; border-radius:4px; font-variant-numeric:tabular-nums; }
.vm-upnext-title-text { font-size:13px; font-weight:600; line-height:1.3; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vm-upnext-sub { color:var(--muted); font-size:12px; }
@media (max-width: 640px) {
  .vm-info { padding:14px 14px 20px; gap:12px; }
  .vm-title { font-size:17px; }
  .vm-upnext-list { grid-template-columns:1fr 1fr; gap:10px; }
}

/* ─────────────────────────────────────────────
   YOUTUBE-STYLE TWO-COLUMN WATCH LAYOUT
   ───────────────────────────────────────────── */
.vm-grid {
  display:grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap:24px;
  align-items:start;
}
.vm-left { min-width:0; display:flex; flex-direction:column; gap:14px; }
.vm-right { min-width:0; }
.vm-right .vm-upnext { margin-top:0; }
.vm-right .vm-upnext-list {
  grid-template-columns:1fr;
  gap:10px;
}
.vm-right .vm-upnext-card {
  display:grid;
  grid-template-columns: 168px 1fr;
  gap:10px;
}
.vm-right .vm-upnext-thumb { aspect-ratio:16/9; }
.vm-left .vm-info { padding:0; }

/* Theater mode: full width, recommendations below */
.vm-grid.vm-theater {
  grid-template-columns: 1fr;
}
.vm-grid.vm-theater .vm-player {
  max-height:72vh;
  /* Keep 16:9 by limiting width based on viewport height */
  width:auto;
  max-width:100%;
  margin:0 auto;
  aspect-ratio:16/9;
}
.vm-grid.vm-theater .vm-right .vm-upnext-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.vm-grid.vm-theater .vm-right .vm-upnext-card {
  grid-template-columns: 1fr;
}

/* Pinned products card — mirrors iOS PinnedProductsView */
.vm-pinned-card {
  background: linear-gradient(135deg, rgba(245,197,66,0.10) 0%, rgba(245,197,66,0.04) 100%);
  border:1px solid rgba(245,197,66,0.35);
  border-radius:14px;
  padding:14px;
}
.vm-pinned-head {
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gold,#f5c542); margin-bottom:10px;
}
.vm-pinned-list {
  display:flex; gap:10px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; padding-bottom:2px;
}
.vm-pinned-list::-webkit-scrollbar { display:none; }
.vm-pinned-chip {
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:999px;
  background:var(--card2,#161616); border:1px solid rgba(245,197,66,0.45);
  color:var(--text); font-size:13px; font-weight:600;
  text-decoration:none; cursor:pointer; max-width:280px;
  transition:background .12s, transform .12s;
}
.vm-pinned-chip:hover { background:var(--card3,#1c1c1c); transform:translateY(-1px); }
.vm-pinned-chip-icon { color:var(--gold,#f5c542); flex-shrink:0; }
.vm-pinned-chip-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vm-pinned-chip-price { color:var(--gold,#f5c542); font-weight:700; flex-shrink:0; }
.vm-pinned-chip-arrow { color:var(--muted); font-size:10px; flex-shrink:0; }

/* Mobile: stack, full-width, square corners, video pinned at top */
@media (max-width: 900px) {
  .vm-grid { grid-template-columns: 1fr; gap:14px; }
  .vm-right .vm-upnext-card { grid-template-columns: 168px 1fr; }
}
@media (max-width: 640px) {
  .video-modal-box {
    width:100%;
    border-radius: 0 !important;
    padding: 0;
    max-height:100vh;
    height:100vh;
  }
  .vm-grid { gap:0; }
  .vm-left { gap:0; }
  .vm-player {
    border-radius:0;
    position:sticky; top:0; z-index:3;
  }
  .vm-controls.vm-controls-overlay { padding: 6px 12px 8px; }
  .vm-ctrl-icon { padding:4px; }
  .vm-ctrl-icon svg { width:20px; height:20px; }
  .vm-info { padding:14px 14px 20px; }
  .vm-right { padding:0 14px 24px; }
  .vm-right .vm-upnext-card { grid-template-columns: 140px 1fr; }
  .vm-pinned-card { margin:0 14px; }
}

/* ─── Hubs (Story Highlights) ─────────────────────────────────────── */
.prof-hubs { padding:16px 0 4px; }
.prof-hubs-head { display:flex; align-items:center; justify-content:space-between; padding:0 16px 10px; }
.prof-hubs-title { font-size:15px; font-weight:800; color:var(--fg); letter-spacing:-0.2px; }
.prof-hubs-edit { background:transparent; border:0; color:var(--accent); font-size:13px; font-weight:700; cursor:pointer; padding:6px 10px; border-radius:8px; transition:var(--transition); }
.prof-hubs-edit:hover { background:rgba(201,168,76,0.12); }
.prof-hubs-row { display:flex; gap:14px; overflow-x:auto; padding:4px 16px 8px; scrollbar-width:none; }
.prof-hubs-row::-webkit-scrollbar { display:none; }
.prof-hub { flex:0 0 76px; display:flex; flex-direction:column; align-items:center; gap:6px; background:transparent; border:0; padding:0; cursor:pointer; }
.prof-hub-ring { display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:50%; padding:3px; background:linear-gradient(135deg, var(--hub-tint, #C9A84C), color-mix(in srgb, var(--hub-tint, #C9A84C) 50%, #fff)); }
.prof-hub-fill { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; background:var(--card); border:2px solid var(--bg); overflow:hidden; }
.prof-hub-fill img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.prof-hub-icon { font-size:26px; }
.prof-hub-label { font-size:11px; color:var(--fg); font-weight:600; max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Hub viewer (fullscreen) */
.hub-viewer { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px; padding:24px; animation:fadeIn 0.2s ease; }
.hub-viewer-bar { position:absolute; top:14px; left:14px; right:14px; display:flex; gap:4px; }
.hub-viewer-progress { display:flex; gap:4px; flex:1; }
.hub-viewer-progress span { flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,0.25); }
.hub-viewer-progress span.on { background:#fff; }
.hub-viewer-close, .hub-viewer-prev, .hub-viewer-next { position:absolute; background:rgba(255,255,255,0.1); color:#fff; border:0; width:44px; height:44px; border-radius:50%; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.15s; }
.hub-viewer-close:hover, .hub-viewer-prev:hover, .hub-viewer-next:hover { background:rgba(255,255,255,0.2); }
.hub-viewer-close { top:34px; right:14px; }
.hub-viewer-prev { left:14px; top:50%; transform:translateY(-50%); }
.hub-viewer-next { right:14px; top:50%; transform:translateY(-50%); }
.hub-viewer-card { width:min(420px, 90vw); aspect-ratio:9/16; max-height:78vh; background:#1a1a1d; border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.hub-viewer-card img { width:100%; height:100%; object-fit:cover; }
.hub-vw-fallback { font-size:80px; opacity:0.5; }
.hub-vw-caption { position:absolute; left:0; right:0; bottom:60px; padding:14px 18px; color:#fff; font-size:18px; font-weight:600; text-align:center; text-shadow:0 2px 8px rgba(0,0,0,0.6); background:linear-gradient(transparent, rgba(0,0,0,0.5)); }
.hub-vw-cta { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:#fff; color:#000; border:0; padding:10px 18px; border-radius:24px; font-weight:700; cursor:pointer; font-size:14px; }
.hub-viewer-title { color:#fff; font-size:14px; font-weight:600; opacity:0.85; }

/* Hub manager modal */
.hub-mgr { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.65); display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn 0.2s ease; }
.hub-mgr-card { width:min(560px, 100%); max-height:90vh; background:var(--card); border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; }
.hub-mgr-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; border-bottom:1px solid var(--line); }
.hub-mgr-title { font-size:18px; font-weight:800; color:var(--fg); }
.hub-mgr-close { background:transparent; border:0; color:var(--muted); font-size:26px; cursor:pointer; line-height:1; }
.hub-mgr-body { padding:16px 20px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; }
.hub-mgr-foot { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); justify-content:flex-end; }
.hub-mgr-empty { text-align:center; padding:40px 20px; color:var(--muted); }
.hub-mgr-empty-icon { font-size:32px; margin-bottom:10px; }
.hub-mgr-empty-sub { font-size:12px; color:var(--muted); margin-top:4px; }
.hub-mgr-row { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; }
.hub-mgr-row .prof-hub-ring { width:54px; height:54px; }
.hub-mgr-row .prof-hub-fill { border-width:2px; }
.hub-mgr-row .prof-hub-icon { font-size:20px; }
.hub-mgr-row-meta { flex:1; min-width:0; }
.hub-mgr-row-title { font-weight:700; color:var(--fg); font-size:14px; }
.hub-mgr-row-sub { font-size:12px; color:var(--muted); margin-top:2px; }
.hub-mgr-edit, .hub-mgr-del { background:transparent; border:1px solid var(--line); color:var(--fg); padding:6px 12px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; transition:var(--transition); }
.hub-mgr-edit:hover { background:rgba(201,168,76,0.12); border-color:var(--accent); }
.hub-mgr-del { padding:6px 10px; }
.hub-mgr-del:hover { background:rgba(255,107,107,0.12); border-color:#ff6b6b; }

.hub-edit-preview { display:flex; justify-content:center; padding:8px 0 4px; }
.hub-edit-preview .prof-hub-ring { width:88px; height:88px; }
.hub-edit-preview .prof-hub-icon { font-size:32px; }
.hub-edit-field { display:flex; flex-direction:column; gap:6px; }
.hub-edit-field > span { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; }
.hub-edit-field input { background:var(--card2); border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--fg); font-size:14px; }
.hub-edit-field input:focus { outline:none; border-color:var(--accent); }
.hub-tint-row { display:flex; gap:8px; flex-wrap:wrap; }
.hub-tint { width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform 0.15s; }
.hub-tint:hover { transform:scale(1.1); }
.hub-tint.on { border-color:var(--fg); transform:scale(1.1); }
.hub-icon-row { display:flex; gap:6px; flex-wrap:wrap; }
.hub-icon-pick { width:38px; height:38px; border:1px solid var(--line); background:var(--card2); border-radius:10px; cursor:pointer; font-size:18px; transition:var(--transition); }
.hub-icon-pick:hover { background:rgba(201,168,76,0.1); }
.hub-icon-pick.on { border-color:var(--accent); background:rgba(201,168,76,0.18); }
.hub-edit-clips { display:flex; flex-direction:column; gap:6px; max-height:180px; overflow-y:auto; }
.hub-edit-clip { display:flex; align-items:center; gap:8px; padding:6px; border:1px solid var(--line); border-radius:10px; background:var(--card2); }
.hub-edit-clip-thumb { width:48px; height:36px; border-radius:6px; overflow:hidden; background:var(--card3); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hub-edit-clip-thumb img { width:100%; height:100%; object-fit:cover; }
.hub-edit-clip-cap { flex:1; background:transparent; border:0; color:var(--fg); font-size:13px; padding:4px 6px; min-width:0; }
.hub-edit-clip-cap:focus { outline:none; }
.hub-edit-clip-rm { background:transparent; border:0; color:var(--muted); font-size:18px; cursor:pointer; padding:4px 8px; }
.hub-edit-clip-rm:hover { color:#ff6b6b; }
.hub-edit-vids { display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; }
.hub-edit-vid { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; text-align:left; transition:var(--transition); }
.hub-edit-vid:hover { background:rgba(201,168,76,0.08); border-color:var(--accent); }
.hub-edit-vid-thumb { width:54px; height:32px; border-radius:6px; overflow:hidden; background:var(--card3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; }
.hub-edit-vid-thumb img { width:100%; height:100%; object-fit:cover; }
.hub-edit-vid-title { flex:1; min-width:0; color:var(--fg); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-edit-vid-add { color:var(--accent); font-size:18px; font-weight:700; }

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ───────────── SOCIAL PAGES ───────────── */
.social-page { max-width: 760px; margin: 0 auto; padding: 24px 20px 120px; }
.page-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 18px; }
.page-header h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; margin: 0; }
.btn-ghost { background: transparent; border: 1px solid var(--line2); color: var(--fg); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; }
.btn-ghost:hover { background: var(--card2); }
.notif-row { display:flex; gap:12px; padding: 14px 12px; border-radius: 14px; cursor:pointer; align-items:flex-start; transition: background .15s ease; }
.notif-row:hover { background: var(--card2); }
.notif-unread { background: rgba(201,168,76,0.06); }
.notif-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--card2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.notif-meta { flex:1; min-width:0; }
.notif-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.notif-body { font-size: 13px; color: var(--muted); margin-top: 2px; }
.notif-time { font-size: 11px; color: var(--muted2); margin-top: 4px; font-weight: 500; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-top: 14px; flex-shrink: 0; }
.settings-list { display:flex; flex-direction:column; gap: 22px; }
.settings-section { background: var(--card); border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; }
.settings-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 14px 16px 6px; }
.settings-row { display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-top: 1px solid var(--line2); font-size: 14px; color: var(--fg); }
.settings-row-value { color: var(--muted); font-size: 13px; }
.settings-row-btn { width:100%; background: transparent; border: 0; cursor:pointer; text-align:left; }
.settings-row-btn:hover { background: var(--card2); }
.settings-danger { color: #FF5A6B !important; justify-content: center; font-weight: 600; }
.user-row { display:flex; align-items:center; justify-content:space-between; padding: 12px 14px; border-radius: 14px; cursor:pointer; }
.user-row:hover { background: var(--card2); }
.user-row-meta { display:flex; gap:12px; align-items:center; min-width:0; }
.user-row-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--card3); display:flex; align-items:center; justify-content:center; font-weight:700; color: var(--fg); overflow:hidden; flex-shrink:0; }
.user-row-avatar img { width:100%; height:100%; object-fit:cover; }
.user-row-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.user-row-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.grid-progress { position:absolute; left:0; bottom:0; height:3px; background: var(--accent); }
.stack-sheet { position: fixed; inset: 0; z-index: 9999; }
.stack-sheet-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.55); opacity:0; transition: opacity .25s ease; }
.stack-sheet.open .stack-sheet-backdrop { opacity:1; }
.stack-sheet-card { position:absolute; left:50%; bottom:0; transform: translate(-50%, 100%); width: min(560px, 100%); background: var(--card); border-top-left-radius: 22px; border-top-right-radius: 22px; padding: 10px 18px 28px; transition: transform .28s cubic-bezier(.2,.8,.2,1); max-height: 80vh; overflow-y:auto; }
.stack-sheet.open .stack-sheet-card { transform: translate(-50%, 0); }
.stack-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line2); margin: 6px auto 14px; }
.stack-sheet-title { font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 12px; text-align:center; }
.stack-sheet-body { display:flex; flex-direction: column; gap: 8px; }
.sheet-btn { width:100%; padding: 14px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line2); color: var(--fg); font-size: 14px; font-weight: 600; cursor:pointer; text-align:left; }
.sheet-btn:hover { background: var(--card3); }
.sheet-danger { color: #FF5A6B; }
.pl-list { display:flex; flex-direction:column; gap:6px; max-height: 300px; overflow-y:auto; }
.pl-row { display:flex; align-items:center; gap:12px; padding: 10px 12px; border-radius: 10px; background: var(--card2); cursor:pointer; }
.pl-row input[type="checkbox"] { width:18px; height:18px; accent-color: var(--accent); }
.pl-row-title { flex:1; font-size:14px; font-weight:500; color: var(--fg); }
.pl-row-vis { font-size:11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pl-create { display:flex; gap:8px; margin-top: 14px; }
.pl-create input { flex:1; background: var(--card2); border:1px solid var(--line2); border-radius:10px; padding: 10px 12px; color: var(--fg); font-size: 14px; }
.stack-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(0,0,0,0.9); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 13px; font-weight: 600; z-index: 10000; box-shadow: 0 8px 32px rgba(0,0,0,.4); transition: opacity .35s ease, transform .35s ease; }
.stack-toast.fade { opacity: 0; transform: translate(-50%, 10px); }

/* ════════════════════════════════════════════════════════════════════
   PREMIUM YOUTUBE-STYLE POLISH LAYER
   Surgical refinements layered on top of the existing styles.
   Touches: header, search, chips, video cards, sidebar nav,
   typography, scrollbars, hover micro-interactions.
   ════════════════════════════════════════════════════════════════════ */

/* Premium font rendering + smoother hairlines */
html, body {
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* ── Global topbar: cleaner, more elevated ── */
.global-topbar {
  background: rgba(8, 8, 12, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 8px 24px;
  gap: 14px;
}
/* Two-row variant: padding is owned by inner .global-topbar-row */
.global-topbar.global-topbar--with-chips { padding: 0; gap: 0; }
.global-topbar.global-topbar--with-chips .global-topbar-row { padding: 8px 24px; gap: 14px; }
@media (max-width: 700px) {
  .global-topbar { padding: 8px 12px; gap: 8px; }
  .global-topbar.global-topbar--with-chips { padding: 0; gap: 0; }
  .global-topbar.global-topbar--with-chips .global-topbar-row { padding: 8px 12px; gap: 8px; }
}

/* Hamburger: ghostier, YT-style */
.hamburger-btn {
  background: transparent !important;
  border: none !important;
  color: var(--fg) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  transition: background 0.18s ease;
}
.hamburger-btn:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Brand: tighter, more confident */
.gh-icon {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(212,175,97,0.22), 0 0 0 1px rgba(212,175,97,0.18);
}
.gh-wordmark {
  font-weight: 900;
  letter-spacing: 1.6px;
  font-size: 17px;
  background: linear-gradient(180deg, #FFFFFF 0%, #D8D8E8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Search: deeper, more YouTube-like with subtle inner shadow */
.gh-center {
  max-width: 660px;
  margin: 0 auto;
}
.gh-search-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 9px 18px;
  height: 40px;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.25);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.gh-search-wrap:focus-within {
  background: rgba(0,0,0,0.55);
  border-color: rgba(201,168,76,0.55);
  box-shadow: 0 0 0 3px rgba(201,168,76,0.14), inset 0 1px 0 rgba(0,0,0,0.3);
}
.search-input {
  background: transparent;
  color: var(--fg);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}
.search-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
  opacity: 0.85;
}

/* Create button: subtler, elegant gold pill */
.gh-create-btn {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #E5C47A 0%, #C9A23B 60%, #9C7820 100%);
  box-shadow:
    0 4px 14px rgba(212,175,97,0.30),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}
.gh-create-btn:hover {
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 6px 22px rgba(212,175,97,0.50),
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* Bell: cleaner ghost button */
.gh-bell {
  background: transparent !important;
  border: none !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}
.gh-bell:hover { background: rgba(255,255,255,0.08) !important; }
.gh-bell svg { filter: none; }

/* Sign-in pill: refined */
.gh-signup-btn {
  background: linear-gradient(135deg, #E5C47A 0%, #C9A23B 100%);
  height: 36px;
  padding: 0 16px;
  font-weight: 700;
  box-shadow:
    0 2px 10px rgba(212,175,97,0.28),
    inset 0 1px 0 rgba(255,255,255,0.30);
}

/* ── Sidebar polish ── */
.sidebar {
  background: rgba(8, 8, 12, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 12px 0;
}
.sidebar-nav { padding: 0 8px; gap: 1px; }
.nav-item {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg2);
  letter-spacing: 0;
}
.nav-item:hover {
  background: rgba(255,255,255,0.07);
  color: var(--fg);
}
.nav-item.active {
  background: rgba(255,255,255,0.10);
  color: var(--fg);
  font-weight: 700;
  border: none;
}
.nav-item.active .nav-icon { color: var(--accent3); opacity: 1; }
.nav-icon { opacity: 0.85; }

/* ── Sticky chips bar: tighter, frostier ── */
.yt-chips-bar {
  background: rgba(8, 8, 12, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 12px 24px;
  gap: 10px;
  scroll-snap-type: x proximity;
}
.yt-chip {
  background: rgba(255,255,255,0.08);
  border: 1px solid transparent;
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 10px;
  letter-spacing: 0.1px;
  scroll-snap-align: start;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.yt-chip:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.yt-chip.active {
  background: #F0F0F5;
  color: #0A0A0F;
  border-color: #F0F0F5;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(255,255,255,0.10);
}

/* ── Video grid: more breathing room ── */
.yt-grid {
  gap: 36px 16px;
  padding: 24px 24px 48px;
}
@media (max-width: 1100px) { .yt-grid { gap: 28px 14px; } }
@media (max-width: 640px)  { .yt-grid { gap: 18px 0; padding: 12px 0 60px; } }

/* ── Video card: premium hover, smoother scale, rounded thumbs ── */
.yt-card {
  transition: transform 0.18s ease;
}
.yt-card-thumb {
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: border-radius 0.22s ease, box-shadow 0.22s ease;
}
.yt-card-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.18) 100%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.yt-card:hover .yt-card-thumb {
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.yt-card:hover .yt-card-thumb::after { opacity: 1; }
.yt-card-thumb img {
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.yt-card:hover .yt-card-thumb img { transform: scale(1.04); }

@media (max-width: 640px) {
  .yt-card-thumb { border-radius: 12px; margin: 0 12px; width: auto; }
  .yt-card:hover .yt-card-thumb { border-radius: 12px; }
}

/* Duration pill: refined */
.yt-card-dur {
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Card metadata: tighter type, cleaner hierarchy */
.yt-card-row {
  padding: 12px 0 0;
  gap: 12px;
}
@media (max-width: 640px) { .yt-card-row { padding: 12px 14px 0; } }

.yt-card-avatar {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.yt-card-title {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.15px;
  color: #F0F0F5;
  margin-bottom: 4px;
}
.yt-card-channel {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}
.yt-card-channel:hover { color: var(--fg); }
.yt-card-sub {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.1px;
}

/* Skeletons match new card radius */
.skel-thumb-grid { border-radius: 14px; }
@media (max-width: 640px) { .skel-thumb-grid { border-radius: 12px; margin: 0 12px; width: auto; } }

.skel {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Bottom mobile tabbar — frostier */
.bottom-tabbar {
  background: rgba(8, 8, 12, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* Modal backdrop: slightly darker + a hint of blur */
.modal-overlay {
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

/* Premium scrollbars */
.main-content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 10px; }
.main-content::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.main-content::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.16);
  background-clip: padding-box;
}

/* Subtle entry animation for cards once they paint in */
@keyframes yt-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.yt-grid > .yt-card { animation: yt-card-in 0.35s ease both; }
.yt-grid > .yt-card:nth-child(1)  { animation-delay: 0.00s; }
.yt-grid > .yt-card:nth-child(2)  { animation-delay: 0.04s; }
.yt-grid > .yt-card:nth-child(3)  { animation-delay: 0.08s; }
.yt-grid > .yt-card:nth-child(4)  { animation-delay: 0.12s; }
.yt-grid > .yt-card:nth-child(5)  { animation-delay: 0.16s; }
.yt-grid > .yt-card:nth-child(6)  { animation-delay: 0.20s; }
.yt-grid > .yt-card:nth-child(7)  { animation-delay: 0.24s; }
.yt-grid > .yt-card:nth-child(8)  { animation-delay: 0.28s; }
.yt-grid > .yt-card:nth-child(n+9) { animation-delay: 0.32s; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .yt-grid > .yt-card,
  .yt-card-thumb img,
  .skel { animation: none !important; transition: none !important; }
}

/* ────────────────────────────────────────────────
   RAPID FOR YOU shelf (Home page, horizontal row)
   Mirrors the iOS "Rapid for You" shelf — 9:16 tiles
   that scroll horizontally above the main grid.
   ──────────────────────────────────────────────── */
.rapid-shelf {
  padding: 18px 24px 6px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rapid-shelf-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
}
.rapid-shelf-bolt {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(201,168,76,0.45));
}
.rapid-shelf-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.2px;
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0;
}
.rapid-shelf-seeall {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--fg2);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition);
}
.rapid-shelf-seeall:hover {
  background: var(--card2);
  border-color: var(--accent2);
  color: var(--accent3);
}
.rapid-shelf-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 12px;
  margin: 0 -2px;
  scrollbar-width: thin;
  scrollbar-color: var(--line2) transparent;
}
.rapid-shelf-track::-webkit-scrollbar { height: 6px; }
.rapid-shelf-track::-webkit-scrollbar-track { background: transparent; }
.rapid-shelf-track::-webkit-scrollbar-thumb {
  background: var(--line2);
  border-radius: 3px;
}
.rapid-shelf-track::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

.rapid-tile {
  flex: 0 0 auto;
  width: 140px;
  scroll-snap-align: start;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  color: inherit;
  transition: transform 0.18s ease;
}
.rapid-tile:hover { transform: translateY(-2px); }
.rapid-tile:focus-visible {
  outline: 2px solid var(--accent3);
  outline-offset: 4px;
  border-radius: 14px;
}
.rapid-tile-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card2);
  box-shadow: var(--shadow-card);
}
.rapid-tile-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.rapid-tile:hover .rapid-tile-thumb img { transform: scale(1.04); }
.rapid-tile-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  opacity: 0.6;
}
.rapid-tile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: linear-gradient(135deg, var(--accent3), var(--accent2));
  color: #0a0a0a;
  font-weight: 900;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.rapid-tile-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px;
}
.rapid-tile-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rapid-tile-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .rapid-shelf { padding: 14px 12px 4px; }
  .rapid-shelf-title { font-size: 15px; }
  .rapid-tile { width: 118px; }
  .rapid-tile-title { font-size: 12px; }
}

/* ───── Hover-to-preview muted autoplay on home feed thumbnails ───── */
.yt-card-thumb video.yt-card-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 1;
}
.yt-card-thumb video.yt-card-preview.is-playing { opacity: 1; }
/* Keep the duration pill visible above the playing preview */
.yt-card-thumb .yt-card-dur { z-index: 2; }

/* Disable on touch / coarse pointer devices — saves bandwidth & battery */
@media (hover: none), (pointer: coarse) {
  .yt-card-thumb video.yt-card-preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .yt-card-thumb video.yt-card-preview { display: none; }
}

/* ═══════════ Storefront (mirrors iOS app) ═══════════ */
.prof-store { display: flex; flex-direction: column; gap: 26px; padding: 4px 0 24px; }
.prof-store-cat { display: flex; flex-direction: column; gap: 12px; }
.prof-store-head { display: flex; align-items: center; gap: 10px; padding: 0 16px; }
.prof-store-head .prof-store-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(212,175,97,0.32), rgba(212,175,97,0.08));
  border: 1px solid rgba(212,175,97,0.55);
  font-size: 14px;
  box-shadow: 0 0 14px rgba(212,175,97,0.15);
}
.prof-store-head h3 {
  margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.2px;
  background: linear-gradient(180deg, #F5D78A 0%, #D4AF61 55%, #A1813A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Product grid + premium card (Merch / Gear items) */
.prof-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; padding: 0 16px; }
.prof-pcard {
  --accent: #D4AF61;
  position: relative; cursor: pointer; overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(212,175,97,0.35);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  display: flex; flex-direction: column;
}
.prof-pcard:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 16px 38px rgba(0,0,0,0.55); }
.prof-pcard-hero {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(212,175,97,0.20), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border-bottom: 1px solid rgba(212,175,97,0.40);
}
.prof-pcard-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-pcard-icon {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--accent, #D4AF61);
}
.prof-pcard-icon svg { width: 44px; height: 44px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 50%, transparent)); }
.prof-pcard-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.prof-pcard-title { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prof-pcard-price {
  font-size: 15px; font-weight: 800;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Gear list section grouping */
.prof-gear-group { display: flex; flex-direction: column; gap: 10px; }
.prof-gear-group-title {
  font-size: 12px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--muted); padding: 0 16px;
}

/* Brand row (full-width) */
.prof-brand-list { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.prof-brand-row {
  display: flex; align-items: center; gap: 14px; padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(212,175,97,0.45);
  border-radius: 14px; cursor: pointer; width: 100%; text-align: left;
  color: var(--fg);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.prof-brand-row:hover { transform: translateY(-1px); border-color: #E06B5E; }
.prof-brand-icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, rgba(224,107,94,0.22), rgba(224,107,94,0.06));
  border: 1px solid rgba(212,175,97,0.55);
  color: #E06B5E;
}
.prof-brand-icon svg { width: 24px; height: 24px; }
.prof-brand-body { flex: 1; min-width: 0; }
.prof-brand-title { font-size: 15px; font-weight: 700; color: var(--fg); }
.prof-brand-sub { font-size: 12px; color: var(--muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prof-brand-chev {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,97,0.55);
  color: #D4AF61; font-size: 14px; font-weight: 700;
}

/* Coupons (premium row mirroring iOS CouponDisplayRow) */
.prof-coupons { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.prof-coupon {
  display: flex; gap: 14px; align-items: center; padding: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(94,196,126,0.35);
  border-radius: 14px;
}
.prof-coupon-tag {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(94,196,126,0.18);
  border: 1px solid rgba(94,196,126,0.55);
  color: #5EC47E; font-size: 20px;
  box-shadow: 0 0 12px rgba(94,196,126,0.20);
}
.prof-coupon-body { flex: 1; min-width: 0; }
.prof-coupon-brand { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: lowercase; letter-spacing: 0.4px; }
.prof-coupon-code-text {
  margin-top: 2px;
  font-size: 22px; font-weight: 900; letter-spacing: 1.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: linear-gradient(180deg, #8FE0A8 0%, #5EC47E 55%, #3F9C5E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.prof-coupon-desc { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--fg); }
.prof-coupon-sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.prof-coupon-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #5EC47E; }
.prof-coupon-copy {
  width: 56px; height: 56px; flex-shrink: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(212,175,97,0.55); color: var(--fg);
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  font-size: 10px; font-weight: 700;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.prof-coupon-copy:hover { border-color: #5EC47E; color: #5EC47E; }
.prof-coupon-copy svg { width: 18px; height: 18px; }

/* Policy disclaimer */
.prof-policy {
  display: flex; gap: 12px; padding: 14px; margin: 8px 16px 0;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(212,175,97,0.35);
  border-radius: 12px;
  font-size: 11px; line-height: 1.55; color: var(--muted);
}
.prof-policy-icon { font-size: 18px; flex-shrink: 0; }
.prof-policy strong { color: var(--fg); font-weight: 700; }

/* ── Store item detail modal (mirrors iOS CreatorStoreItemSheet) ── */
.store-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: storeModalIn 0.22s ease;
}
@keyframes storeModalIn { from { opacity: 0 } to { opacity: 1 } }
.store-modal {
  --accent: #D4AF61;
  position: relative; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #0E0E14, #06060A);
  border: 1px solid rgba(212,175,97,0.55);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.store-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.6); border: 1px solid rgba(212,175,97,0.55);
  color: #fff; font-size: 22px; cursor: pointer; line-height: 1;
}
.store-modal-hero {
  height: 220px; position: relative; overflow: hidden;
  border-top-left-radius: 22px; border-top-right-radius: 22px;
  background:
    radial-gradient(80% 80% at 0% 0%, rgba(212,175,97,0.22), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
  border-bottom: 1px solid rgba(212,175,97,0.55);
  display: flex; align-items: center; justify-content: center;
}
.store-modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.store-modal-hero-icon { color: var(--accent); }
.store-modal-hero-icon svg { width: 76px; height: 76px; filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--accent) 60%, transparent)); }
.store-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.store-modal-meta { display: flex; flex-direction: column; gap: 8px; }
.store-modal-type {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.3px;
}
.store-modal-type svg { width: 12px; height: 12px; }
.store-modal-title { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: var(--fg); }
.store-modal-price { font-size: 22px; font-weight: 900;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.store-modal-desc { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.store-modal-url {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(212,175,97,0.35); border-radius: 12px;
  font-size: 12px; color: var(--muted);
}
.store-modal-url-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-modal-url-copy { padding: 6px 10px; border-radius: 8px; background: transparent;
  border: 1px solid rgba(212,175,97,0.55); color: var(--fg); cursor: pointer; font-size: 11px; font-weight: 700; }
.store-modal-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: 14px; cursor: pointer; border: none;
  background: linear-gradient(180deg, #F5D78A 0%, #D4AF61 55%, #A1813A 100%);
  color: #0a0a0a; font-size: 15px; font-weight: 800; letter-spacing: 0.2px;
  box-shadow: 0 6px 18px rgba(212,175,97,0.35);
}
.store-modal-cta:hover { filter: brightness(1.06); }

@media (max-width: 640px) {
  .prof-pgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 12px; }
  .prof-brand-list, .prof-coupons { padding: 0 12px; }
  .prof-store-head { padding: 0 12px; }
  .store-modal-hero { height: 180px; }
  .store-modal-body { padding: 16px; }
  .prof-coupon-code-text { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CREATOR PROFILE — iOS Mirror (CreatorProfileView.swift parity)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Brass coin (BrassCoin equivalent) */
.brass-coin {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #E6CB7B 0%, #C9A84C 45%, #8A6F26 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 1px 3px rgba(0,0,0,0.45);
  flex-shrink:0;
}
.brass-coin-inner {
  display:inline-flex; align-items:center; justify-content:center;
  width:60%; height:60%; color:#1a1208;
}
.brass-coin-inner svg { width:100%; height:100%; display:block; }

/* Brass-gradient text utility */
.prof-name-brass,
.prof-stat-num-brass,
.store-section-title-brass,
.shop-banner-title,
.social-banner-title {
  background:linear-gradient(135deg, #F2DE9A 0%, #D9B860 35%, #B08A33 70%, #E6CB7B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.prof-creator-mirror .prof-header { margin-bottom:64px; }
.prof-creator-mirror .prof-avatar-brass {
  width:104px; height:104px;
  border:2.5px solid transparent;
  background:
    linear-gradient(var(--card2), var(--card2)) padding-box,
    linear-gradient(135deg, #F2DE9A 0%, #C9A84C 50%, #8A6F26 100%) border-box;
  box-shadow:0 6px 18px rgba(138,111,38,0.45), 0 0 0 4px rgba(0,0,0,0.6);
}

.prof-actions-mirror { margin-top:18px; gap:12px; max-width:560px; padding:0 24px; flex-wrap:nowrap; }
.prof-btn-pill { height:46px; padding:0 22px; border-radius:14px; font-size:15px; font-weight:700; letter-spacing:0.01em; }
.prof-btn-follow { flex:0 1 58%; }
.prof-btn-follow-wide { flex:1 1 auto; min-width:200px; }
.prof-btn-support {
  flex:0 1 42%;
  background:transparent;
  color:var(--accent);
  border:1.5px solid var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.prof-btn-support:hover { background:rgba(201,168,76,0.10); }
.prof-support-heart { font-size:14px; line-height:1; }

.social-banner {
  margin:18px auto 0;
  max-width:560px;
  padding:14px;
  background:linear-gradient(135deg, rgba(201,168,76,0.10), rgba(201,168,76,0.03));
  border:1px solid rgba(201,168,76,0.35);
  border-radius:14px;
  text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.social-banner-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.social-banner-title { font-size:14px; font-weight:800; letter-spacing:0.01em; }
.social-banner-tiles {
  display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;
  scroll-snap-type:x proximity;
  padding-bottom:2px;
}
.social-banner-tiles::-webkit-scrollbar { display:none; }
.social-tile {
  flex:0 0 auto;
  width:76px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:8px 4px;
  background:var(--card2);
  border:0.5px solid var(--line2);
  border-radius:12px;
  color:var(--muted);
  text-decoration:none;
  scroll-snap-align:start;
  transition:transform 0.15s ease, border-color 0.15s ease;
}
.social-tile:hover { transform:translateY(-2px); }
.social-tile-circle {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(201,168,76,0.14);
}
.social-tile-icon { width:20px; height:20px; color:var(--brand,#C9A84C); display:flex; align-items:center; justify-content:center; }
.social-tile-icon svg { width:100%; height:100%; }
.social-tile-label { font-size:11px; font-weight:700; color:var(--muted); }
.social-banner-empty {
  display:flex; align-items:center; gap:12px;
  padding:12px; background:var(--card2);
  border:0.5px solid var(--line); border-radius:12px;
}
.social-banner-empty-icon {
  width:36px; height:36px; border-radius:50%;
  background:var(--card3);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
}
.social-banner-empty-title { font-size:14px; font-weight:700; color:var(--fg); }
.social-banner-empty-sub { font-size:12px; color:var(--muted); margin-top:2px; }

.shop-banner {
  position:relative;
  display:block;
  width:calc(100% - 32px);
  max-width:560px;
  margin:14px auto 8px;
  height:120px;
  border-radius:16px;
  border:0.75px solid transparent;
  background:
    linear-gradient(#0d0d10, #0d0d10) padding-box,
    linear-gradient(135deg, #F2DE9A, #C9A84C, #8A6F26) border-box;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  padding:0;
  transition:transform 0.18s ease;
}
.shop-banner:hover { transform:translateY(-2px); }
.shop-banner-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.shop-banner-bg-fb {
  background:linear-gradient(135deg, rgba(138,111,38,0.65), rgba(0,0,0,0.85));
}
.shop-banner-scrim {
  position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.80) 100%);
}
.shop-banner-content {
  position:absolute; inset:0;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
}
.shop-banner-av {
  width:56px; height:56px; border-radius:50%;
  border:1.5px solid transparent;
  background:
    linear-gradient(#1a1a1f, #1a1a1f) padding-box,
    linear-gradient(135deg, #F2DE9A, #C9A84C, #8A6F26) border-box;
  object-fit:cover;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.shop-banner-av-fb { font-size:30px; line-height:1; color:#1a1208; background:radial-gradient(circle at 30% 25%, #E6CB7B 0%, #C9A84C 45%, #8A6F26 100%); }
.shop-banner-text { flex:1; min-width:0; }
.shop-banner-title { font-size:17px; font-weight:800; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shop-banner-sub { font-size:13px; font-weight:500; color:rgba(255,255,255,0.9); margin-top:2px; }
.shop-banner-chev {
  font-size:18px; font-weight:800;
  color:#C9A84C;
  flex-shrink:0; padding-left:6px;
}

.prof-stats-mirror { padding:16px 24px; margin-top:0; }
.prof-stat-num-brass { font-size:20px; font-weight:800; letter-spacing:-0.01em; }

.prof-divider { height:0.5px; background:var(--line); margin:0 16px; }

.prof-creator-mirror .store-section-head .store-section-icon { display:none; }
.store-section-title-brass { font-size:17px; font-weight:800; letter-spacing:0.01em; }

@media (max-width:640px) {
  .prof-creator-mirror .prof-avatar-brass { width:92px; height:92px; }
  .shop-banner { height:108px; width:calc(100% - 24px); }
  .shop-banner-av { width:48px; height:48px; }
  .shop-banner-av-fb { font-size:24px; }
  .shop-banner-title { font-size:15px; }
  .shop-banner-sub { font-size:12px; }
  .prof-actions-mirror { padding:0 16px; }
  .prof-btn-pill { padding:0 16px; font-size:14px; }
  .social-banner { margin:14px 16px 0; }
  .prof-stats-mirror { padding:14px 16px; }
}

/* ─── OWN PROFILE (mirrors iOS ProfileView) ─── */
.prof-own-mirror { padding: 0 0 40px; }

.prof-card-own {
  background: var(--card);
  border-radius: 16px;
  margin: 12px 16px 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.prof-header-own { position: relative; }
.prof-header-own .prof-banner { height: 120px; }
.prof-header-own .prof-banner img,
.prof-header-own .prof-banner .prof-banner-img { width: 100%; height: 120px; object-fit: cover; display: block; }
.prof-header-own .prof-banner-fallback {
  width: 100%; height: 120px;
  background: linear-gradient(135deg, #16161F 0%, #0F0F16 100%);
}

.prof-avatar-own {
  position: absolute;
  left: 50%;
  bottom: -44px;
  transform: translateX(-50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--card2);
  border: 2.5px solid var(--accent);
  cursor: pointer;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.prof-avatar-own .prof-avatar-img,
.prof-avatar-own img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.prof-avatar-own .prof-avatar-emoji,
.prof-avatar-own .prof-avatar-initial {
  font-size: 44px;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.prof-avatar-edit {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 24px; height: 24px;
  background: var(--card);
  color: var(--accent);
  border-radius: 50%;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.prof-identity-own {
  padding: 56px 16px 20px;
  text-align: center;
}
.prof-name-own {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.prof-handle-row-own {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px;
}
.prof-handle-row-own .prof-handle { color: var(--muted); font-size: 14px; }
.prof-handle-founder {
  color: #D4AF61;
  font-size: 12px;
  font-weight: 700;
}
.prof-founder-badge-inline {
  color: #D4AF61;
  font-size: 13px;
  margin-left: 2px;
}
.prof-bio-own {
  margin-top: 8px;
  color: var(--fg2);
  font-size: 14px;
  line-height: 1.4;
  max-width: 420px;
  margin-left: auto; margin-right: auto;
}

.prof-social-row-own {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px;
  margin-top: 10px;
}
.prof-social-chip-own {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand, var(--fg2));
  transition: transform 0.15s ease, background 0.15s ease;
}
.prof-social-chip-own:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.1);
}
.prof-social-chip-icon { width: 16px; height: 16px; display: inline-flex; }
.prof-social-chip-icon svg { width: 100%; height: 100%; }

.prof-stats-own {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  margin-top: 16px;
  padding-top: 12px;
}
.prof-stats-own > div:not(.prof-stat-div) {
  flex: 1;
  text-align: center;
}
.prof-stats-own .prof-stat-num {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
}
.prof-stats-own .prof-stat-lbl {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prof-stats-own .prof-stat-div {
  width: 0.5px;
  height: 28px;
  background: var(--line2);
}

.prof-own-actions {
  margin: 16px 16px 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.prof-own-action {
  display: flex; align-items: center; gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  transition: var(--transition);
}
.prof-own-action:hover {
  background: var(--card2);
  border-color: var(--line2);
}
.prof-own-action-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-size: 16px;
}
.prof-own-action-label { flex: 1; }
.prof-own-action-chev {
  color: var(--muted2);
  font-size: 18px;
}

.prof-own-mirror .prof-divider {
  height: 1px;
  background: var(--line);
  margin: 20px 16px 16px;
}

.prof-own-tabs {
  display: flex;
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 16px;
}
.prof-own-tabs .prof-tab {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  transition: var(--transition);
}
.prof-own-tabs .prof-tab.active {
  background: rgba(201,168,76,0.12);
  border-color: rgba(201,168,76,0.35);
  color: var(--accent);
}
.prof-own-tabs .prof-tab-icon { font-size: 13px; }

@media (max-width: 640px) {
  .prof-card-own { margin: 8px 12px 0; }
  .prof-own-actions { margin: 14px 12px 0; }
  .prof-own-mirror .prof-divider { margin: 16px 12px 12px; }
  .prof-own-tabs { padding: 0 12px; }
  .prof-identity-own { padding: 52px 14px 18px; }
}

/* ============================================================
   Own profile — full mirror of iOS ProfileView
   ============================================================ */

.prof-own-mirror { padding-bottom: 40px; }
.prof-own-mirror > * + * { margin-top: 12px; }

/* Standalone & in-card rows */
.own-row,
.own-row-settings {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 12px 14px;
  background: var(--card, #141416);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  color: var(--text, #fff);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
}
.own-card .own-row {
  width: 100%; margin: 0; background: transparent;
  border: 0; border-top: 1px solid rgba(255,255,255,.05);
  border-radius: 0;
}
.own-card .own-row:first-of-type { border-top: 0; }
.own-row:hover { background: rgba(255,255,255,.04); }
.own-row-icon {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--muted, #9aa);
}
.own-row-icon-gold { color: #D4AF61; }
.own-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.own-row-title { font-size: 14px; font-weight: 600; color: #fff; }
.own-row-sub { font-size: 12px; color: #9aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.own-row-chev { color: #9aa; font-size: 16px; }
.own-row-on {
  font-size: 10px; font-weight: 900; color: #000;
  padding: 2px 6px; background: rgba(80,200,120,.85); border-radius: 4px;
}
.own-row-lock { color: #D4AF61; font-size: 12px; }
.own-row.is-locked { opacity: .85; }

/* Banners (Pro, Viewer+, YouTube) */
.own-banner {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); margin: 0 16px;
  padding: 14px;
  background: #000;
  border: 1px solid rgba(212,175,97,.5);
  border-radius: 12px;
  color: #fff; cursor: pointer; text-align: left;
  font: inherit;
}
.own-banner-body { flex: 1; min-width: 0; }
.own-banner-title { font-size: 14px; font-weight: 700; color: #D4AF61; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.own-banner-sub { font-size: 12px; color: #9aa; margin-top: 4px; }
.own-banner-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 6px;
  font-size: 11px; font-weight: 800; color: #000;
  padding: 3px 8px; background: #D4AF61; border-radius: 20px;
}
.own-banner-pill { font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 8px; }
.own-pill-gold { background: #D4AF61; color: #000; }
.own-pill-gold-solid { background: #D4AF61; color: #000; }
.own-pill-green { background: rgba(80,200,120,.18); color: #4ade80; }
.own-banner-pro-bull { font-size: 22px; color: #D4AF61; }
.own-banner.is-active { background: rgba(212,175,97,.08); border-color: rgba(212,175,97,.3); }

/* Viewer+ (white-gold) */
.own-banner-vp { background: #fff; border-color: rgba(212,175,97,.55); }
.own-banner-vp .vp-title { color: #D4AF61; }
.own-banner-vp .vp-sub { color: #8A6A22; }
.own-banner-vp-star { color: #D4AF61; font-size: 22px; }
.vp-num { display: inline-block; font-weight: 900; color:#000; background:#D4AF61; padding: 1px 6px; border-radius: 4px; font-size: 11px; }
.own-banner-check { color: #D4AF61; font-size: 18px; font-weight: 900; }

/* YouTube Sync */
.own-banner-yt { border-color: rgba(255,0,0,.5); }
.own-banner-yt.is-locked { opacity: .78; border-color: rgba(255,0,0,.25); }
.own-yt-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,0,0,.15); color: #FF0000; font-size: 14px;
}
.own-banner-yt.is-locked .own-yt-icon { background: rgba(255,0,0,.08); color: #9aa; }
.yt-title { color: #fff; }
.own-banner-yt.is-locked .yt-title { color: #c9c9d0; }
.yt-new { font-size: 9px; font-weight: 900; color:#000; background:#D4AF61; padding: 1px 5px; border-radius: 4px; }
.yt-lock { font-size: 11px; color:#D4AF61; }

/* Quick actions row */
.own-quick-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 0 16px;
}
.own-quick-actions:has(.own-qa-red) { grid-template-columns: 1fr 1fr 1fr; }
.own-qa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 8px; border-radius: 12px; border: 1px solid rgba(255,255,255,.06);
  background: var(--card, #141416); color: #fff;
  cursor: pointer; font: inherit;
}
.own-qa:hover { background: rgba(255,255,255,.04); }
.own-qa-icon { font-size: 22px; }
.own-qa-label { font-size: 12px; font-weight: 700; }
.own-qa-gold .own-qa-icon { color: #D4AF61; }
.own-qa-brass .own-qa-icon { color: #E5C77A; }
.own-qa-red .own-qa-icon { color: #E06B5E; }

/* Section card */
.own-card {
  margin: 0 16px;
  background: var(--card, #141416);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  overflow: hidden;
}
.own-section-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 8px;
}
.own-section-title { font-size: 16px; font-weight: 800; color: #fff; flex: 1; }
.own-section-title-brass {
  background: linear-gradient(180deg, #F2D17B 0%, #D4AF61 50%, #B38937 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(212,175,97,.35);
}
.own-section-help {
  background: rgba(255,255,255,.06); border: 0; color: #D4AF61;
  width: 22px; height: 22px; border-radius: 11px; font-weight: 800;
  cursor: pointer; font-size: 12px;
}
.own-see-all { background: 0; border: 0; color: #D4AF61; font-size: 13px; font-weight: 700; cursor: pointer; }

/* Horizontal sections */
.own-hsection-head { padding: 14px 14px 6px; }
.own-hscroll {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  padding: 6px 14px 14px;
  scrollbar-width: thin;
}
.own-hscroll::-webkit-scrollbar { height: 6px; }
.own-hscroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.own-hcard {
  flex: 0 0 200px; scroll-snap-align: start;
  background: transparent; border: 0; padding: 0;
  text-align: left; cursor: pointer; color: #fff; font: inherit;
}
.own-hcard-thumb {
  width: 200px; height: 112px; border-radius: 10px; overflow: hidden;
  background: #0d0d0f; display: flex; align-items: center; justify-content: center;
}
.own-hcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.own-hcard-title {
  margin-top: 8px; font-size: 13px; font-weight: 600; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.own-hcard-sub { margin-top: 2px; font-size: 11px; color: #9aa; }

.own-plcard-thumb {
  background: linear-gradient(135deg, rgba(212,175,97,.18), rgba(212,175,97,.04));
  border: 1px solid rgba(212,175,97,.2);
}
.own-plcard-icon { font-size: 32px; color: #D4AF61; }

.own-hempty {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 14px; background: rgba(255,255,255,.02); border-radius: 10px;
  color: #9aa; font-size: 13px;
}
.own-hempty-icon { font-size: 22px; }

.prof-loading-mini { color: #9aa; font-size: 12px; padding: 12px; }

@media (max-width: 640px) {
  .own-banner,
  .own-row-settings,
  .own-row { margin-left: 12px; margin-right: 12px; width: calc(100% - 24px); }
  .own-quick-actions { margin: 0 12px; }
  .own-card { margin: 0 12px; }
  .own-hcard,
  .own-hcard-thumb { flex-basis: 168px; width: 168px; }
  .own-hcard-thumb { height: 94px; }
}