/*!
 * WavePlay — Modern Video Streaming Platform
 * Copyright (c) 2025–2026 WavePlay. All rights reserved. | Contact: contact@waveplay.in
 * Proprietary — see LICENSE file. Not for redistribution.
 * Module: Main stylesheet | Created: 2025-06-01 | Last updated: 2026-08-12
 */
/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700;800;900&display=swap');

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

/* Smooth theme transition on every element */
*, *::before, *::after {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
/* But don't slow down interactive animations */
a, button, .btn, .chip, .sb-item, .video-card, .action-btn, .vault-btn,
.theme-toggle, .notif-btn, .user-chip, .sort-btn, .share-btn {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
}

/* ══════════════════════════════════════════════════════
   DARK THEME  (default)
══════════════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  /* ── Ink (chosen 2026-08-03, replacing Electric) ───────────────────────────
     Neutrals carry the interface; a single blue marks anything you can act on.
     The blue-tinted navy grounds are gone — backgrounds are true neutrals now,
     so any hue on screen means something rather than being ambient.

     The coral family no longer holds a hue: Ink has no pink to give it. It
     survives as a *slate* second emphasis (chart series, active borders) because
     ~10 rules still reference it. `--coral-light` is the exception — every one of
     its uses is a link hover, so it resolves to the action blue. */
  --bg:   #0b0c0e;
  --bg2:  #131519;
  --bg3:  #191c22;
  --bg4:  #22262e;
  --bg5:  #2c313a;

  --border:  rgba(255,255,255,.09);
  --border2: rgba(255,255,255,.17);

  --text:  #f7f8fa;
  --text2: #a0a5b0;
  --text3: #7d8592;  /* 5.2:1 on --bg; #6b7280 fell to 3.8 and this drives 12px meta */

  /* --accent fills buttons and carries white text; --accent-light is for text and
     links on a dark ground. Keeping that split is why the two differ this much. */
  --accent:       #2f6ae0;
  --accent2:      #2455bb;
  --accent-light: #8fb4ff;
  --accent-glow:  rgba(47,106,224,.18);

  --coral:        #94a3b8;   /* slate — second emphasis, never carries text */
  --coral-light:  #8fb4ff;   /* link hover — the action blue */
  --coral-glow:   rgba(143,180,255,.14);

  --grad:      linear-gradient(135deg, #2f6ae0 0%, #143fae 100%);
  /* Was pink-into-deeper-pink to keep the "liked" state distinct from --grad.
     Same idea, one hue up: light blue into the action blue. */
  --grad-warm: linear-gradient(135deg, #8fb4ff 0%, #2f6ae0 100%);
  --grad-soft: linear-gradient(135deg, rgba(47,106,224,.16) 0%, rgba(255,255,255,.04) 100%);

  /* sidebar */
  --sb-bg:       #08090b;
  --sb-brand-bg: linear-gradient(160deg, #101318 0%, #0b0c0e 100%);
  --sb-active-bg: rgba(47,106,224,.16);
  --sb-active-border: #2f6ae0;

  /* Status, not brand. Left alone deliberately: on a neutral ground these still
     read as success and failure, which is the whole reason Ink can afford them. */
  --green: #22c55e;
  --red:   #ef4444;

  --nav-bg: rgba(11,12,14,.92);
  --card-shadow:  0 4px 28px rgba(0,0,0,.55);
  --glow-shadow:  0 0 28px rgba(47,106,224,.20);
}

/* ══════════════════════════════════════════════════════
   LIGHT THEME
══════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Ink, light. The old surfaces were blue-tinted (#f0f5ff, #e4ecfc); these are
     true neutrals, so the blue only ever appears on something actionable. */
  --bg:   #ffffff;
  --bg2:  #f7f8fa;
  --bg3:  #f0f1f5;
  --bg4:  #e6e8ee;
  --bg5:  #d9dce4;

  --border:  rgba(16,17,20,.10);
  --border2: rgba(16,17,20,.20);

  --text:  #101114;
  --text2: #5b5e67;
  --text3: #6a6f7b;  /* 5.0:1 on white — #8b8f9a measured 3.0 and failed AA */

  --accent:       #1a4fd6;
  --accent2:      #143fae;
  --accent-light: #1a4fd6;
  --accent-glow:  rgba(26,79,214,.12);

  --coral:        #4a5568;   /* slate — second emphasis, never carries text */
  --coral-light:  #1a4fd6;   /* link hover — the action blue */
  --coral-glow:   rgba(26,79,214,.10);

  --grad:      linear-gradient(135deg, #1a4fd6 0%, #0f2f8f 100%);
  --grad-warm: linear-gradient(135deg, #4a7ff0 0%, #1a4fd6 100%);
  --grad-soft: linear-gradient(135deg, rgba(26,79,214,.10) 0%, rgba(16,17,20,.04) 100%);

  --sb-bg:       #ffffff;
  --sb-brand-bg: linear-gradient(160deg, #f7f8fa 0%, #ffffff 100%);
  --sb-active-bg: rgba(26,79,214,.08);
  --sb-active-border: #1a4fd6;

  --nav-bg: rgba(255,255,255,.95);
  --card-shadow:  0 2px 16px rgba(16,17,20,.08);
  --glow-shadow:  0 0 24px rgba(26,79,214,.16);
}

/* ── Shared constants ─────────────────────────────────────────────────────── */
:root {
  --nav-h:     60px;
  --sidebar-w: 256px;
  /* ── Radius (Option Y — soft tactile) ──────────────────────────────────────
     Chosen 2026-08-01. Surfaces round to ~19px so the interface reads as a set
     of soft objects rather than a dashboard of panels. 49 rules already consume
     these two tokens — including .video-card — so the change lands almost
     everywhere from here rather than from a sweep of individual values.

     --radius-sm stops at 12px on purpose: it dresses short elements (chips,
     menu items, inputs ~26-36px tall) and anything much larger turns them into
     pills, which is a different look and not this one. Genuine pills keep their
     own explicit 40px. Circles stay 50%. */
  --radius:    19px;
  --radius-sm: 12px;
  /* ── Motion ────────────────────────────────────────────────────────────────
     Three durations, two curves, one spring. Before this there was a single
     token (.18s ease) doing hovers, modals, drawers and page changes alike, so
     nothing could feel different from anything else — a colour flip took as long
     as a drawer crossing the screen.

     Pick by distance, not by importance: --dur-fast for something changing in
     place, --dur-base for most movement, --dur-slow only when an element crosses
     real distance. --ease-out for things arriving (fast then settling),
     --ease-inout for a symmetrical move between two states, --ease-spring only
     where an overshoot reads as physical — a toast, a tab indicator. Never
     spring an opacity fade; there is nothing to overshoot.

     --transition stays as an alias so the ~55 existing call sites all move
     together. Change the alias and the whole site's default feel changes. */
  --dur-fast:.12s;
  --dur-base:.22s;
  --dur-slow:.38s;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-inout:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --transition:var(--dur-base) var(--ease-out);
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  /* Body font: DM Sans — soft, open, easy at small sizes */
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  transition: background .2s, color .2s;
}

/* Heading font: Outfit — rounded, wide apertures, friendlier than a grotesk.
   Chosen 2026-07-30, replacing Space Grotesk + Inter. */
h1, h2, h3, h4, .logo-text, .watch-title, .auth-card h1,
.upload-wrap h1, .section-header h2, .featured-title {
  font-family: 'Outfit', 'DM Sans', system-ui, sans-serif;
  letter-spacing: -.01em;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; color: inherit; font: inherit; }

input, textarea, select {
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
select option { background: var(--bg3); color: var(--text); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg5); }

/* ── Theme Toggle Button ──────────────────────────────────────────────────── */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg3); border: 1.5px solid var(--border2);
  color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition);
  position: relative; overflow: hidden;
}
.theme-toggle:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent-light);
  transform: rotate(20deg);
}
.theme-toggle:active { transform: scale(.9) rotate(20deg); }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; z-index: 200;
  transition: background .25s;
}
.navbar::after {
  content: '';
  position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(58,123,213,.6) 35%, rgba(232,112,154,.6) 65%, transparent 100%);
}

.nav-logo {
  display: flex; align-items: center; gap: 9px;
  font-size: 18px; font-weight: 700;
  white-space: nowrap; letter-spacing: -.4px;
  font-family: 'Outfit', sans-serif;
}
.logo-icon {
  width: 33px; height: 33px; border-radius: 9px;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--border2);
  box-shadow: 0 2px 14px rgba(58,123,213,.25);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.logo-icon:hover { box-shadow: 0 4px 22px rgba(58,123,213,.45); border-color: var(--accent); }
.logo-text { font-family: 'Outfit', sans-serif; }
/* Pinned, not themed. The rule is that the wordmark's colour never changes with
   the theme, but these read --accent-light / --coral-light, so under Ink the "Play"
   half would have turned blue and the logo would have quietly stopped being the
   logo. These four values are exactly what Electric resolved to, frozen. Any future
   palette leaves them alone — change them only to redesign the mark itself. */
.logo-wave { color: #6fa8f5; font-weight: 800; }
.logo-play { color: #f5a7c7; font-weight: 800; }
[data-theme="light"] .logo-wave { color: #2563b0; }
[data-theme="light"] .logo-play { color: #c4527a; }

.nav-search {
  flex: 1; max-width: 500px; margin: 0 auto;
  display: flex; border-radius: 40px; overflow: hidden;
  border: 1.5px solid var(--border2);
  background: var(--bg3);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.nav-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.nav-search input {
  border: none; border-radius: 0; background: transparent;
  padding: 9px 16px; font-size: 14px; box-shadow: none;
}
.nav-search input:focus { border-color: transparent; box-shadow: none; }
.nav-search button {
  background: transparent; padding: 0 14px; font-size: 14px;
  border-left: 1px solid var(--border);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0; color: var(--text3);
}
.nav-search button:hover { background: var(--bg4); color: var(--accent); }

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 40px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap; cursor: pointer; border: none;
  letter-spacing: .01em;
}
.btn:active { transform: scale(.96); }
.btn-primary {
  background: var(--grad); color: #fff;
  box-shadow: 0 2px 18px rgba(58,123,213,.30);
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 4px 28px rgba(58,123,213,.40); }
.btn-ghost {
  background: var(--bg3); color: var(--text);
  border: 1.5px solid var(--border2);
}
.btn-ghost:hover { background: var(--bg4); border-color: var(--accent); color: var(--accent-light); }
.btn-danger {
  background: rgba(239,68,68,.1); color: var(--red);
  border: 1.5px solid rgba(239,68,68,.2);
}
.btn-danger:hover { background: rgba(239,68,68,.2); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn:disabled { opacity: .45; pointer-events: none; }

/* Shared inline spinner for async button feedback — see setBtnLoading() in auth.js */
.btn-spinner {
  display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: btn-spin .7s linear infinite;
}
.btn-ghost .btn-spinner, .btn-danger .btn-spinner { border-color: var(--border2); border-top-color: var(--text); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── User Chip ────────────────────────────────────────────────────────────── */
.user-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 40px;
  background: var(--bg3); border: 1.5px solid var(--border2);
  cursor: pointer; transition: all var(--transition); position: relative;
}
.user-chip:hover { background: var(--bg4); border-color: var(--accent); }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
}
.user-chip > span { font-size: 13px; font-weight: 600; }
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm); min-width: 178px;
  box-shadow: var(--card-shadow);
  display: none; z-index: 300; overflow: hidden;
  transition: background .25s;
}
.user-dropdown.open { display: block; }
.user-dropdown a, .user-dropdown button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; width: 100%; font-size: 13px;
  text-align: left; color: var(--text2);
  transition: background var(--transition), color var(--transition);
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--bg3); color: var(--text); }
.user-dropdown hr { border: none; border-top: 1px solid var(--border); }
.theme-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 12px; cursor: pointer; width: 100%;
  font-size: 13px; color: var(--text2);
  transition: background var(--transition), color var(--transition);
}
.theme-row:hover { background: var(--bg3); color: var(--text); }
.theme-pill {
  width: 40px; height: 22px; border-radius: 11px; flex-shrink: 0;
  background: var(--bg5); position: relative;
  transition: background .25s;
  pointer-events: none;
}
.theme-pill.on { background: var(--accent); }
.theme-pill::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: left .25s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.theme-pill.on::after { left: 21px; }

