*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior:smooth}
body {font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:linear-gradient(160deg,#0a0a14 0%,#120a1e 40%,#1a0b1f 100%);color:#e8e6f0;line-height:1.6;min-height:100vh;overflow-x:hidden}
img, video {display:block;max-width:100%}
a {color:inherit;text-decoration:none}
ul {list-style:none}
button {font:inherit;background:none;border:none;color:inherit;cursor:pointer}
header {position:sticky;top:0;z-index:100;background:rgba(10,10,20,0.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,64,192,0.15);padding:0.75rem 1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem 1.5rem}
.site-logo {font-size:1.35rem;font-weight:800;letter-spacing:0.5px;background:linear-gradient(135deg,#ff40c0,#7a5cff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;white-space:nowrap;filter:drop-shadow(0 0 8px rgba(255,64,192,0.4))}
.categories-bar {display:flex;flex-wrap:wrap;gap:0.4rem 0.6rem;flex:1;min-width:0}
.categories-bar .runtime-category {color:#b8b0d0;text-decoration:none;font-size:0.85rem;padding:0.25rem 0.75rem;border-radius:100px;border:1px solid rgba(122,92,255,0.3);transition:all 0.2s;white-space:nowrap}
.categories-bar .runtime-category:hover {color:#fff;background:rgba(122,92,255,0.25);border-color:#7a5cff;box-shadow:0 0 12px rgba(122,92,255,0.3)}
.hero-overview {display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.25rem;padding:1.25rem;max-width:1400px;margin:0 auto;align-items:start}
.poster-column {position:relative;border-radius:16px;overflow:hidden;box-shadow:0 8px 32px rgba(255,64,192,0.2),0 0 60px rgba(122,92,255,0.15);border:1px solid rgba(255,64,192,0.2)}
.main-poster-img {width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:linear-gradient(180deg,#1a0b1f,#0a0a14)}
.overview-content {display:flex;flex-direction:column;gap:1rem;background:rgba(20,12,30,0.6);border-radius:16px;padding:1.5rem;border:1px solid rgba(122,92,255,0.15);box-shadow:0 4px 24px rgba(0,0,0,0.4)}
.movie-title {font-size:2.2rem;font-weight:800;letter-spacing:1px;background:linear-gradient(135deg,#ff40c0,#00d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(255,64,192,0.3);line-height:1.2}
.tagline {color:#9a90b8;font-size:1rem;letter-spacing:0.5px;margin-bottom:0.5rem}
.player-wrapper {border-radius:12px;overflow:hidden;background:#000;border:1px solid rgba(255,64,192,0.3);box-shadow:0 0 40px rgba(122,92,255,0.2);position:relative}
.player-wrapper video {display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.player-wrapper.theater-mode {position:fixed;inset:auto 0 0 0;z-index:90;border-radius:16px 16px 0 0;border-bottom:none}
.player-controls {display:flex;flex-wrap:wrap;gap:0.25rem;padding:0.5rem;background:rgba(10,10,20,0.9);border-top:1px solid rgba(122,92,255,0.2)}
.player-controls button {font-size:0.75rem;color:#b8b0d0;padding:0.3rem 0.6rem;border-radius:6px;transition:all 0.2s}
.player-controls button:hover {color:#fff;background:rgba(122,92,255,0.3)}
.meta-row {display:flex;flex-wrap:wrap;gap:0.4rem}
.meta-chip {background:rgba(122,92,255,0.12);border:1px solid rgba(122,92,255,0.3);color:#c8c0e8;font-size:0.8rem;padding:0.2rem 0.8rem;border-radius:100px;white-space:nowrap}
.block-heading {font-size:1.1rem;font-weight:700;color:#ff40c0;margin-bottom:0.5rem;letter-spacing:1px;display:flex;align-items:center;gap:0.5rem}
.block-heading::before {content:"";width:4px;height:1.1em;background:linear-gradient(180deg,#ff40c0,#7a5cff);border-radius:2px}
.synopsis-block {margin-top:0.25rem}
.synopsis-text {font-size:0.9rem;color:#c0b8d8;margin-bottom:0.4rem;line-height:1.8}
.cast-row {margin-top:0.25rem}
.actor-list {display:flex;flex-wrap:wrap;gap:0.5rem}
.actor-item {background:rgba(0,212,255,0.1);border:1px solid rgba(0,212,255,0.25);color:#a0e8ff;font-size:0.85rem;padding:0.35rem 1rem;border-radius:100px;transition:all 0.2s;cursor:default}
.actor-item:hover {background:rgba(0,212,255,0.2);box-shadow:0 0 12px rgba(0,212,255,0.3)}
.episode-status {display:flex;gap:1rem;align-items:center;background:rgba(255,64,192,0.08);padding:0.5rem 1rem;border-radius:8px;border:1px solid rgba(255,64,192,0.15)}
.episode-count, .current-episode {font-size:0.85rem;color:#d0c8e8}
.current-episode {color:#ff40c0;font-weight:600}
.timeline-section {padding:1.25rem;max-width:1400px;margin:0 auto;width:100%}
.timeline-scroll {display:flex;gap:1rem;overflow-x:auto;padding-bottom:0.75rem;scrollbar-width:thin;scrollbar-color:#7a5cff transparent}
.timeline-scroll::-webkit-scrollbar {height:6px}
.timeline-scroll::-webkit-scrollbar-track {background:rgba(122,92,255,0.1);border-radius:3px}
.timeline-scroll::-webkit-scrollbar-thumb {background:#7a5cff;border-radius:3px}
.timeline-item {flex:0 0 auto;min-width:180px;background:rgba(20,12,30,0.8);border:1px solid rgba(122,92,255,0.2);border-radius:12px;padding:0.75rem 1rem;display:flex;flex-direction:column;gap:0.3rem;transition:all 0.2s;position:relative}
.timeline-item:hover {background:rgba(122,92,255,0.15);transform:translateY(-2px);box-shadow:0 4px 16px rgba(122,92,255,0.2)}
.timeline-item::after {content:"";position:absolute;top:50%;right:-1rem;width:1rem;height:2px;background:linear-gradient(90deg,#7a5cff,#ff40c0)}
.timeline-item:last-child::after {display:none}
.timecode {font-size:0.8rem;font-weight:700;color:#ff40c0}
.label {font-size:0.85rem;color:#c0b8d8}
.episodes-grid {padding:1.25rem;max-width:1400px;margin:0 auto;width:100%}
.episode-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0.75rem}
.episode-card {background:rgba(20,12,30,0.8);border:1px solid rgba(0,212,255,0.15);border-radius:12px;padding:0.85rem;display:flex;flex-direction:column;gap:0.4rem;transition:all 0.2s}
.episode-card:hover {border-color:#00d4ff;box-shadow:0 0 20px rgba(0,212,255,0.15);transform:translateY(-2px)}
.ep-number {font-size:2rem;font-weight:800;color:rgba(255,64,192,0.6);line-height:1;font-style:italic}
.ep-title {font-size:1rem;font-weight:700;color:#e8e6f0}
.ep-summary {font-size:0.8rem;color:#9a90b8;flex:1}
.ep-duration {font-size:0.7rem;color:#7a5cff;text-transform:uppercase;letter-spacing:1px}
.comments-masonry {padding:1.25rem;max-width:1400px;margin:0 auto;width:100%}
.comment-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.75rem;align-items:start}
.comment-card {background:rgba(20,12,30,0.8);border:1px solid rgba(255,64,192,0.15);border-radius:12px;padding:0.85rem;display:flex;flex-direction:column;gap:0.4rem}
.comment-card:nth-child(2) {margin-top:1.5rem}
.comment-card:nth-child(4) {margin-top:0.75rem}
.comment-nick {font-size:0.8rem;font-weight:700;color:#00d4ff;letter-spacing:0.5px}
.comment-text {font-size:0.85rem;color:#c0b8d8;line-height:1.6}
.rec-section {padding:1.25rem;max-width:1400px;margin:0 auto;width:100%}
.rec-scroll {display:flex;gap:1rem;overflow-x:auto;padding-bottom:0.75rem;scrollbar-width:thin;scrollbar-color:#ff40c0 transparent}
.rec-scroll::-webkit-scrollbar {height:6px}
.rec-scroll::-webkit-scrollbar-track {background:rgba(255,64,192,0.1);border-radius:3px}
.rec-scroll::-webkit-scrollbar-thumb {background:#ff40c0;border-radius:3px}
.rec-card {flex:0 0 auto;width:220px;background:rgba(20,12,30,0.8);border:1px solid rgba(255,64,192,0.15);border-radius:12px;overflow:hidden;text-decoration:none;color:#e8e6f0;transition:all 0.2s;display:flex;flex-direction:column}
.rec-card:hover {border-color:#ff40c0;box-shadow:0 0 24px rgba(255,64,192,0.25);transform:translateY(-2px)}
.rec-card img {width:100%;aspect-ratio:16/10;object-fit:cover;background:linear-gradient(135deg,#1a0b1f,#0a0a14)}
.rec-card span:not([data-runtime="name"]):not([data-runtime="blurb"]) {padding:0.5rem 0.75rem;font-size:1rem;font-weight:700;color:#ff40c0}
.rec-card [data-runtime="name"] {padding:0.5rem 0.75rem 0;font-size:0.95rem;font-weight:600;color:#e8e6f0}
.rec-card [data-runtime="blurb"] {padding:0.25rem 0.75rem 0.75rem;font-size:0.75rem;color:#9a90b8;line-height:1.5}
footer {background:rgba(10,10,20,0.9);border-top:1px solid rgba(122,92,255,0.2);padding:1.25rem;margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem}
.footer-disclaimer {font-size:0.75rem;color:#6a6280;text-align:center}
.friend-links {display:flex;flex-wrap:wrap;gap:0.4rem 1rem;justify-content:center;align-items:center}
.friend-label {font-size:0.8rem;color:#9a90b8}
.runtime-friend-link {font-size:0.8rem;color:#7a5cff;text-decoration:none;transition:all 0.2s}
.runtime-friend-link:hover {color:#ff40c0;text-decoration:underline}
.footer-home {display:flex;gap:1.5rem;justify-content:center}
.footer-home a {font-size:0.85rem;color:#b8b0d0;text-decoration:none;transition:all 0.2s}
.footer-home a:hover {color:#00d4ff;text-decoration:underline}
body.lights-off .hero-overview, .lights-off .timeline-section, .lights-off .episodes-grid, .lights-off .comments-masonry, .lights-off .rec-section, .lights-off footer {opacity:0.3;transition:opacity 0.4s}
body.lights-off .player-wrapper {opacity:1}
@media (max-width:1024px){.hero-overview {grid-template-columns:220px minmax(0,1fr)}
.movie-title {font-size:1.8rem}}
@media (max-width:768px){header {padding:0.5rem 1rem}
.site-logo {font-size:1.1rem}
.hero-overview {grid-template-columns:1fr;gap:1rem;padding:1rem}
.poster-column {max-width:240px;margin:0 auto}
.overview-content {padding:1rem}
.movie-title {font-size:1.5rem}
.timeline-scroll, .rec-scroll {-webkit-overflow-scrolling:touch}
.timeline-item {min-width:150px}
.episode-cards {grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.comment-grid {grid-template-columns:1fr}
.comment-card:nth-child(2), .comment-card:nth-child(4) {margin-top:0}
.rec-card {width:180px}}
@media (max-width:480px){.hero-overview {padding:0.75rem}
.overview-content {padding:0.75rem;border-radius:12px}
.movie-title {font-size:1.2rem}
.tagline {font-size:0.85rem}
.meta-chip {font-size:0.7rem;padding:0.15rem 0.6rem}
.player-controls {padding:0.35rem;gap:0.2rem}
.player-controls button {font-size:0.65rem;padding:0.25rem 0.4rem}
.episode-cards {grid-template-columns:1fr}
.actor-list {gap:0.3rem}
.actor-item {font-size:0.75rem;padding:0.25rem 0.75rem}
.episode-status {flex-direction:column;align-items:flex-start;gap:0.25rem}
.timeline-section, .episodes-grid, .comments-masonry, .rec-section {padding:0.75rem}
.block-heading {font-size:0.95rem}
.rec-card {width:150px}
.footer-home {gap:1rem;flex-wrap:wrap}}

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}