@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f2ee;
  --bg-elevated: #faf9f6;
  --surface: #ffffff;
  --surface-soft: #e9e8e3;
  --surface-strong: #121214;
  --text: #101012;
  --text-inverse: #ffffff;
  --muted: #68686e;
  --line: rgba(16, 16, 18, 0.11);
  --line-strong: rgba(16, 16, 18, 0.2);
  --shadow: 0 18px 54px rgba(23, 23, 28, 0.12);
  --shadow-soft: 0 8px 28px rgba(23, 23, 28, 0.07);
  --header: rgba(243, 242, 238, 0.84);
  --accent: #ff0019;
  --accent-dark: #cf0015;
  --accent-soft: rgba(255, 0, 25, 0.11);
  --accent-ink: #ffffff;
  --accent-text-light: #cf0015;
  --accent-text-dark: #ff5364;
  --accent-text: var(--accent-text-light);
  --focus: #1474e6;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121019;
  --bg-elevated: #181620;
  --surface: #201d27;
  --surface-soft: #2c2835;
  --surface-strong: #f6f5f1;
  --text: #f6f5f1;
  --text-inverse: #0e0e10;
  --muted: #aaaab2;
  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.25);
  --header: rgba(18, 16, 25, 0.84);
  --accent: #ff0019;
  --accent-dark: #d90015;
  --accent-soft: rgba(255, 0, 25, 0.14);
  --accent-ink: #ffffff;
  --accent-text-light: #cf0015;
  --accent-text-dark: #ff5364;
  --accent-text: var(--accent-text-dark);
  --focus: #68a9ff;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    color-scheme: dark;
    --bg: #121019;
    --bg-elevated: #181620;
    --surface: #201d27;
    --surface-soft: #2c2835;
    --surface-strong: #f6f5f1;
    --text: #f6f5f1;
    --text-inverse: #0e0e10;
    --muted: #aaaab2;
    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.2);
    --shadow: 0 22px 70px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.25);
    --header: rgba(18, 16, 25, 0.84);
    --accent: #ff0019;
    --accent-dark: #d90015;
    --accent-soft: rgba(255, 0, 25, 0.14);
    --accent-ink: #ffffff;
    --accent-text-light: #cf0015;
    --accent-text-dark: #ff5364;
    --accent-text: var(--accent-text-dark);
    --focus: #68a9ff;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background: var(--bg);
}

body {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
  background:
    radial-gradient(circle at 4% 1%, var(--accent-soft), transparent 25rem),
    var(--bg);
  color: var(--text);
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.splash-active,
html.splash-active body {
  height: 100%;
  overflow: hidden;
}

html.pull-refresh-enabled,
html.pull-refresh-enabled body {
  overscroll-behavior-y: none;
}

.pull-refresh-indicator {
  position: fixed;
  z-index: 1200;
  top: env(safe-area-inset-top, 0px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  max-width: calc(100vw - 24px);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elevated, var(--bg));
  box-shadow: 0 4px 22px rgb(0 0 0 / 14%);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  transform: translate(-50%, var(--pull-offset, 0px));
  pointer-events: none;
}

.pull-refresh-indicator[hidden] { display: none; }
.pull-refresh-indicator__spinner {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid var(--line-strong, var(--line));
  border-top-color: var(--accent-text);
  border-radius: 50%;
  transform: rotate(-40deg);
}
.pull-refresh-indicator[data-state="ready"] .pull-refresh-indicator__spinner { border-color: var(--accent-text); }
.pull-refresh-indicator[data-state="refreshing"] .pull-refresh-indicator__spinner {
  animation: pull-refresh-spin .7s linear infinite;
}
@keyframes pull-refresh-spin { to { transform: rotate(320deg); } }

.app-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 0, 25, 0.12), transparent min(52vw, 34rem)),
    var(--bg);
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
  touch-action: none;
}

.app-splash::before {
  position: absolute;
  width: min(76vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
  content: "";
  transform: scale(1.15);
}

.app-splash.is-hiding {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.app-splash__logo {
  position: relative;
  z-index: 1;
  width: clamp(190px, 34vw, 360px);
  height: auto;
  animation: app-splash-logo-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.app-splash__logo--dark {
  display: none;
}

html[data-theme="dark"] .app-splash__logo--light {
  display: none;
}

html[data-theme="dark"] .app-splash__logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .app-splash__logo--light {
    display: none;
  }

  html[data-theme="system"] .app-splash__logo--dark {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-splash__logo {
    animation: none;
  }
}

@keyframes app-splash-logo-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 66% 46% at 3% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%),
    radial-gradient(circle at 96% 17%, rgba(103, 73, 214, 0.25), transparent 34rem),
    radial-gradient(circle at 48% 100%, rgba(0, 145, 166, 0.17), transparent 42rem),
    var(--bg);
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] body {
    background:
      radial-gradient(ellipse 66% 46% at 3% 0%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 72%),
      radial-gradient(circle at 96% 17%, rgba(103, 73, 214, 0.25), transparent 34rem),
      radial-gradient(circle at 48% 100%, rgba(0, 145, 166, 0.17), transparent 42rem),
      var(--bg);
    background-attachment: fixed;
  }
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

button {
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--text-inverse);
  transform: translateY(-140%);
}

.skip-link:focus {
  transform: translateY(0);
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid var(--line);
  background: var(--header);
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

.header-inner {
  display: grid;
  grid-template-columns: minmax(185px, 1fr) auto minmax(185px, 1fr);
  align-items: center;
  width: min(1440px, calc(100% - 48px));
  min-height: 74px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

.brand-logo {
  width: 118px;
  height: auto;
}

.brand-logo--dark {
  display: none;
}

html[data-theme="dark"] .brand-logo--light {
  display: none;
}

html[data-theme="dark"] .brand-logo--dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .brand-logo--light {
    display: none;
  }

  html[data-theme="system"] .brand-logo--dark {
    display: block;
  }
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.desktop-nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 180ms ease, background 180ms ease;
}

.desktop-nav a:hover {
  color: var(--text);
}

.desktop-nav a.is-active {
  background: var(--surface-strong);
  color: var(--text-inverse);
  box-shadow: var(--shadow-soft);
}

html[data-live-channel] .desktop-nav a[data-nav="live"].is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.icon-button:hover {
  background: var(--surface-soft);
  transform: translateY(-1px);
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

.icon-button--solid {
  border-color: var(--surface-strong);
  background: var(--surface-strong);
  color: var(--text-inverse);
}

.install-shortcut {
  border-color: var(--accent);
  color: var(--accent-text);
}

.install-shortcut[hidden] {
  display: none !important;
}

.install-shortcut:hover {
  background: var(--accent-soft);
}

.my-shortcut__label {
  display: none;
}

.my-shortcut.is-active {
  border-color: var(--accent-text);
  background: var(--accent-soft);
  color: var(--accent-text);
}

.theme-control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 10px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.theme-control svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.theme-control select {
  max-width: 106px;
  height: 40px;
  padding: 0 22px 0 0;
  border: 0;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  color-scheme: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.theme-control select option {
  background-color: var(--surface);
  color: var(--text);
}

.main-shell {
  width: min(1440px, calc(100% - 48px));
  min-height: calc(100vh - 74px);
  margin: 0 auto;
  padding: 36px 0 120px;
}

.player-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(330px, 24vw, 360px);
  min-height: clamp(540px, 39vw, 600px);
  margin-bottom: 56px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #08080a;
  color: #fff;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.player-panel::after {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: 4px;
  background: var(--accent);
  content: "";
  pointer-events: none;
}

.player-panel[hidden] {
  display: none !important;
}

.player-visual {
  position: relative;
  min-width: 0;
  min-height: clamp(540px, 39vw, 600px);
  overflow: hidden;
  background: #050506;
}

.player-visual video,
.player-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050506;
}

.player-visual video {
  z-index: 2;
}

.player-poster {
  z-index: 3;
  transition: opacity 240ms ease;
}

.player-cover-placeholder {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #101010 url('/assets/video-placeholder.svg') center / contain no-repeat;
  pointer-events: none;
}

.player-visual:has(.player-poster[src][data-cover-image]:not(.is-loaded)) .player-cover-placeholder { display: block; }
.player-panel.has-cover-placeholder .player-cover-placeholder {
  display: grid;
  place-items: end center;
  padding: 24px;
  color: rgba(255, 255, 255, .82);
  font-size: 13px;
  text-align: center;
}
.player-panel.has-started .player-cover-placeholder { display: none; }

.player-poster[hidden],
#miniArtwork[hidden] {
  display: none;
}

.player-panel.has-started .player-poster {
  pointer-events: none;
  opacity: 0;
}

.player-shade {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.13), transparent 40%, rgba(0, 0, 0, 0.35));
  transition: opacity 180ms ease;
}

.player-start {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 8px 20px 8px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #111114;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, background 180ms ease;
}

.player-start:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.03);
}

.player-start-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}

.player-start-icon svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.player-start[hidden],
.player-panel.has-started .player-start {
  display: none;
}

.player-loading,
.player-error {
  position: absolute;
  inset: 0;
  z-index: 8;
  place-content: center;
  justify-items: center;
  padding: 30px;
  color: #fff;
  text-align: center;
}

.player-loading:not([hidden]),
.player-error:not([hidden]) {
  display: grid;
}

.player-loading {
  gap: 12px;
  font-weight: 700;
}

.player-loading::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(300px, calc(100% - 32px));
  height: 132px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(5, 5, 6, 0.64);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.player-loading:has(.player-loading__stop:not([hidden]))::before {
  height: 194px;
}

.player-loading > * {
  position: relative;
}

.player-loading__stop {
  margin-top: 5px;
}

.player-loading__stop[hidden] {
  display: none !important;
}

.player-error {
  gap: 8px;
  background: rgba(5, 5, 6, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.player-error strong {
  font-size: clamp(20px, 2vw, 28px);
}

.player-error span {
  color: rgba(255, 255, 255, 0.72);
}

.player-error div {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
}

.player-up-next {
  --up-next-progress: 0%;
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 7;
  display: grid;
  grid-template-columns: 64px minmax(110px, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(570px, calc(100% - 36px));
  min-width: 0;
  min-height: 82px;
  padding: 9px 11px 12px 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line-strong) 82%, transparent);
  border-radius: 19px;
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  color: var(--text);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  animation: player-up-next-in 220ms ease both;
}

.player-up-next[hidden],
.player-panel.is-mini .player-up-next {
  display: none !important;
}

.player-up-next__button[hidden] {
  display: none !important;
}

@keyframes player-up-next-in {
  from {
    opacity: 0;
    transform: translateY(-7px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.player-up-next__poster {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 13px;
  background: var(--surface-soft);
  object-fit: cover;
}

.player-up-next__copy {
  min-width: 0;
}

.player-up-next__status,
.player-up-next__title,
.player-up-next__artist {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-up-next__status {
  margin-bottom: 4px;
  color: var(--accent-text);
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}

.player-up-next__title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.player-up-next__artist {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.player-up-next__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.player-up-next__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.player-up-next__button:hover {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface-strong) 9%);
  transform: translateY(-1px);
}

.player-up-next__button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--focus) 72%, transparent);
  outline-offset: 2px;
}

.player-up-next__button svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.player-up-next__button--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.player-up-next__button--primary:hover {
  border-color: transparent;
  background: var(--accent-dark);
}

.player-up-next__button--close {
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
}

.player-up-next__button--close svg {
  width: 15px;
  height: 15px;
}

.player-up-next__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: var(--up-next-progress);
  max-width: 100%;
  height: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--accent);
  transition: width 160ms linear;
  pointer-events: none;
}

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.24);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

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

.custom-controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 17px;
  background: rgba(8, 8, 11, 0.74);
  color: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  transition: opacity 180ms ease, transform 180ms ease;
}

.player-visual.controls-idle .custom-controls {
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
}

