@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* --bg stays #0B1416: it matches the native splash screen and manifest. */
  --bg: #0B1416;
  --surface: #11201F;
  --surface-raised: #162928;
  --surface-hover: #1C3332;
  --surface-sunken: #0A1313;
  --border: #223B39;
  --text: #EDF5F2;
  --text-muted: #8BA6A0;
  --text-faint: #6A8782;

  --accent: #25B88B;
  --accent-hover: #34D0A0;
  --accent-deep: #129A79;
  --accent-dim: rgba(37, 184, 139, 0.15);
  --accent-grad: linear-gradient(135deg, #34D0A0 0%, #25B88B 48%, #129A79 100%);
  --on-accent: #04231A;
  --gold: #E2C07C;
  --gold-dim: rgba(226, 192, 124, 0.14);
  --gold-grad: linear-gradient(135deg, #F0D697 0%, #D9B468 55%, #B98F44 100%);
  --danger: #F06E5A;
  --danger-dim: rgba(240, 110, 90, 0.14);
  --ring: 0 0 0 3px rgba(37, 184, 139, 0.28);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.32);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.44);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --nav-h: 62px;
  --header-h: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F3F7F5;
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-hover: #EAF2EE;
  --surface-sunken: #EEF4F1;
  --border: #DCE7E2;
  --text: #0E1B1A;
  --text-muted: #556C67;
  --text-faint: #71887F;

  --accent: #11805F;
  --accent-hover: #0D6D52;
  --accent-deep: #0A6650;
  --accent-dim: rgba(17, 128, 95, 0.10);
  --accent-grad: linear-gradient(135deg, #12846A 0%, #0F7358 55%, #0A6650 100%);
  --on-accent: #FFFFFF;
  --gold: #8F6720;
  --gold-dim: rgba(158, 115, 38, 0.11);
  --gold-grad: linear-gradient(135deg, #C9A24F 0%, #A9802F 100%);
  --danger: #C9402B;
  --danger-dim: rgba(201, 64, 43, 0.10);
  --ring: 0 0 0 3px rgba(17, 128, 95, 0.22);

  --shadow-sm: 0 1px 2px rgba(16,32,28,0.06);
  --shadow-md: 0 8px 24px rgba(16,32,28,0.08);
  --shadow-lg: 0 16px 48px rgba(16,32,28,0.12);

  color-scheme: light;
}

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

html {
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100%;
  overscroll-behavior-y: none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;

  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
}

body.booting > *:not(.boot-screen) {
  opacity: 0 !important;
}
body:not(.booting) > *:not(.boot-screen) {
  animation: app-ready-fade 0.25s ease;
}
@keyframes app-ready-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Boot screen: shown instantly on load (pure HTML/CSS, no JS/network wait),
   matches the native Android splash screen so there is zero visible gap
   between "logo disappears" and "app content appears". */
.boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B1416;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.boot-logo {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.boot-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body:not(.booting) .boot-screen {
  opacity: 0;
}

/* Subtle pulsing dot below the logo, appears only if loading runs long,
   so the boot screen never looks frozen while waiting near the safety timeout. */
.boot-dot {
  position: absolute;
  bottom: calc(50% - 76px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #1FA97C);
  opacity: 0;
  animation: boot-dot-pulse 1.1s ease-in-out infinite;
  animation-delay: 1.4s;
}
@keyframes boot-dot-pulse {
  0%, 100% { opacity: 0; transform: scale(0.85); }
  50% { opacity: 0.85; transform: scale(1.15); }
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* Text is selectable and copyable everywhere (error messages, titles,
   descriptions, links). Only controls and media — where a stray long-press
   or drag would be annoying — stay non-selectable. */
html, body, p, h1, h2, h3, h4, span, div, a, label, li {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

button, .btn, .icon-btn, .chip, .nav-item, .bottom-nav, .app-header,
.material-symbols-rounded, .reel-slide, .cvp-player, .cvp-player *,
.video-card .thumb, .toast-stack {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, select,
input *, textarea *, select * {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

img, video {
  display: block;
  max-width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }

input, textarea, select { font-family: inherit; }

* { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.app-header,
.subview-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: var(--header-h);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.app-header {
  z-index: 40;
  padding-top: var(--safe-top);
  justify-content: space-between;
  padding-inline: 16px;
  transform: translateY(0);
  transition: transform 0.25s ease;
}

.app-header.header-hidden {
  transform: translateY(-100%);
}

body:has(#view-player.active) .app-header.header-hidden {
  height: 0;
  min-height: 0;
  border-bottom: none;
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #132427, #0B1416);
  overflow: hidden;
}

.brand-mark img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  display: block;
}

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

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.icon-btn:hover { background: var(--surface-hover); }
.icon-btn .material-symbols-rounded { font-size: 22px; }

.view { display: none; min-height: calc(100vh - var(--header-h)); }
.view.active { display: block; }

.category-rail {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.category-rail::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.video-feed {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 4px 16px 24px;
}

.feed-load-more-spinner {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
  color: var(--text-muted);
}
.feed-load-more-spinner .spin {
  font-size: 22px;
  animation: feed-spin 0.8s linear infinite;
}
@keyframes feed-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.video-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-raised);
}
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }

.thumb-fade {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.thumb-fade.thumb-loaded {
  opacity: 1;
}

.duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 5px;
}

.reel-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.reel-strip {
  display: flex;
  gap: 8px;
  margin: -4px 0 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.reel-strip::-webkit-scrollbar { display: none; }

.reel-strip-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 16px) / 3);
  min-width: calc((100% - 16px) / 3);
}
.reel-strip-card .thumb-wrap {
  aspect-ratio: 9/14;
  border-radius: var(--radius-sm);
}
.reel-strip-card .reel-badge {
  font-size: 9px;
  padding: 2px 6px;
  top: 6px;
  left: 6px;
}
.reel-strip-card .duration-badge {
  font-size: 9.5px;
  padding: 1px 5px;
  bottom: 6px;
  right: 6px;
}
.reel-strip-card .video-title {
  font-size: 11.5px;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}
.reel-strip-card .video-sub { font-size: 10px; }

.following-avatars {
  display: flex;
  gap: 16px;
  padding: 16px 16px 14px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.following-avatars::-webkit-scrollbar { display: none; }

.following-avatar-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 60px;
  cursor: pointer;
}
.following-avatar-item .avatar-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: border-color 0.15s ease;
}
.following-avatar-item:active .avatar-circle { border-color: var(--accent); }
.following-avatar-item .avatar-circle img { width: 100%; height: 100%; object-fit: cover; }
.following-avatar-item .avatar-name {
  font-size: 11px;
  color: var(--text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.following-avatar-more .avatar-circle {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.following-avatar-more .avatar-name { color: var(--accent); font-weight: 600; }

.subview-header {
  z-index: 30;
  gap: 4px;
  padding-inline: 8px 16px;
}
.subview-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}

.following-list {
  display: flex;
  flex-direction: column;
  padding: 4px 16px 24px;
}

.following-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.following-list-row:last-child { border-bottom: none; }

.following-list-row .avatar-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}
.following-list-row .avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

.following-list-row .creator-info { flex: 1; min-width: 0; }
.following-list-row .creator-name {
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.following-list-row .creator-followers { font-size: 12px; color: var(--text-muted); }

.video-meta {
  display: flex;
  gap: 10px;
}

.meta-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  overflow: hidden;
}
.meta-avatar img { width: 100%; height: 100%; object-fit: cover; }

.meta-text { flex: 1; min-width: 0; }

.video-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 3px;
}

.video-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.verified-tick {
  color: var(--accent);
  font-size: 14px !important;
}

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
  gap: 10px;

  grid-column: 1 / -1;
}
.empty-state .material-symbols-rounded { font-size: 38px; color: var(--text-faint); }
.empty-state h3 { font-family: var(--font-display); font-size: 17px; color: var(--text); font-weight: 600; }
.empty-state p { font-size: 13.5px; max-width: 260px; }

.empty-state-retry { margin-top: 6px; }

body.immersive-view {
  padding-bottom: 0;
}
body.immersive-view .app-header,
body.immersive-view .bottom-nav {
  display: none;
}

body.immersive-view .view.active {
  min-height: 100vh;
  min-height: 100dvh;
}

.reels-view {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.reels-view::-webkit-scrollbar { display: none; }
.reels-view .empty-state { height: 100%; color: #fff; }
.reels-view .empty-state .material-symbols-rounded { color: rgba(255,255,255,0.5); }

.reel-slide {
  height: 100dvh;
  scroll-snap-align: start;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-slide video {
  width: 100%;
  height: 100%;

  object-fit: cover;
  background: #000;

  opacity: 0;
  transition: opacity 0.15s ease;
  position: relative;
  z-index: 1;
}
.reel-slide video.ready { opacity: 1; }

.reel-slide-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.reel-center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.32s cubic-bezier(.4,0,.2,1), transform 0.32s cubic-bezier(.34,1.4,.64,1);
  z-index: 4;
}
.reel-center-icon.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.reel-center-icon:active { transform: translate(-50%, -50%) scale(0.88); }
.reel-center-icon svg { width: 36px; height: 36px; transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; }
.reel-center-icon:active svg { opacity: 0.75; }
.reel-center-icon svg.icon-swap { opacity: 0; transform: scale(0.7); }

.reel-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  z-index: 4;
  display: none;
}
.reel-spinner.show { display: block; }
.reel-spinner svg { width: 100%; height: 100%; animation: cvp-spin 0.9s linear infinite; }
.reel-spinner circle {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 110;
  stroke-dashoffset: 70;
  opacity: 0.9;
}

.reel-seek-track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--safe-bottom, 0px);
  height: 18px;
  display: flex;
  align-items: center;
  padding: 0 2px;
  z-index: 5;
  cursor: pointer;
  touch-action: none;
}
.reel-seek-bg {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  transition: height 0.15s ease;
}
.reel-seek-track.dragging .reel-seek-bg { height: 5px; }
.reel-seek-buffered {
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.4);
  border-radius: 999px;
}
.reel-seek-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 0%;
  background: #FF3B30;
  border-radius: 999px;
}
.reel-seek-thumb {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FF3B30;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%) scale(0.6);
  left: 0%;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.reel-seek-track.dragging .reel-seek-thumb { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.reel-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 72px 32px 16px;
  padding-bottom: calc(32px + var(--safe-bottom));
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

.reel-info { pointer-events: auto; color: #fff; }

.reel-creator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.reel-creator-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.reel-creator-avatar .material-symbols-rounded { font-size: 21px; }
.reel-creator-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reel-creator-name {
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Follow button lives in .reel-actions alongside like/save/share, so it
   inherits the same base look (see .reel-action-btn) and only needs the
   bits specific to its two-icon swap animation + active color. */
.reel-follow-btn {
  position: relative;
  cursor: pointer;
}
/* The add/check icons overlap in the same grid cell so one can fade
   out while the other pops in — that grid needs to be the icon row's
   own wrapper, not every .material-symbols-rounded in the button
   (which would also catch the icon and break .reel-action-btn's
   column layout of icon-over-count). */
.reel-follow-btn .reel-follow-icons {
  display: grid;
}
.reel-follow-icon-add,
.reel-follow-icon-check {
  grid-area: 1 / 1;
}
.reel-follow-btn .reel-follow-icon-check {
  display: none;
  transform: scale(0.4);
  opacity: 0;
}
.reel-follow-btn .reel-follow-icon-add {
  transform: scale(1);
  opacity: 1;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
}
.reel-follow-btn:active {
  transform: scale(0.9);
}
/* Followed state: same accent color used for liked/saved, so all
   "active" action states read consistently. */
.reel-follow-btn.following .reel-follow-icon-add {
  display: none;
}
.reel-follow-btn.following .reel-follow-icon-check {
  display: block;
  animation: reel-follow-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 1;
  transform: scale(1);
}
.reel-follow-btn.following .reel-follow-icons {
  color: var(--accent);
  font-variation-settings: 'FILL' 1;
}
@keyframes reel-follow-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.reel-desc {
  font-size: 13.5px;
  opacity: 0.94;
  line-height: 1.4;
  max-width: 82%;
  cursor: pointer;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.reel-desc[data-expanded="true"] {
  -webkit-line-clamp: unset;
  max-width: 90%;
}

.reel-actions {
  position: absolute;
  right: 10px;
  bottom: calc(40px + var(--safe-bottom));
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  pointer-events: auto;
}

.reels-exit-btn {
  position: absolute;
  top: calc(14px + var(--safe-top));
  left: 14px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reels-exit-btn .material-symbols-rounded { font-size: 22px; }

.reels-mute-btn {
  position: absolute;
  top: calc(14px + var(--safe-top));
  right: 14px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reels-mute-btn .material-symbols-rounded { font-size: 22px; }

.reel-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: #fff;
}
.reel-action-btn .material-symbols-rounded {
  font-size: 27px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.reel-action-btn span.count { font-size: 11px; font-weight: 600; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.reel-action-btn.liked .material-symbols-rounded { color: var(--accent); font-variation-settings: 'FILL' 1; }
.reel-action-btn.saved .material-symbols-rounded { color: var(--gold); font-variation-settings: 'FILL' 1; }
.reel-action-btn.views-count { cursor: default; }
.reel-action-btn.views-count .material-symbols-rounded { font-size: 24px; }

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 50;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--text-faint);
  flex: 1;
  height: 100%;
  justify-content: center;
  position: relative;
  transition: color 0.15s ease;
}
.nav-item .material-symbols-rounded { font-size: 23px; transition: transform 0.15s ease; }
.nav-item span.label { font-size: 10.5px; font-weight: 500; }

.nav-item.upload-item { flex: 0.9; }
.nav-item.upload-item .upload-pill {
  width: 44px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s ease;
}
.nav-item.upload-item .upload-pill .material-symbols-rounded { font-size: 22px; color: var(--accent); }

.nav-item.active { color: var(--text); }
.nav-item.active .material-symbols-rounded { font-variation-settings: 'FILL' 1; transform: translateY(-1px); }
.nav-item.active .material-symbols-rounded.no-fill { font-variation-settings: 'FILL' 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  border: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn .material-symbols-rounded { font-size: 18px; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--surface-hover); }

.btn-following { background: var(--surface); color: var(--text); border: 1px solid var(--border); }

.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.modal-backdrop.active { display: flex; }
.modal-backdrop.center { align-items: center; padding: 20px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }

.sheet {
  position: relative;
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 88vh;
  overflow-y: auto;
  padding: 8px 20px calc(24px + var(--safe-bottom));
  animation: slideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  border: 1px solid var(--border);
  border-bottom: none;
}

.modal-backdrop.center .sheet {
  border-radius: var(--radius-lg);
  border-bottom: 1px solid var(--border);
  max-width: 360px;
  padding: 24px 22px calc(22px + var(--safe-bottom));
  animation: popIn 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 6px auto 14px;
}
.modal-backdrop.center .sheet-handle { display: none; }

.sheet-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.sheet-subtitle { font-size: 13.5px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.5; }

.sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-size: 14.5px;
  transition: border-color 0.15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 80px; }
.field.error input, .field.error textarea { border-color: var(--danger); }

.google-btn {
  width: 100%;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}
.google-btn:hover { background: var(--surface-hover); }
.google-btn svg { width: 18px; height: 18px; }

.player-view { padding-bottom: 100px; }
.player-main { display: contents; }

.cvp-player {
  width: 100%;
  background: #000;
  aspect-ratio: 16/9;
  position: sticky;
  top: 0;
  z-index: 45;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cvp-player * { -webkit-tap-highlight-color: transparent; }
.cvp-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

.cvp-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #000;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.cvp-poster.hidden { opacity: 0; }

.cvp-tap-zones { position: absolute; inset: 0; display: flex; z-index: 2; }
.cvp-tap-zone { flex: 1; height: 100%; position: relative; }

.cvp-seek-flash {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.85);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cvp-seek-flash-left { left: 10%; }
.cvp-seek-flash-right { right: 10%; }
.cvp-seek-flash.show { opacity: 1; transform: translateY(-50%) scale(1); }
.cvp-seek-flash svg { width: 22px; height: 22px; fill: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7)); }
.cvp-seek-flash span { font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }

.cvp-center-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(.4,0,.2,1), transform 0.32s cubic-bezier(.34,1.4,.64,1);
}
.cvp-center-btn.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.cvp-center-btn:active { transform: translate(-50%, -50%) scale(0.88); }
.cvp-center-btn svg { width: 36px; height: 36px; transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; }
.cvp-center-btn:active svg { opacity: 0.75; }
.cvp-center-btn svg.icon-swap { opacity: 0; transform: scale(0.7); }

.cvp-unlock-hint {
  position: absolute;
  top: 12px;
  left: 12px;
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.5);
  border-radius: 20px;
  padding: 6px 12px 6px 8px;
  z-index: 8;
  cursor: pointer;
}
.cvp-unlock-hint.show { display: flex; }
.cvp-unlock-hint svg { width: 16px; height: 16px; }
.cvp-unlock-hint span { color: #fff; font-size: 11.5px; font-weight: 600; }

.cvp-spinner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  z-index: 4;
  display: none;
  pointer-events: none;
}
.cvp-spinner.show { display: block; }
.cvp-spinner svg { width: 100%; height: 100%; animation: cvp-spin 0.9s linear infinite; }
.cvp-spinner circle {
  fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 110; stroke-dashoffset: 70; opacity: 0.9;
}
@keyframes cvp-spin { to { transform: rotate(360deg); } }

.cvp-error-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(180,0,0,0.85);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  text-align: center;
  max-width: 80%;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cvp-error-banner.show { display: flex; }
.cvp-error-retry-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cvp-error-retry-btn:active { background: rgba(255,255,255,0.28); }

.cvp-audio-only-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
  text-align: center;
  padding: 20px;
  pointer-events: none;
}
.cvp-audio-only-cover.show { display: flex; }
.cvp-audio-only-cover svg { width: 56px; height: 56px; opacity: 0.85; }
.cvp-audio-only-cover .cvp-aoc-title { color: #fff; font-size: 15px; font-weight: 600; opacity: 0.9; }
.cvp-audio-only-cover .cvp-aoc-sub { color: #aaa; font-size: 12.5px; max-width: 260px; }

.cvp-thumb-preview {
  position: absolute;
  bottom: 44px;
  width: 108px;
  height: 61px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
  background: #111;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  transform: translateX(-50%);
  z-index: 6;
}
.cvp-thumb-preview.show { opacity: 1; }
.cvp-thumb-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvp-thumb-time {
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.cvp-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 6px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.cvp-controls.hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }

.cvp-seek-row { display: flex; align-items: center; margin-bottom: 2px; }
.cvp-seek-track { position: relative; flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer; }
.cvp-seek-bg {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  transition: height 0.15s ease;
}
.cvp-seek-track:hover .cvp-seek-bg, .cvp-seek-track.dragging .cvp-seek-bg { height: 4px; }
.cvp-seek-buffered {
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.4);
  border-radius: 999px;
}
.cvp-seek-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  width: 0%;
  background: #FF3B30;
  border-radius: 999px;
}
.cvp-seek-thumb {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #FF3B30;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%) scale(0.6);
  left: 0%;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.cvp-seek-track:hover .cvp-seek-thumb, .cvp-seek-track.dragging .cvp-seek-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cvp-ab-loop-range {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: rgba(245,165,36,0.35);
  min-width: 4px;
  display: none;
}
.cvp-ab-loop-range.show { display: block; }
.cvp-ab-marker {
  position: absolute;
  top: 50%;
  width: 4px; height: 16px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transform: translate(-50%, -50%);
  display: none;
  pointer-events: none;
}
.cvp-ab-marker.show { display: block; }

.cvp-bottom-row { display: flex; align-items: center; gap: 2px; }
.cvp-spacer { flex: 1; }

.cvp-ctrl-btn {
  background: transparent;
  border: none;
  color: #fff;
  width: 38px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
  position: relative;
}
.cvp-ctrl-btn:active { transform: scale(0.9); background: rgba(255,255,255,0.12); }
.cvp-ctrl-btn svg { width: 25px; height: 25px; fill: #fff; }

.cvp-ctrl-btn.active { background: var(--accent); }
.cvp-ctrl-btn.active:active { background: var(--accent); }

.cvp-ctrl-btn.ab-pending { box-shadow: inset 0 0 0 2px var(--accent); }
.cvp-ctrl-btn.ab-active { background: var(--accent); }
.cvp-ctrl-btn.ab-active:active { background: var(--accent); }

.cvp-time-display {
  font-size: 11.5px;
  font-weight: 500;
  color: #fff;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cvp-speed-wrap { position: relative; }
.cvp-speed-btn { font-size: 14px; font-weight: 700; width: auto; padding: 0 8px; min-width: 40px; }
.cvp-speed-menu {
  position: absolute;
  bottom: 38px;
  right: -4px;
  background: rgba(24,24,24,0.98);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 76px;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
  z-index: 10;
}
.cvp-speed-menu.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cvp-speed-option {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 8px;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.cvp-speed-option:active { background: rgba(255,255,255,0.08); color: #fff; }
.cvp-speed-option.active { color: var(--accent); background: rgba(245,165,36,0.12); }

@media (max-width: 400px) {
  .cvp-time-display { font-size: 10.5px; margin-left: 2px; }
  .cvp-controls { padding: 6px 6px 8px; }
  .cvp-bottom-row { gap: 0; }
  .cvp-ctrl-btn { width: 34px; height: 34px; }
  .cvp-ctrl-btn svg { width: 22px; height: 22px; }
  .cvp-speed-btn { font-size: 12.5px; padding: 0 5px; min-width: 32px; }
}

.player-body { padding: 14px 16px; }

.upload-page-body { padding: 16px 16px 32px; }

.player-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 8px;
}

.player-stats { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }

.creator-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.creator-row img { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); }
.creator-row .creator-info { flex: 1; min-width: 0; }
.creator-row .creator-name { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 4px; }
.creator-row .creator-followers { font-size: 12px; color: var(--text-muted); }

.action-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.action-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.action-pill .material-symbols-rounded { font-size: 18px; }
.action-pill.liked { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.action-pill.liked .material-symbols-rounded { font-variation-settings: 'FILL' 1; }
.action-pill.saved { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 35%, var(--border)); }
.action-pill.saved .material-symbols-rounded { font-variation-settings: 'FILL' 1; }

.desc-chevron {
  transition: transform 0.25s ease;
}
#descToggleBtn.active .desc-chevron { transform: rotate(180deg); }

.desc-plain-full {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.desc-plain.open .desc-plain-full { max-height: 1200px; }
.desc-full-text {
  position: relative;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--border);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-muted);
  white-space: pre-wrap;
  letter-spacing: 0.005em;
}
.desc-plain.open { margin-top: 14px; margin-bottom: 8px; }

.section-label {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 12px;
}

.related-list { display: flex; flex-direction: column; gap: 14px; }
.related-item { display: flex; gap: 10px; cursor: pointer; }
.related-item .thumb-wrap { width: 130px; flex-shrink: 0; aspect-ratio: 16/9; }
.related-item .related-text { min-width: 0; flex: 1; }
.related-item .video-title { font-size: 13.5px; -webkit-line-clamp: 2; }
.related-item .video-sub {
  font-size: 11.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 2px;
}

.profile-header {
  padding: 24px 20px 18px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.profile-options-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
}
.profile-options-btn { position: static; }
.profile-options-popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 176px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.97);
  transform-origin: top right;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 50;
}
.profile-options-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.popover-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  text-align: left;
}
.popover-option:active { background: var(--surface); }
.popover-option .material-symbols-rounded { color: var(--text-faint); font-size: 17px; }