/* ════════════════════════════════════════════════════
   SIDEBAR  — redesigned
════════════════════════════════════════════════════ */
.sb-hamburger {
  background: none; border: none; color: var(--text3);
  cursor: pointer; padding: 6px; border-radius: 8px;
  margin-right: 2px; flex-shrink: 0;
  transition: color var(--transition), background var(--transition);
  display: flex; align-items: center;
}
.sb-hamburger:hover { color: var(--accent); background: var(--accent-glow); }

.sv-sidebar {
  position: fixed; top: var(--nav-h); left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sb-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto; overflow-x: hidden;
  z-index: 150;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--bg4) transparent;
  transition: transform .28s cubic-bezier(.4,0,.2,1), background .25s;
}
.sv-sidebar::-webkit-scrollbar { width: 3px; }


/* ── Sections ── */
.sb-section { padding: 8px 10px; flex-shrink: 0; }
.sb-heading {
  font-family: 'Outfit', sans-serif;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--text3); padding: 8px 8px 6px;
}
.sb-divider { border-top: 1px solid var(--border); margin: 4px 12px; }

/* ── Nav item ── */
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  color: var(--text2); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: color var(--transition);
  text-decoration: none; white-space: nowrap;
  position: relative;
}
.sb-item:hover { color: var(--text); }
.sb-item.active { color: var(--accent-light); font-weight: 600; }
[data-theme="light"] .sb-item.active { color: var(--accent2); }

/* ── Circle badge icon ── */
.sb-icon-wrap {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg3); flex-shrink: 0;
  transition: background var(--transition);
}
.sb-icon-wrap i { font-size: 17px; color: var(--text3); transition: color var(--transition); }
.sb-item:hover .sb-icon-wrap { background: var(--bg4); }
.sb-item:hover .sb-icon-wrap i { color: var(--accent); }
.sb-item.active .sb-icon-wrap { background: var(--accent); }
.sb-item.active .sb-icon-wrap i { color: #fff; }

.sb-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.sb-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* animated dot for active item */
.sb-active-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 6px var(--accent);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.7); }
}

/* ── Category icon (monochrome, distinguished by glyph not color) ── */
.sb-cat-icon {
  font-size: 15px; width: 20px; text-align: center; flex-shrink: 0;
  color: var(--text3); transition: color var(--transition), transform var(--transition);
}
.sb-item:hover .sb-cat-icon { color: var(--accent); transform: scale(1.15); }
.sb-item.active .sb-cat-icon { color: var(--accent-light); }
[data-theme="light"] .sb-item.active .sb-cat-icon { color: var(--accent2); }

/* ── Upload CTA ── */
.sb-upload-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--grad); color: #fff !important;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all var(--transition); text-decoration: none;
  margin-bottom: 6px;
  font-family: 'Outfit', sans-serif;
  box-shadow: 0 2px 14px rgba(58,123,213,.25);
  border: none;
}
.sb-upload-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 20px rgba(37,99,235,.45); transform: translateY(-1px); }

/* ── Sidebar footer ── */
.sb-footer {
  margin-top: auto; padding: 14px 16px;
  font-size: 10px; color: var(--text3);
  border-top: 1px solid var(--border); letter-spacing: .3px;
}
.sb-footer-links {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px;
}
.sb-footer-link {
  font-size: 11px; color: var(--text3); text-decoration: none;
  transition: color .18s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-footer-link:hover { color: var(--text); }

/* ── Backdrop ── */
.sb-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 149; backdrop-filter: blur(2px);
}
.sb-backdrop.show { display: block; }

/* Closed by default, toggled via the hamburger in the fixed navbar (sidebar.js). */
.sv-sidebar { transform: translateX(-100%); }
.sv-sidebar.open { transform: translateX(0); }

/* From 900px up the sidebar OCCUPIES space rather than covering the page: opening
   it insets .page-body by the sidebar's own width and the grid reflows into what
   is left. Changed 2026-08-02 — it was an overlay drawer at every size, which
   meant opening the menu hid the content you were using it to navigate.
   The backdrop goes with it: there is nothing to dim when nothing is covered.

   Below 1100px it stays an overlay. The threshold is 1100 rather than the 900 the
   rest of the layout uses, because the home page also carries a 240px "Channels to
   Ride" aside: with the sidebar open the grid gets viewport − 560px, so anything
   under ~1074px collapses to a single 435px card in a column of its own. Measured,
   not guessed. 1100 is already a breakpoint in this file (.watch-sidebar), so this
   adds no new one. */
@media (min-width: 1101px) {
  .page-body { transition: margin-left var(--dur-base) var(--ease-out); }
  body.sb-open .page-body { margin-left: var(--sidebar-w); }
  body.sb-open .sb-backdrop.show { display: none; }
}
/* First paint only — see the sb-no-anim note in sidebar.js. */
body.sb-no-anim .page-body { transition: none !important; }

/* ── Page Layout ──────────────────────────────────────────────────────────── */
.page-body {
  padding-top: var(--nav-h);
  padding-left: 4px;
  min-height: 100vh;
}
/* ── Home two-column layout ───────────────────────────────────────────────── */
/* 1660px, not 1600. The grid is repeat(auto-fill, minmax(250px, 1fr)) with a 14px
   column gap, sitting beside a 240px aside — which puts the 4-column/5-column
   boundary at exactly 1606px. A 1600 cap lands six pixels below that cliff, so any
   later nudge to the gap, the aside or this padding would silently reflow the whole
   page from 5 cards to 4. 1660 sits 54px clear of it and keeps cards at ~260px,
   which is what they already measured at full bleed — the page gains an edge
   without the grid changing density.

   It also matches the push sidebar: a 1920 screen with the sidebar open leaves
   1664px, so opening the menu shifts the page but never reflows the grid. */
.home-outer {
  display: flex; align-items: flex-start; gap: 24px;
  padding: 0 18px;
  max-width: 1660px; margin: 0 auto;
}
.home-wrap { flex: 1; min-width: 0; padding: 20px 0 60px; }

/* Search and trending reuse .home-wrap but hang it straight off .page-body rather
   than nesting it in .home-outer, so they were the only two pages still running
   edge to edge — every other page already caps and centres itself in its own
   <style> block (riding 1200, series/challenges 1000, office-hours 960,
   analytics 960, collections 960, playlists 900, scheduled 860, history/profile/
   downloads 1100). Those are narrower on purpose and are left alone.
   Direct-child selector matters: inside .home-outer, .home-wrap is a flex child
   that must keep filling its column, and capping it there would fight the layout.
   Collections also uses .home-wrap but carries its own inline max-width, which
   wins over this. */
.page-body > .home-wrap {
  max-width: 1660px;
  margin-inline: auto;
  padding-inline: 18px;
}
.home-sidebar {
  width: 240px; flex-shrink: 0;
  padding-top: 20px; padding-bottom: 60px;
}
.sidebar-sticky {
  position: sticky; top: 72px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
}
.creator-spotlight-col {
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Creator Spotlight ────────────────────────────────────────────────────── */
.creator-spotlight-row {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 16px;
  scrollbar-width: none;
}
.creator-spotlight-row::-webkit-scrollbar { display: none; }
.creator-chip {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 9px 10px; flex-shrink: 0;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .15s, background .15s;
  text-decoration: none; color: inherit;
}
.creator-chip:hover { border-color: var(--accent); background: var(--bg2); }
.creator-chip-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--grad); display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; overflow: hidden;
}
.creator-chip-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-chip-info { flex: 1; min-width: 0; }
.creator-chip-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-chip-meta { font-size: 11px; color: var(--text3); margin-top: 1px; }
.ride-chip-btn {
  flex-shrink: 0; padding: 4px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--accent); color: var(--accent-light); background: transparent;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.ride-chip-btn:hover { background: var(--accent); color: #fff; }
.ride-chip-btn.riding { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Category Bar ─────────────────────────────────────────────────────────── */
.category-bar {
  display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 12px; scrollbar-width: none;
  /* Fade the right edge so it's visually clear the row scrolls — no scrollbar is shown */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.category-bar::-webkit-scrollbar { display: none; }
.chip {
  padding: 7px 18px; border-radius: 40px;
  background: var(--bg3); border: 1.5px solid var(--border);
  white-space: nowrap; font-size: 13px; font-weight: 600;
  font-family: 'Outfit', sans-serif;
  cursor: pointer; flex-shrink: 0;
  transition: all var(--transition); color: var(--text3);
}
.chip:hover { background: var(--bg4); color: var(--text); border-color: var(--border2); }
.chip.active {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 2px 14px rgba(58,123,213,.25);
}

/* Sort bar */
.sort-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.sort-bar > span { color: var(--text3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; font-family: 'Outfit', sans-serif; }
.sort-btn {
  padding: 6px 14px; border-radius: 40px;
  background: transparent; border: 1.5px solid var(--border);
  font-size: 13px; font-weight: 500; color: var(--text3); cursor: pointer;
  transition: all var(--transition);
}
.sort-btn:hover { background: var(--bg3); color: var(--text); border-color: var(--border2); }
.sort-btn.active {
  background: rgba(58,123,213,.1); color: var(--accent-light);
  border-color: rgba(58,123,213,.30); font-weight: 700;
}
[data-theme="light"] .sort-btn.active { color: var(--accent2); }

/* ── Feed tabs (For You / Riding / Trending) ──────────────────────────────────
   Deliberately heavier than the sort buttons below them: the tab is the primary
   choice and the sort is a refinement, so they must not read as one row of five
   equal controls. Underline rather than pill, for the same reason. */
.feed-tabs { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.feed-tab {
  padding: 9px 16px 10px; border: 0; background: none; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 600;
  color: var(--text3); border-bottom: 2.5px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.feed-tab:hover { color: var(--text); }
.feed-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.feed-tab:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 4px; }

/* ── Trending near you (home aside) ───────────────────────────────────────── */
.rt-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 6px; border-radius: var(--radius-sm);
  text-decoration: none; color: inherit;
  transition: background var(--transition);
}
.rt-item:hover { background: var(--bg3); }
.rt-rank {
  flex: none; width: 16px; text-align: center;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 800; color: var(--text3);
  font-variant-numeric: tabular-nums;
}
.rt-thumb {
  flex: none; width: 62px; aspect-ratio: 16/9; border-radius: 7px;
  overflow: hidden; background: var(--bg3);
}
.rt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-thumb-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--text3); font-size: 13px; }
.rt-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rt-title {
  font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rt-sub { font-size: 11px; color: var(--text3); }

/* ── Accessibility ────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Video Grid ───────────────────────────────────────────────────────────── */
/* 250px, down from 295px — a little smaller per card, so more fit per row and the
   grid reads denser. Every card is this width; there is no oversized first tile
   any more (see the home-grid note further down). */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px 14px; }

.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: var(--radius);
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skeleton-thumb { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); }
.skeleton-line { height: 12px; border-radius: 6px; margin-top: 9px; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w60 { width: 60%; }

.video-card {
  position: relative;
  border-radius: var(--radius);
  background: var(--bg2); border: 1px solid var(--border); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  cursor: pointer;
}
.card-link {
  position: absolute; inset: 0; z-index: 0;
}
/* Interactive children sit above the card-link overlay.
   `.card-link` is an absolutely positioned <a> covering the entire card, so anything
   below it in the stack is unreachable no matter what handlers it carries. That is
   the other half of why creator links did not work: the avatar and the channel name
   were never listed here, so the overlay swallowed every click on them. Any new
   interactive element inside a card must be added to this list. */
.video-uploader, .card-tag, .play-overlay,
.creator-link, .creator-channel, .creator-username { position: relative; z-index: 1; }
.video-card:hover { transform: translateY(-5px); box-shadow: var(--glow-shadow); border-color: rgba(58,123,213,.25); }

.video-thumb { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--bg3); overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.video-card:hover .video-thumb img { transform: scale(1.07); }
.thumb-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bg3), var(--bg4));
  font-size: 36px; color: var(--text3);
}
.duration-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.82); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; letter-spacing: .3px;
}

