:root {
  --bg: #eef4f8;
  --panel: #ffffff;
  --line: #d5e0e8;
  --text: #1e2a35;
  --muted: #687887;
  --blue: #376f95;
  --blue-soft: #e8f2f7;
  --slate: #f5f8fa;
  --coral: #c96f5b;
  --shadow: 0 14px 32px rgba(30,42,53,.09);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: linear-gradient(180deg,#f8fbfd 0%,#edf3f7 100%); font: 16px/1.6 "Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
a { color: inherit; text-decoration: none; }
img { display:block; width:100%; }
.topbar,.shell,.footer { width:min(1380px,calc(100vw - 40px)); margin:0 auto; }
.topbar { display:grid; grid-template-columns:260px 1fr 300px; gap:18px; align-items:center; padding:22px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand span { display:grid; place-items:center; width:46px; aspect-ratio:1; background:var(--blue); color:#fff; font-weight:900; }
.brand strong,.hero-main h1,.section-head h1,.section-head h2,.library-head h1,.detail-info h1 { letter-spacing:0; }
.brand strong { font-size:1.32rem; }
.nav { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.nav a,.search input,.query-row a,.filter,select,.tag-row a,.episode-grid button,.side-panel a { border:1px solid var(--line); background:var(--panel); }
.nav a { padding:10px 14px; color:var(--muted); font-weight:700; }
.nav a:hover,.nav a[aria-current="page"],.filter.active { color:#fff; background:var(--blue); border-color:var(--blue); }
.search input,select { width:100%; min-height:44px; padding:0 14px; color:var(--text); }
.shell { padding:8px 0 56px; }
.index-hero,.double-layout,.guide-grid,.library-head,.library-layout,.detail-stage { display:grid; gap:18px; }
.index-hero { grid-template-columns:1fr 280px; }
.hero-main,.hero-side,.panel,.guide-grid article,.library-head,.side-panel,.detail-stage { background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }
.hero-main { display:grid; grid-template-columns:330px 1fr; min-height:430px; }
.hero-main>img { height:100%; object-fit:cover; }
.hero-copy { display:grid; align-content:center; padding:32px; }
.hero-copy span,.section-head span,.library-head span,.detail-info>span { color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.08em; }
.hero-main h1,.detail-info h1 { margin:10px 0 14px; font-size:clamp(2.2rem,4vw,3.6rem); line-height:1.06; }
.hero-copy p,.section-head p,.guide-grid p,.footer p,.footer a,.copy small,.copy em,.side-panel p,.detail-copy p,.original { color:var(--muted); }
.meta { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
.meta b { padding:8px 12px; background:var(--blue-soft); color:var(--blue); }
.hero-copy a { width:max-content; padding:12px 18px; color:#fff; background:var(--coral); font-weight:800; }
.hero-side { display:grid; gap:14px; padding:14px; }
.hero-side a { display:grid; grid-template-columns:72px 1fr; gap:12px; align-items:center; min-height:86px; padding:10px; border:1px solid var(--line); background:var(--slate); }
.hero-side img { aspect-ratio:3/4; object-fit:cover; }
.query-row { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:18px 0; }
.query-row a { padding:12px 14px; text-align:center; font-weight:700; }
.panel,.library-head,.side-panel,.detail-stage { padding:20px; }
.section-head { margin-bottom:18px; }
.section-head h1,.section-head h2,.library-head h1 { margin:6px 0 8px; font-size:clamp(1.55rem,2vw,2.2rem); }
.section-head.compact h2 { font-size:1.4rem; }
.poster-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.compact-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { display:grid; gap:10px; }
.cover { position:relative; overflow:hidden; aspect-ratio:3/4.15; border:1px solid var(--line); background:#dfe8ee; }
.cover img { height:100%; object-fit:cover; transition:transform 200ms ease; }
.tag,.score,.hover { position:absolute; z-index:2; }
.tag,.score { top:10px; padding:5px 8px; color:#fff; }
.tag { left:10px; background:rgba(30,42,53,.76); }
.score { right:10px; background:var(--coral); }
.cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 44%,rgba(30,42,53,.78)); }
.hover { left:12px; right:12px; bottom:12px; display:grid; gap:2px; color:#fff; opacity:0; transform:translateY(10px); transition:opacity 180ms ease,transform 180ms ease; }
.card:hover .cover img { transform:scale(1.05); }
.card:hover .hover { opacity:1; transform:translateY(0); }
.copy { display:grid; gap:4px; }
.copy a { font-weight:800; }
.copy em { font-style:normal; font-size:.88rem; }
.double-layout { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:18px; }
.index-list,.rank-list { display:grid; gap:10px; }
.index-row,.rank-row { display:grid; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.index-row { grid-template-columns:34px 72px 1fr auto; }
.rank-row { grid-template-columns:34px 1fr auto; }
.index-row b,.rank-row b,.index-row em,.rank-row em { color:var(--coral); font-style:normal; font-weight:800; }
.index-row img { aspect-ratio:3/4; object-fit:cover; }
.index-row span { display:grid; }
.guide-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:18px; }
.guide-grid article { padding:20px; }
.library-head { grid-template-columns:.9fr 1.1fr; }
.toolbar,.filter-row,.select-row { display:grid; gap:12px; }
.filter-row { grid-template-columns:repeat(4,minmax(0,1fr)); }
.filter { min-height:42px; cursor:pointer; color:var(--text); font-weight:700; }
.select-row { grid-template-columns:1fr 1fr auto; align-items:end; }
.select-row label { display:grid; gap:6px; }
.library-layout { grid-template-columns:250px 1fr; margin-top:18px; }
.side-panel { position:sticky; top:20px; align-self:start; display:grid; gap:12px; }
.side-panel a { padding:10px 12px; background:var(--slate); font-weight:700; }
.library-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.detail-stage { grid-template-columns:320px 1fr; }
.detail-poster img { aspect-ratio:3/4.15; object-fit:cover; }
.meta-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.meta-grid div { padding:12px; border:1px solid var(--line); background:var(--slate); }
.meta-grid dt { color:var(--muted); }
.meta-grid dd { margin:4px 0 0; font-weight:700; }
.tag-row { display:flex; flex-wrap:wrap; gap:10px; }
.tag-row a { padding:8px 12px; background:var(--blue-soft); font-weight:700; }
.episode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.episode-grid button { min-height:46px; cursor:pointer; color:var(--text); }
.related-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
.footer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:26px 0 42px; }
.footer strong { display:block; margin-bottom:8px; }
.footer a { display:block; margin:6px 0; }
.footer>.copy { grid-column:1/-1; padding-top:12px; border-top:1px solid var(--line); }
@media (max-width:1180px){.topbar,.index-hero,.double-layout,.guide-grid,.library-head,.library-layout,.detail-stage{grid-template-columns:1fr}.hero-main{grid-template-columns:1fr 1fr}.poster-grid,.library-grid,.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.side-panel{position:static}}
@media (max-width:760px){.topbar,.shell,.footer{width:min(100vw - 24px,1380px)}.hero-main,.query-row,.poster-grid,.compact-grid,.guide-grid,.filter-row,.select-row,.meta-grid,.episode-grid,.related-grid,.footer{grid-template-columns:1fr 1fr}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.hero-main,.query-row,.poster-grid,.compact-grid,.guide-grid,.filter-row,.select-row,.meta-grid,.episode-grid,.related-grid,.footer,.library-grid{grid-template-columns:1fr}}


/* stable responsive guards */
html, body { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; }
h1, h2, h3, h4, p, a, span, strong, small, b, em, li { min-width: 0; overflow-wrap: anywhere; }
main, header, footer, section, article, aside, nav, div { min-width: 0; }
.poster-grid, .feature-grid, .movie-grid, .library-grid, .library-list, .related-grid, .content-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }