/* ============================================
   Cyno Media Platform — Luxury Glass-Morphism
   ============================================ */

:root {
  --media-primary: var(--accent, #7bdcff);
  --media-primary-dark: color-mix(in srgb, var(--accent, #7bdcff) 85%, black);
  --media-secondary: var(--accent-2, #8de6d6);
  --media-accent: var(--accent, #06b6d4);
  --media-gold: var(--accent-3, #f59e0b);
  --media-success: var(--status-success, #10b981);
  --media-danger: var(--status-danger, #ef4444);
  --media-bg-dark: var(--bg-0, #0f0f1a);
  --media-bg-card: color-mix(in srgb, var(--glass-bg, rgba(30, 30, 50, 0.6)) 60%, transparent);
  --media-bg-glass: color-mix(in srgb, var(--glass-bg, rgba(255, 255, 255, 0.05)) 50%, transparent);
  --media-border: var(--glass-border, rgba(255, 255, 255, 0.1));
  --media-text: var(--text, #e2e8f0);
  --media-text-muted: var(--text-muted, #94a3b8);
  --media-shadow: var(--shadow-1, 0 8px 32px rgba(0, 0, 0, 0.4));
  --media-radius: var(--radius-lg, 16px);
  --media-radius-sm: var(--radius-sm, 8px);
  --media-radius-lg: var(--radius-xl, 24px);
  --media-transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                      opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                      background-color 0.3s ease,
                      border-color 0.3s ease,
                      box-shadow 0.3s ease;
}

/* ── Page ─────────────────────────────────── */
.media-page {
  min-height: 100vh;
  /* Header is sticky (in-flow), so it already occupies layout space — no top
     padding needed. The old 72px padding opened a gap between the header and
     the filter bar; removing it lets the filter bar sit flush under the header. */
  padding-top: 0;
}

/* ── Hero ─────────────────────────────────── */
.media-hero {
  position: relative;
  /* Trimmed from 100px top / 80px bottom — the old padding pushed the title
     "Cyno Media" into the middle of the page on tall viewports, leaving a
     huge empty gap above. 56/40 is more visually balanced under the topbar. */
  padding: 56px 20px 40px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

.media-hero-bg {
  position: absolute;
  inset: 0;
  /* Single very soft centered gradient — the previous 3-layer stack
     (gradients at 50% 40%, 70% 60%, 20% 80%) created visible "hot spots"
     where their peaks landed on wide viewports, reading as a floating dot
     in the top-right of the hero. One large soft gradient keeps the
     atmospheric feel without creating pinpoint peaks. */
  background: radial-gradient(ellipse 100% 80% at 50% 50%, rgba(123, 220, 255, 0.06), transparent 70%);
  animation: mediaHeroFloat 25s ease-in-out infinite;
  z-index: -1;
}

@keyframes mediaHeroFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-15px, 10px) scale(1.02); }
  66% { transform: translate(10px, -8px) scale(0.98); }
}

.media-hero-content {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.media-hero-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(123, 220, 255, 0.9);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  border: none;
}

.media-hero-content h1 {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 16px;
  color: var(--media-text);
}

.media-hero-accent {
  background: linear-gradient(135deg, var(--media-primary), var(--media-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.media-hero-sub {
  font-size: 1.15rem;
  color: var(--media-text-muted);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* Hero Stats */
.media-hero-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-bottom: 40px;
}

.media-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.media-stat-icon {
  width: 20px;
  height: 20px;
  color: var(--media-primary);
  opacity: 0.7;
}

.media-stat-value {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--media-text);
  text-shadow: 0 0 30px rgba(123, 220, 255, 0.3);
}

.media-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--media-text-muted);
}

.media-stat-divider {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, var(--media-border), transparent);
}

/* Hero CTA */
.media-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-icon-left {
  width: 18px;
  height: 18px;
}

/* ── Filters ──────────────────────────────── */
.media-filters {
  position: sticky;
  top: 78px;
  z-index: 100;
  margin: 16px auto 8px;
  max-width: 1240px;
  width: calc(100% - 40px);
  /* Luxury floating glass bar instead of the flat near-black band — subtle
     aurora wash over translucent glass, rounded, with depth. */
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--accent, #7bdcff) 7%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--glass-bg-strong, rgba(16,24,40,0.65)) 88%, transparent), color-mix(in srgb, var(--glass-bg, rgba(16,24,40,0.42)) 72%, transparent));
  border: 1px solid color-mix(in srgb, var(--media-border, rgba(160,190,230,0.22)) 80%, transparent);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 18px 40px rgba(2,6,12,0.45);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  padding: 12px 16px;
}

.filters-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
/* All three filter children should share the same height so they line up
   visually within the sticky filter band — the previous mix of 33px chips,
   38px search box, and 42px sort dropdown made the row read as "stuck to the
   top" of an oversized band. Forcing 40px parity centers them all on the
   midline regardless of internal padding. */
.filters-container > .search-box,
.filters-container > .filter-group,
.filters-container > .sort-group {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Search */
.search-box {
  position: relative;
  flex: 1;
  max-width: 360px;
  min-width: 200px;
}

.search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--media-text-muted);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  padding: 10px 14px 10px 42px;
  background: color-mix(in srgb, var(--glass-bg, rgba(16,24,40,0.42)) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--media-border, rgba(160,190,230,0.22)) 75%, transparent);
  border-radius: 12px;
  color: var(--media-text);
  font-size: 0.9rem;
  transition: var(--media-transition);
}
.search-box input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 55%, transparent);
  box-shadow: 0 0 0 3px rgba(123, 220, 255, 0.16);
}

.search-box input::placeholder {
  color: var(--media-text-muted);
  opacity: 0.6;
}

.search-box input:focus {
  outline: none;
  border-color: var(--media-primary);
  box-shadow: 0 0 0 3px rgba(123, 220, 255, 0.15);
}

/* Filter Buttons */
.filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--media-radius-sm);
  color: var(--media-text-muted);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--media-transition);
}

.filter-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.filter-btn:hover {
  background: none;
  color: var(--media-text);
}

.filter-btn.is-active {
  background: none;
  border-color: transparent;
  color: var(--accent, #7bdcff);
}

/* Sort */
.sort-group .cyno-select__button {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 4px;
}
.sort-group .sort-select {
  padding: 8px 24px 8px 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--media-text);
  font-size: 0.85rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
}

.sort-group .sort-select option {
  background: #1a1a2e;
  color: var(--media-text);
}

/* ── Featured ─────────────────────────────── */
.featured-section {
  padding: 48px 20px 24px;
  max-width: 1400px;
  margin: 0 auto;
}

.featured-header h2 {
  font-family: var(--font-display, "Sora", sans-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--media-text);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.featured-icon {
  width: 22px;
  height: 22px;
  color: var(--media-gold);
}

.featured-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.featured-carousel::-webkit-scrollbar {
  display: none;
}

.featured-carousel > * {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: min(380px, 85vw);
}

/* ── Video Grid ───────────────────────────── */
.video-grid-section {
  padding: 24px 20px 80px;
  max-width: 1400px;
  margin: 0 auto;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
/* Empty / loading states must span the full grid row and center themselves —
   otherwise auto-fit packs the single card into column 1 and the page reads
   as left-aligned dead space. */
.video-grid > .cyno-empty-state,
.video-grid > .media-empty-state,
.video-grid > .empty-state,
.video-grid > .loading-state {
  grid-column: 1 / -1;
  justify-self: center;
}

/* Video Card */
.video-card {
  position: relative;
  background: var(--media-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--media-border);
  border-radius: var(--media-radius);
  overflow: hidden;
  transition: var(--media-transition);
  cursor: pointer;
}

.video-card:hover {
  transform: translateY(-6px);
  border-color: rgba(123, 220, 255, 0.35);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 40px rgba(123, 220, 255, 0.1);
}

.video-card .thumbnail-wrapper {
  position: relative;
  padding-top: 56.25%;
  background: #0a0a14;
  overflow: hidden;
}

.video-card .thumbnail-wrapper img,
.video-card .thumbnail-wrapper .thumbnail-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card:hover .thumbnail-wrapper img {
  transform: scale(1.05);
}

.thumbnail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--media-primary-dark), var(--media-secondary));
  color: white;
  font-size: 3rem;
}