.player-visual.controls-idle .player-shade {
  opacity: 0;
}

/* Current media follows the main controls in both fullscreen implementations. */
.player-fullscreen-info {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  display: none;
  gap: 7px;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 36px max(24px, env(safe-area-inset-left));
  color: #fff;
  background: linear-gradient(180deg, rgba(0, 0, 0, .68), rgba(0, 0, 0, .28) 65%, transparent);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.player-visual:fullscreen > .custom-controls:not([hidden]) ~ .player-fullscreen-info:not([hidden]),
.player-panel.is-player-expanded .custom-controls:not([hidden]) ~ .player-fullscreen-info:not([hidden]) {
  display: grid;
}

.player-fullscreen-info__label,
.player-fullscreen-info__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  max-width: 960px;
}

.player-fullscreen-info__label {
  -webkit-line-clamp: 1;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}

.player-fullscreen-info__title {
  -webkit-line-clamp: 2;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1.25;
}

.player-visual.controls-idle .player-fullscreen-info {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s 180ms;
}

@media (max-width: 700px) {
  .player-fullscreen-info {
    gap: 5px;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left));
  }
}

.custom-controls[hidden],
.custom-controls button[hidden],
.custom-controls__status[hidden],
.custom-controls__timeline[hidden],
.custom-controls__episodes[hidden],
.custom-controls__quality[hidden] {
  display: none !important;
}

.custom-controls button {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.custom-controls button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.custom-controls #customPlayToggle {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.custom-controls button:disabled {
  cursor: default;
  opacity: 0.38;
}

.custom-controls button:disabled:hover {
  background: rgba(255, 255, 255, 0.08);
}

.custom-controls button svg {
  width: 21px;
  height: 21px;
}

.custom-controls__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.custom-controls__status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 19%, transparent);
}

.custom-controls__timeline {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.custom-controls__timeline input {
  width: 100%;
  min-width: 40px;
  accent-color: var(--accent);
  cursor: pointer;
}

.custom-controls__timeline input:disabled {
  cursor: default;
  opacity: 0.5;
}

.custom-controls__spacer {
  flex: 1 1 auto;
}

.player-panel:not(.is-live-media) .custom-controls__spacer {
  display: none;
}

.custom-controls__volume {
  display: flex;
  align-items: center;
  padding: 0 5px;
}

.custom-controls__volume input {
  width: 88px;
  accent-color: var(--accent);
  cursor: pointer;
}

.custom-controls__quality {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.custom-controls__quality::after {
  position: absolute;
  right: 10px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  pointer-events: none;
  transform: translateY(-2px) rotate(45deg);
}

.custom-controls__quality select {
  width: 86px;
  min-height: 42px;
  padding: 0 25px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
  background: #242229;
  color: #fff;
  -webkit-text-fill-color: #fff;
  color-scheme: dark;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.custom-controls__quality select:hover {
  background: #34313a;
}

.custom-controls__quality select option {
  background: #242229;
  color: #fff;
}

.custom-controls__quality select:disabled {
  cursor: default;
  opacity: 0.58;
}

.custom-controls__episodes {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 390px);
  min-height: 42px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(18, 17, 22, 0.94);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.custom-controls__episodes select {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  min-height: 30px;
  border: 0;
  background: #242229;
  color: #fff;
  -webkit-text-fill-color: #fff;
  color-scheme: dark;
  border-radius: 7px;
  padding: 4px 6px;
  font: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}

.custom-controls__episodes select:disabled { cursor: default; }
.custom-controls__episodes select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.player-visual:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  background: #050506;
}

body.player-expanded {
  overflow: hidden;
}

.player-panel.is-player-expanded {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.player-panel.is-player-expanded .player-visual {
  height: 100dvh;
  min-height: 100dvh;
  aspect-ratio: auto;
}

.player-panel.is-player-expanded::after {
  display: none;
}

.player-panel.is-player-expanded .player-copy,
.player-panel.is-player-expanded .mini-copy {
  display: none !important;
}

.player-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(30px, 3.6vw, 54px) clamp(26px, 3.2vw, 48px);
  color: var(--text);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
    linear-gradient(145deg, var(--surface), var(--bg-elevated) 70%);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.player-copy :is(h1, h2) {
  max-width: 11ch;
  margin: 11px 0 12px;
  font-size: clamp(30.4px, 3.6vw, 54.4px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 0.95;
}

.player-copy p {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

@media (min-width: 1181px) {
  .player-copy {
    gap: 18px;
    padding: 32px 28px;
  }

  .player-copy :is(h1, h2) {
    font-size: clamp(30px, 2.8vw, 44px);
    line-height: 1;
  }
}

.now-playing {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  padding: 14px 15px 15px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%),
    color-mix(in srgb, var(--text) 4%, transparent);
}

.now-playing[hidden] {
  display: none;
}

.now-playing::before {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  content: "";
}

.now-playing__viewport {
  min-width: 0;
  overflow: hidden;
}

.now-playing__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 300%;
  transform: translate3d(-33.333333%, 0, 0);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.now-playing__track.is-resetting {
  transition: none;
}

.now-playing__card {
  min-width: 0;
  overflow: hidden;
  padding-inline: 5px;
}

.now-playing__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
}

.now-playing__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.now-playing__label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

.now-playing strong,
.now-playing__artist {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-playing strong {
  display: -webkit-box;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1.24;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.now-playing__artist {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.clip-suggestion {
  padding: 12px;
}

.clip-suggestion__media {
  display: flex;
  align-items: center;
  gap: 9px;
}

.clip-suggestion__poster {
  width: 56px;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 8px;
  background: var(--bg-elevated);
}

.clip-suggestion__copy {
  min-width: 0;
}

.clip-suggestion .now-playing__artist {
  margin-top: 3px;
  font-size: 12px;
}

.player-copy .clip-suggestion__status {
  max-width: none;
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.45;
}

.clip-suggestion__actions {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 10px;
  gap: 8px;
}

.clip-suggestion__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.clip-suggestion__button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.clip-suggestion__button--play {
  border-color: transparent;
  color: var(--accent-ink);
  background: var(--accent);
}

.clip-suggestion__button:hover {
  border-color: var(--accent);
  filter: brightness(1.08);
}

.clip-suggestion__catalog {
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 700;
}

.clip-suggestion [hidden] {
  display: none !important;
}

.player-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.meta-chip svg {
  width: 15px;
  height: 15px;
}

.player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.button svg {
  width: 18px;
  height: 18px;
}

.button--secondary {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}

.button--secondary:hover,
.button--secondary.is-active {
  background: color-mix(in srgb, var(--text) 13%, transparent);
}

.button--primary {
  background: var(--surface-strong);
  color: var(--text-inverse);
}

.button--primary:hover {
  background: var(--text);
}

html[data-theme="dark"] .button--primary:hover {
  background: #d9d8d4;
}

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

.button--ghost:hover {
  background: var(--surface-soft);
}

.button--light {
  background: #fff;
  color: #111114;
}

.text-link {
  color: var(--accent-text);
  font-weight: 800;
}

.text-link--light {
  color: #fff;
}

.player-channel-shortcuts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.player-channel-shortcuts::-webkit-scrollbar {
  display: none;
}

.player-channel-shortcuts button {
  display: grid;
  place-items: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  cursor: pointer;
}

.player-channel-shortcuts button:hover,
.player-channel-shortcuts button.is-active {
  border-color: var(--shortcut-accent, rgba(255, 255, 255, 0.44));
  background: color-mix(in srgb, var(--shortcut-accent, #fff) 20%, transparent);
}

.player-channel-shortcuts img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini-copy {
  display: none;
}

.player-panel.is-mini {
  position: fixed;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  left: auto;
  z-index: 80;
  display: grid;
  grid-template-columns: 180px minmax(360px, 1fr);
  width: min(680px, calc(100vw - 44px));
  min-height: 96px;
  margin: 0;
  border-radius: 20px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.player-panel.is-mini .player-visual {
  min-height: 96px;
}

.player-panel.is-mini .player-shade,
.player-panel.is-mini .player-start,
.player-panel.is-mini .player-loading,
.player-panel.is-mini .player-error,
.player-panel.is-mini .player-copy {
  display: none !important;
}

.player-panel.is-mini .mini-copy {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px;
  align-items: center;
  gap: 9px;
  padding: 15px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 48%),
    var(--surface);
}

.mini-copy > img {
  width: 44px;
  height: 44px;
  padding: 7px;
  border-radius: 11px;
  background: #fff;
  object-fit: contain;
}

.mini-title {
  min-width: 0;
  padding: 4px;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.mini-title strong,
.mini-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-title strong {
  font-size: 14px;
  font-weight: 800;
}

.mini-title span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.player-panel.is-mini .icon-button {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--text);
}

.player-panel.is-mini .icon-button--solid {
  background: var(--surface-strong);
  color: var(--text-inverse);
}

.home-intro {
  margin: 8px 0 48px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.home-intro h1 {
  max-width: 28ch;
  margin: 12px 0 16px;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

.home-intro p {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.home-intro p a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.home-intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 16px;
}

.home-intro__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent-text);
  font-size: 14px;
  font-weight: 800;
}

.home-intro a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  align-items: end;
  gap: 40px;
  margin: 20px 0 48px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--line);
}

.video-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 6px 0 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}

.video-tabs a {
  display: grid;
  place-items: center;
  min-width: 108px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.video-tabs a:hover {
  color: var(--text);
}

.video-tabs a.is-active {
  background: var(--surface-strong);
  color: var(--text-inverse);
}

.page-hero h1,
.search-heading h1 {
  max-width: 15ch;
  margin: 10px 0 0;
  font-size: clamp(33.6px, 5.36vw, 75.2px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.93;
}

.page-hero--compact h1 {
  font-size: clamp(22.4px, 2.56vw, 35.2px);
  line-height: 1;
}

.page-hero p {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 1.5vw, 20px);
}

.page-hero--compact p {
  font-size: 16px;
  line-height: 1.55;
}

.section {
  margin: 0 0 68px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.section-heading h2 {
  margin: 5px 0 0;
  font-size: clamp(22.4px, 2.56vw, 35.2px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

@media (min-width: 901px) {
  .section-heading h2,
  .page-hero--compact h1 {
    font-size: clamp(17.92px, 2.048vw, 28.16px);
  }

}

.section-heading p {
  max-width: 48ch;
  margin: 5px 0 0;
  color: var(--muted);
}

.section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.section-link:hover {
  color: var(--text);
}

.section-link svg {
  width: 18px;
  height: 18px;
}

.channel-rail,
.media-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 14px;
  padding: 2px 2px 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}
.channel-card {
  --channel-accent: var(--accent);
  position: relative;
  min-height: 176px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 200ms ease, border-color 200ms ease;
}

.channel-card::before {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  content: "";
  background: var(--channel-accent);
}

.channel-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.channel-card.is-active {
  border-color: var(--channel-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--channel-accent) 24%, transparent), var(--shadow-soft);
}

.channel-card :is(button, a).channel-open {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 176px;
  padding: 24px 21px 18px;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.channel-card-logo {
  position: absolute;
  inset: 8px 10px 34px;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.channel-card-logo img {
  width: min(184px, 76.8%);
  height: auto;
  max-height: 83.2px;
  object-fit: contain;
}

.logo-dark {
  display: none;
}

html[data-theme="dark"] .logo-light {
  display: none;
}

html[data-theme="dark"] .logo-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .logo-light {
    display: none;
  }

  html[data-theme="system"] .logo-dark {
    display: block;
  }
}

.channel-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
}

.channel-card-footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.channel-card-footer b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.channel-card-footer b::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--channel-accent);
  content: "";
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.channel-grid .channel-card {
  min-height: 192px;
}

.channel-grid .channel-card :is(button, a).channel-open {
  min-height: 192px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 14px;
}

.media-card {
  min-width: 0;
  cursor: pointer;
}

.media-card-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 19px;
  background: #101010 url('/assets/video-placeholder.svg') center / cover no-repeat;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.media-card-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms cubic-bezier(.2, .7, .2, 1), opacity 180ms ease;
}

.media-card:hover .media-card-visual > img {
  transform: scale(1.035);
}

.episode-frame-placeholder,
.episode-card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.episode-frame-placeholder {
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.35);
  background: #101010 url('/assets/video-placeholder.svg') center / cover no-repeat;
}

.episode-frame-placeholder svg {
  width: 36px;
  height: 36px;
}

.media-cover-status {
  position: absolute;
  z-index: 1;
  right: 12px;
  bottom: 16px;
  left: 12px;
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
}

.short-preview-card__placeholder .media-cover-status,
.short-card__placeholder .media-cover-status { top: 58%; bottom: auto; }

.episode-card-frame {
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}

.episode-card-frame.has-frame {
  opacity: 1;
}

.media-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.65));
}

.card-play {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #101012;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transform: translateY(3px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.card-play svg {
  width: 19px;
  height: 19px;
  margin-left: 2px;
}

.media-card:hover .card-play,
.media-card:focus-within .card-play {
  opacity: 1;
  transform: translateY(0);
}

.duration-pill {
  min-height: 25px;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.card-favorite {
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.card-favorite svg {
  width: 18px;
  height: 18px;
}

.card-favorite.is-active {
  background: var(--accent);
}

.media-card-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 3px 0;
}

.media-card-copy :is(button, a) {
  display: block;
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.media-card-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.media-card-copy span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
}

.progress-track i {
  display: block;
  width: var(--progress, 0%);
  height: 100%;
  background: var(--accent);
}
.published-home-rail {
  margin-top: 28px;
}

.show-collection {
  margin-bottom: 96px;
  scroll-margin-top: 92px;
}

.show-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 25px 16px;
}

.show-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(150px, 17vw, 206px);
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}

