*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; background: #1a1f2b; color: #c8d0dd; line-height: 1.5; font-size: 14px; letter-spacing: 0.01em; }
img, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: none; background: none; color: inherit; cursor: pointer; }
input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
header { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: #141824; border-bottom: 3px solid #c62828; position: sticky; top: 0; z-index: 100; }
.brand-link { font-size: 18px; font-weight: 800; letter-spacing: 0.15em; color: #e8edf5; text-transform: uppercase; }
.brand-link:hover { color: #c62828; }
.category-nav { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
.runtime-category { display: inline-block; padding: 6px 14px; border: 1px solid #3a4252; color: #aab4c4; font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; border-radius: 2px; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.runtime-category:hover { background: #c62828; border-color: #c62828; color: #fff; }
.movie-overview-hero { background: linear-gradient(160deg, #141824 0%, #1e2532 60%, #2a2f3e 100%); padding: 32px 24px 40px; position: relative; overflow: hidden; }
.movie-overview-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; background: linear-gradient(90deg, transparent, #c62828 40%, transparent); }
.overview-layout { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 32px; max-width: 1400px; margin: 0 auto; align-items: start; }
.poster-column { position: sticky; top: 80px; align-self: start; }
.poster-tear-wrapper { position: relative; background: #1a1f2b; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 94%, 70% 90%, 50% 95%, 30% 91%, 15% 94%, 0 92%); }
.hero-poster { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 92%, 88% 94%, 70% 90%, 50% 95%, 30% 91%, 15% 94%, 0 92%); }
.tear-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(198, 40, 40, 0.25) 0%, transparent 35%, rgba(20, 24, 36, 0.6) 100%); pointer-events: none; mix-blend-mode: multiply; }
.film-title-tear { position: absolute; bottom: 8%; left: -8px; right: -8px; background: rgba(20, 24, 36, 0.88); color: #e8edf5; font-size: clamp(20px, 3vw, 32px); font-weight: 900; letter-spacing: 0.22em; padding: 16px 18px 18px 28px; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); border-left: 4px solid #c62828; text-shadow: 2px 2px 0 rgba(0,0,0,0.4); line-height: 1.2; }
.tagline-vertical { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 0.6em; color: #7d8799; font-size: 13px; font-weight: 300; margin-top: 16px; text-align: right; padding-right: 8px; border-right: 1px solid #3a4252; height: 180px; display: inline-block; }
.info-column { background: #1d232f; border-bottom: 1px solid #3a4252; border-right: 3px solid #c62828; padding: 28px 28px 32px; position: relative; }
.info-column::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: repeating-linear-gradient(90deg, #c62828 0 20px, transparent 20px 40px); opacity: 0.6; }
.synopsis-timeline-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 40px; margin-bottom: 28px; align-items: start; }
.synopsis-block { padding-right: 24px; border-right: 1px dashed #3a4252; }
.block-heading { font-size: 16px; font-weight: 700; letter-spacing: 0.3em; color: #e8edf5; margin-bottom: 16px; position: relative; padding-left: 18px; }
.block-heading::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background: #c62828; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.synopsis-paragraph { font-size: 13.5px; line-height: 1.85; color: #aab4c4; margin-bottom: 14px; text-align: justify; }
.timeline-block { border-left: 2px solid #3a4252; padding-left: 20px; position: relative; }
.timeline-block::before { content: ""; position: absolute; left: -5px; top: 20px; width: 8px; height: 8px; background: #c62828; transform: rotate(45deg); }
.timeline-list { display: flex; flex-direction: column; gap: 8px; }
.timeline-item { display: flex; gap: 12px; align-items: baseline; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(58, 66, 82, 0.4); }
.timeline-item:last-child { border-bottom: none; }
.timecode { color: #c62828; font-weight: 700; font-size: 12px; letter-spacing: 0.1em; flex-shrink: 0; width: 44px; }
.timeline-label { color: #aab4c4; }
.cast-block { margin-bottom: 28px; }
.cast-card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cast-card { background: #141824; border: 1px solid #3a4252; padding: 14px 8px; text-align: center; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background 0.25s, border-color 0.25s; }
.cast-card:hover { background: #1a1f2b; border-color: #c62828; }
.actor-name { font-size: 14px; font-weight: 600; letter-spacing: 0.18em; color: #d5dee9; }
.episode-status-block { margin-bottom: 28px; }
.status-meta { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.total-episodes { font-size: 12px; color: #7d8799; letter-spacing: 0.15em; background: #141824; padding: 4px 10px; border: 1px solid #3a4252; }
.current-episode { font-size: 12px; font-weight: 700; color: #c62828; letter-spacing: 0.1em; }
.player-skin { position: relative; background: #0f1219; border: 1px solid #3a4252; padding: 8px; }
.player-skin video { background: #000; }
.player-controls { display: flex; gap: 8px; padding: 8px 4px 2px; align-items: center; flex-wrap: wrap; }
.player-controls button { font-size: 11px; color: #7d8799; border: 1px solid #3a4252; padding: 4px 8px; border-radius: 2px; transition: all 0.2s; }
.player-controls button:hover { color: #e8edf5; border-color: #c62828; background: #141824; }
.player-controls input[type="range"] { flex: 1; min-width: 80px; height: 4px; background: #3a4252; border-radius: 0; }
.player-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; background: #c62828; cursor: pointer; }
.player-skin.theater-mode { padding: 0; background: #000; }
.player-skin.theater-mode video { border-radius: 0; }
.details-block { border-top: 1px solid #3a4252; padding-top: 20px; }
.details-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 24px; }
.details-list li { display: flex; gap: 8px; font-size: 12.5px; }
.detail-label { color: #7d8799; letter-spacing: 0.08em; flex-shrink: 0; }
.detail-value { color: #d5dee9; font-weight: 500; }
.episodes-section { padding: 40px 24px; background: #1a1f2b; border-top: 1px solid #3a4252; }
.section-heading { font-size: 20px; font-weight: 800; letter-spacing: 0.3em; color: #e8edf5; margin-bottom: 24px; display: flex; align-items: center; gap: 16px; }
.section-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #c62828, transparent); }
.episode-card-scroll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.episode-card { background: #141824; border: 1px solid #3a4252; padding: 16px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.2s, transform 0.2s; }
.episode-card:hover { border-color: #c62828; transform: translateY(-3px); }
.episode-number { font-size: 12px; font-weight: 700; color: #c62828; letter-spacing: 0.15em; }
.episode-title { font-size: 15px; font-weight: 600; color: #e8edf5; letter-spacing: 0.06em; }
.episode-summary { font-size: 12.5px; color: #7d8799; line-height: 1.6; flex: 1; }
.episode-duration { font-size: 11px; color: #aab4c4; letter-spacing: 0.1em; border-top: 1px dashed #3a4252; padding-top: 6px; }
.comments-section { padding: 40px 24px; background: #1e2532; border-top: 1px solid #3a4252; }
.comments-masonry { columns: 3 280px; column-gap: 16px; }
.comment-card { break-inside: avoid; background: #141824; border: 1px solid #3a4252; border-left: 4px solid #3a4252; padding: 14px 16px; margin-bottom: 16px; transition: border-left-color 0.2s; }
.comment-card:hover { border-left-color: #c62828; }
.comment-card:first-child { border-left-color: #c62828; padding: 20px; }
.comment-author { display: block; font-size: 13px; font-weight: 600; color: #e8edf5; letter-spacing: 0.1em; margin-bottom: 8px; }
.comment-text { font-size: 13px; color: #aab4c4; line-height: 1.75; }
.recommendation-region { padding: 40px 24px 20px; background: #1a1f2b; border-top: 1px solid #3a4252; }
.rec-heading { font-size: 18px; font-weight: 800; letter-spacing: 0.25em; color: #e8edf5; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.rec-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #c62828, transparent); }
.rec-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; max-width: 1400px; margin: 0 auto; }
.recommendation-region:nth-of-type(4) .rec-grid, .recommendation-region:nth-of-type(5) .rec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec-item { display: flex; flex-direction: column; gap: 8px; background: #141824; border: 1px solid #3a4252; padding: 10px; transition: border-color 0.2s, transform 0.2s; }
.rec-item:hover { border-color: #c62828; transform: translateY(-3px); }
.rec-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0f1219; }
.rec-item span[data-runtime="name"] { font-size: 14px; font-weight: 600; color: #e8edf5; letter-spacing: 0.06em; }
.rec-item span[data-runtime="blurb"] { font-size: 12.5px; color: #7d8799; line-height: 1.6; }
footer { background: #141824; border-top: 1px solid #3a4252; padding: 28px 24px 32px; }
.disclaimer { font-size: 12px; color: #5a6474; line-height: 1.8; margin-bottom: 20px; max-width: 800px; }
.friend-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 20px; }
.friend-links-label { font-size: 13px; font-weight: 700; color: #7d8799; letter-spacing: 0.15em; margin-right: 8px; }
.runtime-friend-link { font-size: 12.5px; color: #aab4c4; border: 1px solid #3a4252; padding: 4px 10px; border-radius: 2px; transition: all 0.2s; }
.runtime-friend-link:hover { color: #c62828; border-color: #c62828; }
.footer-links { display: flex; gap: 24px; border-top: 1px solid #3a4252; padding-top: 16px; }
.footer-links a { font-size: 13px; color: #7d8799; letter-spacing: 0.1em; transition: color 0.2s; }
.footer-links a:hover { color: #c62828; }
body.lights-off .movie-overview-hero, body.lights-off .episodes-section, body.lights-off .comments-section, body.lights-off .recommendation-region, body.lights-off footer { filter: brightness(0.6); }
body.lights-off .player-skin { filter: brightness(1.4); z-index: 10; }
body.lights-off header { filter: brightness(0.8); }
.player-skin:fullscreen { background: #000; padding: 0; }
.player-skin:fullscreen video { width: 100%; height: 100%; }
@media (max-width: 1024px) {.overview-layout { grid-template-columns: 1fr; gap: 24px; }
.poster-column { position: static; }
.poster-tear-wrapper { max-width: 420px; margin: 0 auto; }
.tagline-vertical { writing-mode: horizontal-tb; height: auto; border-right: none; border-bottom: 1px solid #3a4252; padding: 8px 0; margin-top: 8px; text-align: left; }
.synopsis-timeline-grid { grid-template-columns: 1fr; gap: 28px; }
.synopsis-block { border-right: none; padding-right: 0; border-bottom: 1px dashed #3a4252; padding-bottom: 24px; }
.cast-card-row { grid-template-columns: repeat(2, 1fr); }
.details-list { grid-template-columns: repeat(2, 1fr); }
.episode-card-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rec-grid { grid-template-columns: repeat(2, 1fr); }
.recommendation-region:nth-of-type(4) .rec-grid, .recommendation-region:nth-of-type(5) .rec-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 640px) {body { font-size: 13px; }
header { padding: 10px 16px; gap: 16px; flex-wrap: wrap; }
.brand-link { font-size: 16px; width: 100%; }
.category-nav { width: 100%; }
.movie-overview-hero { padding: 20px 16px 28px; }
.overview-layout { gap: 16px; }
.film-title-tear { font-size: 18px; letter-spacing: 0.14em; padding: 12px 12px 14px 18px; }
.info-column { padding: 20px 16px 24px; }
.cast-card-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.details-list { grid-template-columns: 1fr; gap: 6px; }
.episode-card-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.comments-masonry { columns: 1; }
.rec-grid { grid-template-columns: 1fr; }
.recommendation-region:nth-of-type(4) .rec-grid, .recommendation-region:nth-of-type(5) .rec-grid { grid-template-columns: 1fr; }
.player-controls { gap: 4px; }
.player-controls button { padding: 3px 6px; font-size: 10px; }
.status-meta { flex-wrap: wrap; }
.footer-links { 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}