* {box-sizing:border-box;margin:0;padding:0}
:root {
--bg:#0a0e1a;
--bg-2:#0e1424;
--panel:#111a2c;
--panel-2:#151f34;
--ink:#e8edf7;
--ink-dim:#8f9bb3;
--ink-soft:#b8c2d6;
--orange:#ff8a3d;
--neon:#ff3d8b;
--neon-2:#ff6fae;
--line:rgba(255,138,61,.22);
--stitch:rgba(255,61,139,.35);
--radius:8px;
--gap:14px;
--gap-s:12px;
--font-title:"Songti SC","STSong","Noto Serif SC",Georgia,"SimSun",serif;
--font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
html {-webkit-text-size-adjust:100%}
body {
background:
radial-gradient(1100px 520px at 12% -6%,rgba(255,61,139,.10),transparent 62%),
radial-gradient(900px 480px at 92% 4%,rgba(255,138,61,.09),transparent 60%),
var(--bg);
color:var(--ink);
font-family:var(--font-body);
font-size:13px;
line-height:1.55;
letter-spacing:.01em;
min-height:100vh;
}
img, video {display:block;max-width:100%}
a {color:var(--neon-2);text-decoration:none}
a:hover {color:var(--orange)}
ul, ol {list-style:none}
button, input, select {font:inherit;color:inherit}
h1, h2, h3 {font-family:var(--font-title);font-weight:800;letter-spacing:.02em}
.site-header {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:10px 14px;
padding:10px 16px;
background:linear-gradient(180deg,rgba(17,26,44,.96),rgba(10,14,26,.86));
border-bottom:1px solid var(--line);
position:sticky;
top:0;
z-index:40;
backdrop-filter:blur(6px);
}
.brand {
font-family:var(--font-title);
font-weight:800;
font-size:19px;
letter-spacing:.06em;
color:var(--ink);
text-decoration:none;
text-shadow:0 0 10px rgba(255,61,139,.55),0 0 22px rgba(255,138,61,.30);
}
a[data-contract="site-name"] {color:var(--ink);text-decoration:none}
a[data-contract="site-name"]:hover {color:var(--orange)}
.category-nav {
display:flex;
flex-wrap:wrap;
gap:6px;
margin-left:auto;
min-width:0;
}
a.runtime-category {
display:inline-block;
white-space:nowrap;
font-size:12px;
line-height:1.6;
padding:3px 10px;
border-radius:999px;
color:var(--ink-soft);
text-decoration:none;
background:rgba(255,255,255,.03);
border:1px solid var(--line);
transition:.18s;
}
a.runtime-category:hover {
color:#0a0e1a;
background:linear-gradient(120deg,var(--orange),var(--neon));
border-color:transparent;
}
.page-main {
padding:14px 16px 22px;
display:flex;
flex-direction:column;
gap:var(--gap);
max-width:1440px;
margin:0 auto;
}
.page-main>section {margin:0}
.section-title {
font-size:14px;
line-height:1.4;
color:var(--ink);
margin-bottom:8px;
padding-left:9px;
position:relative;
}
.section-title::before {
content:"";
position:absolute;
left:0;
top:.18em;
bottom:.18em;
width:3px;
border-radius:2px;
background:linear-gradient(180deg,var(--orange),var(--neon));
box-shadow:0 0 8px rgba(255,61,139,.6);
}
.movie-overview {
background:linear-gradient(160deg,var(--panel) 0%,var(--bg-2) 100%);
border:1px solid var(--line);
border-radius:var(--radius);
padding:14px;
display:flex;
flex-direction:column;
gap:var(--gap);
box-shadow:0 0 0 1px rgba(255,61,139,.06) inset,0 10px 28px -20px rgba(255,61,139,.5);
}
.overview-hero {
display:grid;
grid-template-columns:minmax(0,196px) minmax(0,1fr);
gap:var(--gap);
align-items:start;
}
.poster-shell {
position:relative;
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--stitch);
align-self:start;
line-height:0;
}
.poster-img {
width:100%;
height:auto;
aspect-ratio:9/16;
object-fit:cover;
border-radius:var(--radius);
}
.poster-glow {
position:absolute;
inset:0;
pointer-events:none;
border-radius:var(--radius);
background:
radial-gradient(120% 60% at 50% 108%,rgba(255,138,61,.35),transparent 62%),
linear-gradient(200deg,rgba(255,61,139,.20),transparent 55%);
mix-blend-mode:screen;
}
.hero-info {
min-width:0;
display:flex;
flex-direction:column;
gap:10px;
}
.movie-title {
font-size:24px;
line-height:1.2;
color:#fff;
text-shadow:0 0 12px rgba(255,61,139,.5),0 0 26px rgba(255,138,61,.28);
}
.movie-tagline {
font-size:13px;
color:var(--orange);
letter-spacing:.06em;
padding-left:9px;
border-left:2px solid var(--stitch);
}
.movie-seo {
font-size:12.5px;
color:var(--ink-dim);
line-height:1.6;
max-width:76ch;
}
.player-shell {
position:relative;
width:100%;
max-width:760px;
border:1px solid var(--stitch);
border-radius:var(--radius);
background:#05070d;
overflow:hidden;
box-shadow:0 0 22px -10px rgba(255,61,139,.55);
}
.player-video {
width:100%;
aspect-ratio:16/9;
background:#000;
border-radius:var(--radius) var(--radius) 0 0;
}
.player-controls {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
padding:7px 8px;
background:linear-gradient(180deg,rgba(21,31,52,.98),rgba(10,14,26,.98));
border-top:1px solid var(--line);
}
.ctrl-btn {
font-size:11.5px;
line-height:1.5;
padding:3px 9px;
border-radius:6px;
cursor:pointer;
color:var(--ink-soft);
background:rgba(255,255,255,.04);
border:1px solid var(--line);
transition:.16s;
}
.ctrl-btn:hover {color:#0a0e1a;background:linear-gradient(120deg,var(--orange),var(--neon));border-color:transparent}
.ctrl-btn.is-active {color:#0a0e1a;background:linear-gradient(120deg,var(--neon),var(--orange));border-color:transparent}
.ctrl-progress {
flex:1 1 110px;
min-width:0;
height:4px;
appearance:none;
-webkit-appearance:none;
border-radius:3px;
background:linear-gradient(90deg,var(--neon),var(--orange));
cursor:pointer;
}
.ctrl-volume {
flex:0 1 78px;
min-width:52px;
height:4px;
appearance:none;
-webkit-appearance:none;
border-radius:3px;
background:rgba(255,255,255,.16);
cursor:pointer;
}
.ctrl-progress::-webkit-slider-thumb, .ctrl-volume::-webkit-slider-thumb {
-webkit-appearance:none;
width:11px;height:11px;border-radius:50%;
background:var(--orange);
border:1px solid rgba(0,0,0,.5);
box-shadow:0 0 8px rgba(255,138,61,.8);
cursor:pointer;
}
.ctrl-progress::-moz-range-thumb, .ctrl-volume::-moz-range-thumb {
width:11px;height:11px;border:0;border-radius:50%;
background:var(--orange);
box-shadow:0 0 8px rgba(255,138,61,.8);
cursor:pointer;
}
.ctrl-speed {
font-size:11.5px;
padding:3px 6px;
border-radius:6px;
color:var(--ink-soft);
background:rgba(255,255,255,.04);
border:1px solid var(--line);
cursor:pointer;
}
.player-shell.theater-mode {
max-width:none;
width:100%;
box-shadow:0 0 40px -12px rgba(255,61,139,.75);
}
body.lights-off {background:#03050a}
body.lights-off .site-header, body.lights-off .site-footer {background:#05080f}
.cast-section {display:flex;flex-direction:column}
.cast-list {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
gap:8px;
}
.cast-card {
font-size:12.5px;
color:var(--ink-soft);
padding:7px 10px;
border-radius:var(--radius);
background:rgba(255,255,255,.03);
border:1px dashed var(--stitch);
position:relative;
transition:.16s;
}
.cast-card::before {
content:"";
position:absolute;
left:10px;right:10px;top:5px;
border-top:1px dashed rgba(255,138,61,.25);
}
.cast-card:hover {
color:#fff;
border-color:var(--orange);
background:rgba(255,138,61,.08);
}
.synopsis-columns {
display:grid;
grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
gap:var(--gap);
align-items:start;
}
.synopsis-text {
display:flex;
flex-direction:column;
gap:8px;
font-size:12.5px;
color:var(--ink-soft);
line-height:1.62;
}
.synopsis-still {align-self:start;min-width:0}
.still-frame {
position:relative;
width:100%;
aspect-ratio:16/10;
border-radius:var(--radius);
border:1px solid var(--stitch);
background:
radial-gradient(90% 70% at 20% 15%,rgba(255,138,61,.35),transparent 60%),
radial-gradient(80% 70% at 88% 80%,rgba(255,61,139,.42),transparent 62%),
linear-gradient(160deg,#16203a,#080c16);
overflow:hidden;
}
.still-frame::after {
content:"";
position:absolute;
inset:8px;
border:1px dashed rgba(255,255,255,.18);
border-radius:5px;
}
.status-row {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:8px;
}
.status-item {
display:flex;
flex-direction:column;
gap:2px;
padding:8px 10px;
border-radius:var(--radius);
background:rgba(255,255,255,.03);
border:1px solid var(--line);
border-left:2px solid var(--orange);
}
.status-key {font-size:11px;color:var(--ink-dim);letter-spacing:.08em}
.status-value {
font-family:var(--font-title);
font-weight:800;
font-size:16px;
color:var(--neon-2);
text-shadow:0 0 10px rgba(255,61,139,.5);
}
.details-grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
gap:6px 10px;
}
.detail-item {
display:flex;
gap:6px;
align-items:baseline;
font-size:12px;
padding:5px 8px;
border-radius:6px;
background:rgba(255,255,255,.02);
border-bottom:1px dashed rgba(255,138,61,.18);
}
.detail-item dt {color:var(--ink-dim);flex:0 0 auto;font-size:11.5px}
.detail-item dd {color:var(--ink);min-width:0}
.detail-item dd::before {content:"·";color:var(--stitch);margin-right:5px}
.timeline-track {
display:flex;
gap:10px;
overflow-x:auto;
padding:4px 2px 12px;
scroll-snap-type:x proximity;
scrollbar-color:var(--neon) rgba(255,255,255,.06);
}
.timeline-track::-webkit-scrollbar {height:6px}
.timeline-track::-webkit-scrollbar-track {background:rgba(255,255,255,.05);border-radius:3px}
.timeline-track::-webkit-scrollbar-thumb {background:linear-gradient(90deg,var(--neon),var(--orange));border-radius:3px}
.timeline-node {
flex:0 0 232px;
scroll-snap-align:start;
display:flex;
flex-direction:column;
gap:6px;
padding:10px;
border-radius:var(--radius);
background:linear-gradient(170deg,var(--panel-2),rgba(10,14,26,.9));
border:1px solid var(--line);
position:relative;
}
.timeline-node::before {
content:"";
position:absolute;
left:10px;right:10px;top:0;
height:2px;
border-radius:2px;
background:linear-gradient(90deg,var(--orange),var(--neon));
box-shadow:0 0 10px rgba(255,61,139,.55);
}
.timeline-timecode {
font-family:var(--font-title);
font-weight:800;
font-size:13px;
color:var(--orange);
letter-spacing:.04em;
}
.timeline-label {font-size:12px;color:var(--ink-soft);line-height:1.5}
.episodes-columns {display:block}
.episodes-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
align-items:start;
}
.episode-card {
display:flex;
flex-direction:column;
gap:5px;
padding:10px;
border-radius:var(--radius);
background:linear-gradient(165deg,var(--panel),rgba(10,14,26,.94));
border:1px solid var(--line);
border-top:2px solid var(--stitch);
transition:.16s;
}
.episode-card:hover {
border-color:var(--orange);
box-shadow:0 0 18px -8px rgba(255,138,61,.75);
}
.episode-number {
font-size:10.5px;
letter-spacing:.1em;
color:var(--neon-2);
}
.episode-title {
font-size:13.5px;
color:#fff;
line-height:1.35;
}
.episode-summary {
font-size:12px;
color:var(--ink-dim);
line-height:1.55;
}
.episode-duration {
font-size:11px;
color:var(--orange);
margin-top:auto;
padding-top:4px;
border-top:1px dashed rgba(255,138,61,.22);
}
.comments-masonry {
column-count:2;
column-gap:10px;
}
.comment-card {
break-inside:avoid;
display:block;
margin:0 0 10px;
padding:9px 10px;
border-radius:var(--radius);
background:rgba(255,255,255,.03);
border:1px solid var(--line);
border-left:2px solid var(--stitch);
}
.comment-nickname {
display:block;
font-size:11.5px;
font-weight:700;
color:var(--orange);
margin-bottom:4px;
letter-spacing:.04em;
}
.comment-text {font-size:12px;color:var(--ink-soft);line-height:1.58}
.recommend-region {
display:flex;
flex-direction:column;
}
.recommend-list {
display:grid;
gap:10px;
align-items:start;
}
.recommend-list-1 {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-list-2 {grid-template-columns:repeat(3,minmax(0,1fr))}
.recommend-list-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
a.recommend-card {
display:flex;
flex-direction:column;
gap:4px;
padding:7px;
border-radius:var(--radius);
background:linear-gradient(165deg,var(--panel-2),rgba(10,14,26,.94));
border:1px solid var(--line);
color:var(--ink);
text-decoration:none;
transition:.16s;
}
a.recommend-card:hover {
color:var(--ink);
border-color:var(--neon);
box-shadow:0 0 18px -8px rgba(255,61,139,.85);
transform:translateY(-1px);
}
[data-runtime="recommendation"] img {
width:100%;
aspect-ratio:16/9;
height:auto;
object-fit:cover;
border-radius:5px;
border:1px solid rgba(255,255,255,.07);
}
.recommend-name {
font-size:12.5px;
font-weight:700;
color:#fff;
line-height:1.35;
}
.recommend-blurb {
font-size:11.5px;
color:var(--ink-dim);
line-height:1.5;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.site-footer {
margin-top:16px;
padding:14px 16px 18px;
background:linear-gradient(0deg,rgba(17,26,44,.96),rgba(10,14,26,.7));
border-top:1px solid var(--line);
display:flex;
flex-direction:column;
gap:10px;
}
.footer-nav {display:flex;flex-wrap:wrap;gap:12px}
a[data-contract="footer-home"], a[data-contract="footer-sitemap"] {
font-size:12px;
color:var(--ink-soft);
text-decoration:none;
border-bottom:1px dashed rgba(255,138,61,.35);
padding-bottom:1px;
}
a[data-contract="footer-home"]:hover, a[data-contract="footer-sitemap"]:hover {color:var(--orange);border-bottom-color:var(--orange)}
.friend-links {
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px 8px;
}
.friend-links-label {
font-size:11.5px;
color:var(--ink-dim);
letter-spacing:.08em;
margin-right:2px;
}
a.runtime-friend-link {
font-size:11.5px;
white-space:nowrap;
padding:2px 8px;
border-radius:999px;
color:var(--ink-soft);
text-decoration:none;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.07);
transition:.16s;
}
a.runtime-friend-link:hover {
color:#0a0e1a;
background:linear-gradient(120deg,var(--orange),var(--neon));
border-color:transparent;
}
.disclaimer {
font-size:11.5px;
color:var(--ink-dim);
line-height:1.6;
max-width:100ch;
}
.player .is-active, button.is-active {color:#0a0e1a}
input.progress {accent-color:var(--neon)}
input.volume {accent-color:var(--orange)}
select.speed {accent-color:var(--orange)}
.click {cursor:pointer}
.change {transition:.18s}
.light {filter:none}
.mute {opacity:.75}
.play {}
.pip {}
.speed {}
.theater {}
.timeupdate {}
.fullscreen {position:relative;z-index:60}
.theater-mode {}
@media (max-width:1024px){.overview-hero {grid-template-columns:minmax(0,168px) minmax(0,1fr)}
.episodes-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.recommend-list-1, .recommend-list-2, .recommend-list-3 {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){body {font-size:12.5px}
.page-main {padding:12px 12px 18px;gap:12px}
.movie-overview {padding:12px;gap:12px}
.overview-hero {grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:12px}
.movie-title {font-size:19px}
.movie-tagline {font-size:12px}
.movie-seo {font-size:12px}
.player-shell {max-width:none}
.synopsis-columns {grid-template-columns:minmax(0,1fr)}
.synopsis-still {max-width:420px}
.episodes-grid {grid-template-columns:minmax(0,1fr)}
.comments-masonry {column-count:1}
.recommend-list-1, .recommend-list-2, .recommend-list-3 {grid-template-columns:repeat(2,minmax(0,1fr))}
.details-grid {grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.site-header {padding:9px 12px}
.brand {font-size:17px}}
@media (max-width:480px){.overview-hero {grid-template-columns:minmax(0,1fr)}
.poster-shell {max-width:210px}
.hero-info {gap:9px}
.player-controls {gap:5px;padding:6px}
.ctrl-btn {font-size:11px;padding:3px 7px}
.ctrl-progress {flex:1 1 100%}
.ctrl-volume {flex:1 1 60px}
.recommend-list-1, .recommend-list-2, .recommend-list-3 {grid-template-columns:minmax(0,1fr)}
.cast-list {grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.timeline-node {flex:0 0 200px}
.details-grid {grid-template-columns:minmax(0,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}