.show-card {
  min-width: 0;
  scroll-snap-align: start;
}

.show-card > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.show-card__visual {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 18px;
  background: #101010 url('/assets/portrait-placeholder.svg') center / cover no-repeat;
}

.show-card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 250ms ease;
}

.show-card > a:hover img {
  transform: scale(1.035);
}

.show-card__copy {
  padding: 12px 2px 0;
}

.show-card__copy strong,
.show-card__copy p {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.show-card__copy strong {
  font-size: 16px;
  line-height: 1.25;
}

.show-card__copy span,
.show-card__copy p,
.show-empty {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.show-card__copy span {
  display: block;
  margin-top: 5px;
}

.show-card__copy p {
  margin: 7px 0 0;
}

.show-detail {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
  margin-bottom: 35px;
}

.show-detail__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #101010 url('/assets/video-placeholder.svg') center / cover no-repeat;
}

.show-detail__cover > img { width: 100%; height: 100%; object-fit: cover; }

/* Keep the appropriate ROLCE placeholder visible until a cover is decoded. */
img[data-cover-image] { opacity: 0; }
img[data-cover-image].is-loaded { opacity: 1; }
img[data-cover-image][hidden] { display: none; }

.show-detail h1 {
  margin: 10px 0 14px;
  overflow-wrap: anywhere;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.1;
}

.show-detail__copy p,
.episode-description {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.episode-description {
  max-width: 80ch;
  margin: 0 0 28px;
}

@media (max-width: 1000px) {
  .show-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .show-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 12px;
  }

  .show-rail {
    grid-auto-columns: minmax(150px, 42vw);
    gap: 12px;
  }

  .show-detail {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .show-card__copy strong {
    font-size: 14px;
  }
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: -4px 0 25px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.chip:hover,
.chip.is-active {
  border-color: var(--surface-strong);
  background: var(--surface-strong);
  color: var(--text-inverse);
}

.sort-select {
  min-height: 42px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.search-heading {
  margin: 12px 0 30px;
}

.search-heading h1 {
  max-width: none;
}

.search-box {
  position: relative;
  margin-bottom: 36px;
}

.search-box svg {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 24px;
  height: 24px;
  color: var(--muted);
  transform: translateY(-50%);
}

.search-box input {
  width: 100%;
  height: 72px;
  padding: 0 58px;
  border: 1px solid var(--line);
  border-radius: 21px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  box-shadow: var(--shadow-soft);
}

.search-box input::placeholder {
  color: var(--muted);
}

.search-clear {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
}

.search-results-count {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 340px;
  padding: 40px;
  border: 1px dashed var(--line-strong);
  border-radius: 25px;
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  text-align: center;
}

.empty-state-inner {
  max-width: 430px;
}

.empty-state-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 19px;
  background: var(--accent-soft);
  color: var(--accent);
}

.empty-state-mark svg {
  width: 28px;
  height: 28px;
}

.empty-state h2 {
  margin: 0 0 8px;
  font-size: 25px;
}

.empty-state p {
  margin: 0 0 20px;
  color: var(--muted);
}

.empty-state--catalog {
  min-height: 220px;
  padding: 28px;
}

.empty-state--catalog p {
  margin-bottom: 0;
}

.my-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 30px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}

.live-channels-section .info-banner {
  border-color: color-mix(in srgb, var(--channel-accent) 38%, var(--line));
  background: color-mix(in srgb, var(--channel-accent) 9%, var(--surface));
  box-shadow: inset 4px 0 0 var(--channel-accent);
}

.info-banner strong {
  color: var(--text);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.back-link svg {
  width: 18px;
  height: 18px;
}

.episode-stories {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.episode-stories span {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 120;
  max-width: min(430px, calc(100vw - 32px));
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong);
  color: var(--text-inverse);
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

.mobile-nav {
  display: none;
}

.site-footer {
  --footer-bg: #fbfaf7;
  --footer-text: #111114;
  --footer-muted: rgba(17, 17, 20, 0.64);
  --footer-dim: rgba(17, 17, 20, 0.5);
  --footer-line: rgba(17, 17, 20, 0.13);
  --footer-border: rgba(17, 17, 20, 0.11);
  --footer-link: rgba(17, 17, 20, 0.9);
  --footer-underline: rgba(17, 17, 20, 0.28);
  --footer-button-bg: rgba(17, 17, 20, 0.035);
  --footer-button-border: rgba(17, 17, 20, 0.15);
  --footer-button-hover-bg: rgba(17, 17, 20, 0.075);
  --footer-button-hover-border: rgba(17, 17, 20, 0.28);
  --footer-orbit: rgba(17, 17, 20, 0.07);
  --footer-red-glow: rgba(230, 42, 44, 0.12);
  --footer-blue-glow: rgba(44, 107, 255, 0.1);
  --footer-shadow: 0 24px 80px rgba(25, 25, 30, 0.1);
  position: relative;
  isolation: isolate;
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto 28px;
  overflow: hidden;
  border: 1px solid var(--footer-border);
  border-radius: 32px;
  background:
    radial-gradient(circle at 7% 9%, var(--footer-red-glow), transparent 28rem),
    radial-gradient(circle at 98% 110%, var(--footer-blue-glow), transparent 29rem),
    var(--footer-bg);
  color: var(--footer-text);
  box-shadow: var(--footer-shadow);
}

html[data-theme="dark"] .site-footer {
  --footer-bg: #0b0b0e;
  --footer-text: #fff;
  --footer-muted: rgba(255, 255, 255, 0.64);
  --footer-dim: rgba(255, 255, 255, 0.5);
  --footer-line: rgba(255, 255, 255, 0.13);
  --footer-border: rgba(255, 255, 255, 0.1);
  --footer-link: rgba(255, 255, 255, 0.9);
  --footer-underline: rgba(255, 255, 255, 0.35);
  --footer-button-bg: rgba(255, 255, 255, 0.055);
  --footer-button-border: rgba(255, 255, 255, 0.17);
  --footer-button-hover-bg: rgba(255, 255, 255, 0.1);
  --footer-button-hover-border: rgba(255, 255, 255, 0.32);
  --footer-orbit: rgba(255, 255, 255, 0.07);
  --footer-red-glow: rgba(230, 42, 44, 0.23);
  --footer-blue-glow: rgba(44, 107, 255, 0.17);
  --footer-shadow: 0 24px 80px rgba(8, 8, 12, 0.24);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .site-footer {
    --footer-bg: #0b0b0e;
    --footer-text: #fff;
    --footer-muted: rgba(255, 255, 255, 0.64);
    --footer-dim: rgba(255, 255, 255, 0.5);
    --footer-line: rgba(255, 255, 255, 0.13);
    --footer-border: rgba(255, 255, 255, 0.1);
    --footer-link: rgba(255, 255, 255, 0.9);
    --footer-underline: rgba(255, 255, 255, 0.35);
    --footer-button-bg: rgba(255, 255, 255, 0.055);
    --footer-button-border: rgba(255, 255, 255, 0.17);
    --footer-button-hover-bg: rgba(255, 255, 255, 0.1);
    --footer-button-hover-border: rgba(255, 255, 255, 0.32);
    --footer-orbit: rgba(255, 255, 255, 0.07);
    --footer-red-glow: rgba(230, 42, 44, 0.23);
    --footer-blue-glow: rgba(44, 107, 255, 0.17);
    --footer-shadow: 0 24px 80px rgba(8, 8, 12, 0.24);
  }
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 4px;
  background: linear-gradient(90deg,
    #08080a 0%,
    #280207 16%,
    #ff0019 36%,
    #ff0019 46%,
    #fff 60%,
    #fff 63%,
    #ff0019 79%,
    #250207 94%,
    #08080a 100%);
  box-shadow:
    0 1px 10px rgba(255, 0, 25, 0.32),
    0 3px 20px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  content: "";
}

.site-footer::after {
  position: absolute;
  top: -176px;
  right: -112px;
  z-index: -1;
  width: 390px;
  height: 390px;
  border: 1px solid var(--footer-orbit);
  border-radius: 50%;
  content: "";
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(42px, 6vw, 92px);
  padding: clamp(42px, 5vw, 72px) clamp(38px, 5vw, 72px) clamp(38px, 4vw, 58px);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 190px;
  padding-right: clamp(34px, 4vw, 64px);
  border-right: 1px solid var(--footer-line);
}

.site-footer__logo {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 8px;
}

.site-footer__logo img {
  width: clamp(225px, 22vw, 310px);
  height: auto;
}

.site-footer__logo-image--on-dark {
  display: none;
}

html[data-theme="dark"] .site-footer__logo-image--on-light {
  display: none;
}

html[data-theme="dark"] .site-footer__logo-image--on-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .site-footer__logo-image--on-light {
    display: none;
  }

  html[data-theme="system"] .site-footer__logo-image--on-dark {
    display: block;
  }
}

.site-footer__brand p {
  margin: 0;
  color: var(--footer-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.site-footer__legal {
  max-width: 760px;
}

.site-footer__eyebrow {
  display: block;
  margin-bottom: 15px;
  color: var(--footer-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.site-footer__legal h2 {
  max-width: 610px;
  margin: 0 0 17px;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.13;
}

.site-footer__legal > p {
  max-width: 720px;
  margin: 0;
  color: var(--footer-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}

.site-footer__legal > p a {
  color: var(--footer-link);
  text-decoration: underline;
  text-decoration-color: var(--footer-underline);
  text-underline-offset: 3px;
}

.site-footer__policy {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 46px;
  margin-top: 25px;
  padding: 11px 16px;
  border: 1px solid var(--footer-button-border);
  border-radius: 999px;
  background: var(--footer-button-bg);
  color: var(--footer-link);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.site-footer__policy:hover {
  border-color: var(--footer-button-hover-border);
  background: var(--footer-button-hover-bg);
  transform: translateY(-1px);
}

.site-footer__policy span:last-child {
  flex: 0 0 auto;
  font-size: 15px;
}

.site-footer__bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(38px, 5vw, 72px) 22px;
  border-top: 1px solid var(--footer-line);
  color: var(--footer-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-transform: uppercase;
}
@media (max-width: 1180px) {
  .header-inner,
  .main-shell,
  .site-footer {
    width: min(100% - 32px, 1080px);
  }

  .header-inner {
    grid-template-columns: 160px 1fr auto;
  }

  .desktop-nav a {
    padding-inline: 12px;
  }

  .player-panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .player-visual {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .player-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
    grid-template-areas:
      "player-top player-meta"
      "player-top player-actions"
      "player-shortcuts player-shortcuts";
    align-content: start;
    align-items: start;
    gap: 16px 28px;
    padding: 28px;
  }

  .player-copy-top { grid-area: player-top; }
  .player-meta { grid-area: player-meta; }
  .player-actions { grid-area: player-actions; }
  .player-channel-shortcuts { grid-area: player-shortcuts; }

  .player-copy :is(h1, h2) {
    font-size: clamp(28px, 3vw, 42px);
  }

  .channel-grid,
  .media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body {
    padding-bottom: calc(81px + env(safe-area-inset-bottom));
  }

  body.has-mini-player {
    padding-bottom: calc(181px + env(safe-area-inset-bottom));
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 44px 38px 34px;
  }

  .site-footer__brand {
    min-height: 0;
    gap: 30px;
    padding: 0 0 30px;
    border-right: 0;
    border-bottom: 1px solid var(--footer-line);
  }

  .site-footer__legal {
    max-width: 740px;
  }

  .site-footer__bottom {
    padding: 19px 38px 21px;
  }

  .desktop-nav {
    display: none;
  }

  .search-shortcut {
    display: none;
  }

  .my-shortcut {
    order: 1;
    gap: 2px;
    align-content: center;
    border-radius: 13px;
  }

  .my-shortcut svg {
    width: 17px;
    height: 17px;
  }

  .my-shortcut__label {
    display: block;
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
  }

  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    height: calc(72px + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-top: 2px solid #e95349;
    background: #302938;
    color-scheme: dark;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22);
  }

  .mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 56px;
    border-radius: 12px;
    color: #f5f1fa;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    transition: background 160ms ease, color 160ms ease;
  }

  .mobile-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .mobile-nav a.is-active {
    background: #cc2b24;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 8px rgba(0, 0, 0, 0.18);
  }

  .mobile-nav svg {
    width: 24px;
    height: 24px;
  }

  .toast {
    bottom: calc(87px + env(safe-area-inset-bottom));
  }

  body.has-mini-player .toast {
    bottom: calc(187px + env(safe-area-inset-bottom));
  }

  .header-inner {
    grid-template-columns: 1fr auto;
    min-height: 66px;
  }

  .main-shell {
    min-height: calc(100vh - 66px);
    padding-top: 24px;
  }

  .player-panel {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    border-radius: 24px;
  }

  .player-visual {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .player-copy {
    min-width: 0;
    min-height: 310px;
  }

  .player-copy :is(h1, h2) {
    max-width: 15ch;
  }

  .page-hero {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 20px;
  }

  .player-panel.is-mini {
    bottom: calc(77px + env(safe-area-inset-bottom));
    grid-template-columns: 145px minmax(0, 1fr);
    width: min(620px, calc(100vw - 32px));
  }

  .player-panel.is-mini .mini-copy {
    grid-template-columns: 40px minmax(0, 1fr) 42px 42px;
  }

  .player-panel.is-mini .mini-copy > .icon-button[data-player-action="expand"] {
    display: none;
  }
}

@media (max-width: 700px) {
  body {
    padding-bottom: calc(81px + env(safe-area-inset-bottom));
  }

  .header-inner,
  .main-shell {
    width: calc(100% - 24px);
  }

  .site-footer {
    width: calc(100% - 24px);
    margin-bottom: 18px;
    border-radius: 24px;
  }

  .site-footer__inner {
    gap: 25px;
    padding: 36px 24px 28px;
  }

  .site-footer__brand {
    gap: 24px;
    padding-bottom: 25px;
  }

  .site-footer__logo img {
    width: min(220px, 82%);
  }

  .site-footer__legal h2 {
    margin-bottom: 15px;
    font-size: 22px;
  }

  .site-footer__legal > p {
    font-size: 11px;
    line-height: 1.66;
  }

  .site-footer__policy {
    width: 100%;
    justify-content: space-between;
    margin-top: 22px;
    border-radius: 16px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 24px 20px;
  }

  .header-inner {
    min-height: 60px;
  }

  .brand-logo {
    width: 98px;
  }

  .search-shortcut {
    display: none;
  }

  .theme-control {
    width: 44px;
    padding: 0;
    justify-content: center;
  }

  .theme-control select {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
  }

  .main-shell {
    padding: 14px 0 80px;
  }

  .player-panel {
    margin-bottom: 42px;
    border-radius: 20px;
  }

  .player-up-next {
    top: 9px;
    right: 9px;
    grid-template-columns: minmax(72px, 1fr) auto;
    gap: 7px;
    width: calc(100% - 18px);
    min-height: 58px;
    padding: 7px 8px 9px 10px;
    border-radius: 14px;
  }

  .player-up-next__poster {
    display: none;
  }

  .player-up-next__status {
    margin-bottom: 3px;
    font-size: 8px;
  }

  .player-up-next__title {
    font-size: 11px;
  }

  .player-up-next__artist {
    margin-top: 2px;
    font-size: 9px;
  }

  .player-up-next__actions {
    gap: 4px;
  }

  .player-up-next__button {
    gap: 4px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 10px;
    font-size: 8px;
  }

  .player-up-next__button svg {
    width: 14px;
    height: 14px;
  }

  .player-up-next__button--close {
    width: 32px;
    min-height: 32px;
    padding: 0;
  }

  .custom-controls {
    right: 10px;
    bottom: 10px;
    left: 10px;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 56px;
    padding: 5px;
    border-radius: 14px;
  }

  .custom-controls button {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .custom-controls__status {
    gap: 6px;
    padding-inline: 5px;
    font-size: 10px;
  }

  .custom-controls__volume {
    display: flex;
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
  }

  .custom-controls__volume input {
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    touch-action: pan-y;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
  }

  .custom-controls__volume input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent) 0 var(--volume-level, 100%), rgba(255, 255, 255, 0.3) var(--volume-level, 100%) 100%);
  }

  .custom-controls__volume input::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: -10px;
    border: 2px solid rgba(8, 8, 11, 0.28);
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.42);
  }

  .custom-controls__volume input::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
  }

  .custom-controls__volume input::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
  }

  .custom-controls__volume input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(8, 8, 11, 0.28);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 9px rgba(0, 0, 0, 0.42);
  }

  .custom-controls__quality select {
    width: 86px;
    min-height: 44px;
    padding-right: 22px;
    padding-left: 8px;
    border-radius: 10px;
    font-size: 16px;
  }

  .custom-controls__quality::after {
    right: 8px;
  }

  .player-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    gap: 20px;
    padding: 24px 21px;
  }

  .player-copy :is(h1, h2) {
    font-size: clamp(27.2px, 9.6vw, 41.6px);
  }

  .player-copy p {
    font-size: 14px;
  }

  .now-playing {
    margin-top: 15px;
    padding: 12px 13px 13px;
    border-radius: 14px;
  }

  .now-playing__head {
    margin-bottom: 7px;
  }

  .now-playing__label {
    font-size: 10px;
  }

  .now-playing strong {
    font-size: 14px;
  }

  .now-playing__artist {
    font-size: 11px;
  }

  .player-channel-shortcuts {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .player-actions .button {
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: 12px;
  }

  .player-panel.is-mini {
    right: 8px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 8px;
    grid-template-columns: 112px minmax(0, 1fr);
    width: auto;
    min-height: 78px;
    border-radius: 16px;
  }

  .player-panel.is-mini .player-visual {
    min-height: 78px;
  }

  .player-panel.is-mini .mini-copy {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    gap: 5px;
    padding: 9px;
  }

  .player-panel.is-mini .mini-copy > img {
    display: none;
  }

  .page-hero {
    margin: 14px 0 34px;
    padding-bottom: 25px;
  }

  .video-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 4px 0 14px;
  }

  .video-tabs a {
    min-width: 0;
  }

  .page-hero h1,
  .search-heading h1 {
    font-size: clamp(33.6px, 11.2vw, 56px);
  }

  .page-hero--compact h1 {
    font-size: 23.2px;
  }

  .page-hero--compact p {
    font-size: 14px;
  }

  .section {
    margin-bottom: 50px;
  }

  .section-heading {
    align-items: center;
    margin-bottom: 17px;
  }

  .section-heading h2 {
    font-size: 23.2px;
  }

  .section-heading p {
    font-size: 14px;
  }

  .channel-rail,
  .media-rail {
    margin-right: -12px;
    grid-auto-columns: minmax(185px, 72vw);
    gap: 11px;
  }

  .channel-grid,
  .media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .channel-grid {
    gap: 10px;
  }

  .channel-grid .channel-card,
  .channel-grid .channel-card :is(button, a).channel-open {
    min-height: 155px;
  }

  .channel-card :is(button, a).channel-open {
    padding: 20px 15px 14px;
  }

  .channel-card-logo img {
    width: min(184px, 78.4%);
    max-height: 70.4px;
  }

  .media-grid {
    gap: 24px 10px;
  }

  .media-card-visual {
    border-radius: 14px;
  }

  .media-card-copy strong {
    font-size: 13px;
  }

  .card-play {
    opacity: 1;
    transform: none;
  }

  .show-collection {
    margin-bottom: 70px;
  }

  .search-box input {
    height: 62px;
    padding-left: 51px;
    border-radius: 17px;
  }

  .search-box svg {
    left: 17px;
  }

}

:root {
  --app-header-h: 75px;
  --app-header-safe: 0px;
  --app-mobile-nav-h: 0px;
  --short-screen-h: 100vh;
}

@supports (height: 100svh) {
  :root {
    --short-screen-h: 100svh;
  }
}

html[data-route="shorts"] {
  scroll-padding-top: calc(var(--app-header-h) + var(--app-header-safe));
  scroll-snap-type: y proximity;
}

html[data-route="shorts"] .main-shell {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 24px;
}

html[data-route="shorts"] .site-footer {
  scroll-snap-align: start;
}

.shorts-preview-rail,
.shorts-preview-grid {
  display: grid;
  gap: 14px;
}

.shorts-preview-rail {
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 190px);
  padding: 2px 2px 16px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  scrollbar-width: thin;
}