/* ── Owner card menu — three-dot "Edit Video" toggle on hover ──────────────── */
/* Lives in .video-meta (the title/stats area), anchored to its bottom-right corner. */
.video-meta { position: relative; }
.card-menu-btn {
  position: absolute; bottom: 8px; right: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg3); color: var(--text2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer;
  opacity: 0; transform: scale(.85);
  transition: opacity .18s, transform .18s, background .15s, color .15s;
}
.video-card:hover .card-menu-btn, .card-menu-btn.open { opacity: 1; transform: scale(1); }
.card-menu-btn:hover { background: var(--bg4); color: var(--text); }
.card-menu {
  position: absolute; bottom: 38px; right: 8px; z-index: 3;
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm); min-width: 150px;
  box-shadow: var(--card-shadow);
  display: none; overflow: hidden;
}
.card-menu.open { display: block; }
.card-menu button {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; width: 100%; font-size: 12.5px;
  text-align: left; color: var(--text2); background: none; border: none;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.card-menu button:hover { background: var(--bg3); color: var(--text); }
.play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0); transition: background var(--transition);
}
.video-card:hover .play-overlay { background: rgba(0,5,20,.3); }
.play-overlay .play-btn {
  opacity: 0; transform: scale(.7);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(58,123,213,.40);
}
.video-card:hover .play-overlay .play-btn { opacity: 1; transform: scale(1); }
.play-btn svg { margin-left: 3px; }

.video-meta { padding: 12px 14px 14px; display: flex; gap: 10px; }
.video-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #fff;
  font-family: 'Outfit', sans-serif;
}
/* The avatar is a link to the creator wherever a card shows one, so it has to look
   and behave like one — a bare <a> would otherwise inherit the card's cursor and
   give no hover or keyboard affordance at all. `text-decoration:none` matters
   because the initial is link text and would otherwise be underlined. */
a.video-avatar, .creator-avatar-link {
  cursor: pointer; text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
a.video-avatar:hover, .creator-avatar-link:hover {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px var(--bg2), 0 0 0 4px var(--accent-light);
}
/* Office-hours host avatar: the circle styling lives on the parent, so the link
   just fills it and inherits the colour. */
.oh-avatar-link {
  display: flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
  color: inherit; text-decoration: none;
}
/* Keyboard users get the same ring without needing hover. */
.creator-link:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 2px;
  border-radius: 4px;
}
.video-info { flex: 1; min-width: 0; }
/* Title / creator hierarchy on a card, chosen from five options 2026-07-31.
   The title used to be 14px/600 against a 13px/700 creator line in the same
   full-strength text colour — technically bigger, but out-weighed and out-coloured,
   so the creator read as the headline. The gap is now size, weight AND colour. */
.video-title {
  font-size: 16px; font-weight: 700; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 4px; color: var(--text);
  font-family: 'Outfit', sans-serif;
}
/* All three are the creator line in some context. They stay separate classes because
   page code targets them by name, but they must look identical — a card showing a
   channel and a card falling back to a handle should not be different sizes. */
.video-uploader, .creator-channel, .creator-username {
  font-size: 12px; color: var(--text2); font-weight: 500; margin-bottom: 3px;
  display: block; cursor: pointer; text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}
.video-uploader:hover, .creator-channel:hover, .creator-username:hover {
  color: var(--accent-light); text-decoration: underline;
}
[data-theme="light"] .video-uploader:hover,
[data-theme="light"] .creator-channel:hover,
[data-theme="light"] .creator-username:hover { color: var(--accent2); }
/* Creator name sitting inline inside a stats/meta line ("Name · 12 views · 3d ago").
   `.creator-username` is display:block with a bottom margin, which would break the
   line onto its own row, so inline uses override both and inherit the line's size. */
.creator-inline {
  display: inline; margin-bottom: 0; font-size: inherit;
  color: inherit; font-weight: 600;
}
.creator-inline:hover { color: var(--coral-light); text-decoration: underline; opacity: 1; }
[data-theme="light"] .creator-inline:hover { color: var(--coral); }
/* The spotlight creator is its own line, so it only needs link affordances. */
a.tvw-creator { text-decoration: none; cursor: pointer; }
a.tvw-creator:hover { color: var(--accent-light); text-decoration: underline; }
/* The light-theme colour overrides that used to sit here are gone: they were what
   made the creator line as dark as the title, which is the hierarchy problem the
   16px/12px split was meant to fix. The base rule handles both themes now. */
.video-stats { font-size: 12px; color: var(--text3); }

.empty-state { grid-column: 1/-1; text-align: center; padding: 80px 20px; }
.empty-state .icon { font-size: 68px; margin-bottom: 16px; opacity: .25; }
.empty-state h2 { font-size: 22px; color: var(--text); margin-bottom: 8px; font-weight: 700; }
.empty-state p { color: var(--text2); margin-bottom: 22px; }
.load-more-wrap { text-align: center; padding: 28px 0; }

/* ── Watch Page ───────────────────────────────────────────────────────────── */
.watch-layout { display: flex; gap: 26px; max-width: 1380px; margin: 0 auto; padding: 24px 18px; }
.watch-main { flex: 1; min-width: 0; }
.player-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #000; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,.6), 0 0 0 1px var(--border);
}
.player-wrap video { width: 100%; height: 100%; display: block; }
.watch-title { font-size: 20px; font-weight: 700; margin: 16px 0 12px; line-height: 1.3; }
/* The watch band (2026-08-04). Creator on the left, actions right-aligned on the
   same line. The single bottom border belongs to the band — .uploader-row and
   .watch-actions each carried their own before they were siblings, which would
   now draw a rule straight through the middle of the row. */
.watch-band {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 0 0 14px; border-bottom: 1px solid var(--border);
}
.watch-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-left: auto;
}
/* display:contents so injected Share buttons become direct children of
   .watch-actions — otherwise the slot itself is the flex item and the gap
   between Like and Share collapses. */
.share-slot { display: contents; }
.action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 40px;
  background: var(--bg3); border: 1.5px solid var(--border2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--transition); color: var(--text2);
}
.action-btn:hover { background: var(--bg4); border-color: var(--accent); color: var(--accent-light); }
.action-btn.liked { background: var(--grad-warm); border-color: transparent; color: #fff; box-shadow: 0 2px 16px rgba(232,112,154,.32); }

.more-menu-wrap { position: relative; }
#moreBtn { padding: 8px 12px; }
.more-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm); min-width: 190px;
  box-shadow: var(--card-shadow);
  display: none; z-index: 300; overflow: hidden;
}
.more-menu.open { display: block; }
.more-menu button, .more-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; width: 100%; font-size: 13px;
  text-align: left; color: var(--text2); background: none; border: none;
  cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.more-menu button:hover, .more-menu a:hover { background: var(--bg3); color: var(--text); }
.watch-desc-box {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin: 14px 0; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.watch-desc-box:hover { background: var(--bg3); border-color: var(--border2); }
/* Upload date, top-left of the description box. Sits above the text rather than
   beside it: the description is `white-space: pre-wrap` with a max-height clamp, so
   a floated or absolutely positioned date would either be overlapped by a long first
   line or knocked out of the clamp's flow. */
.desc-date {
  font-size: 12px; font-weight: 700; color: var(--text3);
  letter-spacing: .3px; margin-bottom: 8px;
}
.watch-desc-box p { font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow: hidden; max-height: 72px; transition: max-height .3s; color: var(--text2); }
.watch-desc-box p.expanded { max-height: 2000px; }
.tags-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  padding: 4px 11px; border-radius: 40px;
  background: rgba(58,123,213,.09); font-size: 12px;
  color: var(--accent-light); border: 1px solid rgba(58,123,213,.20);
  transition: background var(--transition);
}
.tag:hover { background: rgba(58,123,213,.17); }
[data-theme="light"] .tag { color: var(--accent2); }
/* Lives inside .watch-band now — the band owns the padding and the rule. */
/* 200px basis, not 260: the watch column is 663px at a 1024 window, and 260 + the
   424px action set overflows it by 35px, so the band broke onto two lines on a
   narrow laptop. At 200 the creator compresses instead and the band holds one line
   down to the 768px breakpoint, where it stacks on purpose. */
.uploader-row { display: flex; align-items: center; gap: 12px; flex: 1 1 200px; min-width: 0; }
.uploader-avatar {
  width: 42px; height: 42px; border-radius: 50%; background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(58,123,213,.25);
  font-family: 'Outfit', sans-serif;
}
/* The watch-page creator line. It is an <a>, and it deliberately keeps its own size
   rather than inheriting the 12px card treatment — the watch page hierarchy was left
   alone. Declared after .creator-channel so it wins on the shared properties. */