.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  margin: 0 auto 12px;
  border: 2px solid var(--border);
  overflow: hidden;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.profile-username { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.profile-bio { font-size: 13.5px; color: var(--text-muted); margin-top: 10px; max-width: 300px; margin-inline: auto; line-height: 1.5; }

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 16px;
}
.profile-stat { text-align: center; }
.profile-stat b { display: block; font-size: 16px; font-weight: 700; font-family: var(--font-mono); }
.profile-stat span { font-size: 11.5px; color: var(--text-muted); }

.profile-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }

.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  background: var(--bg);
  z-index: 10;
}
.profile-tab {
  flex: 1;
  padding: 13px 0;
  text-align: center;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.profile-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
}
.grid-card { border-radius: var(--radius-md); overflow: hidden; }
.grid-card .thumb-wrap { border-radius: var(--radius-md); margin-bottom: 6px; }
.grid-card .video-title { font-size: 12.5px; -webkit-line-clamp: 2; margin-bottom: 2px; }
.grid-card .video-sub { font-size: 11px; }

.profile-reel-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 10px 12px;
}
.profile-reel-grid .reel-strip-card { min-width: 0; }

#profileGrid > .profile-reel-grid + .video-grid {
  margin-top: 4px;
}

.upload-preview {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  border: 1.5px dashed var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.upload-preview img, .upload-preview video { width: 100%; height: 100%; object-fit: cover; }
.upload-preview .material-symbols-rounded { font-size: 30px; }
.upload-preview span.hint { font-size: 12.5px; }

.thumb-options { display: flex; gap: 8px; margin-bottom: 16px; }
.thumb-options .btn { flex: 1; }

.progress-wrap { margin-top: 8px; }
.progress-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-raised);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  width: 0%;
  transition: width 0.2s ease;
}
.progress-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
  font-family: var(--font-mono);
}

