.detail-page main { padding-top: 0; }
.detail-hero { position: relative; min-height: 720px; overflow: hidden; }
.detail-backdrop { position: absolute; inset: 0; background-position: center 18%; background-size: cover; filter: saturate(.78); }
.detail-backdrop.is-fallback { filter: blur(22px) saturate(.64); transform: scale(1.09); }
.detail-backdrop-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--page) 0%, color-mix(in srgb, var(--page) 76%, transparent) 42%, color-mix(in srgb, var(--page) 30%, transparent) 74%),
    linear-gradient(0deg, var(--page) 1%, transparent 64%),
    linear-gradient(180deg, rgba(8,10,16,.56), transparent 30%);
}
.detail-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: clamp(220px, 22vw, 330px) minmax(0, 720px); align-items: start; width: min(calc(100% - 40px), var(--page-width)); min-height: 720px; gap: clamp(35px, 5vw, 78px); margin: 0 auto; padding: 170px 0 58px; }
.detail-poster { position: relative; width: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-radius: 26px; box-shadow: 0 35px 80px rgba(0,0,0,.48); transform: rotate(-1.5deg); }
.detail-poster > img { width: 100%; aspect-ratio: 2/3; object-fit: cover; }
/* 详情页封面加载动画：图片加载完成前显示居中旋转环，失败时保持常显；复用 app.css 的 cover-loader-spin 关键帧 */
.detail-poster::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 3px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  background: transparent;
  animation: cover-loader-spin .85s linear infinite;
}
.detail-poster.is-loaded::before { display: none; }
.detail-main { align-self: start; margin: 0; padding-top: 5px; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-muted); font-size: 12px; }
.breadcrumbs a:hover { color: var(--text); }
.detail-main .eyebrow { margin: 0; }
.detail-main h1 { margin: 18px 0 8px; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -.055em; }
.detail-subtitle { margin: 0 0 18px; color: #c5c7d0; font-size: 16px; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #d1d2d9; font-size: 13px; }
.detail-meta strong { color: #ffd166; }
.detail-meta-tag { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.1); }
.detail-meta .detail-meta-tag::after { content: none; }
.detail-blurb-box { max-width: 650px; margin: 20px 0 24px; }
.detail-blurb { display: -webkit-box; margin: 0; overflow: hidden; color: #c6c8d0; font-size: 14px; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.detail-blurb p { margin: 0 0 .65em; }
.detail-blurb p:last-child { margin-bottom: 0; }
.detail-blurb img { max-width: 100%; height: auto; border-radius: 10px; }
.detail-blurb-box.is-expanded .detail-blurb { display: block; overflow: visible; -webkit-line-clamp: unset; }
.detail-blurb-toggle { margin-top: 7px; padding: 4px 0; border: 0; background: transparent; color: var(--text); font-size: 11px; font-weight: 800; cursor: pointer; }
.detail-blurb-toggle:hover { color: var(--accent); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.detail-actions button { cursor: pointer; }
.detail-actions [data-favorite-action].is-saved { border-color: color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.24)); background: color-mix(in srgb,var(--accent) 18%,rgba(20,22,30,.58)); color: #fff; }
.detail-actions [data-favorite-action].is-saved [data-favorite-icon] { color: var(--accent); }

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; width: min(calc(100% - 40px), var(--page-width)); gap: 34px; margin: 30px auto 0; }
.detail-content { min-width: 0; }
.detail-panel { margin-bottom: 32px; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.related-panel.related-rows-0 { display: none; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.panel-heading p { margin: 0; color: var(--accent); }
.panel-heading h2 { margin: 6px 0 0; font-size: 28px; letter-spacing: -.035em; }
.synopsis-content { position: relative; max-height: 144px; overflow: hidden; color: var(--text-muted); font-size: 14px; line-height: 2; transition: max-height .35s ease; }
.synopsis-content::after { position: absolute; right: 0; bottom: 0; left: 0; height: 70px; background: linear-gradient(transparent, color-mix(in srgb, var(--surface) 68%, var(--page))); content: ""; }
.synopsis.is-expanded .synopsis-content { max-height: none; overflow: visible; }
.synopsis.is-expanded .synopsis-content::after { display: none; }
.synopsis > button { margin-top: 16px; padding: 8px 0; border: 0; background: transparent; color: var(--text); font-size: 12px; font-weight: 800; cursor: pointer; }
.line-count { color: var(--text-muted); font-size: 12px; }
.episode-heading-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.episode-order-button { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); color: var(--text); font-size: 11px; font-weight: 750; cursor: pointer; }
.episode-order-button:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); }
.source-tabs { display: flex; gap: 9px; padding-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.source-tabs::-webkit-scrollbar { display: none; }
.source-tab { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; padding: 11px 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft); color: var(--text-muted); cursor: pointer; }
.source-tab small { opacity: .7; }
.source-tab.is-active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); color: var(--text); }
.source-panel:not(.is-active) { display: none; }
.source-note { margin-bottom: 15px; color: var(--text-muted); font-size: 12px; }
.source-note span { margin-right: 7px; color: var(--positive); font-size: 9px; }
.episode-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; max-height: 430px; padding: 4px; overflow-y: auto; }
.episode-grid a { display: flex; align-items: center; justify-content: space-between; min-width: 0; min-height: 48px; gap: 8px; padding: 0 13px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); font-size: 12px; transition: .2s ease; }
.episode-grid a:hover, .episode-grid a.is-current { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); transform: translateY(-2px); }
.episode-grid a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.episode-grid a small { color: var(--text-muted); }
.detail-sidebar { position: sticky; top: 100px; align-self: start; }
.info-card, .tag-card { padding: 27px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.info-card h2 { margin: 7px 0 24px; font-size: 25px; }
.info-card dl { margin: 0; }
.info-card dl div { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.7; }
.info-card dt { color: var(--text-muted); }
.info-card dd { margin: 0; }
.tag-card { margin-top: 18px; }
.tag-card > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.tag-card a { padding: 7px 10px; border-radius: 9px; background: var(--surface-soft); color: var(--text-muted); font-size: 11px; }
.toast { position: fixed; bottom: 28px; left: 50%; z-index: 100; padding: 12px 18px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: var(--shadow); opacity: 0; pointer-events: none; backdrop-filter: blur(18px); transform: translate(-50%,20px); transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%,0); }