.uploader-name {
  font-weight: 700; font-size: 15px; font-family: 'Outfit', sans-serif;
  color: var(--text); text-decoration: none; display: block;
  transition: color var(--transition);
}
.uploader-name:hover { color: var(--accent-light); text-decoration: underline; }
[data-theme="light"] .uploader-name:hover { color: var(--accent2); }
.uploader-date { font-size: 12px; color: var(--text3); margin-top: 1px; }
.comments-section { margin-top: 22px; }
.comments-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.comment-form { margin-bottom: 20px; }
.comment-form textarea { width: 100%; resize: vertical; min-height: 76px; border-radius: var(--radius-sm); margin-bottom: 8px; }
.comment-form-row { display: flex; justify-content: flex-end; gap: 8px; }
.comment-list { display: flex; flex-direction: column; gap: 16px; }
.comment-item { display: flex; gap: 10px; }
.comment-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  /* Was var(--bg4) with accent-coloured text — the only avatar on the site not
     carrying the logo gradient, so comment threads read as unbranded beside every
     other avatar. White initial on the gradient, matching .user-avatar. */
  background: var(--grad); border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0; color: #fff;
}
.comment-author { font-weight: 700; font-size: 13px; color: var(--text); font-family: 'Outfit', sans-serif; }
.comment-author .time { font-weight: 400; color: var(--text3); font-size: 12px; margin-left: 8px; font-family: 'DM Sans', sans-serif; }
.comment-text { font-size: 14px; line-height: 1.6; margin-top: 3px; color: var(--text2); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; opacity: 0; pointer-events: none; transition: opacity var(--transition);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--radius); padding: 28px;
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  transform: translateY(24px); transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: var(--glow-shadow), var(--card-shadow);
}
.modal-overlay.open .modal { transform: translateY(0); }
.modal h2 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.modal .form-group { margin-bottom: 16px; }
.modal .form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; color: var(--text3); font-family: 'Outfit', sans-serif; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

.watch-sidebar { width: 360px; flex-shrink: 0; }
.sidebar-title { font-size: 11px; font-weight: 700; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--text3); font-family: 'Outfit', sans-serif; }
.sidebar-card { display: flex; gap: 10px; padding: 8px; border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition); margin-bottom: 4px; border: 1px solid transparent; }
.sidebar-card:hover { background: var(--bg2); border-color: var(--border); }
.sidebar-thumb { width: 154px; flex-shrink: 0; aspect-ratio: 16/9; border-radius: 7px; overflow: hidden; background: var(--bg3); position: relative; }
.sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-thumb .thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text3); }
.sidebar-thumb .duration-badge { font-size: 11px; padding: 1px 5px; }
.sidebar-info { flex: 1; min-width: 0; padding-top: 1px; }
.s-title { font-size: 13px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: 'Outfit', sans-serif; }
.s-uploader { font-size: 11px; color: var(--accent-light); margin-top: 3px; font-weight: 600; }
/* Sidebar suggestion creator is a link; it needs its own line back (an <a> is
   inline by default, where the <div> it replaced was block) plus link affordances. */
a.s-uploader { display: block; text-decoration: none; cursor: pointer; width: fit-content; }
a.s-uploader:hover { color: var(--coral-light); text-decoration: underline; }
[data-theme="light"] a.s-uploader:hover { color: var(--coral); }
.s-stats { font-size: 11px; color: var(--text3); margin-top: 2px; }

/* ── Auth Pages ───────────────────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: calc(var(--nav-h) + 24px) 16px 40px; }
.auth-card {
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--radius); padding: 36px 40px;
  width: 100%; max-width: 420px;
  box-shadow: var(--glow-shadow), var(--card-shadow);
}
.auth-card h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.auth-card h1 span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.auth-card .subtitle { color: var(--text3); margin-bottom: 28px; font-size: 14px; }
.auth-card .form-group { margin-bottom: 16px; }
.auth-card .form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 7px; font-family: 'Outfit', sans-serif; }
.auth-card .btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; border-radius: var(--radius-sm); margin-top: 4px; }
.auth-card .alt-link { text-align: center; margin-top: 22px; color: var(--text3); font-size: 14px; }
.auth-card .alt-link a { color: var(--accent-light); font-weight: 700; }
[data-theme="light"] .auth-card .alt-link a { color: var(--accent2); }
.auth-card .alt-link a:hover { text-decoration: underline; }
.field-error { font-size: 12px; color: var(--red); margin-top: 5px; display: none; }
.field-error.show { display: block; }

/* ── Upload Page ──────────────────────────────────────────────────────────── */
.upload-wrap { max-width: 740px; margin: 0 auto; padding: 36px 18px; }
.upload-wrap h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.upload-wrap h1 span { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.upload-wrap .subtitle { color: var(--text3); margin-bottom: 28px; font-size: 14px; }
.drop-zone {
  border: 2px dashed rgba(58,123,213,.25); border-radius: var(--radius);
  padding: 52px 24px; text-align: center; cursor: pointer;
  background: var(--grad-soft); transition: all var(--transition); margin-bottom: 20px;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--accent); background: var(--accent-glow); box-shadow: var(--glow-shadow); }
.drop-zone .dz-icon { font-size: 52px; margin-bottom: 14px; }
.drop-zone h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.drop-zone p { color: var(--text3); font-size: 13px; }
.upload-preview { display: none; gap: 12px; align-items: center; background: var(--bg2); border: 1.5px solid var(--border2); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; }
.upload-preview .file-name { font-weight: 700; font-size: 14px; }
.upload-preview .file-size { font-size: 12px; color: var(--text3); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); margin-bottom: 7px; font-family: 'Outfit', sans-serif; }
.form-hint { font-size: 12px; color: var(--text3); margin-top: 5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group textarea { min-height: 100px; resize: vertical; }
.progress-bar-wrap { display: none; background: var(--bg3); border-radius: 40px; height: 6px; margin: 14px 0; overflow: hidden; }
.progress-bar { height: 100%; background: var(--grad); border-radius: 40px; width: 0%; transition: width .3s; }
#progressLabel { font-size: 12px; color: var(--text3); margin-bottom: 12px; display: none; }
.divider { border: none; border-top: 1px solid var(--border); margin: 6px 0 20px; }

/* ── Toast ────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--bg3); border: 1.5px solid var(--border2);
  border-radius: var(--radius-sm); padding: 13px 20px;
  font-size: 14px; font-weight: 600; z-index: 9999;
  box-shadow: var(--card-shadow); transform: translateY(80px); opacity: 0;
  transition: all .28s cubic-bezier(.34,1.56,.64,1); max-width: 320px;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }

/* ── Notifications ────────────────────────────────────────────────────────── */
.notif-btn {
  position: relative; background: var(--bg3); border: 1.5px solid var(--border2);
  color: var(--text3); padding: 7px; border-radius: 50%;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition); flex-shrink: 0;
}
.notif-btn:hover { color: var(--accent-light); border-color: var(--accent); background: var(--accent-glow); }
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--coral); color: #fff;
  font-size: 10px; font-weight: 700;
  min-width: 16px; height: 16px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; border: 2px solid var(--bg);
}
.notif-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: var(--radius); width: 340px; max-height: 420px;
  overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.4);
  display: none; z-index: 300;
}
.notif-dropdown.open { display: block; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; font-family: 'Outfit', sans-serif; }
.notif-header button { font-size: 12px; color: var(--accent-light); cursor: pointer; background: none; border: none; font-weight: 600; }
.notif-header button:hover { text-decoration: underline; }
.notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background var(--transition); align-items: flex-start; }
.notif-item:hover { background: var(--bg3); }
.notif-item.unread { background: rgba(58,123,213,.06); }
.notif-item.unread:hover { background: rgba(58,123,213,.10); }
.notif-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.notif-text { font-size: 13px; line-height: 1.45; color: var(--text2); flex: 1; }
.notif-text strong { color: var(--text); font-weight: 600; }
.notif-time { font-size: 11px; color: var(--text3); margin-top: 3px; }
.notif-empty { padding: 32px 16px; text-align: center; color: var(--text3); font-size: 13px; }

/* ── Ride Button ──────────────────────────────────────────────────────────── */
.vault-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 22px; border-radius: 40px;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all var(--transition);
  border: 2px solid var(--accent); background: transparent; color: var(--accent);
  font-family: 'Outfit', sans-serif;
}
.vault-btn:hover { background: var(--accent-glow); transform: translateY(-1px); box-shadow: var(--glow-shadow); }
.vault-btn.vaulted { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 2px 16px rgba(58,123,213,.30); }
.vault-btn.vaulted:hover { filter: brightness(1.1); }

/* ── Home Sections ─────────────────────────────────────────────────────────── */
.home-section { margin-bottom: 40px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-header h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.section-header a { font-size: 13px; color: var(--accent-light); font-weight: 600; transition: color var(--transition); }
.section-header a:hover { color: var(--text); }
.h-scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--bg4) transparent; }
.h-scroll::-webkit-scrollbar { height: 4px; }
.h-scroll::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 2px; }
.h-scroll .video-card { min-width: 260px; max-width: 260px; flex-shrink: 0; }

/* old featured block removed — definitions live in the Featured Banner section below */

.share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 40px; background: var(--bg3); border: 1.5px solid var(--border2); font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--transition); color: var(--text2); }
.share-btn:hover { background: var(--bg4); border-color: var(--accent); color: var(--accent-light); }

.admin-badge { font-size: 11px; padding: 3px 9px; border-radius: 40px; background: rgba(58,123,213,.1); color: var(--accent-light); border: 1px solid rgba(37,99,235,.24); font-weight: 700; font-family: 'Outfit', sans-serif; }

/* ── Hover Preview ─────────────────────────────────────────────────────────── */
.hover-preview {
  position: absolute; inset: 0; z-index: 3;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.hover-preview video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.video-card:hover .hover-preview { opacity: 1; }
.video-card:hover .video-thumb img { opacity: 0; }

/* ── Mini Player ────────────────────────────────────────────────────────────── */
.mini-player {
  position: fixed; bottom: 24px; right: 24px;
  width: 320px; background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  z-index: 9000; display: none;
  transition: box-shadow var(--transition);
}
.mini-player.show { display: block; }
.mini-player video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; cursor: pointer; }
.mini-player-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--bg3);
  border-top: 1px solid var(--border);
}
.mini-player-title {
  flex: 1; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text2); font-family: 'Outfit', sans-serif;
}
.mini-player-btn {
  background: none; border: none; color: var(--text3);
  cursor: pointer; padding: 4px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition), background var(--transition); flex-shrink: 0;
}
.mini-player-btn:hover { color: var(--accent-light); background: var(--accent-glow); }
.mini-player-close { color: var(--text3); }
.mini-player-close:hover { color: var(--red); background: rgba(239,68,68,.1); }
.mini-player-expand:hover { color: var(--accent-light); }

