.hero-image { background-image: url('../assets/cinema-hero.png'); }
.frames span { background-image: linear-gradient(#090c0a22,#040905aa), url('../assets/cinema-hero.png'); }
.dialog-visual { background-image: linear-gradient(0deg,#101a14,#101a1400), url('../assets/cinema-hero.png'); }
.dialog-media { display: block; width: 100%; max-height: 52vh; margin: 18px 0; border-radius: 7px; background: #050806; }
.dialog-extra { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 20px; }
.dialog-extra:empty { display: none; }
.dialog-extra h4 { margin: 0 0 14px; font-size: 14px; }
.comment-list { display: grid; gap: 10px; }
.comment-item { padding: 12px; border-radius: 6px; background: #ffffff08; color: #aabbb0; white-space: pre-wrap; }
.comment-item small { display: block; margin-bottom: 6px; color: var(--mint); }
.inline-form { display: flex; gap: 8px; margin-top: 14px; }
.inline-form textarea, .account-form input, .account-form textarea, .account-form select { width: 100%; border: 1px solid #ffffff20; border-radius: 5px; background: #08100c; color: var(--text); padding: 10px; font: inherit; }
.inline-form textarea { min-height: 68px; resize: vertical; }
.search-toggle { display: none; }
.nav-backdrop, .nav-close { display: none; }
@media (max-width:800px) {
  input, textarea, select { font-size: 16px !important; }
  #detail { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .dialog-media { max-height: 48dvh; }
  .inline-form { flex-wrap: wrap; }
  .inline-form button { min-height: 44px; }
}
.admin-portal { flex-shrink: 0; padding: 8px 11px; border: 1px solid #ffffff20; border-radius: 5px; color: #9bb2a2; font-size: 10px; }
.admin-portal:hover,.sidebar-portals a:hover,.footer-portals a:hover { color: var(--mint); border-color: #58efb255; }
.sidebar-portals { display: grid; gap: 7px; margin: 12px 8px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.sidebar-portals a { padding: 7px 4px; color: #809587; font-size: 10px; }
.footer-portals { display: flex; gap: 12px; font-size: 9px; }
@media (max-width:800px) { .sidebar-portals { display: none; } }
.platform-status { margin: 35px 0; padding: 18px; border: 1px solid #d8a34755; border-radius: 8px; background: #392a1233; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.platform-status[hidden] { display: none; }
.platform-status p { margin: 0; color: #dcc89e; }
.api-blocked .hero,.api-blocked .entries,.api-blocked .shelf,.api-blocked .dual,.api-blocked .collab,.api-blocked .good,.api-blocked footer,.api-blocked .player { display: none; }
.api-blocked #platform-status { display: flex; margin-top: 120px; }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.content-card { min-height: 180px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: #101914; text-align: left; }
.content-card small { color: var(--mint); }
.content-card h3 { margin: 18px 0 10px; font-size: 17px; }
.content-card p { color: #84978a; line-height: 1.7; }
.creator-search { display: flex; align-items: end; gap: 10px; margin-top: 25px; }
.creator-search label { flex: 1; color: #8ba092; }
.creator-search input { display: block; width: 100%; margin-top: 8px; border: 1px solid #ffffff20; border-radius: 5px; background: #08100c; color: white; padding: 11px; }
.creator-profile { margin-top: 16px; padding: 20px; border-left: 2px solid var(--mint); background: #ffffff08; }
.radio-now { display:grid; gap:5px; margin-top:22px; padding-left:12px; border-left:2px solid #62e6ad80; }
.radio-now small { color:#62e6ad; font-size:7px; letter-spacing:.16em; }
.radio-now strong { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#eaf8ef; font-size:13px; font-weight:500; }
.radio-now span { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#789383; font-size:9px; }
.radio-controls { display:flex; align-items:center; gap:8px; margin-top:17px; }
.radio-controls .text-link { min-width:84px; margin:0; padding:8px 12px; border:1px solid #6ce7a83d; border-radius:20px; text-align:center; }
.radio-controls > button:not(.text-link),.player-skip { width:31px; height:31px; border:1px solid #ffffff1c; border-radius:50%; color:#91c9aa; font-size:15px; }
.radio-controls button:disabled,.player-skip:disabled { opacity:.28; cursor:not-allowed; }
.player-track { min-width:150px; max-width:220px; }
.player-track b,.player-track small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-skip { flex:0 0 auto; }
.player { border:0; border-radius:0; background:linear-gradient(90deg,rgba(10,25,19,.92),rgba(12,31,23,.76) 42%,rgba(8,20,16,.9)); box-shadow:0 -12px 50px #0005; }
.player-spectrum-controls { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:12px; }
.player-spectrum-controls .player-skip { width:34px; height:34px; border:0; background:transparent; color:#8ed7b3; font-size:27px; transition:.2s; }
.player-spectrum-controls .player-skip:not(:disabled):hover { color:#fff; text-shadow:0 0 14px #65efb6; transform:scale(1.12); }
.player-spectrum-controls .player-wave { flex:0 1 560px; margin-inline:0; }
@media (max-width:520px) {
  body.nav-open { overflow: hidden; }
  .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; background: #0009; border: 0; }
  .sidebar.open { width: min(280px, 85vw); box-shadow: none; overflow-y: auto; max-height: 100dvh; overscroll-behavior: contain; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .sidebar.open .nav-close { display: block; position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; color: var(--mint); background: transparent; border: 0; }
  .sidebar.open nav button, .sidebar.open .sidebar-portals a { min-height: 44px; }
  header { gap: 6px; }
  header .top-tabs { min-width: 0; gap: 10px; }
  .mobile-menu, .search-toggle, header .avatar { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .hero-copy h1 { font-size: clamp(34px, 10vw, 44px); }
  .hero-copy { overflow-wrap: anywhere; }
  .hero-copy .actions { flex-wrap: wrap; }
  .entries { grid-template-columns: 1fr; }
  .entries > button { min-height: 72px; }
  .player { bottom: max(10px, env(safe-area-inset-bottom)); }
  .player button { min-width: 44px; min-height: 44px; }
  .dialog-close { min-width: 44px; min-height: 44px; }
  .dialog-body { overflow-wrap: anywhere; }
  .dialog-body .actions { flex-wrap: wrap; }
  footer { flex-wrap: wrap; gap: 16px; padding-bottom: 90px; }
  header .search { display: none; }
  header .search.open { display: flex; position: absolute; left: 18px; right: 18px; top: 65px; width: auto; padding: 10px; background: #101e15; border: 1px solid #38634a; }
  header .search.open input, header .search.open > span { display: block; }
  .search-toggle { display: block; margin-left: auto; padding: 0; font-size: 25px; line-height: 1; }
  header .admin-portal { display: none; }
  .sidebar.open .sidebar-portals { display: grid; }
  .content-grid { grid-template-columns: 1fr; }
  .creator-search { align-items: stretch; flex-direction: column; }
  .player .player-skip { min-width:32px; width:32px; min-height:32px; height:32px; }
  .player-track { min-width:88px; max-width:112px; }
  .player .live { display:none; }
  .radio-now strong,.radio-now span { max-width:190px; }
  .player-spectrum-controls { gap:2px; }
  .player-spectrum-controls .player-skip { min-width:28px; width:28px; }
}
/* Real-time radio spectrum: layered, audio-reactive and restrained. */
.player .player-wave {
  position: relative;
  flex: 0 1 560px;
  width: clamp(280px, 31vw, 560px);
  min-width: 240px;
  max-width: 560px;
  height: 70px;
  margin-inline: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 10px;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(255, 105, 112, .10), transparent 30%),
    radial-gradient(ellipse at 42% 50%, rgba(255, 199, 99, .07), transparent 32%),
    radial-gradient(ellipse at 72% 50%, rgba(76, 217, 232, .08), transparent 34%),
    radial-gradient(ellipse at 96% 50%, rgba(155, 118, 255, .09), transparent 30%);
  animation: none !important;
}
.player .player-wave::before,
.player .player-wave::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.player .player-wave::before {
  inset: 50% 3% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 126, 117, .18), rgba(255, 209, 102, .20), rgba(93, 226, 180, .18), rgba(91, 211, 239, .20), rgba(161, 122, 255, .18), transparent);
}
.player .player-wave::after {
  width: 28%;
  height: 170%;
  left: -34%;
  top: -35%;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 240, 205, .12), transparent);
  opacity: 0;
}
.playing .player-wave::after {
  opacity: 1;
  animation: spectrum-scan 5.5s linear infinite;
}
.player-wave canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
.player-wave > i {
  position: absolute;
  inset: 30% 12%;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(90deg, rgba(255, 99, 119, .16), rgba(255, 194, 93, .12), rgba(76, 216, 232, .12), rgba(153, 116, 255, .15));
  filter: blur(18px);
  opacity: .25;
  transition: opacity .45s ease;
}
.playing .player-wave > i { opacity: .9; }
@keyframes spectrum-scan {
  from { transform: translateX(0) skewX(-22deg); }
  to { transform: translateX(590%) skewX(-22deg); }
}
@media (max-width: 800px) {
  .player .player-wave { flex-basis: 40vw; width: 40vw; min-width: 130px; height: 52px; }
}
@media (max-width: 520px) {
  .player .player-wave { flex-basis: 34vw; width: 34vw; min-width: 84px; max-width: 140px; height: 42px; margin-inline: 3px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .playing .player-wave::after { animation: none; opacity: .25; }
}

/* Give multi-row poster shelves enough breathing room below titles and bylines. */
.posters { column-gap: 15px; row-gap: 44px; }
@media (max-width: 1150px) {
  .posters { column-gap: 10px; row-gap: 38px; }
}
@media (max-width: 800px) {
  .posters { column-gap: 12px; row-gap: 36px; }
}
@media (max-width: 520px) {
  .posters { column-gap: 12px; row-gap: 34px; }
}

/* Borderless radio transport: controls orbit one long spectrum, not a player panel. */
.player {
  left: 50%;
  right: auto;
  bottom: 18px;
  width: min(1180px, calc(100vw - 250px));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: translateX(-50%);
  pointer-events: none;
}
.player-track-hidden { display: none; }
.player-spectrum-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 38px 42px minmax(420px, 1fr) 38px 38px;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.player-spectrum-controls .player-wave {
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 76px;
  background: transparent;
  border-radius: 0;
}
.player-spectrum-controls .player-play,
.player-spectrum-controls .player-skip,
.player-spectrum-controls .player-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 0;
  border: 1px solid #74e4ae2e;
  border-radius: 50%;
  background: rgba(8, 20, 15, .72);
  color: #9ee7bf;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px #0005;
}
.player-spectrum-controls .player-play { width: 42px; height: 42px; background: var(--mint); color: #0b3a22; }
.player-spectrum-controls .player-close { font-size: 20px; }
.player-spectrum-controls .player-skip { padding: 0; line-height: 1; font-size: 0; }
.player-spectrum-controls .player-skip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  box-sizing: border-box;
}
.player-spectrum-controls .player-prev::before { transform: rotate(-135deg); }
.player-spectrum-controls .player-next::before { transform: rotate(45deg); }
.player-spectrum-controls .player-wave::before { inset-inline: 0; }
.player-spectrum-controls .player-wave::after { display: none; }
@media (max-width: 800px) {
  .player { width: calc(100vw - 105px); bottom: max(12px, env(safe-area-inset-bottom)); }
  .player-spectrum-controls { grid-template-columns: 34px 38px minmax(180px, 1fr) 34px 34px; gap: 5px; }
  .player-spectrum-controls .player-wave { width: 100%; max-width: none; height: 62px; }
  .player-spectrum-controls .player-play { width: 38px; height: 38px; }
  .player-spectrum-controls .player-skip,.player-spectrum-controls .player-close { width: 34px; height: 34px; }
}
@media (max-width: 520px) {
  .player { width: calc(100vw - 20px); }
  .player-spectrum-controls { grid-template-columns: 30px 36px minmax(100px, 1fr) 30px 30px; gap: 3px; }
  .player-spectrum-controls .player-wave { width: 100%; max-width: none; height: 54px; margin: 0; }
  .player-spectrum-controls .player-play { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
  .player-spectrum-controls .player-skip,.player-spectrum-controls .player-close { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
}
.poster-top .platform-watermark{color:#fff;background:#07100ddd;border:1px solid #ffffff38;font-weight:750;letter-spacing:.05em;box-shadow:0 4px 18px #0008;backdrop-filter:blur(8px)}
.poster-top .platform-watermark[data-platform="douyin"]{border-left:3px solid #25f4ee}
.poster-top .platform-watermark[data-platform="wechat_channels"]{border-left:3px solid #fa9d3b}
.poster-top .platform-watermark[data-platform="xiaohongshu"]{border-left:3px solid #ff2442}
.poster-top .platform-watermark[data-platform="bilibili"]{border-left:3px solid #00aeec}