.type-toggle {
  display: flex;
  background: var(--surface-raised);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.type-toggle button {
  flex: 1;
  padding: 9px 0;
  border-radius: var(--radius-pill);
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.15s ease;
}
.type-toggle button.active { background: var(--accent); color: var(--on-accent); }

.apply-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.apply-icon-badge .material-symbols-rounded { font-size: 26px; color: var(--gold); font-variation-settings: 'FILL' 1; }

.support-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.support-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--surface-2, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}
.support-contact-item .material-symbols-rounded { font-size: 20px; color: var(--gold); flex-shrink: 0; }
a.support-contact-item:active { opacity: 0.7; }

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-stack {
  position: fixed;
  bottom: calc(var(--nav-h) + var(--safe-bottom) + 14px);
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 200;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: toastIn 0.25s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}
.toast .material-symbols-rounded { font-size: 17px; color: var(--accent); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hidden { display: none !important; }
.report-options { display: flex; flex-direction: column; gap: 2px; }
.report-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--border);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  color: var(--text);
  font-size: 14px;
  width: 100%;
  text-align: left;
}
.report-option:last-child { border-bottom: none; }
.report-option .material-symbols-rounded { color: var(--text-faint); font-size: 18px; }

.username-check { font-size: 12px; margin-top: 5px; display: flex; align-items: center; gap: 4px; min-height: 16px; }
.username-check.ok { color: var(--accent); }
.username-check.taken { color: var(--danger); }
.username-check .material-symbols-rounded { font-size: 14px; }