.shorts-preview-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.short-preview-card {
  position: relative;
  min-width: 0;
  scroll-snap-align: start;
}

.short-preview-card__visual {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #17131c;
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.short-preview-card__visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.short-preview-card:hover .short-preview-card__visual > img {
  transform: scale(1.025);
}

.short-preview-card__placeholder {
  position: absolute;
  inset: 0;
  background: #101010 url('/assets/shorts-placeholder.svg?v=2') center / cover no-repeat;
}

.short-preview-card__badge {
  position: absolute;
  top: 11px;
  left: 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(8, 8, 11, 0.68);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.short-preview-card__badge svg {
  width: 15px;
  height: 15px;
}

.short-preview-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.93);
  color: #111114;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
}

.short-preview-card__play svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
}

.short-preview-card__copy {
  min-width: 0;
  padding: 11px 4px 0;
}

.short-preview-card__copy > a {
  display: block;
  min-width: 0;
  padding-right: 36px;
  color: var(--text);
}

.short-preview-card__copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.short-preview-card__copy span {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.short-preview-card .card-favorite {
  top: auto;
  right: 0;
  bottom: 0;
  width: 34px;
  height: 34px;
  border-color: var(--line);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}

.short-preview-card .card-favorite.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.shorts-page,
.shorts-feed {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.shorts-feed {
  list-style: none;
}

.shorts-feed:is(:fullscreen, .is-shorts-expanded) {
  width: 100vw;
  height: 100vh;
  max-width: none;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  background: #08080a;
}

.shorts-feed:is(:fullscreen, .is-shorts-expanded) .shorts-item {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  padding: 0;
}

.shorts-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  max-width: 100%;
  min-height: calc(var(--short-screen-h) - var(--app-header-h) - var(--app-header-safe) - var(--app-mobile-nav-h));
  padding: 16px 0;
  overflow-x: clip;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.short-card {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  height: min(820px, calc(var(--short-screen-h) - var(--app-header-h) - var(--app-header-safe) - 32px));
  margin-inline: auto;
  justify-self: center;
}

.short-card__stage {
  position: relative;
  isolation: isolate;
  height: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 28px;
  background: #08080a;
  color: #fff;
  box-shadow: var(--shadow);
}

.short-card__placeholder,
.short-card__poster,
.short-card__media-slot,
.short-card__video,
.short-card__media-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.short-card__placeholder {
  z-index: 0;
  background: #101010 url('/assets/shorts-placeholder.svg?v=2') center / contain no-repeat;
}

.short-card__poster,
.short-card__video {
  object-fit: contain;
  background: #08080a;
}

.short-card__poster {
  z-index: 1;
  background: transparent;
  transition: opacity 180ms ease;
}

.short-card__media-slot {
  z-index: 2;
  display: block;
  pointer-events: none;
}

.short-card__video {
  display: block;
  opacity: 0;
}

.short-card__video.has-frame {
  opacity: 1;
}

.shorts-item.is-active .short-card__stage.is-playing .short-card__poster {
  opacity: 0;
}

.short-card__media-toggle {
  z-index: 3;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
}

.short-card__topbar {
  position: absolute;
  top: 15px;
  right: 15px;
  left: 15px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.short-card__brand,
.short-card__position {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(8, 8, 11, 0.58);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.short-card__brand {
  gap: 6px;
  text-transform: uppercase;
}

.short-card__brand svg {
  width: 15px;
  height: 15px;
}

.short-card__position {
  font-variant-numeric: tabular-nums;
}

.short-card__sound-hint {
  position: absolute;
  top: 60px;
  left: 50%;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(8, 8, 11, 0.72);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.short-card__sound-hint[hidden] {
  display: none !important;
}

.shorts-item:not(.is-active) .short-card__sound-hint,
.shorts-item:not(.is-active) .short-card__play,
.shorts-item:not(.is-active) .short-card__loading,
.shorts-item:not(.is-active) .short-card__error {
  display: none !important;
}

.shorts-item:not(.is-active) [data-short-action],
.shorts-item:not(.is-active) [data-short-progress] {
  pointer-events: none;
}

.short-card__sound-hint svg {
  width: 17px;
  height: 17px;
}

.short-card__meta {
  position: absolute;
  right: 17px;
  bottom: 24px;
  left: 17px;
  z-index: 5;
  max-width: calc(100% - 34px);
  padding: 16px 17px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: rgba(8, 8, 11, 0.63);
  color: #fff;
  -webkit-backdrop-filter: blur(15px) saturate(130%);
  backdrop-filter: blur(15px) saturate(130%);
  pointer-events: none;
}

.short-card__meta > span {
  display: block;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.short-card__meta h2 {
  display: -webkit-box;
  max-width: 16ch;
  margin: 6px 0 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.09;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.short-card__meta button,
.short-related-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  margin-top: 12px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: #fff;
  color: #111114;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}

@media (any-pointer: coarse) {
  html[data-route="shorts"] {
    scroll-snap-type: y mandatory;
  }

  .short-card__media-toggle {
    touch-action: pinch-zoom;
  }
}

.short-card__meta button svg,
.short-related-link svg {
  width: 16px;
  height: 16px;
}

.short-card__play,
.short-card__loading,
.short-card__error {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 7;
  transform: translate(-50%, -50%);
}

.short-card__play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #111114;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
  cursor: pointer;
}

.short-card__play[hidden],
.short-card__loading[hidden],
.short-card__error[hidden] {
  display: none !important;
}

.short-card__play svg {
  width: 20px;
  height: 20px;
}

.short-card__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}

.short-card__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(280px, calc(100% - 40px));
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 18px;
  background: rgba(8, 8, 11, 0.88);
  color: #fff;
  text-align: center;
}

.short-card__error strong {
  margin-bottom: 12px;
  font-size: 14px;
}

.short-card__error button,
.short-card__error a {
  min-height: 38px;
  padding: 9px 13px;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.short-card__error button {
  border-radius: 999px;
  background: #fff;
  color: #111114;
}

.short-card__timeline {
  position: absolute;
  right: 14px;
  bottom: 3px;
  left: 14px;
  z-index: 8;
  display: flex;
  height: 20px;
  align-items: center;
}

.short-card__timeline input {
  width: 100%;
  margin: 0;
  accent-color: #fff;
  cursor: pointer;
}

.short-card__actions {
  position: absolute;
  right: auto;
  bottom: 24px;
  left: calc(100% + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 24px;
}

.short-card__actions > button,
.short-card__nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 66px;
  min-height: 58px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.short-card__actions > button:hover,
.short-card__nav button:hover {
  background: var(--surface-soft);
}

.short-card__actions > button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

.short-card__actions svg,
.short-card__nav svg {
  width: 21px;
  height: 21px;
}

.short-card__actions > button span {
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.short-card__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 3px;
}

.short-card__nav button {
  min-height: 44px;
}

.short-card__nav button:disabled {
  cursor: default;
  opacity: 0.32;
}

.short-card__nav button:first-child svg {
  transform: rotate(-90deg);
}

.short-card__nav button:last-child svg {
  transform: rotate(90deg);
}

.short-card:fullscreen,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100vw;
  height: 100vh;
  max-width: none;
  padding: 14px;
  background: #08080a;
}

.short-card:fullscreen .short-card__stage,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__stage {
  height: calc(100vh - 28px);
  border-radius: 18px;
}

.short-card:fullscreen .short-card__actions,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions {
  right: 24px;
  bottom: 24px;
  left: auto;
  color: #fff;
}

.short-card:fullscreen .short-card__actions > button,
.short-card:fullscreen .short-card__nav button,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions > button,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__nav button {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: none;
}

.short-card:fullscreen .short-card__actions > button:hover,
.short-card:fullscreen .short-card__nav button:hover,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions > button:hover,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__nav button:hover {
  background: rgba(255, 255, 255, 0.17);
}

@media (max-width: 1180px) {
  .shorts-preview-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .short-card {
    height: min(760px, calc(var(--short-screen-h) - var(--app-header-h) - 32px));
  }

  .short-card__actions {
    left: calc(100% + 14px);
  }

  .short-card__actions > button,
  .short-card__nav button {
    width: 62px;
  }
}

@media (max-width: 900px) {
  :root {
    --app-header-h: 67px;
    --app-mobile-nav-h: calc(72px + env(safe-area-inset-bottom));
  }

  .search-shortcut {
    display: inline-grid;
  }

  html[data-route="shorts"] .main-shell {
    padding-bottom: 18px;
  }

  .shorts-preview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .shorts-item {
    padding: 8px 0;
  }

  .short-card {
    --short-card-height: min(
      calc(var(--short-screen-h) - var(--app-header-h) - var(--app-header-safe) - var(--app-mobile-nav-h) - 16px),
      calc(177.7778vw - 56.8889px)
    );
    display: block;
    width: auto;
    max-width: calc(100vw - 32px);
    height: var(--short-card-height);
    aspect-ratio: 9 / 16;
  }

  .short-card:fullscreen,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card {
    display: block;
    width: 100vw;
    max-width: none;
    height: 100vh;
    aspect-ratio: auto;
    padding: 0;
  }

  .short-card:fullscreen .short-card__stage,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__stage {
    width: 100%;
    max-width: none;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }

  .short-card__stage {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 24px;
  }

  .short-card__actions {
    position: absolute;
    right: 11px;
    bottom: 66px;
    left: auto;
    z-index: 9;
    gap: 9px;
    padding: 0;
  }

  .short-card__actions > button {
    width: 46px;
    min-height: 46px;
    border-color: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(8, 8, 11, 0.65);
    color: #fff;
    box-shadow: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .short-card__actions > button.is-active {
    border-color: var(--accent);
  }

  .short-card__actions > button span,
  .short-card__nav {
    display: none;
  }

  .short-card__meta {
    right: 70px;
  }
}

@media (max-width: 700px) {
  :root {
    --app-header-h: 61px;
  }

  html[data-route="shorts"] .main-shell {
    width: 100%;
    padding: 0 0 14px;
  }

  .video-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shorts-preview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shorts-preview-rail {
    grid-auto-columns: minmax(145px, 46vw);
    margin-right: -12px;
    gap: 10px;
  }

  .short-card {
    --short-card-height: min(
      calc(var(--short-screen-h) - var(--app-header-h) - var(--app-header-safe) - var(--app-mobile-nav-h) - 16px),
      calc(177.7778vw - 42.6667px)
    );
    width: auto;
    max-width: calc(100vw - 24px);
    height: var(--short-card-height);
  }

  .short-card__stage {
    border-radius: 22px;
  }

  .short-card__topbar {
    top: 12px;
    right: 12px;
    left: 12px;
  }

  .short-card__sound-hint {
    top: 55px;
  }

  .short-card__meta {
    right: 67px;
    bottom: 22px;
    left: 14px;
    padding: 13px 14px;
    border-radius: 15px;
  }

  .short-card__meta h2 {
    max-width: 15ch;
    font-size: clamp(15px, 4.2vw, 18px);
  }

  .short-card__meta > span {
    font-size: 10px;
  }

  .short-card__meta button {
    min-height: 34px;
    margin-top: 9px;
  }
}

@media (max-width: 430px) {
  .shorts-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .short-card__actions {
    right: 9px;
    bottom: 62px;
    gap: 7px;
  }

  .short-card__actions > button {
    width: 44px;
    min-height: 44px;
  }

  .short-card__meta {
    right: 61px;
    left: 12px;
  }

  .short-card__brand,
  .short-card__position {
    padding-inline: 8px;
    font-size: 9px;
  }

  .short-card__sound-hint span {
    display: none;
  }

  .short-card__sound-hint {
    width: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 900px) and (max-height: 620px) and (orientation: landscape) {
  .shorts-item {
    padding: 4px 12px;
  }

  .short-card {
    display: block;
    width: fit-content;
    max-width: 100%;
    height: min(
      calc(var(--short-screen-h) - var(--app-header-h) - var(--app-header-safe) - var(--app-mobile-nav-h) - 8px),
      calc(56.25vw - 78.75px)
    );
    aspect-ratio: auto;
  }

  .short-card__stage {
    width: auto;
    aspect-ratio: 16 / 9;
  }

  .short-card__actions {
    position: absolute;
    right: auto;
    bottom: 8px;
    left: calc(100% + 10px);
    padding-bottom: 8px;
  }

  .short-card__actions > button {
    position: static;
    width: 48px;
    min-height: 44px;
  }

  .short-card__meta {
    right: 14px;
    max-width: 68%;
  }

  .short-card:fullscreen .short-card__actions,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions {
    position: absolute;
    right: 10px;
    bottom: 50%;
    z-index: 9;
    padding: 0;
    transform: translateY(50%);
  }
}

@media (hover: hover) and (pointer: fine) {
  .player-visual.controls-idle {
    cursor: none;
  }

  .short-card:not(:hover):not(:focus-within) .short-card__actions {
    opacity: 0.72;
  }
}

@media (max-width: 430px) {
  .header-actions {
    gap: 2px;
  }

  .header-inner:has(.install-shortcut:not([hidden])) .brand-logo {
    width: clamp(64px, calc(100vw - 252px), 98px);
  }
}

@media (max-width: 700px) {
  .custom-controls {
    gap: 4px;
  }

  .player-panel:not(.is-live-media) .custom-controls {
    grid-template-areas:
      "timeline timeline timeline timeline timeline timeline"
      "previous play next mute quality fullscreen"
      "volume volume volume volume volume volume";
    grid-template-columns: repeat(4, minmax(36px, 44px)) minmax(62px, 1fr) minmax(36px, 44px);
    display: grid;
  }

  .player-panel:not(.is-live-media) .custom-controls button {
    width: 100%;
    height: clamp(36px, 11.2vw, 44px);
  }

  .player-panel:not(.is-live-media) #customPreviousMedia {
    grid-area: previous;
  }

  .player-panel:not(.is-live-media) #customNextMedia {
    grid-area: next;
  }

  .player-panel:not(.is-live-media) #customPlayToggle {
    grid-area: play;
  }

  .player-panel:not(.is-live-media) #customMuteToggle {
    grid-area: mute;
  }

  .player-panel:not(.is-live-media) .custom-controls__timeline {
    grid-area: timeline;
    width: 100%;
  }

  .player-panel:not(.is-live-media) .custom-controls__volume {
    grid-area: volume;
  }

  .player-panel:not(.is-live-media) .custom-controls__quality {
    grid-area: quality;
    min-width: 0;
  }

  .player-panel:not(.is-live-media) .custom-controls__quality select {
    width: 100%;
    min-height: clamp(36px, 11.2vw, 44px);
    padding-right: 16px;
    padding-left: 5px;
  }

  .player-panel:not(.is-live-media) #customFullscreen {
    grid-area: fullscreen;
  }

  .custom-controls__timeline {
    gap: 4px;
  }

  .custom-controls__timeline input {
    min-width: 28px;
  }

  .custom-controls__quality select {
    width: 86px;
    padding-right: 20px;
    padding-left: 7px;
  }
}

@media (max-width: 430px) {
  .channel-grid {
    grid-template-columns: 1fr 1fr;
  }

  .channel-card-footer span {
    display: none;
  }

  .channel-card-footer {
    justify-content: flex-end;
  }

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

  .media-card-copy strong {
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .player-up-next {
    gap: 5px;
    padding-right: 6px;
    padding-left: 8px;
  }

  .player-up-next__artist {
    display: none;
  }

  .player-up-next__button {
    gap: 3px;
    padding-inline: 6px;
    font-size: 7.5px;
  }

  .player-up-next__button--close {
    padding: 0;
  }

  .player-panel.is-live-media .custom-controls__status span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .player-panel.is-live-media .custom-controls__status {
    padding-inline: 6px;
  }

  .custom-controls__quality select {
    width: 80px;
  }
}

@media (max-width: 310px) {
  .custom-controls {
    gap: 3px;
  }

  .player-panel:not(.is-live-media) .custom-controls {
    grid-template-columns: repeat(4, minmax(32px, 40px)) minmax(60px, 1fr) minmax(32px, 40px);
  }

  .custom-controls__quality select {
    width: 76px;
  }
}

@media (display-mode: standalone) {
  :root {
    --app-header-safe: env(safe-area-inset-top);
    --short-screen-h: 100dvh;
  }

  body {
    overscroll-behavior-y: none;
  }

  .site-header {
    padding-top: env(safe-area-inset-top);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.custom-controls #customVolumeMute { display: none; }

.custom-controls #customDevices.is-active {
  color: #9ee5ff;
  background: rgba(81, 174, 222, .2);
}

.player-device-status {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(80%, 320px);
  padding: 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: 13px;
  text-align: center;
  pointer-events: none;
}
.player-device-status[hidden] { display: none; }
.player-device-status svg { width: 32px; height: 32px; }

@media (max-width: 700px) and (orientation: portrait) {
  .player-panel:not(.is-live-media) .custom-controls {
    grid-template-areas:
      "timeline timeline timeline timeline timeline timeline"
      "previous play next mute quality fullscreen";
  }

  .custom-controls .custom-controls__volume {
    position: absolute;
    right: 48px;
    bottom: calc(100% + 8px);
    display: none;
    gap: 6px;
    width: 200px;
    max-width: calc(100% - 16px);
    min-height: 48px;
    padding: 4px 8px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(8,8,11,.94);
    box-shadow: 0 6px 22px rgba(0,0,0,.3);
  }

  .player-panel:not(.is-live-media) .custom-controls__volume { grid-area: auto; }
  .custom-controls.is-volume-open .custom-controls__volume { display: flex; }
  .custom-controls .custom-controls__volume input { flex: 1 1 auto; width: 0; }
  .custom-controls #customVolumeMute {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
  }
}

.watch-clips-heading { gap: 16px; }
.watch-clips-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.watch-clips-actions[hidden] { display: none; }
.watch-clips-actions button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.watch-clips-actions button:hover:not(:disabled) { background: var(--surface-soft); }
.watch-clips-actions button:disabled { opacity: .3; cursor: default; }
.watch-clips-actions svg { width: 20px; height: 20px; }
.watch-clips-actions [data-watch-clips-step="1"] svg { transform: rotate(180deg); }
.media-rail.watch-clips-rail {
  grid-auto-columns: clamp(230px, 28%, 320px);
  margin-right: 0;
  scroll-padding-inline: 2px;
  scrollbar-color: var(--line-strong) transparent;
}
.watch-clips-rail .media-card { scroll-snap-align: start; }
.watch-clips-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
@media (max-width: 700px) {
  .media-rail.watch-clips-rail { grid-auto-columns: min(78%, 300px); }
  .watch-clips-actions { gap: 6px; }
}



.watch-description { margin: 12px 0 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft); overflow: hidden; }
.watch-description summary { padding: 14px 18px; cursor: pointer; list-style: none; }
.watch-description summary::-webkit-details-marker { display: none; }
.watch-description summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 16px; }
.watch-description__preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; color: var(--muted); }
.watch-description__more, .watch-description__less { font-size: 13px; font-weight: 700; color: var(--text); }
.watch-description__more { display: block; margin-top: 6px; }
.watch-description__less { display: none; }
.watch-description[open] .watch-description__preview, .watch-description[open] .watch-description__more { display: none; }
.watch-description[open] .watch-description__less { display: block; }
.watch-description__full { padding: 0 18px 18px; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
@media (max-width: 700px) { .watch-description summary { padding: 12px 14px; } .watch-description__full { padding: 0 14px 14px; } }
/* Keep the established page expansion without locking Safari's root scroller. */
body.shorts-expanded {
  overflow: hidden;
}

.player-visual:fullscreen .custom-controls,
.player-panel.is-player-expanded .custom-controls {
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  left: max(12px, env(safe-area-inset-left));
}

.player-visual:fullscreen .player-up-next,
.player-panel.is-player-expanded .player-up-next {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: min(490px, calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))));
}