/* ── Vibe Check ───────────────────────────────────────────────────────────── */
#vibeCheckOverlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(0,0,0,.65); display: flex;
  align-items: center; justify-content: center;
  border-radius: inherit; animation: fadeIn .25s;
}
.vibe-check-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px;
  text-align: center; min-width: 260px;
}
.vibe-check-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.vibe-btns { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; }
.vibe-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 18px; border-radius: var(--radius); border: 1.5px solid var(--border);
  background: var(--bg3); cursor: pointer; font-size: 28px;
  transition: all .15s; color: var(--text);
}
.vibe-btn span { font-size: 12px; font-weight: 600; color: var(--text2); }
.vibe-btn:hover { border-color: var(--accent); transform: scale(1.08); background: var(--accent-glow); }
.vibe-btn[data-vibe="fire"]:hover { border-color: #f97316; background: rgba(249,115,22,.12); }
.vibe-btn[data-vibe="skip"]:hover { border-color: var(--text3); }
.vibe-dismiss { background: none; border: none; color: var(--text3); font-size: 12px; cursor: pointer; }
.vibe-dismiss:hover { color: var(--text); }
/* Vibe glow on cards */
.vibe-fire .video-thumb { box-shadow: 0 0 0 2px rgba(249,115,22,.5); }
.vibe-skip .video-thumb { box-shadow: 0 0 0 2px rgba(100,116,139,.3); }

/* ── Watch Receipt ────────────────────────────────────────────────────────── */
#watchReceipt {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; animation: fadeIn .2s;
}
.receipt-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 32px; min-width: 300px; max-width: 380px;
  font-family: 'Outfit', monospace; width: 90%;
}
.receipt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 13px; color: var(--text3); }
.receipt-logo { font-weight: 800; font-size: 14px; }
.receipt-divider { color: var(--border2); font-size: 12px; letter-spacing: 1px; margin: 10px 0; text-align: center; }
.receipt-title { font-size: 15px; font-weight: 800; margin-bottom: 10px; text-align: center; line-height: 1.3; }
.receipt-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); color: var(--text2); }
.receipt-row span:last-child { color: var(--text); font-weight: 600; }
.receipt-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

/* ── Spoiler Gate ─────────────────────────────────────────────────────────── */
#spoilerGate {
  display: none; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 8px 14px;
  font-size: 13px; color: var(--text2); margin-bottom: 12px;
}
.comment-ts-label {
  display: inline-flex; align-items: center;
  background: var(--accent-glow); color: var(--accent-light);
  font-size: 11px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; margin: 0 6px; cursor: pointer;
  transition: background .15s;
}
.comment-ts-label:hover { background: var(--accent); color: #fff; }

/* (.dna-pill and .card-dna-row lived here — the mood/pace pill on video cards.
   Removed 2026-07-30 along with _videoDNA() in main.js. The tags that shared the
   row now use the existing .card-tags rule further down; no replacement needed.) */

/* ── For You feed — horizontal scroll row ───────────────────────────────── */
.fy-scroll-wrap { position: relative; }
.fy-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg3); border: 1.5px solid var(--border2);
  color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.fy-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.fy-arrow-left  { left: -14px; }
.fy-arrow-right { right: -14px; }
.fy-scroll-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.fy-scroll-row::-webkit-scrollbar { height: 4px; }
.fy-scroll-row::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }
.fy-card { flex: 0 0 220px; cursor: pointer; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg2); border: 1px solid var(--border); transition: border-color .18s, transform .18s; }
.fy-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.fy-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg3); }
.fy-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fy-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text3); }
.fy-info { padding: 8px 10px 10px; }
.fy-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fy-meta { font-size: 11px; color: var(--text3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tonight's Queue ──────────────────────────────────────────────────────── */
/* ── Top Videos to Watch — crossfade spotlight ──────────────────────────── */
.tvw-stage {
  display: grid;          /* all slides share cell 1/1 — height comes from content */
  border-radius: var(--radius); overflow: hidden;
}
.tvw-slide {
  grid-area: 1 / 1;      /* stack every slide in same cell */
  display: flex; gap: 0;
  opacity: 0; transition: opacity .75s ease;
  pointer-events: none; cursor: pointer;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
}
.tvw-slide.tvw-active {
  opacity: 1; pointer-events: auto;
}
.tvw-thumb {
  position: relative; width: 52%; flex-shrink: 0;
  aspect-ratio: 16 / 9;  /* thumb drives the row height — no external height needed */
  background: var(--bg3); overflow: hidden;
}
.tvw-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--bg3); }
.tvw-thumb-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 36px; color: var(--text3);
}
.tvw-thumb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--bg2) 100%);
}
.tvw-play-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s; background: rgba(0,0,0,.25);
}
.tvw-slide.tvw-active:hover .tvw-play-overlay { opacity: 1; }
.tvw-play-circle {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: flex;
  align-items: center; justify-content: center;
  font-size: 18px; padding-left: 3px;
}
.tvw-cat-pill {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 7px; border-radius: 20px;
}
.tvw-info {
  flex: 1; background: var(--bg2); padding: 20px 18px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.tvw-reason {
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent-light);
  display: flex; align-items: center; gap: 4px;
}
.tvw-title {
  font-size: 15px; font-weight: 800; line-height: 1.35;
  color: var(--text1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tvw-creator { font-size: 12px; color: var(--text2); font-weight: 600; }
.tvw-stats   { font-size: 12px; color: var(--text3); }
.tvw-watch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 4px; padding: 7px 16px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 20px; font-size: 12px; font-weight: 700;
  cursor: pointer; width: fit-content; transition: opacity .15s;
}
.tvw-watch-btn:hover { opacity: .88; }

/* Progress bar + dots */
.tvw-controls { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.tvw-dots { display: flex; align-items: center; gap: 5px; }
.tvw-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border2); cursor: pointer;
  transition: all .3s; border: none; padding: 0;
}
.tvw-dot.tvw-dot-active { width: 18px; border-radius: 3px; background: var(--accent); }
.tvw-prog-wrap { flex: 1; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.tvw-prog-fill { height: 100%; width: 0; background: var(--accent); border-radius: 2px; }

/* ── Time Capsule card ────────────────────────────────────────────────────── */
.capsule-card { opacity: .85; }
.capsule-thumb {
  /* Was indigo (#1e1b4b → #312e81), a hue that exists nowhere else in the brand.
     Deep blue drawn from the logo's own blue instead. */
  background: linear-gradient(135deg, #1e2d60, #2563b0) !important;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/9;
}
.capsule-lock { text-align: center; }
.capsule-lock { font-size: 32px; }
/* Was #a5b4fc, an indigo that matched the old capsule gradient and nothing else. */
.capsule-countdown { font-size: 12px; color: var(--accent-light); margin-top: 6px; font-weight: 700; }

/* ── Watch Streak badge (nav) ─────────────────────────────────────────────── */
.nav-streak-badge {
  display: inline-flex; align-items: center;
  background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.35);
  color: #f97316; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px; cursor: pointer;
  transition: background .15s; white-space: nowrap;
}
.nav-streak-badge:hover { background: rgba(249,115,22,.25); }

/* ── Comment Likes & Replies ────────────────────────────────────────────────── */
.comment-actions {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.comment-like-btn, .comment-reply-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text3);
  padding: 3px 8px; border-radius: 20px;
  transition: all var(--transition);
}
.comment-like-btn:hover { color: var(--coral-light); background: var(--coral-glow); }
.comment-like-btn.liked { color: var(--coral-light); }
.comment-reply-btn:hover { color: var(--accent-light); background: var(--accent-glow); }
.comment-del-btn {
  display: inline-flex; align-items: center;
  background: none; border: none; cursor: pointer;
  font-size: 12px; color: var(--text3); padding: 3px 6px;
  border-radius: 20px; transition: all var(--transition); opacity: .6;
}
.comment-del-btn:hover { color: var(--red, #ef4444); background: rgba(239,68,68,.1); opacity: 1; }
.comment-replies {
  margin-top: 10px; margin-left: 20px;
  border-left: 2px solid var(--border2); padding-left: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.reply-form {
  display: none; margin-top: 8px; margin-left: 44px;
}
.reply-form.open { display: flex; gap: 8px; align-items: flex-start; }
.reply-form textarea {
  flex: 1; resize: none; min-height: 60px; font-size: 13px;
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.reply-form-btns { display: flex; flex-direction: column; gap: 6px; }

/* .share-ts-btn removed 2026-08-04 — "⏱ Share from here" is a More-menu row now, so
   it inherits .more-menu button and has no pill of its own. */

/* The resume banner used to live here, below the player. The choice is now made on
   the video itself — see .sp-resume in player.css. */

/* ── Featured Banner ─────────────────────────────────────────────────────── */
/* ⚠ DEAD as of 2026-08-02 — the featured banner was removed from the home page and
   nothing renders any .featured-* class any more. Kept rather than deleted because
   the rules are scattered through four media queries and .featured-title shares a
   selector with .upload-wrap h1 / .section-header h2 up at the top of this file, so
   a careless sweep breaks live styles. Safe to remove as its own change; verify
   nothing in public/ references .featured- first. */
.featured-wrap {
  padding: 0 0 24px;
  max-height: 700px;
  overflow: hidden;
  transition: max-height 0.55s cubic-bezier(0.4,0,0.2,1),
              opacity 0.4s ease,
              padding 0.45s ease;
  opacity: 1;
}
.featured-wrap.sv-rolled { max-height: 0; opacity: 0; padding: 0; }
.featured-card {
  position: relative; display: flex; align-items: flex-end;
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  border: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.featured-card:hover { box-shadow: 0 0 56px rgba(58,123,213,.32); }
.featured-thumb {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--bg3);
  transition: opacity 0.6s ease;
}
.featured-thumb::after { display: none; } /* gradient moved to .featured-overlay */
.featured-thumb.no-thumb { background: var(--grad); }
/* Preview video: z-index 1, behind gradient overlay */
.featured-preview-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
  pointer-events: none;
}
.featured-preview-vid.fv-playing { opacity: 1; }
/* Gradient overlay: always above video (z2), always below text (z3) */
.featured-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top,  rgba(4,6,16,.98) 0%, rgba(4,6,16,.80) 30%, rgba(4,6,16,.30) 60%, transparent 100%),
    linear-gradient(to right, rgba(4,6,16,.70) 0%, transparent 55%);
}
.featured-info {
  position: relative; z-index: 3;
  padding: 36px 44px; max-width: 640px;
}
.featured-badge {
  display: inline-block; font-size: 11px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase;
  background: var(--grad); color: #fff;
  padding: 4px 12px; border-radius: 40px; margin-bottom: 14px;
}
.featured-title {
  font-size: 30px; font-weight: 800; color: #fff !important;
  margin-bottom: 10px; line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}
.featured-meta { font-size: 13px; color: rgba(255,255,255,.82) !important; margin-bottom: 0; }
.featured-play-btn { font-size: 15px; font-weight: 700; padding: 13px 30px; }

/* Top-right corner: #trending tag + Watch Now button */
.featured-corner {
  position: absolute; top: 22px; right: 24px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
}
.featured-trending-tag {
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  color: rgba(255,255,255,.65); text-decoration: none;
  transition: color .2s;
}
.featured-trending-tag:hover { color: #fff; }

/* ── Tag filter bar ──────────────────────────────────────────────────────── */
.tag-filter-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--grad-soft); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); padding: 8px 16px; margin-bottom: 16px;
  font-size: 14px;
}
.tag-filter-bar strong { color: var(--accent-light); }
/* ⚠ Unused since 2026-08-12 — video cards no longer print hashtags (Dhananjay), so
   nothing in public/ emits .card-tags or .card-tag any more. Kept, not deleted, for
   the same reason as the .featured-* block: three rules are cheap, and removing them
   also means unpicking .card-tag from the .card-link z-index list above, which is the
   sort of edit that quietly breaks a *different* card child. If tags come back these
   are ready; if they are definitely not coming back, deleting this and that list
   entry together is its own small change. `.tag` itself is still live on the watch
   page — only these two card-specific rules are dead. */
