:root {
  color-scheme: dark;
  --bg: #080b0d;
  --panel: #11171a;
  --panel-2: #182126;
  --text: #f3f7f8;
  --muted: #8f9ca2;
  --line: #29343a;
  --accent: #84f528;
  --header: 76px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 20% -10%, #1b252a 0, transparent 34rem),
    linear-gradient(180deg, #0d1215, var(--bg) 26rem);
  font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button { font: inherit; }

.header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(14px, 3vw, 42px);
  border-bottom: 1px solid var(--line);
  background: rgb(8 11 13 / 88%);
  backdrop-filter: blur(18px);
}
.header-side { display: flex; gap: 10px; }
.header-side.right { justify-content: flex-end; }
.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--accent);
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.icon-button:hover:not(:disabled), .icon-button:focus-visible { background: transparent; outline: none; filter: brightness(1.2); }
.icon-button:disabled { opacity: .25; cursor: default; }
.icon-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-button img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 16px;
  border: 0;
  color: var(--text);
  background: transparent;
  font-weight: 900;
  letter-spacing: .24em;
  cursor: pointer;
}
.brand-name { font-weight: 900; }
.brand-version { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .08em; }

.header-avatar-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.header-avatar-button:hover,
.header-avatar-button:focus-visible {
  border-color: var(--accent);
  transform: scale(1.04);
  outline: none;
}
.header-avatar-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.header-avatar-fallback {
  font-size: 18px;
  font-weight: 900;
}

.page { width: min(1815px, 98.5vw); margin: 0 auto; padding: 30px 0 80px; }
.page-heading { margin-bottom: 30px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 68px); line-height: 1; letter-spacing: -.04em; }
.page-copy { margin: 14px 0 0; color: var(--muted); font-size: 17px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 240px));
  justify-content: start;
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
}
.media-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}
.media-card:hover, .media-card:focus-visible { transform: translateY(-4px); border-color: var(--accent); outline: none; }
.card-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(132 245 40 / 15%), transparent 52%),
    repeating-linear-gradient(135deg, #192126 0 18px, #151c20 18px 36px);
  border-bottom: 1px solid var(--line);
}
.shape-3x2 .card-art { aspect-ratio: 3 / 2; }
.shape-2x3 .card-art { aspect-ratio: 2 / 3; }
.shape-1x1 .card-art { aspect-ratio: 1; }
.shape-16x9 .card-art { aspect-ratio: 16 / 9; }
.card-mark { color: rgb(255 255 255 / 8%); font-size: clamp(66px, 10vw, 130px); font-weight: 950; line-height: 1; }
.card-copy { display: block; padding: 15px 16px 17px; }
.card-title, .card-subtitle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card-title { font-size: 17px; }
.card-subtitle { margin-top: 4px; color: var(--muted); font-size: 13px; }
.empty-state { padding: 40px; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: min(330px, 86vw);
  padding: 28px;
  transform: translateX(-102%);
  background: #0d1215;
  border-right: 1px solid var(--line);
  transition: transform 160ms ease;
}
.drawer.open { transform: translateX(0); }
.drawer-title { margin: 6px 8px 22px; color: var(--accent); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.drawer-link {
  width: 100%;
  padding: 14px 12px;
  color: var(--text);
  text-align: left;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
}
.drawer-link:hover, .drawer-link:focus-visible { background: var(--panel-2); outline: none; }
.scrim { position: fixed; inset: 0; z-index: 30; border: 0; background: rgb(0 0 0 / 66%); }

@media (max-width: 1200px) {
  .library-grid,
  .library-grid.shape-2x3,
  .library-grid.shape-1x1,
  .library-grid.shape-16x9 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .library-grid,
  .library-grid.shape-2x3,
  .library-grid.shape-1x1,
  .library-grid.shape-16x9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  :root { --header: 66px; }
  .icon-button { width: 40px; height: 40px; }
  .header-avatar-button { width: 42px; height: 42px; }
  .brand { gap: 6px; font-size: 12px; letter-spacing: .14em; }
  .brand-version { font-size: 9px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .card-copy { padding: 12px; }
}


.media-row { margin: 0 0 38px; }
.row-title { margin: 0 0 14px; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; }
.row-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 330px);
  gap: 18px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: none;
}
.row-track::-webkit-scrollbar { display: none; }
.row-empty {
  min-height: 126px;
  display: grid;
  place-items: center;
  padding: 22px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 18px;
  background: rgb(17 23 26 / 52%);
}
.media-item { width: 100%; }

/* Permanent compact home-media rows. Category cards keep their own grid sizing. */
.row-track {
  grid-auto-columns: clamp(118px, 10vw, 154px);
  gap: 14px;
}
.compact-media-card {
  border-radius: 13px;
}
.compact-media-card .card-copy {
  padding: 10px 11px 12px;
}
.compact-media-card .card-title {
  font-size: 14px;
}
.compact-media-card .card-subtitle {
  font-size: 14px;
}
.media-progress {
  display: block;
  height: 3px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #303b40;
}
.media-progress-fill {
  display: block;
  height: 100%;
  background: var(--accent);
}
@media (max-width: 620px) {
  .row-track { grid-auto-columns: 112px; gap: 12px; }
}