@media (min-width: 901px) {
  .player-visual:fullscreen .player-up-next:not([hidden]) ~ .player-fullscreen-info > *,
  .player-panel.is-player-expanded .player-up-next:not([hidden]) ~ .player-fullscreen-info > * {
    max-width: min(960px, calc(100% - 510px));
  }
}

@media (max-width: 900px) {
  .player-visual:fullscreen:not(.controls-idle) .player-up-next,
  .player-panel.is-player-expanded .player-visual:not(.controls-idle) .player-up-next {
    top: calc(max(24px, env(safe-area-inset-top)) + 96px);
  }
}

.shorts-feed.is-shorts-expanded {
  position: fixed;
  inset: 0;
  z-index: 200;
  isolation: isolate;
}

.shorts-feed:is(:fullscreen, .is-shorts-expanded) {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shorts-feed:is(:fullscreen, .is-shorts-expanded)::-webkit-scrollbar {
  display: none;
}

.shorts-feed:is(:fullscreen, .is-shorts-expanded) .shorts-item {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}

.short-card:fullscreen,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card {
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  aspect-ratio: auto;
}

.short-card:fullscreen .short-card__stage,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__stage {
  height: 100%;
  max-width: 100%;
}

.short-card:fullscreen .short-card__actions,
.shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  left: auto;
  z-index: 9;
  padding-bottom: 0;
}