@media (min-width: 560px) {
  body { max-width: 480px; margin: 0 auto; border-inline: 1px solid var(--border); min-height: 100vh; }
  .app-header, .bottom-nav { max-width: 480px; margin: 0 auto; }
}


/* ---------- Email / password auth ---------- */
.auth-tabs { display: flex; gap: 4px; padding: 4px; margin: 14px 0 16px; background: var(--surface-raised); border-radius: var(--radius-sm); }
.auth-tabs button { flex: 1; height: 36px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--text-muted, var(--text)); }
.auth-tabs button.active { background: var(--accent); color: var(--on-accent); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 44px; }
.password-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
.auth-error { min-height: 18px; margin: 4px 0 2px; font-size: 12.5px; color: var(--danger); }
.auth-link { display: block; margin: 0 0 12px auto; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.auth-link.hidden { display: none; }
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: 12px; color: var(--text-muted, var(--text)); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* ---------- Firestore index helper sheet ---------- */
.index-link-item { margin: 10px 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
.index-link-url { font-size: 12px; line-height: 1.4; word-break: break-all; max-height: 74px; overflow-y: auto;
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.index-link-actions { display: flex; gap: 8px; margin-top: 8px; }
.index-link-actions .btn { flex: 1; }
.empty-state p { -webkit-user-select: text; user-select: text; word-break: break-word; }

.field-hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.empty-state .empty-state-action, .empty-state .empty-state-retry { margin-top: 14px; }

/* =====================================================================
   Design refresh — deep emerald + brass, with a faint 8-point-star motif
   on popups. Appended last so it refines (rather than rewrites) the
   component rules above.
   ===================================================================== */
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }

/* ---- header & navigation ---- */
.app-header, .subview-header {
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: color-mix(in srgb, var(--border) 70%, transparent);
}
.brand-mark { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.icon-btn { transition: background 0.18s ease, transform 0.12s ease; }
.icon-btn:active { transform: scale(0.92); background: var(--surface-hover); }

.bottom-nav {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-top-color: color-mix(in srgb, var(--border) 70%, transparent);
}
.nav-item.active { color: var(--accent); }
.nav-item.active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 28px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--accent-grad);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 60%, transparent);
}
.nav-item.upload-item.active::before { display: none; }
.nav-item.upload-item .upload-pill {
  background: var(--accent-grad);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
}
.nav-item.upload-item .upload-pill .material-symbols-rounded { color: var(--on-accent); }
.nav-item.upload-item:active .upload-pill { transform: scale(0.94); }