/* 0.007 shared home poster component */
.row-track {
  grid-auto-columns: clamp(126px, 10vw, 158px);
  align-items: start;
}
.media-poster {
  position: relative;
  min-width: 0;
}
.poster-card {
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}
.poster-card:hover,
.poster-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  outline: none;
}
.poster-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgb(132 245 40 / 15%), transparent 52%),
    repeating-linear-gradient(135deg, #192126 0 18px, #151c20 18px 36px);
}
.poster-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.poster-mark {
  color: rgb(255 255 255 / 8%);
  font-size: 72px;
  font-weight: 950;
}
.poster-copy {
  display: block;
  padding: 10px 11px 12px;
}
.poster-title,
.poster-subtitle {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.poster-title { font-size: 14px; }
.poster-subtitle { margin-top: 4px; color: var(--muted); font-size: 11px; }
.poster-remove {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: block;
  padding: 0;
  color: #00ff03;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.poster-remove-icon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.poster-remove-x {
  fill: currentColor;
  stroke: none;
}
.poster-remove-ring {
  fill: rgb(0 0 0 / 78%);
  stroke: #00ff03;
  stroke-width: 3.302;
  vector-effect: non-scaling-stroke;
}
.poster-remove:hover,
.poster-remove:focus-visible {
  color: #00eaff;
  outline: none;
}


/* 0.008 permanent category Recently Added / New Releases row */
.category-media-row {
  margin: 34px 0 38px;
}
.category-row-controls {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.category-row-tabs {
  display: flex;
  gap: 10px;
}
.category-row-tab {
  min-height: 48px;
  padding: 0 20px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.category-row-tab:hover,
.category-row-tab:focus-visible,
.category-row-tab.active {
  color: #081006;
  border-color: var(--accent);
  background: var(--accent);
  outline: none;
}
.category-row-track-wrap {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  gap: 14px;
  align-items: center;
}
.category-row-arrow {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: rgb(8 11 13 / 82%);
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
}
.category-row-arrow-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.category-row-arrow-icon.mirrored { transform: scaleX(-1); }.category-row-arrow:hover,
.category-row-arrow:focus-visible {
  color: #071005;
  background: var(--accent);
  outline: none;
}
.category-row-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(130px, 11vw, 168px);
  gap: 15px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.category-row-track::-webkit-scrollbar { display: none; }
.category-media-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 140ms ease, border-color 140ms ease;
}
.category-media-card:hover,
.category-media-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  outline: none;
}
.category-media-art {
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgb(132 245 40 / 15%), transparent 52%),
    repeating-linear-gradient(135deg, #192126 0 18px, #151c20 18px 36px);
}
.category-media-card.shape-2x3 .category-media-art { aspect-ratio: 2 / 3; }
.category-media-card.shape-1x1 .category-media-art { aspect-ratio: 1; }
.category-media-card.shape-16x9 .category-media-art { aspect-ratio: 16 / 9; }
.category-media-image { width: 100%; height: 100%; object-fit: cover; }
.category-media-mark { color: rgb(255 255 255 / 8%); font-size: 66px; font-weight: 950; }
.category-media-copy { display: block; padding: 10px 11px 12px; }
.category-media-title,
.category-media-subtitle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.category-media-title { font-size: 14px; }
.category-media-subtitle { margin-top: 4px; color: var(--muted); font-size: 11px; }
.category-row-empty {
  min-width: min(520px, 72vw);
  min-height: 130px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 14px;
}
@media (max-width: 620px) {
  .category-row-track-wrap { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 9px; }
  .category-row-arrow { width: 46px; height: 46px; font-size: 39px; }
  .category-row-track { grid-auto-columns: 116px; gap: 12px; }
  .category-row-tab { min-height: 44px; padding: 0 13px; font-size: 12px; }
}


/* 0.013 shared Back category card */
.back-category-card .card-copy { text-align: center; }
.back-card-art { min-height: 0; }
.back-card-icon { width: 64%; height: 64%; overflow: visible; }
.back-card-icon path { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }

/* 0.014 shared horizontal category browser */
.category-browser-row {
  margin: 0 0 34px;
}
.category-browser-wrap {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  gap: 14px;
  align-items: center;
}
.category-browser-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: clamp(18px, 2vw, 30px);
  min-width: 0;
  overflow-x: auto;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.category-browser-track::-webkit-scrollbar { display: none; }
.category-browser-track .category-card {
  width: 240px;
  scroll-snap-align: start;
}
.category-browser-track .back-category-card {
  width: 120px;
}
.category-browser-track .back-category-card .back-card-icon {
  width: 64%;
  height: 64%;
}
.category-browser-arrow {
  align-self: center;
}
@media (max-width: 620px) {
  .category-browser-wrap {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 9px;
  }
  .category-browser-track {
    grid-auto-columns: max-content;
    gap: 14px;
  }
  .category-browser-track .category-card {
    width: min(240px, 72vw);
  }
  .category-browser-track .back-category-card {
    width: min(120px, 36vw);
  }
}

/* 0.018 reliable six-across shared grid and double-size alphabet rail */
.library-grid-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 22px;
  margin: 10px 0 46px;
}
.library-grid-content { min-width: 0; }
.alphabet-group { scroll-margin-top: calc(var(--header) + 18px); margin-bottom: 34px; }
.alphabet-group-title { margin: 0 0 14px; color: var(--accent); font-size: 20px; }
.library-grid {
  display: grid !important;
  width: 100%;
  grid-auto-flow: row;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 18px;
}
.library-grid.shape-2x3,
.library-grid.shape-1x1,
.library-grid.shape-16x9 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
.grid-media-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
}
.grid-media-card:hover,
.grid-media-card:focus-visible { border-color: var(--accent); transform: translateY(-3px); outline: none; }
.grid-media-art {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgb(132 245 40 / 15%), transparent 52%), repeating-linear-gradient(135deg, #192126 0 18px, #151c20 18px 36px);
}
.grid-media-card.shape-2x3 .grid-media-art { aspect-ratio: 2 / 3; }
.grid-media-card.shape-1x1 .grid-media-art { aspect-ratio: 1; }
.grid-media-card.shape-16x9 .grid-media-art { aspect-ratio: 16 / 9; }
.grid-media-image { width: 100%; height: 100%; object-fit: cover; }
.grid-media-mark { color: rgb(255 255 255 / 8%); font-size: 68px; font-weight: 950; }
.grid-media-copy { display: block; padding: 11px 12px 13px; }
.grid-media-title,
.grid-media-subtitle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grid-media-title { font-size: 14px; }
.grid-media-subtitle { margin-top: 4px; color: var(--muted); font-size: 11px; }
.alphabet-rail {
  position: sticky;
  top: calc(var(--header) + 14px);
  align-self: start;
  display: grid;
  gap: 4px;
  max-height: calc(100vh - var(--header) - 28px);
}
.alphabet-letter {
  width: 64px;
  min-height: 42px;
  padding: 0;
  color: var(--muted);
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
}
.alphabet-letter:hover:not(:disabled),
.alphabet-letter:focus-visible,
.alphabet-letter.active { color: #071005; background: var(--accent); outline: none; }
.alphabet-letter:disabled { opacity: .22; cursor: default; }
@media (max-width: 620px) {
  .library-grid-shell { grid-template-columns: minmax(0, 1fr) 48px; gap: 10px; }
  .library-grid,
  .library-grid.shape-2x3,
  .library-grid.shape-1x1,
  .library-grid.shape-16x9 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .alphabet-letter { width: 44px; min-height: 34px; font-size: 18px; }
}

/* 0.019 shared title/year treatment for every media card */
.scrolling-title {
  display: block;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.scrolling-title-track {
  display: inline-flex;
  min-width: max-content;
  will-change: transform;
}
.scrolling-title-copy { display: inline-block; }
.scrolling-title-repeat {
  padding-left: 34px;
  padding-right: 34px;
}
.category-media-card:hover .scrolling-title.is-overflowing .scrolling-title-track,
.category-media-card:focus-visible .scrolling-title.is-overflowing .scrolling-title-track,
.grid-media-card:hover .scrolling-title.is-overflowing .scrolling-title-track,
.grid-media-card:focus-visible .scrolling-title.is-overflowing .scrolling-title-track,
.poster-card:hover .scrolling-title.is-overflowing .scrolling-title-track,
.poster-card:focus-visible .scrolling-title.is-overflowing .scrolling-title-track {
  animation: title-marquee var(--title-duration, 5s) linear infinite;
}
@keyframes title-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--title-distance))); }
}
@media (prefers-reduced-motion: reduce) {
  .scrolling-title-track { animation: none !important; }
}

