* {margin:0;padding:0;box-sizing:border-box}
:root {--bg:#1a1f2b;--bg-soft:#222838;--surface:#2a3142;--surface-2:#323a4e;--surface-3:#3a4458;--line:#3b4459;--line-soft:#2e3648;--text:#e8ecf4;--text-muted:#a0aabb;--text-dim:#7a849c;--accent:#ff7a2f;--accent-hover:#ff9457;--accent-glow:rgba(255,122,47,.25);--radius:10px;--radius-sm:6px;--radius-lg:16px;--maxw:1280px;--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif}
html {scroll-behavior:smooth;font-size:16px}
body {background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.6;font-size:.95rem;min-height:100vh;display:flex;flex-direction:column}
body.lights-dimmed main, body.lights-dimmed header, body.lights-dimmed footer {filter:brightness(.45) saturate(.9) contrast(1.05);transition:filter .35s ease}
body.lights-dimmed .player-shell {filter:none;box-shadow:0 0 60px rgba(255,122,47,.35)}
img {display:block;max-width:100%}
a {color:var(--accent);text-decoration:none;transition:color .2s ease}
a:hover {color:var(--accent-hover)}
a:focus-visible {outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
ul, dl, dd {margin:0;padding:0;list-style:none}
button {font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input[type="range"] {accent-color:var(--accent)}
main {flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:1.25rem 1.5rem 2rem;display:flex;flex-direction:column;gap:2.25rem}
header {position:sticky;top:0;z-index:100;background:rgba(26,31,43,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft);padding:.6rem 1.5rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap;box-shadow:0 2px 12px rgba(0,0,0,.35)}
header a[data-contract="site-name"] {font-weight:800;font-size:1.25rem;letter-spacing:.02em;color:var(--text);text-decoration:none;transition:color .2s}
header a[data-contract="site-name"]:hover {color:var(--accent)}
header nav[data-contract="categories"] {display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;flex:1;min-width:200px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.runtime-category {display:inline-block;padding:.3rem .85rem;border-radius:20px;background:var(--surface);color:var(--text-muted);font-size:.82rem;font-weight:500;white-space:nowrap;text-decoration:none;transition:background .2s,color .2s;border:1px solid transparent}
.runtime-category:hover {background:var(--accent);color:#fff;border-color:var(--accent)}
.movie-detail-section {background:var(--surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.3);border:1px solid var(--line-soft)}
.movie-info-layout {display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:0}
.movie-media-col {padding:1.5rem;background:var(--bg-soft);display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.poster-frame {width:100%;max-width:300px;margin:0 auto;border-radius:var(--radius);overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.45);aspect-ratio:2/3;background:linear-gradient(135deg,#2a3142,#1a1f2b)}
.hero-poster {width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.movie-info-col {padding:1.75rem 2rem 1.75rem 1.75rem;display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.movie-title {font-size:1.75rem;font-weight:800;line-height:1.25;color:var(--text);letter-spacing:-.01em;margin:0}
.movie-tagline {color:var(--accent);font-size:.95rem;font-weight:500;margin-top:.25rem;letter-spacing:.02em}
.synopsis-block {display:flex;flex-direction:column;gap:.6rem}
.block-heading {font-size:1.1rem;font-weight:700;color:var(--text);position:relative;padding-left:.85rem;margin-bottom:.25rem;letter-spacing:.04em}
.block-heading::before {content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:4px;border-radius:2px;background:var(--accent)}
.synopsis-paragraph {font-size:.9rem;color:var(--text-muted);line-height:1.75;text-align:justify}
.details-block {padding-top:.25rem}
.details-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem .75rem;background:var(--bg-soft);border-radius:var(--radius);padding:1rem 1.25rem;border:1px solid var(--line-soft)}
.detail-item {display:flex;flex-direction:column;gap:.1rem;min-width:0}
.detail-item dt {font-size:.72rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}
.detail-item dd {font-size:.9rem;color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rating-highlight {color:var(--accent) !important;font-weight:800;font-size:1.15rem !important}
.cast-block {display:flex;flex-direction:column;gap:.6rem}
.cast-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.cast-card {display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.9rem .5rem;background:var(--bg-soft);border-radius:var(--radius);border:1px solid var(--line-soft);text-align:center;transition:transform .2s,background .2s,border-color .2s}
.cast-card:hover {transform:translateY(-2px);background:var(--surface-2);border-color:var(--line)}
.cast-avatar {width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#e85d04);display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:#fff;box-shadow:0 4px 10px rgba(255,122,47,.3);margin-bottom:.3rem}
.cast-name {font-size:.9rem;font-weight:600;color:var(--text)}
.cast-role {font-size:.75rem;color:var(--text-dim)}
.episode-status-block {margin-top:.25rem}
.episode-status-text {display:inline-block;background:var(--accent);color:#fff;padding:.35rem .9rem;border-radius:20px;font-size:.8rem;font-weight:600;letter-spacing:.03em;box-shadow:0 2px 8px var(--accent-glow)}
.player-section {width:100%}
.player-shell {position:relative;width:100%;max-width:900px;margin:0 auto;background:var(--bg-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.5);border:1px solid var(--line-soft)}
.player-shell video {display:block;width:100%!important;height:auto!important;background:#000}
.player-controls {display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--surface);border-top:1px solid var(--line-soft);flex-wrap:wrap}
.player-controls button {padding:.3rem .7rem;border-radius:6px;background:var(--bg-soft);color:var(--text-muted);font-size:.8rem;border:1px solid var(--line-soft);transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.player-controls button:hover {color:var(--text);background:var(--surface-2);border-color:var(--line)}
.player-controls button.playing {color:var(--accent);border-color:var(--accent)}
.player-controls button.muted {color:var(--accent);border-color:var(--accent)}
.player-controls button.volume-changed {color:var(--accent);border-color:var(--accent)}
.player-controls button.speed-changed {color:var(--accent);border-color:var(--accent)}
.player-controls button.pip-active {color:var(--accent);border-color:var(--accent)}
.player-controls button.fullscreen-active {color:var(--accent);border-color:var(--accent)}
.player-controls button.theater-active {color:var(--accent);border-color:var(--accent)}
.player-controls button.lights-active {color:var(--accent);border-color:var(--accent)}
.player-controls input[type="range"] {flex:1;min-width:120px;height:4px;accent-color:var(--accent)}
.player-shell.theater-mode {position:fixed;inset:0;z-index:200;max-width:none;border-radius:0;display:flex;flex-direction:column;justify-content:center;background:#000;border:none}
.player-shell.theater-mode video {max-height:100vh}
.timeline-section {background:var(--surface);border-radius:var(--radius-lg);padding:1.75rem 1.5rem;border:1px solid var(--line-soft)}
.timeline-list {position:relative;margin-top:1.25rem;padding-left:1rem}
.timeline-list::before {content:"";position:absolute;left:0;top:.2rem;bottom:.2rem;width:2px;background:linear-gradient(to bottom,var(--accent),var(--line))}
.timeline-item {position:relative;padding:.35rem 0 .35rem 1.75rem;display:flex;flex-direction:column;gap:.1rem}
.timeline-item::before {content:"";position:absolute;left:-5px;top:.75rem;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.timeline-item:nth-child(odd)::before {background:var(--text-dim);box-shadow:0 0 0 3px rgba(160,170,187,.15)}
.timeline-time {font-size:.78rem;font-weight:700;color:var(--accent);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.timeline-label {font-size:.9rem;color:var(--text-muted);line-height:1.5}
.episodes-section {background:var(--surface);border-radius:var(--radius-lg);padding:1.75rem 1.5rem;border:1px solid var(--line-soft)}
.episodes-scroll {display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1.25rem}
.episode-card {background:var(--bg-soft);border-radius:var(--radius);padding:1rem;border:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.3rem;transition:border-color .2s,transform .2s;min-width:0}
.episode-card:hover {border-color:var(--accent);transform:translateY(-2px)}
.episode-number {font-size:.72rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.episode-title {font-size:.95rem;font-weight:600;color:var(--text);line-height:1.3;margin:0}
.episode-summary {font-size:.78rem;color:var(--text-muted);line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.episode-duration {font-size:.72rem;color:var(--text-dim);margin-top:.2rem}
.comments-section {background:var(--surface);border-radius:var(--radius-lg);padding:1.75rem 1.5rem;border:1px solid var(--line-soft)}
.comments-masonry {display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1.25rem;align-items:start}
.comment-card {background:var(--bg-soft);border-radius:var(--radius);padding:1rem;border:1px solid var(--line-soft);display:flex;flex-direction:column;gap:.4rem;transition:border-color .2s}
.comment-card:hover {border-color:var(--line)}
.comment-nickname {font-size:.85rem;font-weight:600;color:var(--text)}
.comment-text {font-size:.8rem;color:var(--text-muted);line-height:1.6}
.recommendation-region {background:var(--surface);border-radius:var(--radius-lg);padding:1.75rem 1.5rem;border:1px solid var(--line-soft)}
.recommendation-title {font-size:1.1rem;font-weight:700;color:var(--text);letter-spacing:.02em;margin-bottom:1.25rem}
.recommendation-list {display:grid;gap:1.25rem;align-items:start}
.recommendation-region[data-recommendation-region="1"] .recommendation-list {grid-template-columns:repeat(4,1fr)}
.recommendation-region[data-recommendation-region="2"] .recommendation-list {grid-template-columns:repeat(3,1fr)}
.recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:repeat(5,1fr)}
a.recommendation-item {display:flex;flex-direction:column;gap:.4rem;background:var(--bg-soft);border-radius:var(--radius);padding:.75rem;border:1px solid var(--line-soft);text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s,background .2s;min-width:0;height:auto}
a.recommendation-item:hover {border-color:var(--accent);transform:translateY(-2px);background:var(--surface-2)}
a.recommendation-item img {width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);background:var(--line-soft)}
a.recommendation-item [data-runtime="name"] {font-size:.85rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.recommendation-item [data-runtime="blurb"] {font-size:.75rem;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
footer {background:var(--surface);border-top:1px solid var(--line-soft);margin-top:auto;padding:1.5rem 1.5rem 1rem}
.footer-content {max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.friend-links-wrap {display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;font-size:.82rem}
.friend-links-label {color:var(--text-dim);white-space:nowrap}
a.runtime-friend-link {color:var(--text-muted);text-decoration:none;font-size:.8rem;transition:color .2s}
a.runtime-friend-link:hover {color:var(--accent);text-decoration:underline}
.disclaimer-text {color:var(--text-dim);font-size:.72rem;line-height:1.6;text-align:justify}
.footer-links {display:flex;gap:1.25rem}
a.footer-link {color:var(--text-muted);text-decoration:none;font-size:.82rem;transition:color .2s}
a.footer-link:hover {color:var(--accent);text-decoration:underline}
@media (max-width:1100px){.movie-info-layout {grid-template-columns:minmax(220px,260px) 1fr}
.details-grid {grid-template-columns:repeat(3,1fr)}
.episodes-scroll {grid-template-columns:repeat(3,1fr)}
.comments-masonry {grid-template-columns:repeat(3,1fr)}
.recommendation-region[data-recommendation-region="1"] .recommendation-list {grid-template-columns:repeat(3,1fr)}
.recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:repeat(4,1fr)}}
@media (max-width:900px){main {padding:1rem}
.movie-info-layout {grid-template-columns:1fr}
.movie-media-col {padding:1rem;align-items:center}
.poster-frame {max-width:240px}
.movie-info-col {padding:1.25rem}
.cast-grid {grid-template-columns:repeat(4,1fr)}
.episodes-scroll {grid-template-columns:repeat(2,1fr)}
.comments-masonry {grid-template-columns:repeat(2,1fr)}
.recommendation-region[data-recommendation-region="1"] .recommendation-list, .recommendation-region[data-recommendation-region="2"] .recommendation-list {grid-template-columns:repeat(2,1fr)}
.recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:repeat(3,1fr)}
.player-shell {max-width:100%}}
@media (max-width:640px){body {font-size:.9rem}
header {padding:.5rem 1rem;gap:1rem}
main {padding:.75rem;gap:1.5rem}
.movie-title {font-size:1.35rem}
.movie-info-col {padding:1rem}
.details-grid {grid-template-columns:repeat(2,1fr)}
.cast-grid {grid-template-columns:repeat(2,1fr)}
.episodes-scroll {grid-template-columns:1fr}
.comments-masonry {grid-template-columns:1fr}
.recommendation-region[data-recommendation-region="1"] .recommendation-list, .recommendation-region[data-recommendation-region="2"] .recommendation-list, .recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:repeat(2,1fr)}
.timeline-section, .episodes-section, .comments-section, .recommendation-region {padding:1rem}
.player-controls {gap:.35rem}
.player-controls button {padding:.25rem .5rem;font-size:.75rem}
.player-controls input[type="range"] {min-width:80px}}
@media (max-width:420px){.recommendation-region[data-recommendation-region="1"] .recommendation-list, .recommendation-region[data-recommendation-region="2"] .recommendation-list, .recommendation-region[data-recommendation-region="3"] .recommendation-list {grid-template-columns:1fr}
.cast-grid {grid-template-columns:repeat(2,1fr)}
.friend-links-wrap {gap:.3rem .5rem}}
.click, .x {transition:transform .1s ease}
.click:active, .x:active {transform:scale(.95)}
.input:focus {outline:2px solid var(--accent)}
.light {transition:filter .3s}
.lights-active {color:var(--accent)!important}
.play, .player {transition:background .2s}
.progress {transition:width .1s linear}
.speed {font-variant-numeric:tabular-nums}
.theater {cursor:zoom-in}
.theater-active {cursor:zoom-out}
.timeupdate {pointer-events:auto}
.volume {transition:color .2s}
.mute {transition:color .2s}
.pip {transition:color .2s}
.fullscreen {transition:color .2s}
@supports (backdrop-filter: blur(4px)){header {backdrop-filter:blur(12px)}}

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}