.card-tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.card-tag { cursor: pointer; font-size: 11px; padding: 2px 7px; }
.card-tag:hover { background: rgba(58,123,213,.2); }
.scheduled-badge {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
}

/* ── Autocomplete ────────────────────────────────────────────────────────── */
.autocomplete-wrap {
  position: fixed; z-index: 10000;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  top: 56px;
}
.ac-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13px; color: var(--text);
  text-decoration: none; transition: background var(--transition);
}
.ac-item:hover, .ac-item.focused { background: var(--bg3); color: var(--accent-light); }
.ac-icon { font-size: 14px; flex-shrink: 0; width: 20px; text-align: center; }
.ac-text { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-sub  { font-size: 11px; color: var(--text3); flex-shrink: 0; margin-left: 4px; }
/* Recent-searches header inside the same dropdown */
.ac-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text3);
  border-bottom: 1px solid var(--border);
}
.ac-clear {
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-light);
}
.ac-clear:hover { text-decoration: underline; }

/* ── Reactions ───────────────────────────────────────────────────────────── */
.reactions-bar {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0;
}
.reaction-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1.5px solid var(--border);
  border-radius: 40px; padding: 6px 14px;
  font-size: 16px; cursor: pointer;
  transition: all var(--transition);
}
.reaction-btn span { font-size: 13px; font-weight: 700; color: var(--text2); }
.reaction-btn:hover  { border-color: var(--accent); background: var(--accent-glow); }
.reaction-btn.active { border-color: var(--coral); background: var(--coral-glow); }
.reaction-btn.active span { color: var(--coral-light); }

/* ── Video Queue ─────────────────────────────────────────────────────────── */
.queue-wrap {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
}
.queue-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.queue-title { font-size: 14px; font-weight: 700; }
.queue-list { display: flex; flex-direction: column; gap: 8px; }
.queue-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--transition);
}
.queue-item:hover { background: var(--bg3); }
.queue-item.active { background: var(--accent-glow); border: 1px solid var(--accent); }
.queue-thumb {
  width: 64px; aspect-ratio: 16/9; border-radius: 5px;
  object-fit: cover; background: var(--bg4); flex-shrink: 0;
}
.queue-info { flex: 1; min-width: 0; }
.queue-item-title { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.queue-remove { background: none; border: none; color: var(--text3); cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0; }
.queue-remove:hover { color: var(--red); background: rgba(239,68,68,.1); }

/* ── Watch Party ─────────────────────────────────────────────────────────── */
.party-bar {
  display: none; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(58,123,213,.12), rgba(232,112,154,.08));
  border: 1.5px solid var(--border2); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 16px;
}
.party-bar.show { display: flex; }
.party-code {
  font-family: 'Outfit', monospace; font-size: 22px; font-weight: 800;
  letter-spacing: 4px; background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.party-label { font-size: 13px; color: var(--text2); flex: 1; }

/* ── Chapters ────────────────────────────────────────────────────────────── */
.chapter-marker {
  position: absolute; top: 0; height: 100%;
  width: 2px; background: rgba(255,255,255,.8);
  pointer-events: none; z-index: 5;
}
.chapter-tooltip {
  position: absolute; bottom: 18px;
  background: rgba(13,27,62,.92);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
  pointer-events: none; white-space: nowrap;
  transform: translateX(-50%);
  border: 1px solid var(--border2);
}

/* ── Keyboard Shortcuts Overlay ──────────────────────────────────────────── */
.shortcuts-overlay {
  position: fixed; inset: 0; z-index: 20000;
  background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
}
.shortcuts-overlay.show { display: flex; }
.shortcuts-card {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 32px 36px;
  max-width: 480px; width: 90%; box-shadow: 0 24px 64px rgba(0,0,0,.6);
}
.shortcuts-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 20px; }
.shortcuts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px;
}
.shortcut-row { display: flex; align-items: center; gap: 10px; }
.kbd {
  display: inline-block; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 5px;
  padding: 3px 8px; font-size: 12px; font-weight: 700;
  font-family: 'Outfit', monospace; min-width: 28px; text-align: center;
  color: var(--accent-light); flex-shrink: 0;
}
.shortcut-desc { font-size: 13px; color: var(--text2); }

/* ── Playlists Page ──────────────────────────────────────────────────────── */
.playlists-wrap { max-width: 900px; margin: 0 auto; padding: 32px 18px; }
.playlist-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px; margin-top: 24px;
}
.playlist-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: all var(--transition);
}
.playlist-card:hover { border-color: var(--accent); box-shadow: var(--glow-shadow); transform: translateY(-3px); }
.playlist-cover {
  aspect-ratio: 16/9; background: var(--grad-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.playlist-info { padding: 14px; }
.playlist-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.playlist-meta { font-size: 12px; color: var(--text3); }
.playlist-actions { display: flex; gap: 6px; margin-top: 10px; }

/* ── Analytics Page ──────────────────────────────────────────────────────── */
.analytics-wrap { max-width: 960px; margin: 0 auto; padding: 32px 18px; }
.analytics-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 32px;
}
.chart-wrap {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 24px;
}
.chart-wrap h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.bar-chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 120px; border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bar-fill {
  width: 100%; background: var(--grad);
  border-radius: 3px 3px 0 0; min-height: 2px;
  transition: height .4s;
}
.bar-label { font-size: 9px; color: var(--text3); white-space: nowrap; transform: rotate(-45deg); margin-top: 4px; }
.top-videos-list { display: flex; flex-direction: column; gap: 10px; }
.top-video-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; background: var(--bg3); border-radius: var(--radius-sm);
  cursor: pointer; transition: background var(--transition);
}
.top-video-row:hover { background: var(--bg4); }
.top-video-rank { font-size: 18px; font-weight: 800; color: var(--text3); width: 28px; text-align: center; flex-shrink: 0; }
.top-video-thumb { width: 80px; aspect-ratio: 16/9; object-fit: cover; border-radius: 5px; background: var(--bg4); flex-shrink: 0; }
.top-video-info { flex: 1; min-width: 0; }
.top-video-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-video-stats { font-size: 12px; color: var(--text3); margin-top: 3px; }

/* ── Thumbnail Editor ────────────────────────────────────────────────────── */
.thumb-editor-wrap {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 20px;
}
.thumb-editor-preview {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
.frame-canvas-wrap {
  position: relative; width: 200px; aspect-ratio: 16/9;
  background: #000; border-radius: 8px; overflow: hidden; flex-shrink: 0;
}
#frameCanvas { width: 100%; height: 100%; display: block; }
.frame-scrub { width: 100%; margin-top: 8px; }

/* ── Chapters Editor ─────────────────────────────────────────────────────── */
.chapters-editor { margin-bottom: 20px; }
.chapter-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.chapter-row { display: flex; gap: 8px; align-items: center; }
.chapter-row input[type="text"]   { flex: 1; }
.chapter-row input[type="number"] { width: 90px; }
.chapter-row .remove-ch-btn { background: none; border: none; color: var(--red); cursor: pointer; font-size: 18px; padding: 0 4px; }

/* ── Channel Tabs ─────────────────────────────────────────────────────────── */
.channel-tabs-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  background: var(--bg2);
  position: sticky; top: var(--nav-h); z-index: 10;
}
.ch-tab {
  padding: 14px 20px; font-size: 14px; font-weight: 600;
  color: var(--text3); border-bottom: 2.5px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  background: none; border-top: none; border-left: none; border-right: none;
  cursor: pointer;
}
.ch-tab:hover { color: var(--text); }
.ch-tab.active { color: var(--accent-light); border-bottom-color: var(--accent); }

/* ── Save to Playlist modal rows ─────────────────────────────────────────── */
.save-btn { background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(232,112,154,.14)); border-color: var(--accent) !important; color: var(--accent-light) !important; font-weight: 700; }
.save-btn:hover { background: linear-gradient(135deg, rgba(124,58,237,.28), rgba(232,112,154,.22)); }
.save-pl-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: var(--bg3); border: 1px solid var(--border);
  cursor: pointer; text-align: left;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  color: var(--text);
}
.save-pl-row:hover { background: var(--bg4); border-color: var(--accent-light); transform: translateX(3px); }
.save-pl-icon { font-size: 20px; flex-shrink: 0; }
.save-pl-info { flex: 1; min-width: 0; }
.save-pl-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.save-pl-meta { font-size: 12px; color: var(--text3); margin-top: 2px; }
.save-pl-arrow { font-size: 20px; color: var(--text3); flex-shrink: 0; }

/* ── Timestamp links in descriptions ─────────────────────────────────────── */
.ts-link {
  color: var(--accent-light); font-weight: 600;
  text-decoration: none; border-bottom: 1px dotted var(--accent-light);
  transition: color var(--transition);
}
.ts-link:hover { color: var(--coral-light); border-bottom-color: var(--coral-light); }

/* ── Loading skeleton ─────────────────────────────────────────────────────── */
@keyframes shimmer { 0%,100%{opacity:.45} 50%{opacity:.9} }
.skel { background: var(--bg3); border-radius: var(--radius-sm); animation: shimmer 1.4s ease-in-out infinite; }
.skel-line { display: inline-block; background: var(--bg3); border-radius: 4px; animation: shimmer 1.4s ease-in-out infinite; }

