*, *::before, *::after {box-sizing:border-box;margin:0;padding:0}
html {scroll-behavior:smooth}
body {background:#05070d;color:#c8d6e5;font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;line-height:1.5;overflow-x:hidden}
a {color:inherit;text-decoration:none}
ul, ol {list-style:none}
img, video {display:block;max-width:100%}
button {font:inherit;background:none;border:none;color:inherit;cursor:pointer;padding:.25rem .5rem}
.brand {display:inline-block;font-size:1.5rem;font-weight:800;letter-spacing:.1em;background:linear-gradient(135deg,#00d4ff,#9b59b6);-webkit-background-clip:text;background-clip:text;color:transparent;padding:1rem 1.5rem;text-transform:uppercase}
.brand:hover {filter:brightness(1.3)}
header {background:#0a0e17;border-bottom:1px solid #1c2434;position:sticky;top:0;z-index:100}
.category-nav {display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem 1.5rem 1rem}
.runtime-category {display:inline-block;padding:.2rem .6rem;font-size:.8rem;color:#7a8ba8;border:1px solid transparent;border-radius:1rem;white-space:nowrap;transition:all .2s}
.runtime-category:hover {color:#00d4ff;border-color:#00d4ff33;background:#00d4ff0d}
.movie-ov {display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:2rem;padding:2rem 4%;max-width:1400px;margin:0 auto;background:linear-gradient(180deg,#0a0e17 0%,#0d1220 100%);border-bottom:1px solid #1c2434;position:relative}
.movie-ov::before {content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 20% 20%,#00d4ff0d 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,#9b59b60d 0%,transparent 50%);pointer-events:none}
.poster-shell {position:relative;align-self:start}
.poster-img {width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:8px;box-shadow:0 0 30px #00d4ff22,0 10px 40px #00000088;border:1px solid #1c2434}
.ov-content {display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.movie-title {font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:#e8f0fe;letter-spacing:.05em;line-height:1.3;text-shadow:0 0 20px #00d4ff44}
.tagline {font-size:1rem;color:#9b59b6;font-style:italic;border-left:3px solid #9b59b6;padding-left:1rem;background:linear-gradient(90deg,#9b59b622,transparent);padding:.5rem 1rem;border-radius:0 4px 4px 0}
.section-label {font-size:.9rem;font-weight:600;color:#00d4ff;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.section-label::after {content:"";flex:1;height:1px;background:linear-gradient(90deg,#00d4ff44,transparent)}
.cast-group, .synopsis-group, .details-group, .ep-status {background:transparent;border:none;box-shadow:none;padding:0}
.actor-list {display:flex;flex-wrap:wrap;gap:.5rem}
.actor-list li {font-size:.9rem;color:#e8f0fe;background:#1c2434;padding:.3rem .8rem;border-radius:2rem;border:1px solid #2a3548;transition:all .2s}
.actor-list li:hover {border-color:#00d4ff;color:#00d4ff;transform:translateY(-2px)}
.synopsis-group p {font-size:.9rem;color:#a0b0c4;margin-bottom:.5rem;text-align:justify}
.status-meta {display:flex;gap:1rem;margin-bottom:.8rem}
.current-ep {color:#00d4ff;font-weight:600;font-size:.95rem;background:#00d4ff1a;padding:.2rem .8rem;border-radius:2rem;border:1px solid #00d4ff33}
.total-ep {color:#7a8ba8;font-size:.85rem;padding:.2rem .5rem}
.player-wrapper {position:relative;border-radius:8px;overflow:hidden;background:#000;border:1px solid #1c2434;box-shadow:0 0 30px #00000066}
.player-wrapper video {display:block;background:#000}
.player-controls {display:flex;flex-wrap:wrap;gap:.25rem;padding:.5rem;background:#0a0e17cc;backdrop-filter:blur(4px);border-top:1px solid #1c2434}
.player-controls button {font-size:.75rem;color:#7a8ba8;border-radius:4px;transition:all .2s}
.player-controls button:hover {color:#00d4ff;background:#00d4ff1a}
.detail-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}
.detail-item {display:flex;flex-direction:column;gap:.1rem;background:#0a0e17;padding:.5rem .8rem;border-radius:4px;border-left:2px solid #00d4ff33}
.detail-item dt {font-size:.7rem;color:#5a6b80;text-transform:uppercase}
.detail-item dd {font-size:.9rem;color:#c8d6e5;font-weight:500}
.timeline-section {padding:2rem 4%;background:#080b12;border-bottom:1px solid #1c2434}
.timeline-h-scroll {overflow-x:auto;padding-bottom:1rem;scrollbar-width:thin;scrollbar-color:#00d4ff33 #0a0e17}
.timeline-h-scroll::-webkit-scrollbar {height:6px}
.timeline-h-scroll::-webkit-scrollbar-track {background:#0a0e17}
.timeline-h-scroll::-webkit-scrollbar-thumb {background:#00d4ff33;border-radius:3px}
.timeline-track {display:flex;gap:0;min-width:max-content;position:relative;padding:2rem 0 1rem}
.timeline-track::before {content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:linear-gradient(90deg,#00d4ff,#9b59b6,#00d4ff);opacity:.3;border-radius:1px}
.timeline-node {display:flex;flex-direction:column;align-items:center;min-width:160px;max-width:180px;text-align:center;padding:0 1rem;position:relative}
.timecode {font-family:ui-monospace,monospace;font-size:.7rem;color:#00d4ff;background:#00d4ff0d;padding:.2rem .5rem;border-radius:2rem;border:1px solid #00d4ff22;margin-bottom:.5rem}
.node-dot {width:14px;height:14px;border-radius:50%;background:#0a0e17;border:3px solid #00d4ff;box-shadow:0 0 15px #00d4ff,0 0 5px #00d4ffaa;margin:.5rem 0;position:relative;z-index:1;transition:all .3s}
.timeline-node:hover .node-dot {transform:scale(1.3);border-color:#9b59b6;box-shadow:0 0 20px #9b59b6}
.label {font-size:.75rem;color:#7a8ba8;line-height:1.4;background:#0a0e17;padding:.3rem .5rem;border-radius:4px;border:1px solid #1c2434}
.timeline-node:hover .label {color:#e8f0fe;border-color:#00d4ff44}
.episodes-section {padding:2rem 4%;background:#0a0e17;border-bottom:1px solid #1c2434}
.episode-list {display:grid;grid-template-columns:1fr;gap:.6rem}
.episode-card {display:flex;gap:1rem;background:#0d1220;border:1px solid #1c2434;border-radius:6px;padding:1rem;transition:all .3s;position:relative;overflow:hidden}
.episode-card::before {content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#00d4ff,#9b59b6);opacity:0;transition:opacity .3s}
.episode-card:hover {background:#111a2e;border-color:#00d4ff44;transform:translateX(4px)}
.episode-card:hover::before {opacity:1}
.ep-number {font-size:2rem;font-weight:800;color:#00d4ff33;min-width:2.5rem;display:flex;align-items:center;justify-content:center;transition:color .3s}
.episode-card:hover .ep-number {color:#00d4ff}
.ep-info {flex:1;min-width:0}
.ep-title {font-size:1.1rem;color:#e8f0fe;margin-bottom:.3rem}
.ep-summary {font-size:.85rem;color:#7a8ba8;line-height:1.5;max-height:2.7em;overflow:hidden;transition:max-height .3s}
.episode-card:hover .ep-summary {max-height:10em;color:#a0b0c4}
.ep-duration {font-size:.75rem;color:#5a6b80;background:#1c2434;padding:.1rem .5rem;border-radius:2rem;display:inline-block;margin-top:.4rem}
.cast-section {padding:2rem 4%;background:#080b12;border-bottom:1px solid #1c2434}
.cast-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.cast-card {background:linear-gradient(180deg,#0d1220,#0a0e17);border:1px solid #1c2434;border-radius:8px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:transform .3s,border-color .3s;position:relative;overflow:hidden}
.cast-card::after {content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,#00d4ff0d,transparent 70%);pointer-events:none}
.cast-card:hover {transform:translateY(-4px);border-color:#00d4ff44}
.cast-photo {width:100%;aspect-ratio:2/3;border-radius:4px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.cast-card:nth-child(1) .cast-photo {background:linear-gradient(135deg,#1a1a2e,#16213e)}
.cast-card:nth-child(2) .cast-photo {background:linear-gradient(135deg,#0f3460,#1a1a2e)}
.cast-card:nth-child(3) .cast-photo {background:linear-gradient(135deg,#2d1b69,#1a1a2e)}
.cast-card:nth-child(4) .cast-photo {background:linear-gradient(135deg,#168aad,#1a1a2e)}
.cast-name {font-size:1.1rem;font-weight:600;color:#e8f0fe;z-index:1}
.cast-role {font-size:.8rem;color:#7a8ba8;z-index:1}
.comments-section {padding:3rem 4% 4rem;background:#0a0e17;border-bottom:1px solid #1c2434}
.comments-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.comment-bubble {background:#0d1220;border:1px solid #1c2434;border-radius:12px;padding:1rem;position:relative;transition:border-color .3s}
.comment-bubble::after {content:"";position:absolute;bottom:12px;left:-8px;width:16px;height:16px;background:#0d1220;border-left:1px solid #1c2434;border-bottom:1px solid #1c2434;transform:rotate(45deg);border-radius:0 0 0 2px;z-index:0}
.comment-bubble:hover {border-color:#9b59b622}
.comment-author {display:inline-block;font-size:.85rem;font-weight:600;color:#00d4ff;margin-bottom:.5rem;background:#00d4ff0d;padding:.2rem .6rem;border-radius:2rem;position:relative;z-index:1}
.comment-text {font-size:.85rem;color:#a0b0c4;line-height:1.6;position:relative;z-index:1}
.recommendation-region {padding:1.5rem 4%;background:#0d1220;border-bottom:1px solid #1c2434}
.region-title {font-size:1.05rem;font-weight:600;color:#e8f0fe;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.region-title::after {content:"";flex:1;height:1px;background:linear-gradient(90deg,#9b59b644,transparent)}
.rec-block {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.rec-block a[data-runtime="recommendation"] {display:flex;flex-direction:column;gap:.3rem;background:#0a0e17;border:1px solid #1c2434;border-radius:6px;padding:.5rem;transition:all .3s;position:relative;overflow:hidden}
.rec-block a[data-runtime="recommendation"]:hover {border-color:#00d4ff44;transform:translateY(-3px);box-shadow:0 4px 20px #00000066}
.rec-block a[data-runtime="recommendation"] img {width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#1c2434}
.rec-block a[data-runtime="recommendation"] [data-runtime="name"] {font-size:.9rem;font-weight:600;color:#e8f0fe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-block a[data-runtime="recommendation"] [data-runtime="blurb"] {font-size:.75rem;color:#7a8ba8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}
.rec-block a[data-runtime="recommendation"]:hover [data-runtime="name"] {color:#00d4ff;text-shadow:0 0 10px #00d4ff44}
.rec-block a[data-runtime="recommendation"]:hover [data-runtime="blurb"] {color:#a0b0c4}
footer {background:#05070d;border-top:1px solid #1c2434;padding:2rem 4% 1.5rem}
.footer-contract {display:flex;gap:1.5rem;margin-bottom:1rem}
.footer-contract a {font-size:.9rem;color:#7a8ba8;transition:color .2s}
.footer-contract a:hover {color:#00d4ff}
.friend-links {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1rem}
.friend-links-label {font-size:.85rem;color:#5a6b80;font-weight:600}
.runtime-friend-link {font-size:.8rem;color:#5a6b80;transition:color .2s}
.runtime-friend-link:hover {color:#9b59b6}
footer p {font-size:.75rem;color:#3a4a5d;line-height:1.6;max-width:60em}
.theater-mode {position:fixed;inset:0;z-index:1000;background:#000;display:flex;align-items:center;justify-content:center}
.theater-mode video {max-height:100vh;width:auto;aspect-ratio:16/9}
.theater-mode .player-controls {position:absolute;bottom:0;left:0;right:0;background:#000000cc}
.light-off body {background:#000}
.light-off .player-wrapper {box-shadow:none}
.light-off .player-controls {opacity:.2;transition:opacity .3s}
.light-off .player-wrapper:hover .player-controls {opacity:1}
@media(max-width:1024px){.movie-ov {grid-template-columns:260px 1fr;gap:1.5rem}
.rec-block {grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}
@media(max-width:900px){.movie-ov {grid-template-columns:1fr}
.poster-shell {max-width:300px;margin:0 auto}
.ov-content {min-width:0}
.detail-list {grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.cast-grid {grid-template-columns:repeat(2,1fr)}
.comments-grid {grid-template-columns:1fr}}
@media(max-width:640px){header {padding:0}
.brand {font-size:1.2rem;padding:.8rem 1rem}
.category-nav {padding:.3rem 1rem .8rem;gap:.15rem}
.runtime-category {font-size:.7rem;padding:.15rem .4rem}
.movie-ov, .timeline-section, .episodes-section, .cast-section, .comments-section, .recommendation-region, footer {padding-left:1rem;padding-right:1rem}
.movie-title {font-size:1.3rem}
.tagline {font-size:.85rem}
.detail-list {grid-template-columns:repeat(2,1fr)}
.episode-list {grid-template-columns:1fr}
.episode-card {flex-direction:row;padding:.8rem}
.ep-number {font-size:1.5rem;min-width:2rem}
.cast-grid {grid-template-columns:1fr 1fr;gap:.8rem}
.cast-card {padding:.8rem}
.comments-grid {grid-template-columns:1fr}
.rec-block {grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem}
.player-controls {gap:.1rem}
.player-controls button {font-size:.65rem;padding:.2rem .4rem}}
@media(max-width:400px){.movie-ov {grid-template-columns:1fr}
.poster-shell {max-width:240px}
.detail-list {grid-template-columns:1fr}
.cast-grid {grid-template-columns:1fr}
.rec-block {grid-template-columns:1fr 1fr}
.rec-block a[data-runtime="recommendation"] [data-runtime="blurb"] {display:none}}

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}