/* Duration Badge */
.video-card .duration-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: none;
  color: white;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Category Badge */
.video-card .category-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* YouTube source indicator on catalog cards — small pill in the top-right
   corner of the thumbnail with the YT play glyph. */
.video-card .card-yt-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  box-shadow: none;
}
.video-card .card-yt-badge svg {
  width: 16px;
  height: 16px;
  color: #ff0033;
}
.video-card .thumbnail-placeholder svg {
  width: 32px;
  height: 32px;
  color: color-mix(in srgb, var(--accent, #7bdcff) 70%, transparent);
}
.video-card .play-overlay svg {
  width: 48px;
  height: 48px;
  color: #fff;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
}
.video-card .card-meta svg,
.video-card .card-stats svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 4px;
}
.video-card .featured-badge svg {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}

.category-badge.review {
  background: none;
  color: #000;
}
.category-badge.showcase {
  background: none;
  color: #000;
}
.category-badge.tutorial {
  background: none;
  color: #000;
}
.category-badge.montage {
  background: none;
  color: #fff;
}

/* Play Overlay */
.video-card .play-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .play-overlay {
  opacity: 1;
}

.play-overlay svg {
  width: 56px;
  height: 56px;
  color: white;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card:hover .play-overlay svg {
  transform: scale(1.1);
}

/* Card Content */
.video-card .card-content {
  padding: 16px;
}

.video-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--media-text);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

.video-card .card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--media-text-muted);
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.video-card .card-meta svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.video-card .card-stats {
  display: flex;
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--media-border);
}