@media (max-width: 900px), (max-height: 620px) and (orientation: landscape) {
  .short-card:fullscreen,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card {
    display: block;
    padding: 0;
  }

  .short-card:fullscreen .short-card__stage,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__stage {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }

  .short-card:fullscreen .short-card__topbar,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__topbar {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
  }

  .short-card:fullscreen .short-card__sound-hint,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__sound-hint {
    top: calc(max(12px, env(safe-area-inset-top)) + 44px);
    left: max(12px, env(safe-area-inset-left));
    min-width: 44px;
    min-height: 44px;
    transform: none;
  }

  .short-card:fullscreen .short-card__timeline,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__timeline {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(4px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
    height: 44px;
  }

  .short-card:fullscreen .short-card__timeline input,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__timeline input {
    min-height: 44px;
  }

  .short-card:fullscreen .short-card__meta,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__meta {
    right: calc(max(12px, env(safe-area-inset-right)) + 60px);
    bottom: calc(max(4px, env(safe-area-inset-bottom)) + 48px);
    left: max(12px, env(safe-area-inset-left));
    max-width: none;
  }

  .short-card:fullscreen .short-card__actions,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(max(4px, env(safe-area-inset-bottom)) + 76px);
    gap: 8px;
    transform: none;
  }

  .short-card:fullscreen .short-card__actions > button,
  .short-card:fullscreen .short-card__nav button,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions > button,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__nav button {
    width: 44px;
    min-height: 44px;
    padding: 6px;
    border-radius: 50%;
    background: rgba(8, 8, 11, 0.68);
  }

  .short-card:fullscreen .short-card__actions > button span,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions > button span {
    display: none;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .short-card:fullscreen .short-card__actions,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__actions {
    bottom: 50%;
    transform: translateY(50%);
  }

  .short-card:fullscreen .short-card__nav,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__nav {
    flex-direction: row;
  }

  .short-card:fullscreen .short-card__meta,
  .shorts-feed:is(:fullscreen, .is-shorts-expanded) .short-card__meta {
    max-width: min(440px, calc(100% - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)) - 72px));
  }
}


.player-fullscreen-close {
  display: none;
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 12;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(8, 8, 11, 0.82);
  color: #fff;
  cursor: pointer;
}

.player-fullscreen-close svg {
  width: 20px;
  height: 20px;
}

.player-fullscreen-close:hover {
  background: rgba(36, 34, 41, 0.95);
}

.player-fullscreen-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.player-panel.is-player-expanded:not(.has-started) .player-fullscreen-close,
.player-panel:not(.has-started) .player-visual:fullscreen .player-fullscreen-close {
  display: grid;
}

@media (max-width: 700px) {
  .player-device-status { top: 28%; gap: 6px; padding: 10px; font-size: 11px; }
  .player-device-status svg { width: 24px; height: 24px; }
  .player-panel:not(.is-live-media) .custom-controls {
    grid-template-areas:
      "timeline timeline timeline timeline timeline timeline timeline"
      "previous play next mute quality devices fullscreen"
      "volume volume volume volume volume volume volume";
    grid-template-columns: repeat(4, minmax(30px, 1fr)) minmax(50px, 1.3fr) repeat(2, minmax(30px, 1fr));
  }
  .player-panel:not(.is-live-media) #customDevices { grid-area: devices; }
  .player-panel:not(.is-live-media) .custom-controls__quality select { min-width: 0; width: 100%; padding: 0 14px 0 5px; font-size: 10px; }
  .player-panel.is-live-media .custom-controls { gap: 3px; }
  .player-panel.is-live-media .custom-controls__quality select { width: 62px; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .player-panel:not(.is-live-media) .custom-controls {
    grid-template-areas:
      "timeline timeline timeline timeline timeline timeline timeline"
      "previous play next mute quality devices fullscreen";
  }
}
/* Public HTML remains readable before initialization and without JavaScript. */
.server-page {
  display: grid;
  gap: 32px;
  min-width: 0;
  padding-block: 12px 32px;
}

.server-page > header {
  display: grid;
  gap: 14px;
  max-width: 880px;
}

.server-page > header h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}

