*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: #0a0e1a; color: #dce3f0; line-height: 1.45; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { text-decoration: none; color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
dl, dd, dt { margin: 0; }
header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 2rem; border-bottom: 1px solid rgba(0, 229, 255, 0.18); background: linear-gradient(180deg, #0d1424 0%, #0a0e1a 100%); position: sticky; top: 0; z-index: 50; }
.site-logo { font-size: 1.3rem; font-weight: 900; font-style: italic; letter-spacing: 0.12em; text-transform: uppercase; color: #00e5ff; text-shadow: 0 0 12px rgba(0, 229, 255, 0.6), 0 0 34px rgba(255, 0, 200, 0.3); transition: color 0.2s; }
.site-logo:hover { color: #ff00c8; }
nav[data-contract="categories"] { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; justify-content: flex-end; }
.runtime-category { display: inline-block; white-space: nowrap; color: #9fb4d8; font-weight: 600; font-size: 0.85rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgba(0, 229, 255, 0.25); background: rgba(0, 229, 255, 0.05); transition: all 0.2s; }
.runtime-category:hover { color: #00e5ff; border-color: #00e5ff; background: rgba(0, 229, 255, 0.12); box-shadow: 0 0 14px rgba(0, 229, 255, 0.3); }
main { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.movie-overview-shell { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 2rem 2.5rem; padding: 2.5rem 0 1rem; margin-bottom: 1.5rem; }
.poster-media-frame { width: 100%; max-width: 280px; justify-self: center; position: relative; }
.poster-media-frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 229, 255, 0.3), transparent 40%, rgba(255, 0, 200, 0.25)); mix-blend-mode: screen; pointer-events: none; z-index: 1; }
.main-poster-img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; border: 1px solid rgba(0, 229, 255, 0.3); box-shadow: 0 0 24px rgba(0, 229, 255, 0.12), 0 8px 40px rgba(0, 0, 0, 0.5); }
.movie-info-group { background: linear-gradient(145deg, #101a2e, #0c1220); border: 1px solid rgba(0, 229, 255, 0.15); border-radius: 10px; padding: 1.8rem 2rem 2rem; position: relative; overflow: hidden; }
.movie-info-group::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 10%, rgba(255, 0, 200, 0.06), transparent 50%); pointer-events: none; }
.movie-title { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 900; font-style: italic; letter-spacing: 0.06em; line-height: 1.15; margin-bottom: 0.5rem; color: #f0f6ff; text-shadow: 0 0 20px rgba(0, 229, 255, 0.25); position: relative; z-index: 1; }
.tagline { color: #00e5ff; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; margin-bottom: 1.6rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(0, 229, 255, 0.15); position: relative; z-index: 1; }
.cast-block { margin-bottom: 1.2rem; position: relative; z-index: 1; }
.block-heading { font-size: 1rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #ff00c8; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem; }
.block-heading::before { content: "▸"; color: #00e5ff; }
.cast-grid { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.cast-item { font-size: 0.9rem; color: #cdd8ee; background: rgba(0, 229, 255, 0.06); padding: 0.25rem 0.7rem; border-radius: 4px; border-left: 2px solid #00e5ff; transition: background 0.2s; }
.cast-item:hover { background: rgba(0, 229, 255, 0.14); }
.synopsis-block { margin-bottom: 1.2rem; position: relative; z-index: 1; }
.synopsis-line { font-size: 0.9rem; color: #b8c6de; margin-bottom: 0.45rem; line-height: 1.55; max-width: 75ch; }
.synopsis-line::first-letter { color: #00e5ff; font-weight: 700; }
.episode-status-block { margin-bottom: 1.4rem; position: relative; z-index: 1; }
.episode-count { font-size: 0.9rem; font-weight: 700; color: #ff00c8; margin-bottom: 1rem; letter-spacing: 0.05em; }
.player-wide-wrapper { width: 100%; max-width: 100%; background: #000; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 229, 255, 0.25); box-shadow: 0 0 30px rgba(0, 229, 255, 0.1); }
.main-player { display: block; }
.player-control-bar { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.6rem; background: #0d1424; border-top: 1px solid rgba(0, 229, 255, 0.2); }
.player-control-bar button { font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 4px; background: rgba(0, 229, 255, 0.08); border: 1px solid rgba(0, 229, 255, 0.15); transition: all 0.2s; }
.player-control-bar button:hover { background: rgba(0, 229, 255, 0.2); border-color: #00e5ff; }
.player-control-bar button.playing { color: #00e5ff; box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
.player-control-bar button.muted { color: #ff00c8; border-color: #ff00c8; }
.player-control-bar button.active { color: #00e5ff; background: rgba(0, 229, 255, 0.2); }
.player-control-bar button.speed-0_5, button.speed-1_5, button.speed-2 { color: #ff00c8; }
.player-wide-wrapper.theater-mode { border-radius: 0; border-left: none; border-right: none; }
.lights-dim .movie-overview-shell { filter: brightness(0.6); transition: filter 0.3s; }
.details-block { position: relative; z-index: 1; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem 2rem; }
.detail-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; border-bottom: 1px dashed rgba(0, 229, 255, 0.12); padding-bottom: 0.3rem; }
.detail-row dt { color: #00e5ff; font-weight: 700; white-space: nowrap; }
.detail-row dd { color: #c4d2e6; text-align: right; }
.timeline-fragment { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(0, 229, 255, 0.12); }
.timeline-scroll-wrap { overflow-x: auto; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
.timeline-track { display: flex; gap: 0.8rem; min-width: max-content; padding: 0.8rem 0.2rem; }
.timeline-item { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.9rem 1.1rem; background: #101a2e; border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 8px; min-width: 170px; max-width: 210px; position: relative; transition: box-shadow 0.2s, transform 0.2s; }
.timeline-item::before { content: ""; position: absolute; top: -7px; left: 1.1rem; width: 8px; height: 8px; border-radius: 50%; background: #00e5ff; box-shadow: 0 0 12px #00e5ff; }
.timeline-item::after { content: ""; position: absolute; top: -5px; left: calc(1.1rem + 8px); width: 1px; height: 5px; background: #00e5ff; }
.timeline-item:hover { box-shadow: 0 0 18px rgba(0, 229, 255, 0.2); transform: translateY(-2px); }
.timecode { font-size: 0.75rem; font-weight: 800; color: #ff00c8; letter-spacing: 0.05em; }
.label { font-size: 0.85rem; color: #c4d2e6; line-height: 1.4; }
.episodes-fragment { margin-top: 2rem; }
.episode-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.episode-card { background: linear-gradient(135deg, #101a2e, #0c1220); border: 1px solid rgba(0, 229, 255, 0.14); border-radius: 8px; padding: 1.2rem 1.4rem; transition: all 0.25s; display: flex; flex-direction: column; gap: 0.4rem; }
.episode-card:hover { border-color: #00e5ff; box-shadow: 0 0 20px rgba(0, 229, 255, 0.15); transform: translateY(-3px); }
.epi-number { font-size: 2.2rem; font-weight: 900; font-style: italic; color: transparent; -webkit-text-stroke: 1px #00e5ff; opacity: 0.7; line-height: 1; margin-bottom: 0.3rem; }
.epi-title { font-size: 1.1rem; font-weight: 800; color: #f0f6ff; letter-spacing: 0.03em; }
.epi-summary { font-size: 0.85rem; color: #9fb4d8; line-height: 1.4; flex-grow: 1; }
.epi-duration { font-size: 0.75rem; color: #ff00c8; font-weight: 600; letter-spacing: 0.08em; margin-top: 0.2rem; }
.recommend-region { margin-top: 2.2rem; }
.rec-title { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 1rem; color: #f0f6ff; display: flex; align-items: center; gap: 0.6rem; }
.rec-title::before { content: "✦"; color: #ff00c8; font-size: 1rem; }
.rec-card-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.rec-card { background: #101a2e; border: 1px solid rgba(0, 229, 255, 0.12); border-radius: 8px; overflow: hidden; transition: all 0.25s; display: flex; flex-direction: column; text-decoration: none; }
.rec-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid rgba(0, 229, 255, 0.15); }
.rec-card span { padding: 0.45rem 0.8rem; }
.rec-card span[data-runtime="name"] { font-weight: 700; font-size: 0.9rem; color: #e8effc; }
.rec-card span[data-runtime="blurb"] { font-size: 0.78rem; color: #9fb4d8; padding-top: 0; line-height: 1.4; }
.rec-card:hover { border-color: #00e5ff; box-shadow: 0 0 24px rgba(0, 229, 255, 0.18); transform: translateY(-2px); }
.rec-card:hover span[data-runtime="name"] { color: #00e5ff; }
.comments-fragment { margin-top: 2.2rem; }
.comment-masonry { columns: 2; column-gap: 1.2rem; }
.comment-bubble { break-inside: avoid; background: #101a2e; border: 1px solid rgba(0, 229, 255, 0.14); border-radius: 12px 12px 12px 4px; padding: 1rem 1.2rem; margin-bottom: 1rem; position: relative; transition: border-color 0.2s; }
.comment-bubble::before { content: ""; position: absolute; bottom: 12px; left: -6px; width: 12px; height: 12px; background: #101a2e; border-left: 1px solid rgba(0, 229, 255, 0.14); border-bottom: 1px solid rgba(0, 229, 255, 0.14); transform: rotate(135deg); }
.commenter { display: block; font-size: 0.85rem; font-weight: 800; color: #ff00c8; margin-bottom: 0.4rem; }
.comment-bubble p { font-size: 0.9rem; color: #c4d2e6; line-height: 1.45; }
footer { margin-top: 3rem; border-top: 1px solid rgba(0, 229, 255, 0.14); background: #0a0e1a; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 2rem 1.5rem 2.5rem; }
.footer-disclaimer { font-size: 0.8rem; color: #6b7a94; line-height: 1.5; margin-bottom: 1.4rem; max-width: 80ch; }
.friend-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.4rem; }
.friend-label { font-size: 0.85rem; font-weight: 700; color: #00e5ff; }
.runtime-friend-link { font-size: 0.8rem; color: #9fb4d8; transition: color 0.2s; }
.runtime-friend-link:hover { color: #ff00c8; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: 0.85rem; font-weight: 600; color: #b8c6de; transition: color 0.2s; }
.footer-links a:hover { color: #00e5ff; }
@media (max-width: 1024px) {.movie-overview-shell { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.5rem; }
.movie-info-group { padding: 1.5rem; }}
@media (max-width: 860px) {.movie-overview-shell { grid-template-columns: 1fr; }
.poster-media-frame { max-width: 260px; }
.comment-masonry { columns: 1; }
header { padding: 1rem 1.2rem; }
main { padding-left: 1rem; padding-right: 1rem; }}
@media (max-width: 600px) {.movie-title { font-size: 1.5rem; }
.detail-list { grid-template-columns: 1fr; }
.episode-card-grid { grid-template-columns: 1fr; }
.rec-card-row { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
.player-control-bar { gap: 0.2rem; }
.player-control-bar button { font-size: 0.72rem; padding: 0.2rem 0.45rem; }
.footer-inner { padding: 1.5rem 1rem 2rem; }
.friend-links { flex-direction: column; align-items: flex-start; }
.timeline-item { min-width: 150px; }}
.player-wide-wrapper { min-width: 0; }
.movie-overview-shell .player-wide-wrapper { min-width: 480px; }
@media (max-width: 860px) {.movie-overview-shell .player-wide-wrapper { min-width: 0; }}
.lights-dim { background: #05080f; }
.lights-dim .movie-info-group { box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.4); }
.theater-mode .main-player { aspect-ratio: 16 / 9; }
.mute .player-control-bar button[data-player-action="mute"] { color: #ff00c8; }
.volume .player-control-bar button[data-player-action="volume"] { color: #00e5ff; }
.pip .player-control-bar button[data-player-action="pip"] { color: #00e5ff; }
.fullscreen .player-control-bar button[data-player-action="fullscreen"] { color: #00e5ff; }
.theater .player-control-bar button[data-player-action="theater"] { color: #00e5ff; }
.light .player-control-bar button[data-player-action="light"] { color: #00e5ff; }
.play .player-control-bar button[data-player-action="play"] { color: #00e5ff; }
.progress .player-control-bar button[data-player-action="progress"] { color: #00e5ff; }

footer{text-align:center!important}
footer *{justify-content:center!important}
footer :is(div,nav,ul,ol,p,section,address){margin-left:auto!important;margin-right:auto!important}