.video-card .card-stats .stat {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--media-text-muted);
  font-size: 0.8rem;
}

.video-card .card-stats .stat svg {
  width: 14px;
  height: 14px;
}

.video-card .card-stats .stat.liked {
  color: var(--media-primary);
}

/* Creator Mini */
.video-card .creator-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.video-card .creator-mini img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--media-border);
}

.video-card .creator-mini .creator-name {
  font-size: 0.8rem;
  color: var(--media-text-muted);
}

/* ── Loading ──────────────────────────────── */
.video-grid-loading {
  display: none;
  grid-column: 1 / -1;
}
/* Safety net: even if the wrapper somehow gets display:flex inline, hide the
   inner spinner content unless the wrapper has explicitly been marked active.
   Prevents a stuck 40px cyan dot from sitting in the hero area between page
   load and the JS toggle. */
.video-grid-loading:not(.is-active) .media-spinner { display: none !important; }

.video-grid-loading.is-active {
  display: block;
}

.media-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 80px 24px;
  color: var(--media-text-muted);
  font-size: 0.9rem;
}

.media-spinner svg {
  width: 40px;
  height: 40px;
  color: var(--media-primary);
  animation: mediaSpin 1s linear infinite;
}

@keyframes mediaSpin {
  to { transform: rotate(360deg); }
}

/* ── Empty State ──────────────────────────── */
.empty-state {
  text-align: center;
  padding: 80px 24px;
  color: var(--media-text-muted);
  grid-column: 1 / -1;
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  color: var(--media-text-muted);
  opacity: 0.3;
  margin-bottom: 20px;
}

.empty-state h3 {
  color: var(--media-text);
  opacity: 0.6;
  margin: 0 0 8px;
  font-size: 1.3rem;
  font-weight: 600;
}

.empty-state p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.5;
}