/* ---- chips, cards, badges ---- */
.chip { background: var(--surface-raised); transition: all 0.18s ease; }
.chip:active { transform: scale(0.96); }
.chip.active {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent);
}
.thumb-wrap {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 75%, transparent), var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.video-card:active .thumb-wrap { transform: scale(0.985); }
.duration-badge {
  background: rgba(5, 12, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 6px;
}
.reel-badge {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}
.following-avatar-item .avatar-circle {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box,
    linear-gradient(135deg, var(--accent), var(--gold)) border-box;
}
.following-avatar-more .avatar-circle {
  background: var(--accent-dim);
  border: 2px dashed var(--accent);
}

/* ---- buttons ---- */
.btn {
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
  letter-spacing: 0.005em;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
}
.btn:active { transform: scale(0.975); }
.btn-ghost, .btn-following { background: var(--surface); color: var(--text); border: none; box-shadow: inset 0 0 0 1px var(--border); }
.btn-primary,
.btn-primary:hover {
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:disabled { opacity: 0.45; box-shadow: none; filter: saturate(0.6); }

/* ---- popups: backdrop, sheet, centred dialog ---- */
.modal-backdrop {
  background: rgba(3, 9, 10, 0.66);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
[data-theme="light"] .modal-backdrop { background: rgba(14, 27, 26, 0.38); }

.sheet {
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    var(--surface);
  border-radius: 28px 28px 0 0;
  border-color: color-mix(in srgb, var(--gold) 18%, var(--border));
  box-shadow: 0 -24px 60px -24px rgba(0, 0, 0, 0.6);
  padding: 10px 22px calc(26px + var(--safe-bottom));
  animation-duration: 0.34s;
}
/* faint 8-point star (two overlapping squares) fading out down the sheet */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 150px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23E2C07C' stroke-width='1'%3E%3Crect x='15' y='15' width='26' height='26'/%3E%3Crect x='15' y='15' width='26' height='26' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  opacity: 0.11;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}
[data-theme="light"] .sheet::before { opacity: 0.2; }
.modal-backdrop.center .sheet {
  border-radius: 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, var(--border));
  max-width: 380px;
  padding: 28px 24px calc(24px + var(--safe-bottom));
  box-shadow: var(--shadow-lg);
  animation: popIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.sheet-handle { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.sheet-title { font-size: 21px; letter-spacing: -0.01em; padding-right: 36px; }
.sheet-subtitle { color: var(--text-muted); line-height: 1.55; }
.sheet-close {
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border);
}
.sheet-close .material-symbols-rounded { font-size: 19px; }
.apply-icon-badge {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 12px 26px -14px rgba(0, 0, 0, 0.6);
}

/* ---- form fields ---- */
.field label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.field input, .field textarea, .field select {
  background: var(--surface-sunken);
  border-radius: 12px;
  padding: 13px 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.16);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: var(--ring); }
.field.error input, .field.error textarea { box-shadow: 0 0 0 3px var(--danger-dim); }
.field-hint { color: var(--text-faint); }

.auth-tabs { background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); border-radius: 14px; }
.auth-tabs button { border-radius: 10px; color: var(--text-muted); transition: all 0.2s ease; }
.auth-tabs button.active {
  background: var(--surface-raised);
  color: var(--accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22), inset 0 0 0 1px var(--border);
}
.auth-error { min-height: 0; }
.auth-error:not(:empty) { background: var(--danger-dim); padding: 9px 12px; border-radius: 10px; margin: 8px 0; }
.auth-link { color: var(--accent); }
.google-btn {
  height: 48px;
  border-radius: 12px;
  background: #fff;
  color: #1d2b29;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s ease, filter 0.2s ease;
}
[data-theme="light"] .google-btn { border-color: var(--border); }
.google-btn:hover { background: #fff; filter: brightness(0.96); }
.google-btn:active { transform: scale(0.98); }

/* ---- popover, lists inside popups ---- */
.profile-options-popover {
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg);
  padding: 6px;
}
.popover-option { border-radius: 11px; padding: 11px 12px; }
.popover-option:active { background: var(--surface-hover); }

.report-options { gap: 8px; }
.report-option {
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-raised);
  justify-content: flex-start;
  transition: background 0.15s ease, transform 0.12s ease, border-color 0.15s ease;
}
.report-option:last-child { border-bottom: 1px solid var(--border); }
.report-option:active { background: var(--surface-hover); transform: scale(0.985); border-color: var(--accent); }
.report-option .lead {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 19px;
  flex-shrink: 0;
}
.report-option .report-label { flex: 1; font-weight: 500; }
.report-option .chev { margin-left: auto; }