/* 0.020 one shared Movie/TV detail shell */
.detail-page { margin: -20px -24px 50px; }
.detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 28vw) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  min-height: 620px;
  padding: clamp(72px, 8vw, 130px) clamp(24px, 4vw, 72px) 52px;
  overflow: hidden;
  background: linear-gradient(90deg, #14191c 0%, rgb(10 14 16 / 84%) 48%, rgb(8 11 13 / 94%) 100%), var(--detail-hero, linear-gradient(135deg, #1e292e, #090c0e));
  background-size: cover;
  background-position: center;
}
.detail-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(transparent, #0b0f11); pointer-events: none; }
.detail-poster { position: relative; z-index: 1; align-self: start; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: repeating-linear-gradient(135deg, #172126 0 22px, #12191d 22px 44px); box-shadow: 0 22px 55px rgb(0 0 0 / 48%); }
.detail-poster img { width: 100%; height: 100%; object-fit: cover; }
.detail-poster-mark { display: grid; width: 100%; height: 100%; place-items: center; color: rgb(255 255 255 / 8%); font-size: clamp(90px, 12vw, 180px); font-weight: 950; }
.detail-content { position: relative; z-index: 1; min-width: 0; padding-top: 4px; }
.detail-logo { display: grid; min-height: 130px; place-items: center; color: var(--accent); font-size: clamp(38px, 6vw, 84px); font-weight: 950; letter-spacing: -.05em; text-align: center; text-transform: uppercase; }
.detail-logo img { max-width: min(520px, 75%); max-height: 130px; object-fit: contain; }
.detail-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 6px -72px 24px -24px; padding: 24px 72px 24px 24px; background: rgb(28 31 32 / 88%); backdrop-filter: blur(10px); }
.detail-title-copy h1 { margin: 0 0 7px; font-size: clamp(24px, 2.2vw, 36px); }
.detail-facts { display: flex; flex-wrap: wrap; gap: 12px; color: #d2d6d8; font-size: 14px; }
.detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.detail-action { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; color: #e6eaeb; border: 1px solid transparent; border-radius: 50%; background: transparent; font-size: 22px; cursor: pointer; }
.detail-action:hover, .detail-action:focus-visible { color: #06e9ff; border-color: #06e9ff; outline: none; }
.detail-body { max-width: 1050px; padding: 0 0 0 0; color: #d7dadb; line-height: 1.55; }
.detail-tagline { font-size: 19px; }
.detail-description { max-width: 980px; }
.detail-tags { color: #bfc5c7; font-size: 13px; font-weight: 700; }
.detail-metadata { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 22px; margin: 22px 0 0; }
.detail-metadata dt { color: #c8cdcf; }
.detail-metadata dd { margin: 0; font-weight: 700; }
.detail-row-section { padding: 28px clamp(24px, 4vw, 72px) 12px; }
.detail-row-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.detail-row-header h2 { margin: 0; font-size: 24px; font-weight: 500; }
.detail-row-controls { display: flex; gap: 12px; }
.detail-row-arrow { width: 38px; height: 38px; padding: 0; color: #d9dcdd; border: 0; background: transparent; font-size: 34px; cursor: pointer; }
.detail-row-arrow:hover, .detail-row-arrow:focus-visible { color: #06e9ff; outline: none; }
.detail-row-track { display: grid; grid-auto-flow: column; grid-auto-columns: 180px; gap: 18px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; scroll-snap-type: x proximity; }
.detail-row-track::-webkit-scrollbar { display: none; }
.detail-row-card { min-width: 0; padding: 0; overflow: hidden; color: inherit; text-align: center; border: 0; background: transparent; cursor: pointer; scroll-snap-align: start; }
.detail-row-art { display: grid; width: 100%; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: repeating-linear-gradient(135deg, #192126 0 18px, #151c20 18px 36px); }
.detail-row-card.shape-2x3 .detail-row-art { aspect-ratio: 2 / 3; }
.detail-row-card.shape-1x1 .detail-row-art { aspect-ratio: 1; }
.detail-row-card.shape-16x9 .detail-row-art { aspect-ratio: 16 / 9; }
.detail-row-art img { width: 100%; height: 100%; object-fit: cover; }
.detail-row-mark { color: rgb(255 255 255 / 8%); font-size: 62px; font-weight: 950; }
.detail-row-title, .detail-row-subtitle { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.detail-row-title { margin-top: 9px; font-size: 14px; }
.detail-row-subtitle { margin-top: 3px; color: var(--muted); font-size: 12px; }
.detail-row-card:hover .detail-row-art, .detail-row-card:focus-visible .detail-row-art { border-color: var(--accent); }
.detail-row-card:focus-visible { outline: none; }
.detail-tv .detail-row-section:first-of-type .detail-row-track { grid-auto-columns: minmax(300px, 36vw); }
@media (max-width: 760px) {
  .detail-page { margin-left: -14px; margin-right: -14px; }
  .detail-hero { grid-template-columns: 1fr; padding: 76px 18px 38px; }
  .detail-poster { width: min(70vw, 320px); justify-self: center; }
  .detail-logo { min-height: 80px; font-size: 42px; }
  .detail-titlebar { margin: 0 -18px 22px; padding: 18px; align-items: flex-start; flex-direction: column; }
  .detail-actions { justify-content: flex-start; }
  .detail-row-track { grid-auto-columns: 145px; }
}

/* v0.021 shared TV season episodes */
.episode-section { padding: 12px clamp(24px, 4vw, 72px) 24px; }
.episode-section h2 { margin: 0 0 14px; font-size: 24px; font-weight: 500; }
.episode-list { display: grid; gap: 8px; }
.episode-row { display: grid; grid-template-columns: 76px 150px minmax(0, 1fr) 42px; align-items: center; gap: 16px; width: 100%; padding: 10px 12px; color: inherit; text-align: left; border: 1px solid #223039; border-radius: 6px; background: #11191e; cursor: pointer; }
.episode-row:hover, .episode-row:focus-visible { border-color: var(--accent); outline: none; background: #152129; }
.episode-number { color: #aeb8bd; font-size: 12px; font-weight: 800; }
.episode-thumb { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border-radius: 4px; background: repeating-linear-gradient(135deg, #1b292f 0 14px, #152126 14px 28px); }
.episode-thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode-thumb-mark { color: var(--accent); }
.episode-copy { display: grid; gap: 4px; min-width: 0; }
.episode-copy strong { font-size: 15px; }
.episode-copy small { color: #aeb8bd; }
.episode-copy > span { overflow: hidden; color: #cbd1d4; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.episode-play { color: var(--accent); font-size: 20px; text-align: center; }
@media (max-width: 720px) {
  .episode-row { grid-template-columns: 54px 100px minmax(0, 1fr); gap: 10px; }
  .episode-play { display: none; }
  .episode-copy > span { display: none; }
}


/* v0.023 shared Music artist detail with inline album tracks */
.detail-artist .detail-poster { aspect-ratio: 1; }
.detail-artist .detail-row-track { grid-auto-columns: 180px; }
.track-section { padding: 12px clamp(24px, 4vw, 72px) 30px; }
.track-section h2 { margin: 0 0 14px; font-size: 24px; font-weight: 500; }
.track-list { display: grid; gap: 6px; }
.track-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) 70px 38px; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 9px 14px; color: inherit; text-align: left; border: 1px solid #223039; border-radius: 6px; background: #11191e; cursor: pointer; }
.track-row:hover, .track-row:focus-visible { border-color: var(--accent); background: #152129; outline: none; }
.track-number { color: #8f9ca2; font-size: 12px; font-weight: 800; text-align: center; }
.track-copy { display: grid; min-width: 0; gap: 3px; }
.track-copy strong, .track-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.track-copy strong { font-size: 15px; }
.track-copy small { color: #8f9ca2; }
.track-duration { color: #b7c0c4; font-size: 13px; text-align: right; }
.track-play { color: var(--accent); font-size: 16px; text-align: center; }
@media (max-width: 620px) {
  .track-row { grid-template-columns: 40px minmax(0, 1fr) 52px; gap: 9px; }
  .track-play { display: none; }
}


/* v0.024 persistent selected state for category, season, and album */
.brand.selected-context { position: relative; }
.brand.selected-context::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -9px;
  height: 4px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgb(132 245 40 / 42%);
}
.detail-row-card.selected .detail-row-art {
  border-color: var(--accent);
  box-shadow: inset 0 -5px 0 var(--accent), 0 0 16px rgb(132 245 40 / 20%);
}
.detail-row-card.selected .detail-row-title { color: var(--accent); }


/* v0.025 separate reusable User and Admin drawers */
.drawer-link.active { color: var(--accent); background: var(--panel-2); }
.drawer-admin { margin-top: 18px; color: var(--accent); border-top: 1px solid var(--line); border-radius: 0; }
.drawer-switch { margin-top: 18px; color: var(--muted); border-top: 1px solid var(--line); border-radius: 0; }
.admin-page { min-height: 65vh; }
.admin-heading { margin-bottom: 30px; }
.admin-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.admin-card { min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; color: var(--text); text-align: left; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); cursor: pointer; transition: transform 140ms ease, border-color 140ms ease; }
.admin-card strong { font-size: 20px; }
.admin-card span { color: var(--muted); }
.admin-card:hover, .admin-card:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-2px); }
.admin-panel { min-height: 220px; display: grid; align-content: center; gap: 8px; padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.admin-panel strong { font-size: 24px; }
.admin-panel span { color: var(--muted); }


/* v0.028 reusable Users and User Roles admin module */
.user-admin-shell { display: grid; gap: 22px; }
.admin-toolbar, .admin-subtoolbar, .admin-form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.admin-primary, .admin-secondary, .admin-danger { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-weight: 850; cursor: pointer; }
.admin-primary { color: #071007; border-color: var(--accent); background: var(--accent); }
.admin-secondary { color: var(--text); background: var(--panel-2); }
.admin-danger { color: #ff8c8c; border-color: rgb(255 92 92 / 45%); background: rgb(80 20 20 / 35%); }
.admin-primary:hover, .admin-primary:focus-visible, .admin-secondary:hover, .admin-secondary:focus-visible, .admin-danger:hover, .admin-danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-list { display: grid; gap: 12px; }
.admin-list-row { min-height: 82px; display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.admin-list-info { min-width: 0; display: grid; gap: 4px; flex: 1; }
.admin-list-info strong { font-size: 18px; }
.admin-list-info span, .admin-list-info small, .admin-empty { color: var(--muted); }
.user-avatar, .avatar-preview { width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 50%; object-fit: cover; }
.avatar-preview { width: 92px; height: 92px; }
.user-avatar.placeholder, .avatar-preview.placeholder { display: grid; place-items: center; color: var(--accent); background: var(--panel-2); font-weight: 950; }
.admin-form { display: grid; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.admin-form h2, .admin-form h3 { margin: 0; }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-field { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.admin-input { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font: inherit; }
.admin-input:focus { border-color: var(--accent); outline: none; }
.admin-check { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.admin-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.permission-grid, .library-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.avatar-field { display: flex; align-items: center; gap: 16px; grid-column: 1 / -1; }
@media (max-width: 720px) { .admin-form-grid { grid-template-columns: 1fr; } .avatar-field { align-items: flex-start; flex-direction: column; } }


/* Parental View */
.parental-panel { display: grid; gap: 20px; max-width: 760px; padding: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.parental-current-label { color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.parental-current { font-size: clamp(34px, 6vw, 64px); font-weight: 900; color: var(--green); line-height: 1; }
.parental-rating-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.parental-rating { min-height: 64px; border: 1px solid var(--line); border-radius: 14px; background: #111; color: var(--text); font-size: 20px; font-weight: 800; cursor: pointer; }
.parental-rating:hover, .parental-rating:focus-visible { border-color: var(--cyan); color: var(--cyan); outline: none; }
.parental-rating.active { border-color: var(--green); color: var(--green); box-shadow: inset 0 -4px 0 var(--green); }
.parental-message { min-height: 22px; color: #ffb347; font-weight: 700; }
.parental-note { margin: 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 620px) { .parental-rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* v0.030 shared avatar picker and real profile editor */
.avatar-select-button,
.profile-avatar-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-2);
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}
.avatar-select-button:hover,
.avatar-select-button:focus-visible,
.profile-avatar-button:hover,
.profile-avatar-button:focus-visible { border-color: var(--accent); outline: none; }
.avatar-preview.placeholder,
.profile-avatar.placeholder { background: linear-gradient(135deg, #1f2a2f, #11181b); }
.avatar-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / 76%);
}
.avatar-picker-dialog {
  width: min(920px, 94vw);
  max-height: 88vh;
  display: grid;
  gap: 20px;
  padding: 24px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #0d1215;
  box-shadow: 0 28px 90px rgb(0 0 0 / 70%);
}
.avatar-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.avatar-picker-header h2 { margin: 0; }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 16px; }
.avatar-choice {
  aspect-ratio: 1;
  padding: 7px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  cursor: pointer;
}
.avatar-choice img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.avatar-choice:hover,
.avatar-choice:focus-visible,
.avatar-choice.selected { border-color: var(--accent); outline: none; box-shadow: 0 0 18px rgb(132 245 40 / 28%); }
.profile-panel { display: grid; gap: 20px; max-width: 860px; }
.profile-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.profile-message { min-height: 24px; color: var(--accent); font-weight: 800; }
.profile-form { max-width: 620px; }


/* Library Builder */
.library-builder{display:grid;gap:18px}.library-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.library-notice{color:#8cecff}.library-tree{display:grid;gap:10px}.library-tree-row{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:16px;padding:12px;border:1px solid #2d3833;border-radius:14px;background:#111815}.library-tree-row.depth-1{margin-left:34px}.library-tree-row.depth-2{margin-left:68px}.library-tree-image{width:92px;aspect-ratio:3/2;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:#17231d;color:#7cff43;font-size:28px}.library-tree-image img,.category-card-image{width:100%;height:100%;object-fit:cover;display:block}.library-tree-copy{display:grid;gap:5px}.library-tree-copy span{color:#9aa49f;font-size:13px}.library-tree-actions{display:flex;gap:10px;align-items:center}.library-more{position:relative}.library-more summary{list-style:none;cursor:pointer;padding:10px 14px;border:1px solid #3d4a44;border-radius:10px}.library-more summary::-webkit-details-marker{display:none}.library-more-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;padding:8px;background:#18201c;border:1px solid #3b4842;border-radius:12px;box-shadow:0 16px 40px #0008;display:grid}.library-more-menu button{border:0;background:transparent;color:#eef4f1;text-align:left;padding:10px;border-radius:8px}.library-more-menu button:hover{background:#26332d;color:#7cff43}.library-editor{display:grid;gap:16px;max-width:980px}.library-editor-top{display:flex;align-items:center;gap:14px}.library-editor-top h2{margin:0}.library-textarea{min-height:84px;resize:vertical}.library-scan-status{padding:14px;border:1px solid #33423a;border-radius:12px;background:#121915;color:#aeb9b3}.category-card .card-art{overflow:hidden}.category-card-image{position:absolute;inset:0}.category-card .card-art{position:relative}
@media(max-width:800px){.library-tree-row{grid-template-columns:70px 1fr}.library-tree-image{width:70px}.library-tree-actions{grid-column:1/-1;justify-content:flex-end}.library-tree-row.depth-1{margin-left:14px}.library-tree-row.depth-2{margin-left:28px}}

.library-tree-row.expandable{cursor:pointer}.library-tree-row.expandable:hover,.library-tree-row.expandable:focus-visible{border-color:#607069;outline:none}.library-tree-title{display:flex;align-items:center;gap:10px}.library-tree-chevron{width:24px;height:24px;border:1px solid #46554e;border-radius:50%;display:grid;place-items:center;color:#7cff43;font-weight:900;line-height:1}.library-tree-row.expanded>.library-tree-copy .library-tree-chevron{background:#203027}

.library-tree-row[draggable="true"]{user-select:none}.library-tree-row.dragging{opacity:.45}.library-tree-row.drag-before{box-shadow:inset 0 4px 0 #7cff43}.library-tree-row.drag-after{box-shadow:inset 0 -4px 0 #7cff43}.library-tree-row[draggable="true"] .library-tree-copy strong::after{content:'  ⋮⋮';color:#607069;font-weight:700;letter-spacing:-3px}

.library-source-editor{display:grid;gap:12px}.library-source-list{display:grid;gap:10px}.library-source-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr auto;gap:10px;align-items:center}.source-remove{min-height:46px}@media(max-width:720px){.library-source-row{grid-template-columns:1fr}.source-remove{width:100%}}


/* v0.041 metadata settings */
.settings-form { max-width: 760px; }
.settings-copy { margin: -8px 0 2px; color: var(--muted); line-height: 1.55; }
.settings-section-title { margin-top: 14px !important; padding-top: 22px; border-top: 1px solid var(--line); }
.secret-input-wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.secret-toggle { min-width: 74px; padding: 0 14px; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); font: inherit; font-weight: 800; cursor: pointer; }
.secret-toggle:hover, .secret-toggle:focus-visible { color: var(--cyan); border-color: var(--cyan); outline: none; }
.settings-message { min-height: 24px; color: var(--accent); font-weight: 800; }

/* v0.043 shared request system; YouTube Music HOME collision fixed */
.request-page { display: grid; gap: 18px; }
.request-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.request-tab { min-width: 130px; min-height: 48px; padding: 0 18px; color: var(--text); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); font: inherit; font-weight: 900; cursor: pointer; }
.request-tab:hover, .request-tab:focus-visible, .request-tab.active { color: #07100a; border-color: var(--accent); background: var(--accent); outline: none; }
.request-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; max-width: 920px; }
.request-input { min-height: 52px; padding: 0 16px; color: var(--text); border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); font: inherit; }
.request-message { min-height: 22px; color: var(--accent); font-weight: 800; }
.request-results, .request-discovery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.request-section-title { margin: 18px 0 0; font-size: 22px; }
.request-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.request-card-art { aspect-ratio: 2 / 3; overflow: hidden; background: #20282c; }
.request-card-music .request-card-art { aspect-ratio: 1 / 1; }
.request-card-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.request-card-body { display: grid; gap: 7px; padding: 12px; }
.request-card-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.request-card-meta { min-height: 18px; color: var(--muted); font-size: 13px; }
.request-action { min-height: 40px; padding: 0 10px; color: #07100a; border: 0; border-radius: 9px; background: var(--accent); font: inherit; font-weight: 900; cursor: pointer; }
.request-action.already { color: var(--muted); background: var(--panel-2); cursor: default; }
.request-action.requested { color: var(--text); background: var(--panel-2); }
.request-empty, .request-loading { grid-column: 1 / -1; min-height: 110px; display: grid; place-items: center; padding: 24px; color: var(--muted); border: 1px dashed var(--line); border-radius: 14px; }
@media (max-width: 1150px) { .request-results, .request-discovery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .request-search { grid-template-columns: 1fr; } .request-results, .request-discovery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* v0.046 on-demand YouTube Music album search */

/* v0.047 wider shared pages and half-width category Back card */

/* v0.048 narrow Back card keeps the same full category-card structure */
.category-browser-track {
  align-items: start;
  --category-card-width: 240px;
}
.category-browser-track .category-card {
  width: var(--category-card-width);
}
.category-browser-track .back-category-card {
  width: calc(var(--category-card-width) / 2);
  height: auto;
  align-self: start;
}
.category-browser-track .back-category-card .back-card-art {
  width: 100%;
  height: calc(var(--category-card-width) * 2 / 3);
  aspect-ratio: auto;
  background:
    linear-gradient(135deg, rgb(132 245 40 / 15%), transparent 52%),
    repeating-linear-gradient(135deg, #192126 0 18px, #151c20 18px 36px);
}
.category-browser-track .back-category-card .card-copy {
  padding: 15px 16px 17px;
  text-align: center;
}
.category-browser-track .back-category-card .back-card-icon {
  width: 64%;
  height: 64%;
}
@media (max-width: 620px) {
  .category-browser-track {
    --category-card-width: min(240px, 72vw);
  }
}

/* v0.049 Watch Dojo UI */
.watch-dojo-page{display:grid;gap:22px}.watch-dojo-heading h1{margin:4px 0 8px}.watch-dojo-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}.watch-dojo-main{display:grid;gap:20px}.watch-dojo-side{position:sticky;top:94px}.dojo-panel{border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden}.dojo-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 18px;border-bottom:1px solid var(--line)}.dojo-panel-heading h2{margin:0;font-size:20px}.dojo-select{min-height:42px;max-width:340px;padding:0 12px;color:var(--text);border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font:inherit}.dojo-selected-movie{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:18px}.dojo-selected-art{aspect-ratio:2/3;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#24302a,#111714);color:var(--accent);font-weight:1000;letter-spacing:.15em}.dojo-selected-copy{align-self:center}.dojo-selected-copy h3{margin:0 0 8px;font-size:30px}.dojo-selected-copy p{margin:0;color:var(--muted)}.dojo-host-controls{display:flex;gap:12px;padding:0 18px 18px}.dojo-primary,.dojo-secondary{min-height:46px;padding:0 18px;border-radius:11px;font:inherit;font-weight:900;cursor:pointer}.dojo-primary{border:0;background:var(--accent);color:#07100a}.dojo-secondary{border:1px solid var(--line);background:var(--panel-2);color:var(--text)}.dojo-secondary.active{border-color:var(--accent);color:var(--accent)}.dojo-countdown{position:fixed;inset:0;z-index:200;place-items:center;background:#020504e8;text-align:center}.dojo-countdown:not([hidden]){display:grid}.dojo-countdown span{display:block;color:var(--muted);font-weight:900;letter-spacing:.2em}.dojo-countdown strong{display:block;color:var(--accent);font-size:clamp(120px,25vw,340px);line-height:.9}.dojo-chat-messages{height:320px;overflow:auto;padding:16px;display:grid;align-content:start;gap:10px}.dojo-message{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:11px 12px;border-radius:11px;background:var(--panel-2)}.dojo-message strong{color:var(--accent)}.dojo-chat-form{display:grid;grid-template-columns:1fr auto;gap:10px;padding:14px;border-top:1px solid var(--line)}.dojo-chat-input{min-height:46px;padding:0 14px;color:var(--text);border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font:inherit}.dojo-user-count{min-width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#07100a;font-weight:1000}.dojo-user-list{display:grid}.dojo-user-row{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;padding:13px 15px;border-bottom:1px solid var(--line)}.dojo-user-row:last-child{border-bottom:0}.dojo-user-avatar{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#24302a;color:var(--accent);font-weight:1000}.dojo-user-copy{display:grid;gap:3px}.dojo-user-copy span{color:var(--muted);font-size:12px}.dojo-ready-status{color:var(--muted);font-size:12px;font-weight:900}.dojo-ready-status.ready{color:var(--accent)}
@media(max-width:900px){.watch-dojo-layout{grid-template-columns:1fr}.watch-dojo-side{position:static}.dojo-selected-movie{grid-template-columns:110px 1fr}}@media(max-width:620px){.dojo-panel-heading{align-items:stretch;flex-direction:column}.dojo-select{max-width:none}.dojo-host-controls,.dojo-chat-form{grid-template-columns:1fr;display:grid}.dojo-selected-copy h3{font-size:23px}}

/* v0.050 Watch Dojo compact participants layout */
.dojo-joined-inline{margin:0 18px 18px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);overflow:hidden}
.dojo-joined-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.dojo-joined-heading h3{margin:0;font-size:16px}
.dojo-joined-list{display:flex;flex-wrap:wrap;gap:18px;padding:14px}
.dojo-joined-ninja{display:grid;justify-items:center;gap:7px;min-width:72px}
.dojo-joined-ninja strong{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.dojo-joined-avatar{width:54px;height:54px;display:block;object-fit:cover;border-radius:50%;border:2px solid var(--line);background:#24302a}
.dojo-joined-avatar-fallback{display:grid;place-items:center;color:var(--accent);font-weight:1000;font-size:20px}
.watch-dojo-side .dojo-chat-panel{position:sticky;top:94px}
@media(max-width:900px){.watch-dojo-side .dojo-chat-panel{position:static}}

/* v0.051 Watch Dojo lobby, channel, and resync UI */
.watch-dojo-content{display:grid;gap:20px}
.dojo-lobby-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.dojo-lobby-toolbar h2{margin:0}
.dojo-lobby-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dojo-room-card{display:grid;gap:16px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dojo-room-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.dojo-room-top h3{margin:0;font-size:20px}
.dojo-privacy{padding:5px 8px;border-radius:999px;font-size:11px;font-weight:1000;letter-spacing:.08em}.dojo-privacy.public{background:#163321;color:var(--accent)}.dojo-privacy.private{background:#332516;color:#ffc76b}
.dojo-room-meta{display:grid;gap:6px;color:var(--muted);font-size:13px}.dojo-now-playing{color:var(--text);font-weight:800}
.dojo-create-panel{max-width:680px}.dojo-create-form{display:grid;gap:16px;padding:20px}.dojo-field{display:grid;gap:8px}.dojo-field>span{font-weight:900}.dojo-form-actions{display:flex;justify-content:flex-end;gap:10px}
.dojo-channel-panel{min-height:560px}.dojo-select-area{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px}.dojo-select-copy h3{margin:0 0 8px;font-size:28px}.dojo-select-copy p{margin:0;max-width:650px;color:var(--muted);line-height:1.5}
.dojo-passkey-box{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 18px 18px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}.dojo-passkey-box strong{font-size:28px;letter-spacing:.25em;color:var(--accent)}
.dojo-privacy-controls{display:flex;gap:8px}.dojo-privacy-controls .dojo-secondary:disabled{opacity:1;cursor:default}
.dojo-joined-ninja{border:0;background:transparent;color:var(--text);cursor:default}.dojo-joined-ninja:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.watch-dojo-layout{align-items:stretch}.watch-dojo-main,.watch-dojo-side{min-height:560px}.watch-dojo-side{position:static}.watch-dojo-side .dojo-chat-panel{position:static;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.dojo-chat-messages{height:auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}.dojo-chat-messages::-webkit-scrollbar{width:6px}.dojo-chat-messages::-webkit-scrollbar-track{background:transparent}.dojo-chat-messages::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px}
.dojo-join-overlay{position:fixed;inset:0;z-index:210;display:grid;place-items:center;background:#020504e8;padding:20px}.dojo-join-card{display:grid;justify-items:center;gap:14px;max-width:480px;padding:34px;border:1px solid var(--line);border-radius:20px;background:var(--panel);text-align:center}.dojo-join-card h2,.dojo-join-card p{margin:0}.dojo-join-card p{color:var(--muted);line-height:1.5}
@media(max-width:1100px){.dojo-lobby-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.watch-dojo-main,.watch-dojo-side{min-height:0}.dojo-channel-panel{min-height:0}.watch-dojo-side .dojo-chat-panel{height:520px}}
@media(max-width:650px){.dojo-lobby-grid{grid-template-columns:1fr}.dojo-lobby-toolbar,.dojo-select-area{align-items:stretch;flex-direction:column}.dojo-form-actions{display:grid}.dojo-form-actions button{width:100%}}

/* v0.052 TV-friendly private Dojo passkey */
.dojo-passkey-overlay{position:fixed;inset:0;z-index:240;display:grid;place-items:center;padding:24px;background:#020504ee}
.dojo-passkey-card{width:min(520px,100%);display:grid;gap:22px;padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 24px 80px #000a}
.dojo-passkey-header{text-align:center}.dojo-passkey-header h2{margin:5px 0 0;font-size:clamp(24px,4vw,36px)}
.dojo-passkey-display{display:flex;justify-content:center;gap:18px;padding:8px}
.dojo-passkey-dot{width:28px;height:28px;border:3px solid var(--line);border-radius:50%;background:transparent;transition:.15s ease}
.dojo-passkey-dot.filled{border-color:var(--accent);background:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 55%,transparent)}
.dojo-passkey-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dojo-passkey-key{min-height:76px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--text);font:inherit;font-size:30px;font-weight:1000;cursor:pointer}
.dojo-passkey-key.wide-label{font-size:18px}
.dojo-passkey-key:hover,.dojo-passkey-key:focus-visible{outline:none;border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.dojo-passkey-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dojo-passkey-actions button{width:100%}.dojo-passkey-actions .dojo-primary:disabled{opacity:.38;cursor:not-allowed}
@media(max-width:560px){.dojo-passkey-card{padding:20px}.dojo-passkey-key{min-height:64px}}


/* v0.055 Watch Dojo avatars, shared pause, and centered countdown */
.dojo-countdown{align-items:center;justify-items:center;padding:24px}
.dojo-countdown>span{margin-bottom:10px}
.dojo-countdown strong{font-size:clamp(72px,14vw,190px);line-height:1}
.mission-countdown{align-content:center}
.dojo-message{grid-template-columns:38px minmax(0,1fr);align-items:start}
.dojo-chat-avatar{width:38px;height:38px;border-width:1px;font-size:15px}
.dojo-message-body{display:grid;gap:3px;min-width:0}
.dojo-message-body span{overflow-wrap:anywhere}
.dojo-pause-overlay{position:fixed;inset:0;z-index:235;display:grid;place-items:center;padding:24px;background:#020504ee}
.dojo-pause-card{width:min(560px,100%);display:grid;justify-items:center;gap:13px;padding:34px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 24px 80px #000a;text-align:center}
.dojo-pause-avatar{width:92px;height:92px;font-size:32px;border-color:var(--accent)}
.dojo-pause-card h2,.dojo-pause-card p{margin:0}
.dojo-pause-position{color:var(--accent);font-weight:1000}
.dojo-pause-copy,.dojo-waiting-copy{color:var(--muted)}
.dojo-continue-mission{margin-top:10px;min-width:min(290px,100%)}

/* v0.056 Dojo chat scroll containment */
.watch-dojo-side,
.watch-dojo-side .dojo-chat-panel{
  min-height:0;
}
.watch-dojo-side .dojo-chat-panel{
  overflow:hidden;
}
.dojo-chat-messages{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.dojo-chat-messages::-webkit-scrollbar{
  width:3px;
}
.dojo-chat-messages::-webkit-scrollbar-thumb{
  min-height:28px;
}

/* v0.057 Watch Dojo viewport containment and compact centered countdown */
.watch-dojo-page{
  height:calc(100vh - 86px);
  min-height:0;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.watch-dojo-content,
.watch-dojo-layout,
.watch-dojo-main,
.watch-dojo-side{
  min-height:0;
}
.watch-dojo-content{
  overflow:hidden;
}
.watch-dojo-layout{
  height:100%;
  align-items:stretch;
}
.watch-dojo-main,
.watch-dojo-side{
  height:100%;
  overflow:hidden;
}
.dojo-channel-panel,
.watch-dojo-side .dojo-chat-panel{
  height:100%;
  min-height:0;
}
.watch-dojo-side .dojo-chat-panel{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  overflow:hidden;
}
.dojo-chat-messages{
  min-height:0;
  height:auto;
  overflow-y:auto;
  overflow-x:hidden;
}
.dojo-countdown:not([hidden]){
  display:grid;
  grid-template-rows:max-content max-content;
  place-content:center;
  place-items:center;
  gap:10px;
}
.dojo-countdown>span{
  margin:0;
  line-height:1;
}
.dojo-countdown strong{
  margin:0;
  font-size:clamp(64px,10vw,140px);
  line-height:.9;
}
@media(max-width:900px){
  .watch-dojo-page{height:auto;min-height:calc(100vh - 86px);overflow:visible}
  .watch-dojo-content,.watch-dojo-layout,.watch-dojo-main,.watch-dojo-side{overflow:visible;height:auto}
  .watch-dojo-side .dojo-chat-panel{height:520px}
}


/* v0.058 Scope fixed sizing to the inside-Dojo room only */
.watch-dojo-page:not(.dojo-room-active){
  height:auto;
  min-height:0;
  grid-template-rows:none;
  overflow:visible;
}
.watch-dojo-page:not(.dojo-room-active) .watch-dojo-content{
  overflow:visible;
}
.watch-dojo-page.dojo-room-active{
  height:calc(80vh - 40px);
  max-height:760px;
  min-height:480px;
}
.watch-dojo-page.dojo-room-active .watch-dojo-layout,
.watch-dojo-page.dojo-room-active .watch-dojo-main,
.watch-dojo-page.dojo-room-active .watch-dojo-side,
.watch-dojo-page.dojo-room-active .dojo-channel-panel,
.watch-dojo-page.dojo-room-active .watch-dojo-side .dojo-chat-panel{
  height:100%;
}
@media(max-width:900px){
  .watch-dojo-page.dojo-room-active{
    height:auto;
    max-height:none;
    min-height:0;
    overflow:visible;
  }
  .watch-dojo-page.dojo-room-active .watch-dojo-layout,
  .watch-dojo-page.dojo-room-active .watch-dojo-main,
  .watch-dojo-page.dojo-room-active .watch-dojo-side,
  .watch-dojo-page.dojo-room-active .dojo-channel-panel{
    height:auto;
    overflow:visible;
  }
}