/* ── Pagination ───────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.pagination .page-info {
  color: var(--media-text-muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.pagination .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination .btn svg {
  width: 16px;
  height: 16px;
}

/* ============================================
   Modals — Glass Overlay System
   ============================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-dialog {
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 220, 255, 0.3) transparent;
}

.modal-dialog::-webkit-scrollbar {
  width: 6px;
}

.modal-dialog::-webkit-scrollbar-thumb {
  background: rgba(123, 220, 255, 0.3);
  border-radius: 3px;
}

.modal-sm { max-width: 440px; }
.modal-lg { max-width: 720px; }

.modal-fullscreen {
  max-width: min(1400px, 95vw);
  max-height: 95vh;
}

.modal-shell {
  background: linear-gradient(165deg, rgba(22, 30, 50, 0.95), rgba(10, 12, 22, 0.98));
  border: 1px solid var(--media-border);
  border-radius: var(--media-radius-lg);
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5), 0 0 48px rgba(123, 220, 255, 0.08);
  overflow: hidden;
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--media-border);
}

.modal-header-compact {
  padding: 14px 20px;
}

.modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--media-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-title-icon {
  width: 20px;
  height: 20px;
  color: var(--media-primary);
  flex-shrink: 0;
}

.modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--media-text-muted);
  cursor: pointer;
  transition: var(--media-transition);
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--media-border);
  color: var(--media-text);
}

.modal-close-btn svg {
  width: 18px;
  height: 18px;
}

.modal-header-actions {
  display: flex;
  gap: 8px;
}

.modal-header-actions .btn-icon {
  padding: 8px;
  min-width: 36px;
  height: 36px;
}

.modal-header-actions .btn-icon svg {
  width: 18px;
  height: 18px;
}

/* Modal Body */
.modal-body {
  padding: 24px;
}

/* Form Grid */
.modal-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.modal-form-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field.full-width {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--media-text);
}

.label-optional {
  font-weight: 400;
  color: var(--media-text-muted);
  opacity: 0.6;
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--media-border);
  border-radius: var(--media-radius-sm);
  color: var(--media-text);
  font-size: 0.9rem;
  font-family: inherit;
  transition: var(--media-transition);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--media-text-muted);
  opacity: 0.5;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--media-primary);
  box-shadow: 0 0 0 3px rgba(123, 220, 255, 0.12);
}

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-field select option {
  background: #1a1a2e;
}

/* Points Reward */
.points-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--media-radius-sm);
  color: var(--media-gold);
  font-size: 0.85rem;
}

.points-reward svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* ============================================
   Video Player
   ============================================ */

.video-player-body {
  padding: 0;
}

.video-wrapper {
  position: relative;
  background: #000;
  width: 100%;
}

/* YouTube custom-player shell — wraps the YT IFrame API mount with our luxe
   chrome: cyan border, glass shadow, fullscreen handoff button, and a small
   "YouTube" badge in the corner so the source is always disclosed. */