.support-contact-item {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 14px;
}
.support-contact-item .material-symbols-rounded {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--gold-dim);
  font-size: 19px;
}
.index-link-item { background: var(--surface-raised); border-radius: 14px; }

/* ---- toasts ---- */
.toast {
  background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 16px;
  padding: 9px 16px 9px 9px;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  gap: 10px;
}
.toast .material-symbols-rounded {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 17px;
}
.toast-error .material-symbols-rounded { background: var(--danger-dim); color: var(--danger); }

/* ---- empty states ---- */
.empty-state > .material-symbols-rounded:first-child {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 32px;
  margin-bottom: 4px;
}
.reels-view .empty-state > .material-symbols-rounded:first-child { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ---- profile & player ---- */
.profile-avatar {
  border: none;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px color-mix(in srgb, var(--gold) 60%, transparent);
}
.profile-tab.active { color: var(--accent); }
.profile-tabs { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.creator-row img { border: 2px solid color-mix(in srgb, var(--gold) 45%, var(--border)); }
.action-pill { background: var(--surface-raised); transition: transform 0.12s ease, background 0.18s ease; }
.action-pill:active { transform: scale(0.95); }
.action-pill.liked { background: var(--accent-dim); }
.action-pill.saved { background: var(--gold-dim); }
.verified-tick { color: var(--gold); }

/* =====================================================================
   Desktop layout (>= 900px) — YouTube-style: full-width app, left
   sidebar, video grids, watch page with related column, reels in a tall
   centred column. Phones/tablets (< 900px) keep the layout above.
   ===================================================================== */

/* elements that only exist for the wide layout are hidden everywhere else */
.reels-stepper { display: none; }
.nav-item.upload-item .label { display: none; }
.player-related { padding: 0 16px 14px; }

@media (min-width: 900px) {
  :root {
    --side-w: 80px;
    --reel-h: calc(100dvh - var(--header-h) - 32px);
    --reel-w: calc(var(--reel-h) * 9 / 16);
  }

  /* --- shell: header across the top, sidebar down the left --- */
  body {
    max-width: none;
    margin: 0;
    border-inline: none;
    padding-left: var(--side-w);
    padding-bottom: 0;
  }
  .app-header {
    max-width: none;
    margin: 0 0 0 calc(var(--side-w) * -1);
    padding-inline: 24px;
    height: var(--header-h) !important;
    transform: none !important;
  }
  body:has(#view-player.active) .app-header.header-hidden {
    height: var(--header-h) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    overflow: visible;
  }

  .bottom-nav {
    top: var(--header-h);
    bottom: 0;
    left: 0;
    right: auto;
    width: var(--side-w);
    height: auto;
    max-width: none;
    margin: 0;
    padding: 10px 8px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    border-top: none;
    border-right: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-y: auto;
  }
  /* reels used to hide the header and nav on phones; on a computer they stay */
  body.immersive-view .app-header,
  body.immersive-view .bottom-nav { display: flex; }

  .nav-item {
    flex: none;
    width: 100%;
    height: auto;
    padding: 12px 4px 10px;
    border-radius: 14px;
    gap: 4px;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .nav-item.active { background: var(--accent-dim); }
  .nav-item.active::before { display: none; }
  .nav-item.upload-item { flex: none; }
  .nav-item.upload-item.active { background: none; }
  .nav-item.upload-item .label { display: block; }

  /* --- home & following feeds: responsive grid --- */
  .category-rail {
    position: sticky;
    top: var(--header-h);
    z-index: 25;
    padding: 12px 24px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .video-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px 18px;
    padding: 12px 24px 48px;
  }
  .video-feed > :not(.video-card) { grid-column: 1 / -1; }
  .video-card .video-title { font-size: 15px; }

  .reel-strip .reel-strip-card { flex: 0 0 clamp(150px, 12vw, 200px); min-width: 0; }
  .following-avatars { padding: 20px 24px 16px; gap: 20px; }
  .following-avatar-item { width: 76px; }
  .following-avatar-item .avatar-circle { width: 62px; height: 62px; }
  .following-avatar-item .avatar-name { font-size: 12px; }

  /* --- profile --- */
  .profile-header { max-width: 760px; margin: 0 auto; }
  .profile-tabs { top: var(--header-h); justify-content: center; }
  .profile-tab { flex: 0 0 160px; }
  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px 16px;
    padding: 24px;
  }
  .profile-reel-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    padding: 20px 24px;
  }
  .grid-card .video-title { font-size: 14px; }
  .grid-card .video-sub { font-size: 12px; }

  /* --- narrow "form" pages stay readable, centred --- */
  .subview-header { top: var(--header-h); padding-inline: 16px 24px; }
  .following-list { max-width: 720px; margin: 0 auto; }
  .upload-page-body { max-width: 720px; margin: 8px auto 0; padding: 28px 24px 56px; }

  /* --- watch page --- */
  .player-view { max-width: 1000px; margin: 0 auto; padding: 24px 24px 56px; }
  .cvp-player {
    position: relative;
    top: auto;
    z-index: 1;
    border-radius: 18px;
    max-height: calc(100dvh - var(--header-h) - 48px);
    box-shadow: var(--shadow-lg);
  }
  .player-body { padding: 18px 2px; }
  .player-related { padding: 0; }
  .related-item .thumb-wrap { width: 168px; }
  .related-item .video-title { font-size: 14px; }

  /* --- reels: tall centred column, arrows beside it --- */
  body.immersive-view .view.active { min-height: calc(100dvh - var(--header-h)); }
  #view-reels.active {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .reels-view {
    flex: none;
    height: var(--reel-h);
    width: min(100%, var(--reel-w));
    border-radius: 20px;
    background: #000;
    box-shadow: var(--shadow-lg);
  }
  .reel-slide { height: 100%; }
  .reels-exit-btn { display: none; }
  .reels-mute-btn { top: 30px; right: calc(50% - var(--reel-w) / 2 + 14px); }
  .reels-stepper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    top: 50%;
    left: calc(50% + var(--reel-w) / 2 + 20px);
    transform: translateY(-50%);
  }
  .reels-step-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: background 0.15s ease, transform 0.12s ease;
  }
  .reels-step-btn:active { transform: scale(0.92); }
  .reels-step-btn .material-symbols-rounded { font-size: 26px; }

  /* --- popups become centred dialogs instead of bottom sheets --- */
  .modal-backdrop { align-items: center; padding: 24px; }
  .sheet {
    border-radius: 26px;
    max-width: 440px;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, var(--border));
    padding: 28px 28px 26px;
    animation: popIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  }
  .modal-backdrop.center .sheet { max-width: 420px; padding: 28px 28px 26px; }
  .sheet-handle { display: none; }

  .toast-stack { left: var(--side-w); right: 0; bottom: 28px; }

  /* --- mouse niceties --- */
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 24%, transparent) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text) 24%, transparent);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* roomier sidebar with text labels on wide screens */
@media (min-width: 1280px) {
  :root { --side-w: 232px; }
  .bottom-nav { padding: 12px; gap: 4px; }
  .nav-item { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 11px 16px; }
  .nav-item .material-symbols-rounded { font-size: 24px; }
  .nav-item span.label { font-size: 14px; font-weight: 600; }
  .nav-item.upload-item .upload-pill { width: 28px; height: 28px; border-radius: 9px; }
  .nav-item.upload-item .upload-pill .material-symbols-rounded { font-size: 20px; }
}