.server-page > header p,
.server-page > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.server-page > header .server-page__label {
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.server-page > p a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.server-page__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.server-page__navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.server-page__navigation a:hover,
.server-page__navigation a[aria-current="page"] {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.server-page__group {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.server-page__group h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.2;
}

.server-page__items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.server-page__item {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.server-page__item:hover {
  border-color: var(--line-strong);
}

.server-page__item > article {
  display: grid;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.server-page__item :is(h2, h3, strong) {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.server-page__item h3 a {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.server-page__item h3 a:hover {
  color: var(--accent-text);
}

.server-page__item :is(p, small) {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.server-page__cover,
.server-page__video {
  display: block;
  width: min(100%, 880px);
  max-height: 65vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 12px;
  background: var(--surface-soft);
}

.server-page[data-page-kind="short"] .server-page__video {
  width: min(100%, 380px);
  aspect-ratio: 9 / 16;
}

@media (max-width: 1180px) {
  .server-page__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .server-page { gap: 24px; }
  .server-page__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .server-page__item { padding: 12px; border-radius: 16px; }
}

@media (max-width: 420px) {
  .server-page__items { grid-template-columns: minmax(0, 1fr); }
}
/* The supplied ROLCE wordmark retains its original proportions and red. */
.brand-logo { width: 156px; height: auto; }
.app-splash__logo { width: clamp(220px, 44vw, 460px); height: auto; }
.site-footer__logo img { width: min(100%, 242px); height: auto; }

/* Small independent credit, shared by the portal and privacy-page footers. */
.site-footer__bottom { flex-wrap: wrap; }
.site-footer__credits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.site-footer__creator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  color: inherit;
}
.site-footer__creator img { width: 108px; height: auto; }
.site-footer__creator:hover { opacity: .78; }
.site-footer__creator-logo--dark { display: none; }
html[data-theme="dark"] .site-footer__creator-logo--light { display: none; }
html[data-theme="dark"] .site-footer__creator-logo--dark { display: block; }

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .site-footer__creator-logo--light { display: none; }
  html[data-theme="system"] .site-footer__creator-logo--dark { display: block; }
}

@media (max-width: 700px) {
  .brand-logo { width: 118px; }
  .site-footer__bottom { gap: 10px; }
  .site-footer__credits { width: 100%; justify-content: space-between; gap: 12px; }
}

@media (max-width: 390px) {
  .brand-logo { width: 98px; }
}
.library-page { --library-red: #ff0019; padding: 18px 0 40px; }
.library-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 12px 0 32px; }
.library-hero h1 { margin: 12px 0 16px; font-size: clamp(34px, 5vw, 68px); letter-spacing: -.04em; line-height: 1; }
.library-hero p { max-width: 52ch; margin: 0; color: var(--muted); line-height: 1.7; font-size: 14px; }
.library-hero > .button { flex-shrink: 0; }
.library-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 28px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.library-tabs a { padding: 11px 20px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; }
.library-tabs a.is-active { background: var(--text); color: var(--bg); }
.library-tabs .library-tabs__related { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.library-tabs__related svg { width: 16px; height: 16px; }
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.library-card { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; transition: border-color .18s ease, transform .18s ease; }
.library-card:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.library-card__link { display: block; height: 100%; }
.library-card__art { position: relative; isolation: isolate; display: grid; place-items: center; aspect-ratio: 16 / 8; overflow: hidden; background: radial-gradient(ellipse at 84% 4%, #ff001980, transparent 60%), linear-gradient(125deg, #17171c, #30000c); color: #fff; }
.library-card__art::after { content: ''; position: absolute; inset: auto -30% -150%; width: 160%; aspect-ratio: 1; border: 1px solid #ffffff26; border-radius: 50%; z-index: -1; }
.library-card__art > span { font-size: 54px; font-weight: 800; letter-spacing: -.04em; }
.library-card--playlist .library-card__art { background: radial-gradient(ellipse at 10% 100%, #ff00195c, transparent 72%), #151518; }
.library-card--playlist .library-card__art > span { font-size: 35px; }
.library-card__art i { position: absolute; height: 2px; left: 22%; right: 22%; bottom: 17%; background: #ffffff29; }
.library-card__art i + i { left: 28%; right: 28%; bottom: 12%; }
.library-card__copy { padding: 22px; }
.library-card__copy small { color: var(--muted); font-size: 11px; font-weight: 700; overflow-wrap: anywhere; }
.library-card__copy h2 { margin: 9px 0 10px; font-size: 21px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.library-card__copy p { margin: 0 0 18px; color: var(--muted); font-size: 12px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.library-card__copy > span { display: block; color: var(--muted); font-size: 11px; }
.library-card__edit { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 8px 11px; border: 1px solid #ffffff26; border-radius: 999px; color: white; background: #111111b3; font-size: 11px; }
.library-card__edit svg { width: 14px; height: 14px; }
.library-profile { display: flex; align-items: center; gap: 34px; padding: 38px; margin-top: 22px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(ellipse at 0 0, #ff001918, transparent 65%), var(--surface); }
.library-profile__mark { flex: 0 0 130px; width: 130px; height: 130px; display: grid; place-items: center; border-radius: 28px; background: radial-gradient(ellipse at 100% 0%, #ff001988, transparent 65%), #151518; color: #fff; font-size: 66px; font-weight: 800; }
.library-profile--channel .library-profile__mark { border-radius: 50%; }
.library-profile--playlist .library-profile__mark { font-size: 36px; }
.library-profile__copy { min-width: 0; flex: 1; }
.library-profile h1 { margin: 10px 0 14px; font-size: clamp(26px, 4vw, 50px); line-height: 1.08; letter-spacing: -.04em; overflow-wrap: anywhere; }
.library-profile__copy > p { max-width: 70ch; color: var(--muted); font-size: 13px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.library-profile__facts, .library-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.library-profile__facts { color: var(--muted); font-size: 11px; }
.library-profile__facts a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.library-actions { gap: 8px; margin-top: 24px; }
.library-actions .button { min-height: 38px; padding: 10px 14px; font-size: 11px; }
.library-content { margin-top: 36px; }
.library-section-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0 0 20px; }
.library-section-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.02em; }
.library-items { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.library-item { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.library-item__number { width: 22px; flex-shrink: 0; text-align: center; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.library-item__open { display: flex; align-items: center; min-width: 0; gap: 18px; flex: 1; }
.library-item__art { display: grid; place-items: center; flex: 0 0 128px; width: 128px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; color: var(--muted); background: var(--surface-soft); }
.library-item__art img, .library-picker-row__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.library-item__art svg { width: 24px; height: 24px; }
.library-item__copy { min-width: 0; }
.library-item__copy strong { display: block; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.library-item__copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.library-item__play { margin-left: auto; padding: 10px; color: var(--accent-text); }
.library-item__play svg { width: 19px; height: 19px; }
.library-item__actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.library-item__actions .button { min-height: 36px; padding: 8px 10px; font-size: 10px; }
.library-icon-button { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 36px; min-height: 36px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--surface); font-size: 18px; }
.library-icon-button svg { width: 16px; height: 16px; }
.library-icon-button:hover { background: var(--surface-soft); }
.library-icon-button:disabled { opacity: .3; cursor: default; }
.library-empty { display: grid; justify-items: center; text-align: center; padding: 56px 24px; border: 1px dashed var(--line-strong); border-radius: 24px; }
.library-empty__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-text); }
.library-empty__mark svg { width: 22px; height: 22px; }
.library-empty h2 { font-size: 22px; margin: 20px 0 10px; }
.library-empty p { max-width: 50ch; color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0 0 22px; }
.library-loading { padding: 64px 20px; text-align: center; color: var(--muted); font-size: 14px; }
.library-muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
.library-dialog { width: min(600px, calc(100% - 32px)); max-height: min(88dvh, 850px); margin: auto; padding: 28px; border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface); color: var(--text); box-shadow: 0 28px 110px #0006; overflow-y: auto; overscroll-behavior: contain; }
.library-dialog::backdrop { background: #000a; backdrop-filter: blur(5px); }
.library-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.library-dialog__head h2 { margin: 3px 0; font-size: 24px; letter-spacing: -.03em; line-height: 1.2; }
.library-dialog__description { font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
.library-form { display: grid; gap: 20px; }
.library-form label { display: grid; gap: 9px; font-size: 12px; font-weight: 700; }
.library-form input:not([type="checkbox"]), .library-form textarea, .library-form select { width: 100%; min-width: 0; min-height: 46px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 13px; font-weight: 500; }
.library-form textarea { resize: vertical; line-height: 1.65; }
.library-form small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.6; }
.library-form .library-handle { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--bg-elevated); overflow: hidden; }
.library-handle > span { flex-shrink: 0; padding-left: 13px; color: var(--muted); font-size: 11px; font-weight: 400; }
.library-form .library-handle input { border: 0; padding-left: 3px; border-radius: 0; background: transparent; }
.library-dialog__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 9px; }
.library-dialog__actions .button { min-height: 42px; padding: 12px 16px; font-size: 12px; }
.library-danger { background: #d60020; color: white; border: 1px solid transparent; }
.library-error { padding: 12px 14px; border: 1px solid #ff00193b; border-radius: 10px; color: var(--accent-text); background: var(--accent-soft); font-size: 12px; line-height: 1.65; }
.library-picker { display: grid; max-height: 43dvh; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.library-form .library-picker-row { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.library-form .library-picker-row[hidden] { display: none; }
.library-picker-row input { flex-shrink: 0; width: 18px; height: 18px; accent-color: #ff0019; }
.library-picker-row__art { flex: 0 0 76px; width: 76px; height: 45px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: var(--surface-soft); }
.library-picker-row__art svg { width: 18px; height: 18px; }
.library-picker-row > span:last-child { min-width: 0; }
.library-picker-row strong { display: block; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.library-picker-row small { display: block; margin-top: 3px; }
.library-page :is(a, button):focus-visible, .library-dialog :is(a, button, input, textarea, select):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 1050px) {
  .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-item { gap: 10px; flex-wrap: wrap; }
  .library-item__actions { margin-left: 32px; }
  .library-item__open { flex-basis: calc(100% - 40px); }
}
@media (max-width: 600px) {
  .library-page { padding-top: 8px; }
  .library-hero { align-items: flex-start; flex-direction: column; gap: 20px; }
  .library-hero h1 { font-size: 38px; }
  .library-hero p { font-size: 12px; }
  .library-grid { gap: 14px; grid-template-columns: 1fr; }
  .library-tabs a { padding: 10px 13px; font-size: 11px; }
  .library-card__art { aspect-ratio: 16 / 6; }
  .library-profile { align-items: flex-start; padding: 24px 20px; gap: 20px; flex-direction: column; }
  .library-profile__mark { flex-basis: 76px; width: 76px; height: 76px; border-radius: 18px; font-size: 36px; }
  .library-profile h1 { font-size: 30px; }
  .library-actions .button { font-size: 10px; }
  .library-section-heading h2 { font-size: 20px; }
  .library-item__art { flex-basis: 92px; width: 92px; border-radius: 8px; }
  .library-item__open { gap: 12px; }
  .library-item__copy strong { font-size: 12px; }
  .library-item__copy small { font-size: 10px; }
  .library-item__play { display: none; }
  .library-dialog { padding: 22px 18px; max-height: calc(100dvh - 28px); border-radius: 20px; }
  .library-dialog__head h2 { font-size: 21px; }
  .library-dialog__actions { gap: 8px; }
  .library-dialog__actions .button { flex: 1; font-size: 11px; }
  .library-form input:not([type="checkbox"]), .library-form textarea, .library-form select { font-size: 16px; }
  .library-handle > span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .library-card { transition: none; } }

.library-avatar { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: #251118; color: #fff; font-weight: 800; }
.library-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.library-card__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.library-card__art > .library-card__avatar { z-index: 1; width: 82px; height: 82px; font-size: 34px; border: 3px solid #ffffffde; box-shadow: 0 5px 25px #0003; }
.library-card__cover + .library-card__avatar { position: absolute; left: 22px; bottom: 18px; }
.library-channel-cover { margin-top: 22px; width: 100%; aspect-ratio: 8 / 3; border: 1px solid var(--line); border-radius: 28px 28px 0 0; overflow: hidden; background: #18181d; }
.library-channel-cover > img { width: 100%; height: 100%; object-fit: cover; }
.library-profile--with-cover { margin-top: 0; border-top: 0; border-radius: 0 0 28px 28px; }
.library-profile--with-cover .library-profile__mark { margin-top: -70px; border: 5px solid var(--surface); }
.library-channel-link { display: inline-flex; align-items: center; gap: 8px; }
.library-channel-link .library-avatar { width: 26px; height: 26px; font-size: 11px; }
.library-image-fields { display: grid; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.library-image-fields legend { margin-bottom: 12px; font-size: 13px; font-weight: 750; }
.library-image-field { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 16px; }
.library-image-preview { display: grid; place-items: center; margin-bottom: 14px; overflow: hidden; background: radial-gradient(ellipse at top right, #ff001941, transparent), #161619; color: #cfcfd4; font-size: 12px; }
.library-image-preview--cover { width: 100%; aspect-ratio: 8 / 3; border-radius: 10px; }
.library-image-preview--avatar { width: 92px; height: 92px; border-radius: 50%; }
.library-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.library-image-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 9px; }
.library-image-controls .library-icon-button { padding: 8px 0; color: var(--accent-text); font-size: 11px; }
.library-form input[type="file"] { padding: 9px; font-size: 12px; }
.library-form input[type="file"]::file-selector-button { border: 0; border-radius: 6px; padding: 8px; margin-right: 8px; background: var(--surface-soft); color: var(--text); font: inherit; cursor: pointer; }
@media (max-width: 640px) {
  .library-profile--with-cover .library-profile__mark { margin-top: -57px; }
  .library-card__art > .library-card__avatar { width: 66px; height: 66px; font-size: 27px; }
  .library-channel-cover { border-radius: 20px 20px 0 0; }
  .library-image-field { padding: 12px; }
}

/* Creator storefront: browsing is separate from ordered playlist playback. */
.channel-showcase > .back-link { margin-bottom: 0; }
.channel-showcase .library-channel-cover { aspect-ratio: 5 / 1; max-height: 280px; border-radius: 22px; border: 0; }
.channel-showcase .library-profile--channel { margin-top: 0; padding: 18px 0 24px; gap: 25px; border: 0; border-radius: 0; background: transparent; align-items: flex-start; }
.channel-showcase .library-profile--with-cover { margin-top: 0; }
.channel-showcase .library-profile__mark { width: 100px; height: 100px; flex-basis: 100px; font-size: 44px; }
.channel-showcase .library-profile--with-cover .library-profile__mark { margin-top: 0; border: 0; }
.channel-showcase .library-profile h1 { margin: 0 0 12px; font-size: clamp(28px, 3.1vw, 44px); }
.channel-showcase .library-profile__facts { font-size: 12px; gap: 8px 16px; }
.channel-showcase .library-actions { margin-top: 16px; }
.channel-description { margin-top: 13px; max-width: 80ch; font-size: 12px; color: var(--muted); line-height: 1.7; }
.channel-description summary { list-style: none; cursor: pointer; }
.channel-description summary::-webkit-details-marker, .channel-management summary::-webkit-details-marker { display: none; }
.channel-description summary > span:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.channel-description__more { display: inline-flex; align-items: center; gap: 3px; color: var(--text); margin-top: 5px; font-weight: 650; }
.channel-description__more svg { width: 14px; height: 14px; }
.channel-description[open] summary > span:first-child { display: none; }
.channel-description[open] .channel-description__more svg { transform: rotate(90deg); }
.channel-description > p { white-space: pre-line; overflow-wrap: anywhere; margin: 10px 0 0; }
.channel-management { position: relative; }
.channel-management summary { padding: 12px 14px; list-style: none; border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 650; }
.channel-management[open] summary { background: var(--surface-soft); color: var(--text); }
.channel-management__actions { position: absolute; z-index: 4; top: calc(100% + 8px); left: 0; width: 245px; display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: 0 12px 40px #0003; }
.channel-management__actions .button { justify-content: flex-start; text-align: left; }
.channel-filters { display: flex; gap: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.channel-filter { flex-shrink: 0; padding: 15px 1px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.channel-filter[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--library-red); }
.channel-filter:hover { color: var(--text); }
.channel-showcase__content { min-height: 240px; }
.channel-section { margin-top: 30px; }
.channel-section + .channel-section { margin-top: 42px; }
.channel-section__count { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 500; vertical-align: middle; }
.channel-section__more { padding: 8px 0 8px 12px; border: 0; color: var(--text); background: transparent; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }
.channel-section__more:hover { color: var(--accent-text); }
.channel-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.channel-video-card { position: relative; min-width: 0; }
.channel-video-card__link { display: block; }
.channel-video-card__art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: var(--surface-soft); color: var(--muted); }
.channel-video-card__art > img { width: 100%; height: 100%; object-fit: cover; transition: transform .22s ease; }
.channel-video-card__art > span:not(.channel-video-card__play):not(.channel-video-card__live) svg { width: 30px; height: 30px; }
.channel-video-card__art > .channel-video-card__play { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #ffffff60; border-radius: 50%; color: white; background: #101014a6; opacity: 0; transform: translate(-50%, -50%); transition: opacity .18s ease; }
.channel-video-card__play svg { width: 21px; height: 21px; }
.channel-video-card__link:is(:hover, :focus-visible) .channel-video-card__play { opacity: 1; }
.channel-video-card__link:hover .channel-video-card__art > img { transform: scale(1.025); }
.channel-video-card__copy { padding: 12px 38px 0 1px; }
.channel-video-card__copy h3 { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.channel-video-card__copy p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-video-card__save { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 34px; height: 38px; padding: 7px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; }
.channel-video-card__save svg { width: 20px; height: 20px; }
.channel-video-card__save:hover { color: var(--text); background: var(--surface-soft); }
.channel-video-card__live { position: absolute; bottom: 10px; left: 10px; background: #e60019; color: white; padding: 5px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; }
.channel-video-grid--shorts { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.channel-video-card--short .channel-video-card__art { aspect-ratio: 9 / 16; }
.channel-video-card--short .channel-video-card__copy h3 { font-size: 13px; }
.channel-showcase summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (min-width: 1600px) { .channel-video-grid:not(.channel-video-grid--shorts) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .channel-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-video-grid--shorts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .channel-showcase .library-channel-cover { aspect-ratio: 3 / 1; border-radius: 14px; }
  .channel-showcase .library-profile--channel { padding: 22px 0; gap: 15px; flex-direction: row; flex-wrap: wrap; }
  .channel-showcase .library-profile__mark { width: 64px; height: 64px; flex-basis: 64px; font-size: 30px; }
  .channel-showcase .library-profile__copy { flex-basis: calc(100% - 79px); }
  .channel-showcase .library-profile h1 { font-size: 25px; line-height: 1.15; }
  .channel-showcase .library-profile__facts { font-size: 10px; gap: 6px 10px; }
  .channel-showcase .library-actions { gap: 4px; }
  .channel-management summary { padding: 10px 4px; font-size: 10px; }
  .channel-management__actions { left: auto; right: 0; width: 220px; }
  .channel-filters { gap: 23px; }
  .channel-filter { font-size: 12px; padding-block: 13px; }
  .channel-video-grid { grid-template-columns: 1fr; gap: 25px 12px; }
  .channel-video-grid--shorts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-video-card__art { border-radius: 12px; }
  .channel-video-card__copy h3 { font-size: 14px; }
  .channel-video-card--short .channel-video-card__copy { padding-right: 28px; }
  .channel-video-card--short .channel-video-card__copy h3 { font-size: 12px; }
  .channel-video-card__save { width: 30px; }
  .channel-section .library-section-heading { gap: 8px; margin-bottom: 16px; }
  .channel-section { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .channel-video-card__art > img, .channel-video-card__play { transition: none; } }

.engagement { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; font-size:13px; color:var(--muted); }
.engagement__views { font-variant-numeric:tabular-nums; margin-right:6px; white-space:nowrap; }
.engagement__button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:9px 15px; border:1px solid var(--line); border-radius:24px; color:var(--text); background:var(--surface); font:inherit; font-weight:600; cursor:pointer; }
.engagement__button svg,.engagement__summary svg { width:19px; height:19px; flex:0 0 auto; }
.engagement__button:hover { border-color:#ff002e; }
.engagement__button:focus-visible { outline:2px solid #ff002e; outline-offset:3px; }
.engagement__button.is-active { background:rgba(255,0,46,.13); border-color:rgba(255,0,46,.4); color:#ff143e; }
.engagement__button:disabled { opacity:.55; cursor:wait; }
.engagement__channel { display:inline-flex; align-items:center; gap:7px; min-width:0; color:var(--text); font-weight:650; text-decoration:none; border-bottom:1px solid var(--line); }
.engagement__channel span { overflow-wrap:anywhere; }
.engagement__channel-avatar { width:28px; height:28px; flex:0 0 28px; border-radius:50%; object-fit:cover; }
.engagement__channel[hidden] { display:none; }
.engagement--compact { gap:13px; margin-top:7px; font-size:11px; }
.engagement__summary { display:inline-flex; align-items:center; gap:5px; }
.engagement--compact svg { width:14px; height:14px; }
.short-card .engagement { position:relative; z-index:4; gap:7px; margin-top:10px; color:#fff; }
.short-card .engagement__button { min-height:38px; padding:8px 11px; background:rgba(0,0,0,.5); color:#fff; border-color:rgba(255,255,255,.2); backdrop-filter:blur(12px); }
.short-card .engagement__button.is-active { color:#ff3153; border-color:#ff3153; }
.short-card .engagement__channel { color:#fff; }
.short-card .engagement__views { width:100%; font-size:12px; }
.my-library-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:20px 0 28px; }
.my-library-links a { display:flex; align-items:center; gap:14px; padding:20px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--surface); text-decoration:none; }
.my-library-links svg { width:24px; height:24px; color:#ff163b; }
.my-library-links strong,.my-library-links small { display:block; }
.my-library-links small { color:var(--muted); margin-top:5px; }
@media(max-width:600px) { .engagement { gap:8px; }.engagement__views { width:100%; }.engagement--compact .engagement__views { width:auto; }.engagement__button { padding:8px 12px; }.my-library-links { gap:10px; }.my-library-links a { padding:15px; align-items:flex-start; }.my-library-links svg { display:none; } }

.server-community-artwork { position:relative; min-height:124px; overflow:hidden; margin:20px 0; padding:24px; border-radius:20px; background:var(--surface); }
.server-community-artwork:has(.server-community-artwork__cover) { min-height:clamp(150px,24vw,300px); display:flex; align-items:flex-end; }
.server-community-artwork__cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.server-community-artwork__avatar { position:relative; display:grid; place-items:center; width:96px; height:96px; overflow:hidden; border:3px solid var(--surface); border-radius:50%; background:var(--surface); color:var(--text); font-size:36px; font-weight:750; line-height:1; }
.server-community-artwork__avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.server-community-artwork--compact { min-height:84px; margin:0 0 14px; padding:14px; border-radius:12px; }
.server-community-artwork--compact:has(.server-community-artwork__cover) { min-height:128px; }
.server-community-artwork--compact .server-community-artwork__avatar { width:56px; height:56px; font-size:24px; }