.yt-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md, 14px);
  overflow: hidden;
  box-shadow:
    0 18px 50px rgba(2,6,12,0.55),
    0 0 32px color-mix(in srgb, var(--accent, #7bdcff) 14%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent, #7bdcff) 22%, transparent);
}
.yt-wrapper[hidden] { display: none !important; }
.yt-wrapper iframe,
.yt-wrapper #ytPlayer,
.yt-wrapper #ytPlayer iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-fullscreen-overlay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}
.yt-fullscreen-overlay .yt-fullscreen-btn { pointer-events: auto; }
.yt-fullscreen-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent, #7bdcff) 35%, transparent);
  background: color-mix(in srgb, rgba(8,12,22,0.85) 80%, transparent);
  backdrop-filter: blur(var(--blur-sm, 8px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--blur-sm, 8px)) saturate(160%);
  color: color-mix(in srgb, var(--accent, #7bdcff) 95%, white 5%);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.yt-fullscreen-btn svg { width: 18px; height: 18px; }
.yt-fullscreen-btn:hover,
.yt-fullscreen-btn:focus-visible {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent, #7bdcff) 18%, rgba(8,12,22,0.85));
  border-color: color-mix(in srgb, var(--accent, #7bdcff) 70%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--accent, #7bdcff) 35%, transparent);
  outline: none;
}
.yt-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  font: 700 11px/1 "Manrope", system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: none;
  border: none;
  box-shadow: none;
  pointer-events: none;
}
.yt-badge svg { width: 14px; height: 14px; color: #ff0033; }

/* Fullscreen API hides the entire UI shell around the wrapper — make sure the
   wrapper takes the whole screen and keeps the brand chrome visible above the
   iframe. */
.yt-wrapper:fullscreen,
.yt-wrapper:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  border-radius: 0;
  aspect-ratio: auto;
}
.yt-wrapper:fullscreen .yt-fullscreen-overlay,
.yt-wrapper:-webkit-full-screen .yt-fullscreen-overlay {
  bottom: 24px;
  right: 24px;
}
.yt-wrapper:fullscreen .yt-badge,
.yt-wrapper:-webkit-full-screen .yt-badge {
  top: 24px;
  left: 24px;
}

/* Form hint under the URL field on the upload modal. */
.form-field .form-hint {
  display: block;
  margin-top: 6px;
  font: 500 12px/1.4 "Manrope", system-ui, sans-serif;
  color: color-mix(in srgb, var(--text, #eef3ff) 60%, transparent);
}

.main-video {
  width: 100%;
  max-height: 70vh;
  display: block;
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.video-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(123, 220, 255, 0.85);
  backdrop-filter: blur(8px);
  border: none;
  color: white;
  cursor: pointer;
  transition: var(--media-transition);
  box-shadow: 0 8px 32px rgba(123, 220, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

.play-btn:hover {
  transform: scale(1.1);
  background: var(--media-primary);
}

/* Video Controls */
.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  padding: 16px 20px 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-wrapper:hover .video-controls {
  opacity: 1;
}

.progress-bar {
  position: relative;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: height 0.15s ease;
}

.progress-bar:hover {
  height: 6px;
}

.progress-filled {
  height: 100%;
  background: linear-gradient(90deg, var(--media-primary), var(--media-secondary));
  border-radius: 2px;
  width: 0%;
  transition: width 0.1s linear;
}

.progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.progress-bar:hover .progress-handle {
  opacity: 1;
}

.controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.controls-left,
.controls-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.control-btn svg {
  width: 18px;
  height: 18px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 6px;
}

.volume-slider {
  width: 72px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  outline: none;
  appearance: none;
}

.volume-slider::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

.time-display {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
  font-family: "JetBrains Mono", "SF Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.speed-select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  padding: 4px 24px 4px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.speed-select option {
  background: #1a1a2e;
}

/* Video Info Section */
.video-info-section {
  padding: 24px;
  background: rgba(12, 16, 28, 0.95);
}

.video-header {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.video-meta h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--media-text);
  margin: 0 0 10px;
  line-height: 1.3;
}

.video-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: var(--media-text-muted);
  font-size: 0.85rem;
  align-items: center;
}

.video-stats svg {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

.video-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--media-border);
  border-radius: var(--media-radius-sm);
  color: var(--media-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--media-transition);
}

.action-btn svg {
  width: 16px;
  height: 16px;
}

.action-btn:hover {
  background: rgba(123, 220, 255, 0.1);
  border-color: rgba(123, 220, 255, 0.3);
}

.action-btn.active {
  background: var(--media-primary);
  border-color: var(--media-primary);
  color: white;
}

.action-btn.disliked {
  background: var(--media-danger);
  border-color: var(--media-danger);
  color: white;
}

.action-btn-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}

/* Video Description */
.video-description {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--media-radius-sm);
  margin-bottom: 20px;
}

.video-description p {
  color: var(--media-text-muted);
  line-height: 1.6;
  margin: 0;
  font-size: 0.9rem;
}

/* Video Creator */
.video-creator {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--media-radius-sm);
}

.creator-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--media-border);
}

.creator-info h3 {
  font-size: 1rem;
  color: var(--media-text);
  margin: 0 0 6px;
}

.creator-stats {
  display: flex;
  gap: 14px;
  color: var(--media-text-muted);
  font-size: 0.8rem;
  flex-wrap: wrap;
  align-items: center;
}

.creator-stats svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--media-gold);
  font-size: 0.7rem;
  font-weight: 700;
}

.badge svg {
  width: 12px;
  height: 12px;
}

/* ============================================
   Comments
   ============================================ */

.comments-section {
  padding: 24px;
  border-top: 1px solid var(--media-border);
}

.comments-section h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--media-text);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.comments-section h2 svg {
  width: 20px;
  height: 20px;
  color: var(--media-primary);
}

.comment-form {
  margin-bottom: 24px;
}

.comment-input-wrapper {
  display: flex;
  gap: 12px;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--media-border);
  flex-shrink: 0;
}

.comment-input-area {
  flex: 1;
}

