.video-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-block:22px}.video-action,.video-phone>summary{font:inherit;color:inherit;border:1px solid currentColor;border-radius:8px;background:transparent;padding:9px 15px;cursor:pointer;list-style:none}.video-action:hover,.video-phone>summary:hover{opacity:.8}.video-action:focus-visible,.video-phone>summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}.video-action:disabled{opacity:.5;cursor:wait}.video-action-feedback{font-size:13px;overflow-wrap:anywhere}.video-phone{position:relative}.video-qr-panel{position:absolute;z-index:20;inset-inline-end:0;top:calc(100% + 12px);width:228px;padding:20px;background:#fff;color:#202127;border:1px solid #dedee2;border-radius:12px;box-shadow:0 8px 28px #0003;text-align:center}.video-qr-panel img{display:block;max-width:100%;height:auto;margin:auto;background:#fff}.video-qr-panel p{font-size:13px;line-height:1.6;margin:10px 0 0;overflow-wrap:anywhere}.video-douban-score{color:#279956;font-size:14px;font-weight:700}.video-copyright{padding:40px 24px;line-height:1.8;overflow-wrap:anywhere}.video-related .video-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:22px 16px}@media(max-width:900px){.video-related .video-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:600px){.video-related .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}.video-actions{gap:10px}.video-action-feedback{flex-basis:100%;order:3}.video-phone[open]{flex-basis:100%}.video-phone[open]>summary{display:inline-block}.video-phone[open] .video-qr-panel{position:static;margin-block-start:12px}.watch-heading{gap:14px;flex-wrap:wrap}}

/* Match the shared page shell; keep playback and source switching in one compact area. */
.detail-shell, .watch-shell { min-width:0; }
.detail-shell .breadcrumbs, .watch-shell .breadcrumbs { flex-wrap:wrap; line-height:1.6; }
.detail-shell .breadcrumbs > *, .watch-shell .breadcrumbs > * { min-width:0; overflow-wrap:anywhere; }
.detail-hero { row-gap:20px; padding:clamp(20px,3vw,36px); }
.detail-copy .video-actions { margin-block:16px 0; }
.detail-copy .video-actions:not(:has(> button, > details)) { display:none; }
.detail-copy { min-width:0; text-align:left; }
.detail-copy h1, .detail-copy .detail-subtitle { text-align:left; padding-inline:0; text-indent:0; }
.detail-copy .detail-subtitle { margin-inline:0; }
.detail-meta .video-action.video-favorite { flex:none; gap:5px; min-height:34px; margin:0; padding:5px 9px; border-radius:6px; font-size:12px; line-height:1.5; }
.detail-meta .video-favorite span { padding:0; border:0; border-radius:0; color:inherit; background:transparent; }
.detail-favorite-feedback { margin:8px 0 0; color:var(--text-muted); font-size:12px; line-height:1.6; }
.detail-favorite-feedback:empty { display:none; }
.detail-favorite-feedback a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.detail-copy h1, .watch-heading h1 { overflow-wrap:anywhere; }
.detail-line, .detail-summary, .detail-subtitle { overflow-wrap:anywhere; }
.detail-genre { display:inline-flex; align-items:center; max-width:100%; padding:5px 9px; border:1px solid var(--line); border-radius:5px; color:var(--text-muted); background:var(--surface-raised); font:inherit; overflow-wrap:anywhere; }
.detail-genre:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.detail-genre:active { background:var(--surface-soft); }
.detail-playback { grid-column:1 / -1; min-width:0; padding-top:18px; border-top:1px solid var(--line); }
.detail-playback .video-copyright, .detail-playback .detail-no-play { margin:0; }
.episode-card { min-width:0; margin:0; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.detail-playback .episode-card { padding:0; border:0; border-radius:0; background:transparent; }
.episode-card-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; margin-bottom:16px; }
.episode-card-title { --heading-size:23px; flex:0 0 auto; align-items:center; min-height:44px; margin:0; }
.episode-controls { display:flex; flex:0 1 auto; align-items:center; justify-content:flex-end; gap:10px; min-width:0; max-width:100%; margin-inline-start:auto; }
.episode-sources { display:flex; align-items:center; gap:10px; min-width:0; max-width:100%; padding:8px 4px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.episode-source { position:relative; display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; min-height:44px; max-width:180px; padding:9px 22px 9px 12px; border:1px solid var(--line); border-radius:7px; color:var(--text-muted); background:var(--surface-raised); font-size:12px; line-height:1.5; white-space:nowrap; }
.episode-source-name { overflow:hidden; text-overflow:ellipsis; }
.episode-source-count { position:absolute; top:-7px; right:-5px; display:grid; place-items:center; min-width:22px; height:22px; padding:0 5px; border:2px solid var(--surface); border-radius:999px; color:var(--text-muted); background:var(--surface-soft); font-size:10px; font-weight:750; line-height:1; font-variant-numeric:tabular-nums; }
.episode-source.is-selected { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb,var(--accent) 9%,var(--surface)); }
.episode-source.is-selected .episode-source-count { color:var(--accent-ink); background:var(--accent); }
.episode-source:focus-visible, .episode-card .episode-list a:focus-visible, .episode-panel:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.episode-source:active, .episode-card .episode-list a:active, .episode-sort:active { transform:translateY(1px); }
.episode-sort { display:inline-flex; flex-shrink:0; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; border-color:var(--line); color:var(--text-muted); }
.episode-sort svg { display:block; flex:none; }
.episode-sort[aria-pressed="true"] .episode-sort-direction { transform:rotate(180deg); transform-origin:7px 12px; }
.episode-source-feedback { flex:none; margin:0 0 10px; color:var(--text-muted); font-size:12px; line-height:1.6; }
.episode-playing { position:absolute; inset-inline-start:50%; bottom:0; display:flex; align-items:flex-end; justify-content:center; gap:2px; height:7px; color:inherit; transform:translateX(-50%); pointer-events:none; }
.episode-playing i { display:block; width:3px; height:7px; background:currentColor; transform-origin:center bottom; animation:episode-meter .85s ease-in-out infinite alternate; }
.episode-playing i:nth-child(2) { animation-delay:-.3s; }
.episode-playing i:nth-child(3) { animation-delay:-.55s; }
@keyframes episode-meter { from { transform:scaleY(.3); } to { transform:scaleY(1); } }
.episode-genres { display:none; }
.episode-genre { display:inline-flex; align-items:center; min-height:28px; max-width:100%; padding:4px 9px; border:1px solid var(--line); border-radius:5px; color:var(--text-muted); background:var(--surface-raised); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.episode-genre:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.episode-genre:active { background:var(--surface-soft); }
.episode-card-body { max-height:360px; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; padding:3px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.episode-card[data-episode-preview] .episode-card-body { scrollbar-gutter:stable; }
.episode-card.is-preview-collapsed .episode-card-body { max-height:none; overflow-y:hidden; }
.detail-playback .episode-card-header { margin-bottom:10px; }
.episode-preview-toggle { display:flex; align-items:center; justify-content:center; min-height:44px; max-width:100%; margin:12px auto 0; padding:9px 14px; border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); font-size:12px; line-height:1.5; white-space:nowrap; }
.episode-preview-toggle:active { background:color-mix(in srgb,var(--accent) 15%,var(--surface)); }
.episode-panel + .episode-panel { margin-top:20px; }
html.has-js .episode-card .episode-panel { margin:0; }
.episode-source-title { margin:0 0 12px; font-size:13px; overflow-wrap:anywhere; }
.episode-source-title span { color:var(--text-muted); font-size:11px; font-weight:400; }
/* Establish the selected source before deferred scripts, without hiding no-JS content. */
html.has-js .episode-card:not(.is-enhanced) .episode-panel:not([data-source-initial]) { display:none; }
html.has-js .episode-card:not(.is-enhanced):has(.episode-panel:target) .episode-panel[data-source-panel] { display:none; }
html.has-js .episode-card:not(.is-enhanced):has(.episode-panel:target) .episode-panel:target { display:block; }
html.has-js .episode-card .episode-source-title, .episode-card.is-enhanced .episode-source-title { display:none; }
.episode-card.is-enhanced .episode-panel { margin:0; }
.episode-card .episode-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:8px; }
.episode-card .episode-list a { position:relative; justify-content:center; min-width:0; min-height:44px; padding:8px 10px; font-size:12px; line-height:1.5; text-align:center; overflow-wrap:anywhere; transition:color .15s ease,border-color .15s ease,background-color .15s ease; }
.watch-shell .watch-heading { --heading-size:clamp(25px,3vw,34px); margin:0 0 20px; }
.watch-heading .video-douban-score { grid-area:2 / 1; margin-top:10px; }
.watch-stage { display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:"player" "episodes" "ads"; gap:12px 20px; min-width:0; }
.watch-stage-notice { grid-template-areas:"player" "ads"; }
.watch-player { grid-area:player; min-width:0; }
.watch-advertising { grid-area:ads; min-width:0; display:flex; flex-direction:column; gap:10px; }
.watch-advertising > .promotion-group, .watch-advertising > .site-ad { margin:0; }
.watch-shell > .video-actions { margin-block:14px 0; }
.watch-shell > .video-actions:not(:has(> button, > details)) { display:none; }
.watch-shell > .video-related { margin-top:36px; }
@media (max-width:820px) {
    .detail-copy h1 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; max-height:2.26em; overflow:hidden; }
    .detail-copy .detail-summary { display:none; }
    .watch-shell > .video-related { margin-top:28px; }
    .watch-heading > div { min-width:0; max-width:100%; }
    .watch-heading h1 { display:block; min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
    .detail-playback .episode-card-body { max-height:168px; }
}
.watch-advertising:not(:has(> *)) { display:none; }
.watch-advertising > :first-child { margin-top:0; }
.watch-advertising > :last-child { margin-bottom:0; }
.watch-sidebar { grid-area:episodes; min-width:0; min-height:0; }
.watch-player .video-copyright { margin:0; }
@media (hover:hover) {
    .episode-source:hover { border-color:var(--accent); color:var(--accent); }
    .episode-sort:hover { opacity:1; border-color:var(--accent); color:var(--accent); }
    .episode-preview-toggle:hover { opacity:1; border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
    .episode-genre:hover, .detail-genre:hover { color:var(--accent); border-color:var(--accent); }
}
.watch-player #mxpro-dplayer .mxpro-player-loading-line[data-status="success"] { color:var(--accent); }
.player-loading-dots { display:inline-flex; padding-inline:1px; color:var(--accent); }
.player-loading-dots i { font-style:normal; animation:player-loading-dot 1.2s infinite; }
.player-loading-dots i:nth-child(2) { animation-delay:.2s; }
.player-loading-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes player-loading-dot { 0%,70%,100% { opacity:.25; } 30%,50% { opacity:1; } }
@media (max-width:1023px) {
    .watch-sidebar .episode-card-body { max-height:168px; }
    .watch-stage { gap:10px; }
    .watch-advertising:has(> *) { display:flex; flex-direction:column; gap:8px; }
    .watch-advertising > .promotion-group, .watch-advertising > .site-ad { margin:0; }
    .watch-advertising .promotion-bar { gap:2px 10px; padding-block:4px; }
    .watch-advertising .site-ad .module-adslist, .watch-advertising .site-ad .rm-two { gap:8px; }
    .watch-stage:not(:has(> .watch-advertising > *)) { grid-template-areas:"player" "episodes"; }
    .watch-stage-notice:not(:has(> .watch-advertising > *)) { grid-template-areas:"player"; }
}
@media (min-width:1024px) {
    .watch-stage { grid-template-columns:minmax(0,1fr) clamp(280px,24vw,340px); grid-template-areas:"player episodes" "ads ads"; }
    .watch-stage-notice { grid-template-columns:minmax(0,1fr); grid-template-areas:"player" "ads"; }
    .watch-sidebar { position:relative; }
    .watch-sidebar .episode-card { position:absolute; inset:0; display:flex; flex-direction:column; padding:0; }
    .watch-sidebar .episode-card-header { gap:4px; margin-bottom:12px; }
    .watch-sidebar .episode-controls { flex-basis:100%; justify-content:space-between; margin:0; }
    .watch-sidebar .episode-sources { flex:1; }
    .watch-sidebar .episode-source { max-width:148px; }
    .watch-sidebar .episode-card-body { flex:1; max-height:none; }
    .watch-sidebar .episode-list { grid-template-columns:repeat(auto-fill,minmax(70px,1fr)); }
    .episode-genres { display:flex; flex:none; flex-wrap:wrap; align-content:flex-start; gap:6px; max-height:76px; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); overflow-y:auto; scrollbar-width:thin; }
    .detail-playback .episode-genres { max-height:none; }
}
@media (max-width:560px) {
    .detail-hero { row-gap:16px; padding:16px; }
    .detail-genre { padding:4px 6px; }
    .detail-playback { padding-top:14px; }
    .episode-card { padding:16px 12px; }
    .episode-card-header { gap:5px; margin-bottom:12px; }
    .episode-card-title { --heading-size:21px; }
    .episode-controls { flex-basis:100%; justify-content:space-between; margin:0; }
    .episode-sources { flex:1; }
    .episode-source { max-width:148px; }
    .episode-card-body { max-height:288px; }
    .episode-card .episode-list { grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:2px 5px; }
    /* A compact 36px visual face inside each unchanged 44px touch target. */
    .episode-card .episode-list a { z-index:0; isolation:isolate; min-height:44px; padding:8px 4px; border:0; background:transparent; font-size:11px; }
    .episode-card .episode-list a::before { content:''; position:absolute; z-index:-1; inset:4px 0; border:1px solid var(--line); border-radius:5px; background:var(--surface-raised); }
    .episode-card .episode-list a[aria-current="page"] { color:var(--accent-ink); }
    .episode-card .episode-list a[aria-current="page"]::before { border-color:var(--accent); background:var(--accent); }
    .episode-card .episode-playing { bottom:5px; }
    .detail-meta .video-action.video-favorite { position:relative; z-index:0; isolation:isolate; min-height:44px; padding:5px 8px; border:0; background:transparent; }
    .detail-meta .video-favorite::before { content:''; position:absolute; z-index:-1; inset:6px 0; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:6px; background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
    .detail-meta .video-favorite[aria-pressed="true"]::before { border-color:var(--accent); }
    .watch-shell .watch-heading { margin-bottom:16px; }
    .watch-heading > div { min-width:0; max-width:100%; }
    .watch-heading h1 { display:block; min-width:0; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
    .watch-player #mxpro-dplayer { min-height:0; }
}
/* Playback sources form the top edge of the same episode panel, not another row of cards. */
.episode-card.episode-card-connected { padding:0; border:0; background:transparent; }
.episode-card-connected .episode-card-header { display:block; flex:none; margin:0; }
.episode-card-connected .episode-controls { width:100%; margin:0; align-items:flex-end; gap:4px; background:linear-gradient(var(--line),var(--line)) left bottom / 100% 1px no-repeat; }
.episode-card-connected .episode-sources { flex:1; align-items:flex-end; gap:4px; padding:7px 1px 0; scrollbar-width:none; }
.episode-card-connected .episode-sources::-webkit-scrollbar { display:none; }
.episode-card-connected .episode-source { min-height:48px; padding:10px 28px 10px 12px; border:1px solid transparent; border-top-width:2px; border-bottom:0; border-radius:8px 8px 0 0; background:transparent; }
.episode-card-connected .episode-source.is-selected { border-color:var(--line); border-top-color:var(--accent); color:var(--accent); background:var(--surface); }
.episode-card-connected .episode-source-count { top:4px; right:5px; min-width:17px; height:17px; padding:0 3px; border:0; font-size:9px; }
.episode-card-connected .episode-sort { align-self:center; margin:5px 2px; }
.episode-card-connected .episode-card-body { padding:12px 10px; border:1px solid var(--line); border-top:0; border-radius:0 0 12px 12px; background:var(--surface); }
@media (min-width:1024px) {
    .episode-card-connected:has(> .episode-genres) .episode-card-body { border-bottom:0; border-radius:0; }
    .episode-card-connected .episode-genres { margin:0; padding:10px; border:1px solid var(--line); border-radius:0 0 12px 12px; background:var(--surface); }
}
@media (prefers-reduced-motion:reduce) {
    .episode-playing i, .player-loading-dots i { animation:none; opacity:1; }
    .episode-playing i:nth-child(2) { transform:scaleY(.55); }
    .episode-playing i:nth-child(3) { transform:scaleY(.8); }
    .episode-source:active, .episode-card .episode-list a:active, .episode-sort:active { transform:none; }
}