/* watch page: related videos move to a right-hand column */
@media (min-width: 1100px) {
  .player-view {
    max-width: 1760px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 430px);
    grid-template-areas: "main related";
    column-gap: 28px;
    align-items: start;
  }
  /* The video and its details stay pinned under the header while the related
     list scrolls — so the left column never scrolls away and leaves a blank
     area. The cap keeps the pinned block within the window; anything longer
     (a long description) scrolls inside it. */
  .player-main {
    display: block;
    grid-area: main;
    position: sticky;
    top: calc(var(--header-h) + 20px);
    align-self: start;
    max-height: calc(100dvh - var(--header-h) - 40px);
    overflow-y: auto;
    scrollbar-width: none;
    /* scrolling boxes clip shadows: pad inwards and pull back out so the
       player's drop shadow isn't cut off */
    padding: 10px;
    margin: -10px;
  }
  .player-main::-webkit-scrollbar { display: none; }
  .cvp-player { max-height: max(300px, calc(100dvh - var(--header-h) - 200px)); }
  .player-related { grid-area: related; }
}

@media (min-width: 1600px) {
  .video-feed { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* hover feedback only where there is a real pointer */
@media (hover: hover) and (min-width: 900px) {
  .nav-item:not(.active):hover { background: var(--surface-hover); color: var(--text); }
  .video-card:hover .thumb-wrap,
  .grid-card:hover .thumb-wrap,
  .related-item:hover .thumb-wrap,
  .reel-strip-card:hover .thumb-wrap {
    transform: scale(1.02);
    box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--border));
  }
  .reels-step-btn:hover { background: var(--surface-hover); }
  .chip:not(.active):hover { background: var(--surface-hover); color: var(--text); }
  .following-avatar-item:hover .avatar-circle { filter: brightness(1.1); }
  .report-option:hover { background: var(--surface-hover); border-color: var(--accent); }
}

/* fullscreen playback must not inherit the desktop card styling */
.cvp-player:fullscreen { max-height: none; border-radius: 0; box-shadow: none; aspect-ratio: auto; }
.cvp-player:-webkit-full-screen { max-height: none; border-radius: 0; box-shadow: none; aspect-ratio: auto; }

/* ---- desktop polish (from first real-screen review) ---- */
@media (min-width: 900px) {
  /* The reel shelf spans the whole row, which used to leave the first row
     with a single video and a blank gap. "dense" lets the next videos fill
     that gap so the shelf sits after a full first row. */
  .video-feed { grid-auto-flow: row dense; }

  /* Header and chip rail were translucent enough that thumbnails scrolling
     underneath showed through as blurry colour smears. */
  .app-header, .subview-header {
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .category-rail {
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* ---- desktop polish, from the first real screenshots ---- */
@media (min-width: 900px) {
  /* The reels strip spans the whole row and was inserted after the first
     video, leaving that first row with one card and two empty columns.
     "dense" lets the next videos fill those gaps, so the strip now follows a
     complete row. */
  .video-feed { grid-auto-flow: row dense; }

  /* Content scrolling under the glass header showed up as coloured smears.
     Make the sticky bars almost opaque on desktop. */
  .app-header { background: color-mix(in srgb, var(--bg) 95%, transparent); }
  .category-rail { background: color-mix(in srgb, var(--bg) 95%, transparent); }
  .profile-tabs { background: color-mix(in srgb, var(--bg) 95%, transparent); }
}

.auth-notice { margin: 12px 0 0; }
.auth-notice:empty { display: none; }
.auth-notice:not(:empty) {
  background: var(--gold-dim);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent);
}

/* related list: batches stack like the old single list; "Show more" below */
.related-batch { display: flex; flex-direction: column; gap: 14px; }
.related-list { gap: 14px; }
.related-more { align-self: stretch; width: 100%; margin-top: 4px; }

/* ---- ‹ › arrows on the Reels shelf (computer only) ---- */
.reel-strip-wrap { position: relative; }
.strip-arrow { display: none; }

@media (hover: hover) and (min-width: 900px) {
  .strip-arrow {
    display: grid;
    place-items: center;
    position: absolute;
    top: calc(50% - 46px);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.12s ease, background 0.15s ease;
  }
  .strip-arrow .material-symbols-rounded { font-size: 28px; }
  .strip-arrow-left { left: 10px; }
  .strip-arrow-right { right: 10px; }
  .reel-strip-wrap[data-can-left="1"]:hover .strip-arrow-left,
  .reel-strip-wrap[data-can-right="1"]:hover .strip-arrow-right { opacity: 1; pointer-events: auto; }
  .strip-arrow:hover { background: var(--surface-hover); }
  .strip-arrow:active { transform: scale(0.92); }
}

/* Watch page, wide layout: the related column spans both rows, and a
   spanning item that is taller than the rows it covers hands the extra height
   to every auto row equally — which pushed a big blank gap in under the
   video. Giving the second row all the flexible space keeps the video and its
   details tight together at the top. */
@media (min-width: 1100px) {
  .player-view { grid-template-rows: auto; }
}

/* While Picture-in-Picture is playing, the watch page is hidden like any
   other page — but a video whose page is display:none isn't rendered, and
   browsers may freeze or close its PiP window. So keep the page "visible" to
   the browser and just park it off-screen, with only the player inside. */
#view-player.pip-keepalive:not(.active) {
  display: block;
  position: fixed;
  left: -10000px;
  top: 0;
  width: 640px;
  height: 360px;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}
#view-player.pip-keepalive:not(.active) .player-body,
#view-player.pip-keepalive:not(.active) .player-related { display: none; }

/* Phones: while the video floats in Picture-in-Picture, the pinned player
   area at the top would just be an empty black box. Take it out of the page
   flow so the title, buttons and related videos move up — but park it
   off-screen instead of hiding it (display:none can make browsers close the
   PiP window). Desktop keeps the player in place. */
@media (max-width: 899.98px) {
  #view-player.pip-active .cvp-player {
    position: fixed;
    left: -10000px;
    top: 0;
    width: 320px;
    max-height: none;
    pointer-events: none;
  }
}