/* ── Playlist grid on profile ─────────────────────────────────────────────── */
.playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}
.playlist-card {
  background: var(--bg2); border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.playlist-card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
.playlist-thumb-stack { position: relative; height: 130px; background: var(--bg3); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; }
.playlist-count { font-size: 11px; color: var(--text3); font-weight: 600; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .watch-sidebar { width: 290px; } }

@media (max-width: 900px) {
  .home-outer { flex-direction: column; padding: 0 8px; }
  .home-sidebar { width: 100%; padding-top: 0; }
  .sidebar-sticky { position: static; }
  .creator-spotlight-col { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .creator-chip { width: calc(50% - 4px); }
  .watch-layout { flex-direction: column; }
  .watch-sidebar { width: 100%; }
  .featured-card { min-height: 220px; }
  .featured-title { font-size: 18px; }
  .profile-hero-inner { padding: 0 16px 20px; }
  .profile-top-row { gap: 14px; }
  .profile-big-avatar { width: 72px; height: 72px; font-size: 26px; }
  .profile-stats { gap: 18px; }
  .channel-tabs-bar { padding: 0 12px; overflow-x: auto; white-space: nowrap; }
  .ch-tab { padding: 12px 14px; font-size: 13px; }
}

@media (max-width: 768px) {
  .page-body { padding-left: 8px !important; padding-right: 8px !important; }
  .home-outer { padding: 0 4px !important; }
  .home-wrap { padding: 16px 0 60px !important; }
  .navbar { padding: 0 12px; gap: 8px; }
  .nav-search { max-width: none; flex: 1; }
  /* Too narrow for one band — the creator keeps the first line, the actions take
     the next one and start from the left rather than hanging off the right edge. */
  .watch-band { gap: 12px; }
  .uploader-row { flex: 1 1 100%; }
  .watch-actions { flex-wrap: wrap; gap: 6px; margin-left: 0; flex: 1 1 100%; }
  .action-btn { font-size: 12px; padding: 6px 10px; }
  .upload-wrap { padding: 16px; }
  .auth-wrap { padding: 16px; }
}

@media (max-width: 640px) {
  .logo-text { display: none; }
  .form-row { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .auth-card { padding: 24px 16px; }
  .h-scroll .video-card { min-width: 200px; max-width: 200px; }
  .featured-info { padding: 16px; }
  .watch-title { font-size: 18px; }
  /* Banner height removed — profile.html owns it at every breakpoint now. */
  .profile-name { font-size: 20px; }
  .profile-stats { gap: 14px; }
  .profile-stat .val { font-size: 18px; }
  .shortcuts-card { padding: 20px 16px; }
  .shortcuts-grid { grid-template-columns: 1fr; }
  .modal { padding: 20px 16px; margin: 12px; }
  .playlist-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .channel-tabs-bar { overflow-x: auto; }
  .ch-tab { padding: 10px 12px; font-size: 12px; }
  /* For You row — smaller cards on mobile */
  .fy-card { flex: 0 0 180px; }
  /* Analytics stats — 2 columns on small screens */
  .analytics-stats { grid-template-columns: repeat(2, 1fr); }
  /* Verification banner — stack vertically */
  #_emailVerifyBanner { flex-direction: column; gap: 8px; padding-right: 36px; }
}

/* .pip-btn removed 2026-08-04 — the mini player is a More-menu row now. */

/* ── Feature 4: Continue-watching resume bar ───────────────────────────────── */
.resume-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: rgba(255,255,255,.2); z-index: 2;
}
.resume-bar-fill { height: 100%; background: var(--accent-light); }

/* ── Feature 8: Trending rank badge ────────────────────────────────────────── */
.trending-rank {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  font-size: 13px; font-weight: 800; color: #fff;
  padding: 3px 9px; border-radius: 8px;
  /* Was gold, then the logo pair. Under Ink it runs light-blue-first so it still
     reads as a badge rather than a primary button, which uses --grad the other way. */
  background: var(--grad-warm);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ── Feature 9: Tag chips cloud ────────────────────────────────────────────── */
#tagsCloud { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#tagsCloud > div:first-child { width: 100%; }
.tag-chip {
  display: inline-block; padding: 6px 13px; border-radius: 40px;
  background: var(--bg3); border: 1px solid var(--border2);
  font-size: 13px; font-weight: 600; color: var(--text2);
  text-decoration: none; transition: all var(--transition);
}
.tag-chip:hover { color: var(--accent-light); border-color: var(--accent-light); background: var(--bg4); }

/* ── Feature 12: Video polls ───────────────────────────────────────────────── */
.poll-card {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 18px 20px;
}
.poll-question { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.poll-options { display: flex; flex-direction: column; gap: 10px; }
.poll-option {
  position: relative; width: 100%; text-align: left;
  border: 1px solid var(--border2); border-radius: 8px;
  background: var(--bg3); overflow: hidden; padding: 0;
  font: inherit; color: var(--text);
}
.poll-vote-btn { cursor: pointer; transition: all var(--transition); }
.poll-vote-btn:hover { border-color: var(--accent-light); background: var(--bg4); }
.poll-option-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%;
  background: linear-gradient(90deg, rgba(124,58,237,.35), rgba(219,39,119,.30));
  width: 0; transition: width .6s ease;
}
.poll-option.mine .poll-option-fill { background: linear-gradient(90deg, rgba(124,58,237,.55), rgba(219,39,119,.45)); }
.poll-option-label {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 12px 16px; font-size: 14px; font-weight: 600;
}
.poll-option.voted { cursor: default; }
.poll-total { margin-top: 14px; font-size: 12px; color: var(--text3); }

/* ── Feature 5: Analytics table ────────────────────────────────────────────── */
.analytics-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.analytics-table th, .analytics-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border);
}
.analytics-table th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text3); cursor: pointer; user-select: none; white-space: nowrap;
}
.analytics-table th:hover { color: var(--text); }
.analytics-table tbody tr:hover { background: var(--bg3); }
.analytics-table td:first-child { font-weight: 600; max-width: 320px; }

/* ══════════════════════════════════════════════════════
   LAYOUT ENHANCEMENT — 10 Modern Design Ideas
══════════════════════════════════════════════════════ */

/* ── 1. Glassmorphism Sidebar ──────────────────────────────────────────────── */
.sv-sidebar {
  background: rgba(8,16,32,.76) !important;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-right-color: rgba(58,123,213,.18) !important;
}
[data-theme="light"] .sv-sidebar {
  background: rgba(255,255,255,.97) !important;
}

/* ── 2. Full-Width Immersive Hero Banner — cinematic on large screens ──────── */
@media (min-width: 1000px) {
  .featured-card { aspect-ratio: 21 / 9; }
  .featured-title { font-size: 34px; }
}
@media (min-width: 1400px) {
  .featured-card { aspect-ratio: 24 / 9; }
}

/* ── 3. Home grid — every card the same size ───────────────────────────────
   The first card used to span 2×2 as a "bento" hero, with its own thumb sizing,
   title size, meta padding and avatar size. Removed 2026-07-30 on Dhananjay's
   instruction: every card on the home page, and under a category filter, is now
   identical in width and height.

   That also retires the whole class of bug the tile kept producing — a portrait
   thumbnail inflating the two rows it spanned and stretching its row-mates from
   320px to 1145px, then the opposite failure where a one-result category left a
   single card stretched across two columns as a 720×220 slit. A uniform grid
   cannot do either, so the `:not(:has())` guard that patched the second case is
   gone with it.

   Card width now comes from the one `.video-grid` rule near the top of this file;
   there is no home-specific column count any more. The Top Pick badge survives
   and simply sits on an ordinary card. */
@media (min-width: 900px) {
  /* "Top Pick" is a claim, so it only appears when the grid is genuinely ranked
     for this viewer — main.js sets .is-personalised from the server's own flag.
     It used to label whatever sat in position 1, which under the default Newest
     sort just meant "most recent upload". The nth-child(3) guard keeps it off a
     lone card in a filtered category, where calling the only result a pick is
     meaningless. */
  .home-wrap #videoGrid.is-personalised:has(.video-card:nth-child(3))
    .video-card:first-child .video-thumb::before {
    content: '✨ Top Pick for You';
    position: absolute;
    top: 10px; left: 10px; z-index: 3;
    background: var(--grad);
    color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 4px 11px;
    border-radius: 20px;
    letter-spacing: .3px;
    pointer-events: none;
  }
}

/* ── 5. Card Hover Elevation — deeper lift + glow ─────────────────────────── */
.video-card:hover {
  transform: translateY(-8px) scale(1.018) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.5),
              0 0 0 1.5px rgba(58,123,213,.3),
              0 0 36px rgba(58,123,213,.14) !important;
  border-color: rgba(58,123,213,.3) !important;
}
.video-card:hover .video-thumb img { transform: scale(1.1); }

/* ── 6. Magazine-style Channel Profile ────────────────────────────────────── */
.profile-big-avatar {
  width: 96px !important;
  height: 96px !important;
  font-size: 36px !important;
  border: 4px solid var(--bg) !important;
  box-shadow: 0 8px 36px rgba(124,58,237,.5) !important;
  margin-top: -48px;
}
/* `.profile-banner { height: 200px !important }` lived here and silently beat the
   rule in profile.html's own <style>, so the 260px written there had never applied
   and neither had its mobile value. Height now lives in profile.html only — one
   source, no !important. */
.profile-hero-inner { padding-bottom: 32px !important; }
.profile-name { font-size: 28px !important; }

/* ── 7. Theatre Mode on Watch Page ───────────────────────────────────────── */
.theatre-btn { gap: 5px; }

body.theatre-mode {
  --theatre-bg: #05080f;
  /* Force dark variables regardless of light/dark theme */
  /* Ink, dimmed. Still a step darker than normal dark mode — that is the point of
     theatre mode — but neutral now, so it doesn't read blue against the rest. */
  --bg:    #050506;
  --bg2:   #0d0e11;
  --bg3:   #121317;
  --bg4:   #191b20;
  --bg5:   #22252c;
  --border:  rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.14);
  --text:  #f2f3f5;
  --text2: #9aa0aa;
  --text3: #757b85;
  --nav-bg: rgba(5,5,6,.88);
  --sb-bg:  rgba(5,5,6,.82);
  --card-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* Dim the page background to deep cinematic dark */
body.theatre-mode .page-body {
  background: var(--theatre-bg) !important;
  transition: background .4s ease;
}

/* Navbar dims and shrinks visually */
body.theatre-mode .navbar {
  background: rgba(5,8,15,.88) !important;
  border-color: rgba(58,123,213,.12) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.5) !important;
}

/* Sidebar dims — brightens on hover */
body.theatre-mode .sv-sidebar {
  background: rgba(5,8,15,.82) !important;
  border-right-color: rgba(58,123,213,.08) !important;
  opacity: .7;
  transition: opacity .3s !important;
}
body.theatre-mode .sv-sidebar:hover { opacity: 1; }

/* Watch layout: full-width player, panel on right */
body.theatre-mode .watch-layout {
  padding: 0;
  gap: 0;
  max-width: 100%;
}
body.theatre-mode .watch-main {
  max-width: calc(100% - 320px);
  min-width: 0;
}

/* Player: edge-to-edge, deep cinematic glow */
body.theatre-mode #playerWrap {
  border-radius: 0 !important;
  box-shadow: 0 0 80px rgba(58,123,213,.18), 0 0 0 0 transparent !important;
}

/* Subtle ambient glow ring around player */
body.theatre-mode .watch-main::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
  opacity: .5;
}

/* Below-player content: muted but readable */
body.theatre-mode .watch-title { color: rgba(255,255,255,.9) !important; }
body.theatre-mode .watch-band { border-bottom-color: rgba(58,123,213,.1) !important; }
body.theatre-mode .watch-desc-box { background: rgba(255,255,255,.03) !important; border-color: rgba(58,123,213,.1) !important; }
body.theatre-mode .reactions-bar,
body.theatre-mode .comments-section { opacity: .8; transition: opacity .2s; }
body.theatre-mode .reactions-bar:hover,
body.theatre-mode .comments-section:hover { opacity: 1; }

