*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; background: #0d1b2a; color: #e0e6ed; line-height: 1.6; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem 2rem; background: #0a1622; border-bottom: 1px solid #1e3a5f;
    position: sticky; top: 0; z-index: 100;
}
.site-brand { font-size: 1.4rem; font-weight: 700; color: #ffffff; letter-spacing: 0.08em; white-space: nowrap; }
a[data-contract="site-name"] { color: #ffffff; text-decoration: none; }
a[data-contract="site-name"]:hover { color: #ff4d4d; }
.categories-nav { display: flex; gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; }
.runtime-category {
    display: inline-block; padding: 0.4rem 0.9rem; font-size: 0.85rem; color: #a8c0da;
    white-space: nowrap; border: 1px solid transparent; border-radius: 2px; transition: 0.2s;
}
.runtime-category:hover { color: #ffffff; border-color: #ff4d4d; background: rgba(255,77,77,0.1); }
.runtime-category:first-child { color: #ff4d4d; border-color: #ff4d4d; }
.hero-panel {
    background: #0d1b2a; color: #e0e6ed;
    padding: 0 0 3rem 0; position: relative; overflow: hidden;
}
.hero-backdrop {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 2rem; padding: 2rem 4rem 0; max-width: 1400px; margin: 0 auto;
    position: relative; z-index: 2;
}
.hero-poster-column { display: flex; align-items: flex-start; }
.poster-wrapper { width: 100%; max-width: 380px; }
.poster-image { width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 1px solid #1e3a5f; box-shadow: 0 8px 30px rgba(0,0,0,0.7); }
.hero-content-column { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.hero-title-block { margin-bottom: 0.5rem; }
.movie-title { font-size: 2.2rem; font-weight: 800; color: #ffffff; letter-spacing: 0.06em; line-height: 1.3; }
.movie-tagline { font-size: 1rem; color: #a8c0da; margin-top: 0.5rem; letter-spacing: 0.1em; font-weight: 300; }
.hero-player { width: 100%; min-width: 0; }
.hero-player video { width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #050a10; border: 1px solid #1e3a5f; }
.player-controls { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ctrl-btn {
    font-size: 0.75rem; padding: 0.35rem 0.8rem; color: #a8c0da;
    border: 1px solid #1e3a5f; border-radius: 2px; transition: 0.2s; background: rgba(10,22,34,0.6);
}
.ctrl-btn:hover { color: #ffffff; border-color: #ff4d4d; background: rgba(255,77,77,0.15); }
.episode-status { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: #a8c0da; }
.status-label { color: #a8c0da; }
.status-total, .status-current { color: #ff4d4d; font-weight: 700; }
.status-divider { color: #3a5a7a; }
.details-group { margin-top: 0.5rem; }
.detail-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.35rem 1.5rem; }
.detail-item { display: flex; gap: 0.5rem; font-size: 0.85rem; }
.detail-item dt { color: #5a7a9a; white-space: nowrap; }
.detail-item dd { color: #c0d0e0; }
.hero-silhouette {
    position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
    background: linear-gradient(to bottom, transparent, #0d1b2a 70%, #0d1b2a);
    pointer-events: none; z-index: 1;
}
.section-title {
    font-size: 1.3rem; font-weight: 700; color: #ffffff; margin-bottom: 1.2rem;
    padding-left: 1rem; border-left: 3px solid #ff4d4d; letter-spacing: 0.1em;
}
.synopsis-section { padding: 2rem 4rem; max-width: 1400px; margin: 0 auto; }
.synopsis-layout { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: start; }
.synopsis-photo { width: 100%; }
.synopsis-still { width: 100%; aspect-ratio: 2/3; object-fit: cover; filter: grayscale(1); border: 1px solid #1e3a5f; }
.synopsis-text-columns { columns: 2; column-gap: 2rem; }
.synopsis-paragraph { font-size: 0.95rem; line-height: 1.8; color: #b0c0d0; margin-bottom: 1rem; text-align: justify; break-inside: avoid; }
.cast-section { padding: 0 4rem 2rem; max-width: 1400px; margin: 0 auto; }
.cast-card-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.cast-card { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.cast-photo { width: 100%; }
.cast-photo img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border: 1px solid #1e3a5f; filter: grayscale(0.4); transition: 0.3s; }
.cast-card:hover .cast-photo img { filter: grayscale(0); border-color: #ff4d4d; }
.cast-name { font-size: 0.95rem; color: #c0d0e0; font-weight: 500; }
.recommend-region { padding: 2rem 4rem; max-width: 1400px; margin: 0 auto; }
.recommend-title { font-size: 1.1rem; font-weight: 600; color: #a8c0da; margin-bottom: 1rem; letter-spacing: 0.08em; }
.recommend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.2rem; }
.recommend-item { display: flex; flex-direction: column; gap: 0.4rem; background: #0a1622; border: 1px solid #1e3a5f; padding: 0.8rem; transition: 0.2s; }
.recommend-item:hover { border-color: #ff4d4d; transform: translateY(-2px); }
[data-runtime="recommendation"] img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
[data-runtime="recommendation"] span { font-size: 0.85rem; color: #c0d0e0; }
[data-runtime="recommendation"] span[data-runtime="name"] { font-weight: 600; color: #ffffff; }
[data-runtime="recommendation"] span[data-runtime="blurb"] { color: #7a9ab0; font-size: 0.8rem; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
a.recommend-item { color: inherit; text-decoration: none; }
.timeline-section { padding: 2rem 4rem; max-width: 1400px; margin: 0 auto; }
.timeline-line {
    position: relative; padding-left: 2rem; border-left: 2px solid #1e3a5f;
    display: flex; flex-direction: column; gap: 1.5rem;
}
.timeline-item { position: relative; display: flex; align-items: baseline; gap: 1rem; }
.timeline-dot {
    position: absolute; left: -2.55rem; top: 0.2rem; width: 12px; height: 12px;
    background: #ff4d4d; border-radius: 50%; border: 2px solid #0d1b2a; box-shadow: 0 0 6px rgba(255,77,77,0.5);
}
.timeline-code { font-size: 0.85rem; color: #ff4d4d; font-weight: 700; min-width: 50px; }
.timeline-label { font-size: 0.95rem; color: #b0c0d0; }
.episodes-section { padding: 2rem 4rem; max-width: 1400px; margin: 0 auto; }
.episode-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; }
.episode-item {
    display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem;
    background: #0a1622; border-left: 3px solid #1e3a5f; transition: 0.2s;
}
.episode-item:hover { border-left-color: #ff4d4d; background: #0f1e30; }
.ep-number { font-size: 1rem; font-weight: 800; color: #ff4d4d; }
.ep-title { font-size: 1rem; font-weight: 600; color: #ffffff; }
.ep-summary { font-size: 0.85rem; color: #7a9ab0; line-height: 1.5; }
.ep-duration { font-size: 0.75rem; color: #3a5a7a; margin-top: auto; }
.comments-section { padding: 2rem 4rem; max-width: 1400px; margin: 0 auto; }
.comments-scroll {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px);
    gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory;
}
.comment-card {
    scroll-snap-align: start; background: #0a1622; border: 1px solid #1e3a5f;
    padding: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.comment-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: #1e3a5f;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.avatar-letter { font-size: 1.1rem; font-weight: 700; color: #ff4d4d; }
.comment-nickname { font-size: 0.95rem; font-weight: 600; color: #c0d0e0; }
.comment-text { font-size: 0.85rem; color: #8aa0b5; line-height: 1.6; }
.credits-section { padding: 2rem 4rem 3rem; max-width: 1400px; margin: 0 auto; }
.credits-block { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.5rem; }
.credit-line { font-size: 0.9rem; color: #a8c0da; }
.conclusion-text {
    font-size: 1.1rem; color: #ffffff; line-height: 1.8; padding: 1.5rem 2rem;
    border-left: 3px solid #ff4d4d; background: linear-gradient(90deg, rgba(30,58,95,0.3), transparent);
    font-weight: 300; letter-spacing: 0.06em;
}
footer { background: #0a1622; border-top: 1px solid #1e3a5f; }
.footer-inner { padding: 2rem 4rem; max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.disclaimer-text { font-size: 0.8rem; color: #5a7a9a; line-height: 1.8; }
.footer-nav { display: flex; gap: 1.5rem; }
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] { font-size: 0.9rem; color: #a8c0da; text-decoration: none; }
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover { color: #ff4d4d; }
.friend-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; }
.friend-label { font-size: 0.85rem; color: #5a7a9a; }
a.runtime-friend-link { font-size: 0.85rem; color: #a8c0da; text-decoration: none; }
a.runtime-friend-link:hover { color: #ff4d4d; text-decoration: underline; }
.theater-mode { max-width: 100%; }
.lights-off { background: #050a10; }
.lights-off .hero-panel, .lights-off .cast-section, .lights-off .episodes-section, .lights-off .comments-section, .lights-off .credits-section, .lights-off .timeline-section, .lights-off .recommend-region, .lights-off .synopsis-section { background: transparent; }
@media (max-width: 1200px) {.hero-backdrop { grid-template-columns: 1fr; padding: 1.5rem 2rem; }
.hero-poster-column { justify-content: center; }
.poster-wrapper { max-width: 300px; }
.hero-content-column { align-items: stretch; }
.cast-card-row { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.recommend-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.synopsis-layout { grid-template-columns: 1fr; }
.synopsis-photo { max-width: 300px; }
.synopsis-text-columns { columns: 1; }
.episode-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }}
@media (max-width: 768px) {.header-inner { padding: 0.6rem 1rem; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.categories-nav { width: 100%; }
.hero-panel, .synopsis-section, .cast-section, .recommend-region, .timeline-section, .episodes-section, .comments-section, .credits-section, .footer-inner { padding-left: 1rem; padding-right: 1rem; }
.hero-backdrop { padding: 1rem; }
.movie-title { font-size: 1.5rem; }
.detail-list { grid-template-columns: 1fr 1fr; }
.cast-card-row { grid-template-columns: repeat(2, 1fr); }
.recommend-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
.comments-scroll { grid-auto-columns: minmax(220px, 280px); }
.episode-list { grid-template-columns: 1fr; }
.timeline-line { padding-left: 1.5rem; }
.timeline-dot { left: -2.05rem; }
.synopsis-text-columns { columns: 1; }
.footer-nav { flex-direction: column; gap: 0.5rem; }}
@media (max-width: 480px) {html { font-size: 15px; }
.cast-card-row { grid-template-columns: repeat(2, 1fr); }
.recommend-grid { grid-template-columns: 1fr 1fr; }
.detail-list { grid-template-columns: 1fr; }
.hero-backdrop { gap: 1rem; }
.poster-wrapper { max-width: 240px; }
.section-title { font-size: 1.1rem; }
.movie-title { font-size: 1.2rem; }
.comments-scroll { grid-auto-columns: 200px; }
.episode-list { grid-template-columns: 1fr; }}

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}