/* =====================================================================
   Channels
   ===================================================================== */

/* round picture used for channels everywhere in the new UI */
.ch-avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, var(--border));
}
.ch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ch-avatar .material-symbols-rounded { font-size: 24px; }

/* small status pills */
.chip-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-hover);
  color: var(--text-muted);
}
.chip-badge.on { background: var(--accent-dim); color: var(--accent); }
.chip-badge.ok { background: var(--gold-dim); color: var(--gold); }
.chip-badge.wait { background: var(--surface-hover); color: var(--text-muted); }

/* ---- header: switch channel ---- */
.channel-switch-wrap { position: relative; }
.channel-switch-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 0 6px 0 4px;
  border-radius: 20px;
  transition: background 0.15s ease;
}
.channel-switch-btn .ch-avatar { width: 30px; height: 30px; }
.channel-switch-btn .ch-avatar .material-symbols-rounded { font-size: 18px; }
.channel-switch-btn .caret { font-size: 20px; color: var(--text-muted); }
.channel-switch-btn:active { background: var(--surface-hover); }
@media (hover: hover) { .channel-switch-btn:hover { background: var(--surface-hover); } }

.channel-switch-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: min(70vh, 460px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 80;
}
.channel-switch-popover.open { display: block; animation: popIn 0.18s ease; }
.switch-title { padding: 8px 10px 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.switch-list { display: flex; flex-direction: column; gap: 2px; }
.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  text-align: left;
  transition: background 0.15s ease;
}
.switch-row:active { background: var(--surface-hover); }
.switch-row.active { background: var(--accent-dim); }
@media (hover: hover) { .switch-row:not(.active):hover { background: var(--surface-hover); } }
.switch-row .ch-avatar { width: 36px; height: 36px; }
.switch-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.switch-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.switch-check { color: var(--accent); font-size: 20px; }
.switch-actions { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); display: flex; flex-direction: column; }
.switch-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.switch-action .material-symbols-rounded { font-size: 20px; color: var(--text-muted); }
.switch-action:active { background: var(--surface-hover); }
@media (hover: hover) { .switch-action:hover { background: var(--surface-hover); } }

/* ---- profile: your channels ---- */
.channels-section { width: 100%; max-width: 520px; margin: 22px auto 0; text-align: left; }
.channels-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.channels-head h3 { font-size: 16px; font-weight: 700; }
.channels-count { font-size: 12.5px; color: var(--text-muted); }
.channels-empty { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); padding: 14px; border-radius: 14px; background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: 10px; }
.channel-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.channel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: inset 0 0 0 1px var(--border);
  cursor: pointer;
  transition: box-shadow 0.15s ease, background 0.15s ease;
}
.channel-row.active { box-shadow: inset 0 0 0 1.5px var(--accent); }
.channel-row:active { background: var(--surface-hover); }
@media (hover: hover) { .channel-row:hover { background: var(--surface-hover); } }
.channel-row-info { flex: 1; min-width: 0; }
.channel-row-name { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.channel-row-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-row-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.channel-row-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.channels-new { display: inline-flex; align-items: center; gap: 6px; }
.channels-new .material-symbols-rounded { font-size: 18px; }
.profile-section-title {
  width: 100%;
  max-width: 520px;
  margin: 26px auto 4px;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
}
.profile-note { margin: 12px auto 0; max-width: 320px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; background: var(--gold-dim); }

/* ---- create / edit channel modal ---- */
.channel-avatar-field { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 16px; }
.channel-avatar-btn { position: relative; width: 84px; height: 84px; border-radius: 50%; }
.channel-avatar-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, var(--border));
}
.channel-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.channel-avatar-preview .material-symbols-rounded { font-size: 40px; }
.channel-avatar-cam {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-grad);
  color: var(--on-accent);
  box-shadow: 0 0 0 3px var(--surface);
}
.channel-avatar-cam .material-symbols-rounded { font-size: 17px; }
.channel-avatar-hint { font-size: 12.5px; color: var(--text-muted); }

.handle-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-sunken);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.handle-input:focus-within { border-color: var(--accent); box-shadow: var(--ring); }
.handle-at { padding-left: 14px; color: var(--text-muted); font-weight: 600; }
.handle-input input { border: none !important; box-shadow: none !important; background: transparent !important; padding-left: 4px !important; }

.channel-delete-area { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.channel-delete-btn { color: var(--danger); display: flex; align-items: center; justify-content: center; gap: 6px; }
.channel-delete-btn .material-symbols-rounded { font-size: 19px; }
.channel-delete-confirm { padding: 12px; border-radius: 14px; background: var(--danger-dim); }
.channel-delete-confirm p { font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
.channel-delete-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.channel-delete-yes { background: var(--danger); color: #fff; box-shadow: none; }

@media (min-width: 900px) {
  .channel-switch-popover { width: 340px; }
}