.comment-input-area textarea {
  width: 100%;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--media-border);
  border-radius: var(--media-radius-sm);
  color: var(--media-text);
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
  transition: var(--media-transition);
}

.comment-input-area textarea:focus {
  outline: none;
  border-color: var(--media-primary);
  box-shadow: 0 0 0 3px rgba(123, 220, 255, 0.12);
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--media-radius-sm);
  border: 1px solid var(--media-border);
}

.comment-item .comment-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--media-border);
  flex-shrink: 0;
}

.comment-item .comment-body {
  flex: 1;
  min-width: 0;
}

.comment-item .comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.comment-item .comment-author {
  font-weight: 600;
  color: var(--media-text);
  font-size: 0.9rem;
}

.comment-item .comment-date {
  color: var(--media-text-muted);
  font-size: 0.75rem;
}

.comment-item .comment-content {
  color: var(--media-text-muted);
  line-height: 1.5;
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.comment-item .comment-footer {
  display: flex;
  gap: 14px;
}

.comment-item .comment-action {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--media-text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s ease;
}

.comment-item .comment-action:hover {
  color: var(--media-primary);
}

.comment-item .edited-badge {
  color: var(--media-text-muted);
  font-size: 0.7rem;
  font-style: italic;
}

.replies-list {
  margin-top: 12px;
  margin-left: 48px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.replies-list .comment-item {
  background: rgba(123, 220, 255, 0.04);
  border-color: rgba(123, 220, 255, 0.15);
}

.load-more-btn {
  margin-top: 16px;
}

/* ============================================
   Share
   ============================================ */

.share-url-box {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.share-url-box input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--media-border);
  border-radius: var(--media-radius-sm);
  color: var(--media-text);
  font-size: 0.85rem;
  font-family: "JetBrains Mono", "SF Mono", monospace;
}

.share-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.share-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--media-border);
  color: var(--media-text);
  cursor: pointer;
  transition: var(--media-transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-btn svg {
  width: 22px;
  height: 22px;
}

.share-btn:hover {
  background: var(--media-primary);
  border-color: var(--media-primary);
  color: white;
}

/* ============================================
   Points Notification
   ============================================ */

.points-notification {
  position: fixed;
  top: 90px;
  right: 20px;
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(245, 158, 11, 0.7));
  backdrop-filter: blur(12px);
  color: white;
  border-radius: var(--media-radius-sm);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transform: translateX(calc(100% + 40px));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.points-notification.is-visible {
  transform: translateX(0);
}

.points-notification svg {
  width: 22px;
  height: 22px;
  animation: coinSpin 1s ease-in-out infinite;
}

@keyframes coinSpin {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

/* ============================================
   Footer
   ============================================ */

.main-footer {
  padding: 40px 20px;
  text-align: center;
  border-top: 1px solid var(--media-border);
  color: var(--media-text-muted);
  font-size: 0.85rem;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 1024px) {
  .media-hero-content h1 {
    font-size: 2.5rem;
  }

  .media-hero-stats {
    gap: 24px;
  }

  .media-stat-value {
    font-size: 2rem;
  }

  .video-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

@media (max-width: 768px) {
  .media-hero {
    padding: 72px 20px 56px;
  }

  .media-hero-content h1 {
    font-size: 2rem;
  }

  .media-hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .media-stat-divider {
    width: 48px;
    height: 1px;
  }

  .filters-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-box {
    max-width: 100%;
  }

  .filter-group {
    justify-content: center;
  }

  .video-grid {
    grid-template-columns: 1fr;
  }

  .video-header {
    flex-direction: column;
  }

  .video-actions {
    flex-wrap: wrap;
  }

  .modal-form-grid {
    grid-template-columns: 1fr;
  }

  .modal-dialog {
    max-height: 95vh;
  }

  .video-creator {
    flex-direction: column;
    text-align: center;
  }

  .creator-stats {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .media-hero-content h1 {
    font-size: 1.6rem;
  }

  .filter-btn {
    padding: 7px 10px;
    font-size: 0.75rem;
  }

  .filter-btn svg {
    display: none;
  }

  .action-btn {
    padding: 7px 12px;
    font-size: 0.8rem;
  }

  .video-meta h1 {
    font-size: 1.2rem;
  }
}