:root {
  --bg:#0f1218;
  --navy:#101b2d;
  --navy-2:#17243a;
  --card:#ffffff;
  --surface:#f4f7fb;
  --text:#172033;
  --muted:#667084;
  --border:#d9e0ea;
  --gold:#c99739;
  --cyan:#1f9fc5;
  --cyan-soft:#e7f7fb;
  --danger:#b42335;
}

* { box-sizing:border-box; }

body {
  margin:0;
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--surface);
  color:var(--text);
  min-height:100vh;
}

a { color:inherit; }

.public-header {
  position:sticky;
  top:0;
  z-index:1000;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(18px,5vw,92px);
  padding:.42rem clamp(.9rem,3vw,1.6rem);
  border-bottom:1px solid rgba(217,224,234,.18);
  background:rgba(15,18,24,.94);
  backdrop-filter:blur(14px);
}

.brand-lockup {
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
}

.brand-seal {
  width:58px;
  height:58px;
  object-fit:contain;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.25));
}

.brand-lockup strong {
  display:block;
  font-size:1.05rem;
  line-height:1.05;
  color:#f5f7ff;
}

.brand-lockup small {
  display:block;
  margin-top:.12rem;
  color:#c2c9de;
  font-size:.78rem;
}

.public-nav {
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.public-nav a {
  text-decoration:none;
  color:#c2c9de;
  font-weight:700;
  font-size:.88rem;
  padding:.58rem .78rem;
  border-radius:10px;
  border:1px solid transparent;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.public-nav a:hover,
.public-nav a[aria-current="page"] {
  color:#f5f7ff;
  background:rgba(255,255,255,.08);
}

.public-nav .member-link {
  background:linear-gradient(135deg,#facc15 0%,#f59e0b 100%);
  border-color:#fde68a;
  color:#111827;
  box-shadow:0 14px 30px rgba(245,158,11,.28);
}

.public-nav .member-link:hover {
  background:linear-gradient(135deg,#facc15 0%,#f59e0b 100%);
  color:#111827;
  transform:translateY(-1px);
  box-shadow:0 18px 38px rgba(245,158,11,.38);
}

.header-topic-control {
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  min-height:38px;
  padding:.22rem .3rem .22rem .55rem;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:#d7deeb;
  font-size:.78rem;
  font-weight:850;
  white-space:nowrap;
}

.header-topic-control .category-select {
  min-height:30px;
  width:132px;
  min-width:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:#f8fafc;
  color:#172033;
  padding:.28rem .42rem;
  font-size:.78rem;
  font-weight:850;
}

.viewer-shell {
  width:100%;
}

.viewer-hero {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,2.5rem);
  color:#fff;
  background:
    radial-gradient(circle at 80% 10%, rgba(31,159,197,.35), transparent 32%),
    radial-gradient(circle at 12% 20%, rgba(201,151,57,.26), transparent 28%),
    linear-gradient(135deg,#0d1728,#17243a 54%,#0d1728);
}

.viewer-hero > div {
  max-width:760px;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  padding:.35rem .6rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  color:var(--gold);
  background:rgba(255,255,255,.08);
  font-size:.76rem;
  font-weight:800;
  text-transform:uppercase;
}

.viewer-hero h1 {
  margin:.85rem 0 0;
  font-size:clamp(2.1rem,5vw,4rem);
  line-height:1;
  letter-spacing:0;
}

.viewer-hero p {
  margin:1rem 0 0;
  max-width:680px;
  color:#d7deeb;
  line-height:1.6;
}

.viewer-hero-compact {
  padding:.65rem clamp(1rem,4vw,2.5rem);
  align-items:center;
  min-height:auto;
}

.viewer-hero-compact h1 {
  margin:.35rem 0 0;
  font-size:clamp(1.35rem,2.4vw,1.95rem);
  line-height:1.05;
}

.viewer-hero-compact p {
  margin:.35rem 0 0;
  max-width:none;
  font-size:.95rem;
}

.hero-cta,
.rail-card a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.72rem 1rem;
  border-radius:10px;
  border:1px solid #fde68a;
  background:linear-gradient(135deg,#facc15 0%,#f59e0b 100%);
  color:#111827;
  text-decoration:none;
  font-weight:850;
  white-space:nowrap;
  box-shadow:0 14px 30px rgba(245,158,11,.28);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.hero-cta:hover,
.rail-card a:hover {
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 18px 38px rgba(245,158,11,.38);
}

.viewer-layout {
  display:block;
  padding:.55rem clamp(.75rem,1.4vw,1.25rem) 1rem;
  max-width:1720px;
  margin:0 auto;
}

.viewer-main {
  min-width:0;
}

.featured-player-card,
.filter-panel,
.rail-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 10px 26px rgba(23,32,51,.08);
}

.featured-player-card {
  overflow:hidden;
  margin-bottom:1rem;
  width:100%;
  max-width:920px;
}

.featured-player-card[hidden] {
  display:none;
}

.featured-player {
  position:relative;
  aspect-ratio:16 / 9;
  background:#050914;
}

.featured-player video {
  width:100%;
  height:100%;
  object-fit:contain;
  background:#050914;
  display:block;
}

.featured-player video.meme-video-fill,
.viewer-modal video.meme-video-fill {
  object-fit:cover;
}

.photo-carousel {
  position:relative;
  width:100%;
  height:100%;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050914;
  overflow:hidden;
}

.photo-carousel-image {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.photo-carousel-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(5,9,20,.58);
  color:#fff;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

.photo-carousel-btn.prev {
  left:12px;
}

.photo-carousel-btn.next {
  right:12px;
}

.photo-carousel-count {
  position:absolute;
  right:12px;
  bottom:12px;
  border-radius:999px;
  background:rgba(5,9,20,.72);
  color:#fff;
  font-size:.82rem;
  padding:.35rem .65rem;
}

.featured-play {
  position:absolute;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  width:76px;
  height:76px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  backdrop-filter:blur(8px);
}

.duration-badge,
.lock-badge {
  position:absolute;
  right:.6rem;
  bottom:.6rem;
  background:rgba(0,0,0,.75);
  color:#fff;
  border-radius:6px;
  padding:.24rem .45rem;
  font-size:.75rem;
  font-weight:800;
}

.lock-badge {
  top:.55rem;
  bottom:auto;
  background:rgba(180,35,53,.92);
}

.featured-details {
  padding:1rem;
}

.featured-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.featured-details h2 {
  margin:0;
  font-size:1.35rem;
}

.featured-details p {
  margin:.85rem 0 0;
  color:var(--muted);
  line-height:1.55;
}

.featured-meta,
.category-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem;
  margin-top:.5rem;
  color:var(--muted);
  font-size:.86rem;
}

.featured-actions {
  display:flex;
  gap:.45rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.secondary-action,
.load-more-btn {
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(135deg,#111827 0%,#1f2937 100%);
  color:#fff;
  border-radius:10px;
  padding:.55rem .75rem;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(15,23,42,.24);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.secondary-action:hover,
.load-more-btn:hover {
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 16px 34px rgba(15,23,42,.34);
}

.secondary-action:disabled {
  opacity:.5;
  cursor:not-allowed;
}

.share-action {
  min-width:44px;
  text-align:center;
}

#shareFacebook {
  border-color:#c8d8ff;
  color:#184d9c;
  background:#f3f7ff;
}

#shareX {
  border-color:#d8dde6;
  color:#111827;
  background:#f7f8fa;
}

.status-pill,
.category-pill {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  border-radius:999px;
  padding:.22rem .55rem;
  font-size:.75rem;
  font-weight:800;
  color:#11647a;
  background:var(--cyan-soft);
}

.status-pill.locked {
  color:#8a1f2c;
  background:#ffe9ec;
}

.category-pill {
  color:#6a4b14;
  background:#fff5db;
}

.filter-panel {
  position:sticky;
  top:78px;
  z-index:500;
  display:grid;
  grid-template-columns:minmax(250px,420px) minmax(0,1fr);
  gap:.55rem;
  align-items:center;
  margin:.42rem 0 .55rem;
  padding:.42rem .5rem;
}

.search-wrap {
  position:relative;
  min-width:0;
}

.search-wrap span {
  position:absolute;
  left:.8rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
}

.filter-input {
  width:100%;
  min-height:34px;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.4rem .65rem .4rem 2rem;
  background:#fff;
  color:var(--text);
  font-size:.9rem;
}

body.has-selected-video .filter-panel {
  position:sticky;
  top:78px;
  margin:.42rem 0 .55rem;
  padding:.42rem .5rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  box-shadow:0 10px 26px rgba(23,32,51,.08);
}

body.has-selected-video .filter-input {
  min-height:34px;
  padding:.38rem .65rem .38rem 2rem;
  font-size:.9rem;
}

.public-header .filter-panel {
  flex:1 1 300px;
  max-width:460px;
}

.public-header .search-wrap {
  flex:1 1 auto;
}

.public-header .filter-input {
  min-height:36px;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.1);
  color:#f5f7ff;
}

.public-header .filter-input::placeholder {
  color:#c2c9de;
}

.public-header .search-wrap span {
  color:#c2c9de;
}

.filter-input:focus {
  outline:2px solid rgba(31,159,197,.22);
  border-color:var(--cyan);
}

.category-select-label {
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:.75rem;
  color:var(--muted);
  font-size:.9rem;
  font-weight:800;
  padding:.75rem;
  border:1px solid rgba(31,159,197,.18);
  border-radius:8px;
  background:rgba(232,247,251,.58);
}

.category-label-copy {
  display:flex;
  flex-direction:column;
  gap:.12rem;
  min-width:170px;
}

.category-label-main {
  color:var(--text);
  font-size:1rem;
  line-height:1.1;
}

.category-label-hint {
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  line-height:1.25;
}

.category-select {
  min-height:42px;
  min-width:220px;
  width:100%;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--text);
  padding:.55rem .65rem;
  font:inherit;
  font-weight:800;
}

.chips-wrap {
  display:flex;
  flex-wrap:nowrap;
  gap:.38rem;
  overflow-x:auto;
  overflow-y:hidden;
  padding:.05rem .05rem .12rem;
  scrollbar-width:thin;
}

.chip {
  flex:0 0 auto;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fff;
  color:var(--muted);
  min-height:34px;
  padding:.38rem .62rem;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.chip.active {
  border-color:rgba(31,159,197,.4);
  background:var(--cyan-soft);
  color:var(--text);
}

.watch-layout {
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.watch-main {
  min-width:0;
  display:none;
  order:2;
}

body.has-selected-video .watch-main {
  display:block;
}

.watch-side {
  min-width:0;
  width:100%;
  max-width:100%;
  order:1;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.category-rail {
  position:sticky;
  top:154px;
  z-index:450;
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.55rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  box-shadow:0 10px 26px rgba(23,32,51,.08);
}

.category-rail .category-select-label {
  flex:0 0 280px;
  padding:.55rem;
}

.category-rail .category-label-hint {
  display:none;
}

.category-rail .chips-wrap {
  flex:1 1 auto;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding:.05rem .1rem;
  scrollbar-width:thin;
}

body.has-selected-video .watch-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,420px);
  gap:1rem;
  align-items:start;
  justify-content:start;
}

body.has-selected-video .watch-main,
body.has-selected-video .watch-side {
  order:initial;
}

body.has-selected-video .watch-main {
  max-width:none;
}

body.has-selected-video .featured-player-card {
  max-width:none;
}

body.has-selected-video .watch-side {
  position:static;
  max-height:none;
  overflow:visible;
}

body.has-selected-video .category-rail {
  position:relative;
  top:auto;
  display:block;
  padding:.75rem;
}

body.has-selected-video .category-rail .category-select-label {
  flex:auto;
}

body.has-selected-video .category-rail .category-label-hint {
  display:block;
}

body.has-selected-video .category-rail .chips-wrap {
  display:flex;
  flex-wrap:wrap;
  overflow:visible;
  padding:.75rem 0 .1rem;
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin:.35rem 0 .75rem;
}

.section-heading h2 {
  margin:0;
  font-size:1.35rem;
}

.section-heading p {
  margin:.2rem 0 0;
  color:var(--muted);
  font-size:.9rem;
}

.video-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:.8rem;
}

body.has-selected-video .recommendation-panel .section-heading {
  align-items:flex-start;
  margin:.1rem 0 .65rem;
}

body.has-selected-video .recommendation-panel .section-heading h2 {
  font-size:1.15rem;
}

body.has-selected-video .recommendation-panel .section-heading p {
  font-size:.9rem;
}

body.has-selected-video .recommendation-panel .video-grid {
  display:flex;
  flex-direction:column;
  gap:.55rem;
}

body.has-selected-video .recommendation-panel .video-card {
  display:grid;
  grid-template-columns:158px minmax(0,1fr);
  gap:.7rem;
  border:0;
  border-radius:8px;
  box-shadow:none;
}

body.has-selected-video .recommendation-panel .video-card:hover,
body.has-selected-video .recommendation-panel .video-card:focus {
  transform:none;
  box-shadow:none;
  background:var(--surface);
}

body.has-selected-video .recommendation-panel .thumb-wrap {
  border-radius:8px;
}

body.has-selected-video .recommendation-panel .video-card-body {
  padding:.1rem .25rem .1rem 0;
}

body.has-selected-video .recommendation-panel .video-title {
  font-size:.96rem;
  line-height:1.25;
}

body.has-selected-video .recommendation-panel .video-tags {
  display:none;
}

body.has-selected-video .recommendation-panel .video-meta {
  margin-top:.35rem;
  font-size:.78rem;
}

.video-engagement-panel {
  display:none;
  margin-top:1rem;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 10px 26px rgba(23,32,51,.08);
}

body.has-selected-video .video-engagement-panel {
  display:block;
}

.video-engagement-panel h2 {
  margin:0;
  font-size:1.2rem;
}

.video-engagement-panel p {
  margin:.45rem 0 0;
  color:var(--muted);
  line-height:1.55;
}

.video-engagement-panel a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:.8rem;
  min-height:40px;
  padding:.65rem .9rem;
  border-radius:9px;
  background:linear-gradient(135deg,#facc15 0%,#f59e0b 100%);
  color:#111827;
  text-decoration:none;
  font-weight:900;
}

.video-card {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(23,32,51,.07);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.video-card:hover,
.video-card:focus {
  outline:none;
  transform:translateY(-2px);
  border-color:rgba(31,159,197,.55);
  box-shadow:0 12px 28px rgba(23,32,51,.12);
}

.video-card.selected {
  border-color:var(--cyan);
}

.thumb-wrap {
  position:relative;
  aspect-ratio:16 / 9;
  background:var(--navy);
  overflow:hidden;
}

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

.play-icon {
  position:absolute;
  left:.6rem;
  bottom:.55rem;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.62);
  font-size:.95rem;
}

.video-card-body {
  padding:.62rem;
}

.video-title {
  font-size:.86rem;
  font-weight:850;
  line-height:1.3;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.5em;
}

.video-tags {
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin-top:.45rem;
  max-height:2.8rem;
  overflow:hidden;
}

.video-tags span {
  max-width:100%;
  border:1px solid rgba(31,159,197,.18);
  border-radius:7px;
  background:rgba(232,247,251,.72);
  color:#11647a;
  padding:.22rem .4rem;
  font-size:.68rem;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.video-meta {
  margin-top:.45rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  color:var(--muted);
  font-size:.72rem;
}

.viewer-load-more-wrap {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  padding:1rem;
}

.viewer-load-more-wrap[hidden] {
  display:none;
}

.viewer-load-more-status {
  color:var(--muted);
  font-size:.9rem;
}

.viewer-rail {
  position:sticky;
  top:84px;
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.rail-card {
  padding:1rem;
}

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

.rail-card p,
.rail-note {
  color:var(--muted);
  line-height:1.5;
  font-size:.88rem;
}

.popular-list {
  display:flex;
  flex-direction:column;
  gap:.45rem;
  margin-top:.75rem;
}

.related-list {
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin-top:.75rem;
}

.popular-item {
  display:flex;
  width:100%;
  gap:.65rem;
  align-items:flex-start;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:.55rem;
  cursor:pointer;
}

.popular-item:hover {
  background:var(--surface);
}

.related-item {
  display:grid;
  grid-template-columns:76px 1fr;
  width:100%;
  gap:.65rem;
  align-items:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  text-align:left;
  padding:.45rem;
  cursor:pointer;
}

.related-item:hover {
  background:var(--surface);
}

.related-item img {
  width:76px;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:7px;
  background:var(--navy);
}

.related-item strong {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:.86rem;
  line-height:1.25;
}

.related-item small {
  display:block;
  margin-top:.2rem;
  color:var(--muted);
  font-size:.76rem;
}

.popular-rank {
  display:grid;
  place-items:center;
  flex:0 0 28px;
  height:28px;
  border-radius:7px;
  background:var(--navy);
  color:var(--gold);
  font-weight:900;
}

.popular-item strong {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:.88rem;
  line-height:1.25;
}

.popular-item small {
  display:block;
  margin-top:.2rem;
  color:var(--muted);
}

.member-card {
  border-color:rgba(201,151,57,.35);
  background:#fff9ea;
}

.empty-state {
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:180px;
  gap:.35rem;
  padding:2rem;
  border:1px dashed var(--border);
  border-radius:10px;
  background:#fff;
  color:var(--muted);
  text-align:center;
}

.empty-state strong {
  color:var(--text);
}

.suggested-row-heading {
  grid-column:1 / -1;
  margin:.15rem 0 -.2rem;
  color:var(--text);
  font-weight:900;
}

.viewer-modal-overlay {
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(3,8,18,.88);
  padding:1rem;
}

.viewer-modal-overlay.open {
  display:flex;
}

.viewer-modal {
  position:relative;
  width:min(1100px,96vw);
  max-height:92vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  background:#0b111f;
  color:#fff;
  padding:1rem;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}

.viewer-modal video {
  width:100%;
  max-height:62vh;
  object-fit:contain;
  background:#000;
  border-radius:8px;
}

.viewer-modal .photo-carousel {
  height:min(72vh, 820px);
  border-radius:8px;
}

.viewer-modal-close {
  position:absolute;
  top:.7rem;
  right:.7rem;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(0,0,0,.6);
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  z-index:2;
}

#modal-details {
  margin-top:.8rem;
  color:#dce4f3;
}

.main-video-header {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
}

.main-video-header h2 {
  margin:0;
  font-size:1.2rem;
}

.modal-nav {
  display:flex;
  gap:.6rem;
  margin-top:.8rem;
}

.nav-btn {
  flex:1;
  min-height:42px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:linear-gradient(135deg,#111827 0%,#1f2937 100%);
  color:#fff;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(15,23,42,.24);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.nav-btn:hover {
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 16px 34px rgba(15,23,42,.34);
}

.back-to-top {
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:1200;
  display:none;
  border:0;
  border-radius:999px;
  background:linear-gradient(135deg,#111827 0%,#1f2937 100%);
  color:#fff;
  padding:.75rem 1rem;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(16,27,45,.24);
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.back-to-top:hover {
  transform:translateY(-1px);
  filter:brightness(1.05);
  box-shadow:0 16px 34px rgba(15,23,42,.34);
}

.back-to-top.visible {
  display:block;
}

@media (max-width:1100px) {
  .viewer-rail {
    position:static;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
}

@media (max-width:720px) {
  .public-header {
    position:static;
    align-items:flex-start;
    flex-direction:column;
    gap:.55rem;
  }
  .public-nav {
    width:100%;
    justify-content:flex-start;
  }
  .header-topic-control {
    order:3;
    width:100%;
    justify-content:space-between;
  }
  .header-topic-control .category-select {
    width:min(100%, 210px);
  }
  .public-header .filter-panel {
    width:100%;
    max-width:none;
    flex-basis:auto;
  }
  .viewer-hero {
    align-items:flex-start;
    flex-direction:column;
    padding:1.5rem 1rem;
  }
  .viewer-layout {
    padding:.75rem;
  }
  .filter-panel {
    position:static;
    grid-template-columns:1fr;
    gap:.42rem;
  }
  .watch-layout {
    display:flex;
    flex-direction:column;
  }
  body.has-selected-video .watch-layout {
    display:flex;
    flex-direction:column;
  }
  body.has-selected-video .watch-side {
    position:static;
    max-height:none;
    overflow:visible;
  }
  .category-rail {
    display:flex;
    position:static;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow:hidden;
    padding:.65rem;
  }
  .category-rail .category-select-label {
    flex:auto;
  }
  .category-rail .chips-wrap,
  body.has-selected-video .category-rail .chips-wrap {
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:.05rem .1rem;
  }
  .category-select-label,
  .category-select {
    width:100%;
    min-width:0;
  }
  .featured-player-card {
    max-width:none;
  }
  body.has-selected-video .watch-main,
  body.has-selected-video .featured-player-card {
    max-width:none;
  }
  .featured-heading {
    flex-direction:column;
  }
  .featured-actions {
    justify-content:flex-start;
  }
  .video-grid {
    grid-template-columns:1fr;
  }
  body.has-selected-video .recommendation-panel .video-grid {
    display:grid;
    grid-template-columns:1fr;
  }
  body.has-selected-video .recommendation-panel .video-card {
    width:100%;
    max-width:100%;
    display:block;
    grid-template-columns:none;
    border:1px solid var(--border);
    box-shadow:0 8px 20px rgba(23,32,51,.07);
  }
  body.has-selected-video .recommendation-panel .video-card-body {
    min-width:0;
    padding:.8rem;
  }
  body.has-selected-video .recommendation-panel .video-tags {
    display:flex;
  }
  .viewer-modal {
    width:100vw;
    max-height:100vh;
    height:100vh;
    border-radius:0;
  }
}