/* Sticky sidebar panel */
body.theatre-mode .watch-sidebar {
  width: 320px !important;
  position: sticky;
  top: 60px;
  align-self: flex-start;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 16px 14px;
  background: rgba(8,12,24,.9) !important;
  border-left: 1px solid rgba(58,123,213,.12);
  backdrop-filter: blur(10px);
}

@media (max-width: 900px) {
  body.theatre-mode .watch-main   { max-width: 100%; }
  body.theatre-mode .watch-sidebar { position: static; max-height: none; width: 100% !important; }
  body.theatre-mode .watch-main::before { display: none; }
}

/* ── 8. Sidebar Micro-Animations ─────────────────────────────────────────── */
@keyframes sb-slide-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .sv-sidebar .sb-section:first-of-type .sb-item:nth-child(1) { animation: sb-slide-in .22s .04s cubic-bezier(.34,1.56,.64,1) both; }
  .sv-sidebar .sb-section:first-of-type .sb-item:nth-child(2) { animation: sb-slide-in .22s .08s cubic-bezier(.34,1.56,.64,1) both; }
  .sv-sidebar .sb-section:first-of-type .sb-item:nth-child(3) { animation: sb-slide-in .22s .12s cubic-bezier(.34,1.56,.64,1) both; }
  .sv-sidebar .sb-section:first-of-type .sb-item:nth-child(4) { animation: sb-slide-in .22s .16s cubic-bezier(.34,1.56,.64,1) both; }
  .sv-sidebar .sb-section:first-of-type .sb-item:nth-child(5) { animation: sb-slide-in .22s .20s cubic-bezier(.34,1.56,.64,1) both; }
  .sv-sidebar .sb-section:first-of-type .sb-item:nth-child(6) { animation: sb-slide-in .22s .24s cubic-bezier(.34,1.56,.64,1) both; }
  /* Upload button shimmer */
  @keyframes sb-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
  }
  .sb-upload-btn {
    background-size: 200% auto !important;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 50%, var(--accent) 100%) !important;
    animation: sb-shimmer 3.5s linear infinite;
  }
}

/* ── 9. Sticky Category Bar ──────────────────────────────────────────────── */
.category-bar {
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
  background: var(--bg);
  padding: 10px 10px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px rgba(0,0,0,.14);
  transition: box-shadow .2s;
}
.category-bar::after { display: none; }

/* ── 10. Bottom Tab Bar — mobile only ─────────────────────────────────────── */
.bottom-tab-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 250;
  padding: 4px 0 env(safe-area-inset-bottom, 4px);
  justify-content: space-around;
  align-items: stretch;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.bottom-tab-item {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  flex: 1; padding: 6px 4px;
  color: var(--text3); font-size: 10px;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 600; letter-spacing: .2px;
  transition: color var(--transition);
}
.bottom-tab-item .bti-icon { font-size: 21px; line-height: 1.1; }
.bottom-tab-item.active  { color: var(--coral); }
.bottom-tab-item:hover   { color: var(--text); }
.bottom-tab-item.bti-upload {
  background: var(--grad);
  color: #fff !important;
  border-radius: 12px;
  margin: 4px 6px;
  padding: 4px 10px;
  flex: 0.9;
}
@media (max-width: 768px) {
  .bottom-tab-bar { display: flex; }
  .page-body      { padding-bottom: 72px; }
  .toast          { bottom: 84px; }
  .mini-player    { bottom: 84px; }
}

/* ── Share Modal ──────────────────────────────────────────────────────────── */
.share-platforms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.share-platform-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: opacity .15s;
}
.share-platform-btn:hover { opacity: .83; }

/* ── Download Quality Selector ────────────────────────────────────────────── */
.quality-opt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.quality-opt-row:hover { background: var(--bg3); border-color: var(--border2); }
.quality-opt-row:has(input:checked) { background: rgba(58,123,213,.08); border-color: var(--accent); }
.quality-label { font-size: 13px; font-weight: 600; }

/* ── Scheduled (upcoming) video card ────────────────────────────────────────
   Option B: the thumbnail stays so the video still has a visual hook, dimmed
   with a date chip so it reads clearly as "not yet". No play overlay and no
   card link — there is nothing to play until it releases. */
.scheduled-card { cursor: pointer; }
.scheduled-card .video-thumb { position: relative; }
.scheduled-veil {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(6, 14, 34, .46);
  pointer-events: none;
}
.scheduled-chip {
  position: absolute; top: 8px; left: 8px; z-index: 4;
  background: var(--bg2); color: var(--accent-light);
  border: 1px solid var(--accent);
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.drop-riders { font-size: 12px; color: var(--text3); margin-top: 4px; }

/* ── For You row: upcoming drops ──────────────────────────────────────────── */
.fy-card.fy-scheduled .fy-thumb { position: relative; }
.fy-drop-chip {
  position: absolute; top: 6px; left: 6px; z-index: 4;
  background: var(--bg2); color: var(--accent-light);
  border: 1px solid var(--accent);
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 20px;
}
[data-theme="light"] .fy-drop-chip { color: var(--accent2); }
.fy-drop-when {
  font-size: 11px; font-weight: 600; margin-top: 3px;
  color: var(--accent-light);
}
[data-theme="light"] .fy-drop-when { color: var(--accent2); }
.fy-wave-btn { margin-top: 7px; font-size: 11px; padding: 5px 8px; }

/* Stands in for a thumbnail that is missing or still being generated on a
   scheduled card. Deliberately branded rather than the generic ▶ placeholder,
   which under the dark veil looked like a broken image. */
.drop-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: linear-gradient(140deg, var(--bg3), var(--bg4));
}
.drop-fallback-wave { font-size: 30px; line-height: 1; opacity: .85; }
.drop-fallback-text {
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text3);
}
/* Exact drop date + time + countdown. Its own line, above the creator/rider line,
   because "in 7 hours" on its own gave no way to plan around the drop. */
.drop-exact {
  font-size: 12px; font-weight: 600;
  color: var(--accent-light);
  margin-bottom: 3px;
}
[data-theme="light"] .drop-exact { color: var(--accent2); }
/* Shown to the creator in place of the interest button. */
.drop-owner-note {
  margin-top: 9px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--text3);
  border: 1px dashed var(--border2); border-radius: var(--radius-sm);
  padding: 7px 10px;
}
.wave-btn {
  margin-top: 9px; width: 100%;
  position: relative; z-index: 2;   /* above .card-link so the button wins the click */
  background: transparent; color: var(--text2);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; padding: 7px 10px;
  cursor: pointer; transition: all var(--transition);
}
.wave-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-light); background: var(--bg3); }
.wave-btn:disabled { opacity: .6; cursor: default; }
.wave-btn.on { border-color: var(--accent); color: var(--accent-light); background: rgba(58,123,213,.10); }

/* Light mode needs the darker accent for contrast on pale surfaces — same
   override pattern the resend button already uses. */
[data-theme="light"] .scheduled-chip,
[data-theme="light"] .wave-btn:hover:not(:disabled),
[data-theme="light"] .wave-btn.on { color: var(--accent2); }

/* Drop panel — stands in for the player on a video that hasn't released. Same
   veil and vocabulary as the grid card, sized to the player's 16:9 slot. */
.drop-panel {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.drop-panel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drop-panel-inner { position: relative; z-index: 4; text-align: center; padding: 20px; }
.drop-when { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
.drop-left { font-size: 14px; color: rgba(255,255,255,.82); margin-top: 6px; }
.drop-cta  { width: auto; min-width: 190px; margin-top: 16px; background: rgba(0,0,0,.45); color: #fff; border-color: rgba(255,255,255,.45); }
.drop-cta:hover:not(:disabled) { background: rgba(0,0,0,.62); border-color: #fff; color: #fff; }
.drop-cta.on { background: rgba(58,123,213,.30); border-color: var(--accent-light); color: #fff; }
[data-theme="light"] .drop-cta,
[data-theme="light"] .drop-cta:hover:not(:disabled),
[data-theme="light"] .drop-cta.on { color: #fff; }
@media (max-width: 640px) { .drop-when { font-size: 20px; } .drop-left { font-size: 13px; } }

/* ── Home greeting strip ───────────────────────────────────────────────────────
   The "D" layer: the home page opens on the viewer's own state — who they are,
   what's waiting, what they've built up — before it opens on a catalogue.
   Deliberately form-agnostic: no wave crest, no oversized radius, nothing that
   presumes Option X or Option Y, so whichever is chosen this survives untouched.

   Uses the motion tokens rather than --transition so each thing moves at a speed
   that suits its distance: tiles lift on the fast token, the strip arrives on the
   slow one. */
.hs-wrap {
  padding: 18px 18px 0;
  animation: hs-arrive var(--dur-slow) var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) { .hs-wrap { animation: none; } }
@keyframes hs-arrive {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hs-inner {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); padding-bottom: 14px;
}
.hs-lead { min-width: 0; }
.hs-greet {
  margin: 0; font-family: var(--font-head, inherit);
  font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
}
.hs-sub { margin: 2px 0 0; font-size: 13px; color: var(--text2); }
.hs-sub a { color: var(--accent); text-decoration: none; }
.hs-sub a:hover { text-decoration: underline; }

.hs-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
/* Option Y: the state blocks are objects, not panels. The weighted bottom edge is
   what does it — it reads as a physical thickness, so the tile looks like it sits
   above the page rather than being drawn on it. Pressing compresses that edge and
   drops the tile by the same 2px it loses, which is why the movement reads as the
   object squashing rather than sliding. Only the anchor tiles press; the two
   read-only ones keep the thickness but never move, so the affordance stays
   honest about what is actually clickable. */
.hs-tile {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--bg2); border: 1px solid var(--border);
  border-bottom-width: 3px;
  border-radius: var(--radius); padding: 8px 14px; min-width: 92px;
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              border-bottom-width var(--dur-fast) var(--ease-out);
}
a.hs-tile { text-decoration: none; }
a.hs-tile:hover { transform: translateY(-2px); border-color: var(--accent); border-bottom-width: 4px; }
a.hs-tile:active { transform: translateY(1px); border-bottom-width: 1px; }
a.hs-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  a.hs-tile:hover, a.hs-tile:active { transform: none; }
}
.hs-k {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text3);
}
.hs-v {
  font-size: 16px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hs-tile.is-live .hs-v { color: var(--accent); }
.hs-cd { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .hs-inner { align-items: flex-start; }
  .hs-greet { font-size: 19px; }
  .hs-tiles { width: 100%; }
  .hs-tile { flex: 1; min-width: 0; }
}

/* The hottest video, as one line. This replaced the featured banner on 2026-08-02
   — same ranking (_engagementScore), a fraction of the height. Deliberately typo-
   graphic rather than a thumbnail: a picture here would just be a smaller banner,
   and the point was to stop giving one video the top of the page. */
.hs-hot {
  margin: 5px 0 0; font-size: 13px; color: var(--text2);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.hs-hot-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 2px 7px; flex-shrink: 0;
}
.hs-hot a {
  color: var(--text); font-weight: 600; text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.hs-hot a:hover { color: var(--accent); text-decoration: underline; }
.hs-hot-meta { color: var(--text3); font-size: 12px; }