html[data-theme="neumorph"] .detail-backdrop-shade {
  background:
    linear-gradient(90deg, rgba(231,233,239,.99) 0%, rgba(231,233,239,.95) 56%, rgba(231,233,239,.48) 82%),
    linear-gradient(0deg, #e7e9ef 1%, rgba(231,233,239,.4) 66%),
    linear-gradient(180deg, rgba(231,233,239,.72), transparent 34%);
}
html[data-theme="neumorph"] .detail-main h1 { color: #20232d; text-shadow: 0 2px 16px rgba(255,255,255,.7); }
html[data-theme="neumorph"] .detail-main .breadcrumbs,
html[data-theme="neumorph"] .detail-main .eyebrow { color: #525a69; }
html[data-theme="neumorph"] .detail-subtitle { color: #646c7b; }
html[data-theme="neumorph"] .detail-meta { color: #48505f; }
html[data-theme="neumorph"] .detail-meta-tag { border-color: rgba(32,35,45,.04); background: rgba(32,35,45,.08); color: #343b49; }
html[data-theme="neumorph"] .detail-blurb { color: #444c5b; font-weight: 520; }

@media (max-width: 1050px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .tag-card { margin-top: 0; }
  .episode-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .detail-hero, .detail-hero-inner { min-height: 0; }
  .detail-backdrop-shade { background: linear-gradient(0deg, var(--page) 2%, color-mix(in srgb,var(--page) 78%,transparent) 52%, rgba(8,10,16,.25)); }
  .detail-hero-inner { display: block; width: calc(100% - 24px); padding: 118px 8px 24px; }
  .detail-poster {
    position: absolute;
    top: 118px;
    right: 8px;
    display: block;
    width: clamp(104px, 23vw, 150px);
    border-radius: 18px;
    box-shadow: 0 20px 46px rgba(0,0,0,.42);
    transform: none;
  }
  .detail-main { margin-bottom: 0; padding-top: 0; }
  .detail-main .breadcrumbs,
  .detail-main .eyebrow,
  .detail-main h1,
  .detail-subtitle,
  .detail-meta,
  .detail-blurb-box { max-width: calc(100% - 176px); }
  .detail-main .eyebrow { margin-top: 0; }
  .detail-main h1 { font-size: 40px; }
  .detail-layout { width: calc(100% - 24px); gap: 18px; margin-top: 14px; }
  .detail-panel { padding: 21px 16px; }
  .panel-heading { align-items: flex-start; }
  .episode-heading-actions { align-items: flex-end; flex-direction: column; }
  .episode-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .detail-sidebar { grid-template-columns: 1fr; }
  .related-panel { padding-inline: 12px; }
  .detail-related-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-columns: auto; grid-auto-flow: row; gap: 18px 8px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .related-rows-1 .detail-related-row .media-card:nth-child(n+4),
  .related-rows-2 .detail-related-row .media-card:nth-child(n+7) { display: none; }
  .detail-related-row .card-copy { padding-top: 9px; }
  .detail-related-row .card-copy h3 { font-size: 11px; }
  .detail-related-row .card-copy p { margin-top: 5px; font-size: 9px; }
}
@media (max-width: 520px) {
  .detail-hero, .detail-hero-inner { min-height: 0; }
  .detail-hero-inner { padding-top: 98px; padding-bottom: 20px; }
  .detail-poster { top: 98px; right: 8px; width: 106px; border-radius: 16px; }
  .detail-main .breadcrumbs,
  .detail-main .eyebrow,
  .detail-main h1,
  .detail-subtitle,
  .detail-meta,
  .detail-blurb-box { max-width: calc(100% - 124px); }
  .detail-main .eyebrow { margin-top: 0; }
  .detail-main h1 { font-size: 34px; }
  .detail-blurb-box { margin-block: 16px 18px; }
  .detail-blurb { font-size: 13px; line-height: 1.7; -webkit-line-clamp: 2; }
  .detail-actions { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 7px; }
  .detail-actions .button { min-width: 0; min-height: 43px; padding-inline: 7px; font-size: 11px; white-space: nowrap; }
  .episode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}