:root {
  --bg: #f7f8fb;
  --card: #ffffff;
  --ink: #18212f;
  --muted: #667388;
  --line: #dde4ee;
  --blue: #3566d6;
  --cyan: #49b6d6;
  --gold: #f2b84b;
  --soft: #eef3fb;
  --shadow: 0 18px 36px rgba(24, 33, 47, 0.08);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
.container { width: min(1280px, calc(100% - 36px)); margin: 0 auto; }
.header { position: sticky; top: 0; z-index: 20; background: rgba(251, 252, 255, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 22px; align-items: center; padding: 18px 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 20px; }
.brand span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--cyan)); font-weight: 800; }
.nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.nav a, .nav-btn, .chip, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); transition: .22s ease; }
.nav a:hover, .nav a.active, .nav-btn:hover, .chip:hover, .chip.active, .button:hover { color: #fff; background: var(--blue); border-color: var(--blue); transform: translateY(-2px); }
main { padding: 28px 0 46px; }
.shell { display: grid; grid-template-columns: minmax(0, 1.2fr) 340px; gap: 20px; }
.hero, .panel, .feed-card, .detail-card, .footer section, .library-item { border: 1px solid var(--line); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.hero { padding: 22px; display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 22px; align-items: center; }
.hero-poster { aspect-ratio: .72; overflow: hidden; border-radius: 16px; }
.hero-poster img, .poster img, .library-thumb img { height: 100%; object-fit: cover; transition: transform .3s ease; }
.hero:hover .hero-poster img, .feed-card:hover .poster img, .library-item:hover .library-thumb img { transform: scale(1.05); }
.eyebrow { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; color: #fff; background: var(--gold); font-size: 13px; font-weight: 700; }
h1,h2,h3,p { margin-top: 0; }
.hero-copy h1, .page-head h1, .detail-copy h1 { margin: 14px 0 12px; font-size: clamp(32px, 4vw, 46px); line-height: 1.12; }
.hero-copy p, .page-head p, .detail-copy p, .footer p, .card-copy { color: var(--muted); line-height: 1.7; }
.meta, .chips, .actions { display: flex; flex-wrap: wrap; gap: 9px; }
.meta span, .mini { padding: 8px 10px; border-radius: 10px; background: var(--soft); color: var(--muted); }
.actions { margin-top: 18px; }
.button.primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.side-stack { display: grid; gap: 14px; }
.panel { padding: 18px; }
.rank { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); transition: .22s ease; }
.rank:last-child { border-bottom: 0; }
.rank:hover { color: var(--blue); transform: translateX(4px); }
.rank-no { color: var(--gold); font-weight: 800; }
.section-head, .page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 28px 0 16px; }
.section-head h2 { margin-bottom: 0; font-size: 28px; line-height: 1.24; }
.feed { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.feed-card { overflow: hidden; transition: .24s ease; }
.feed-card:hover, .library-item:hover { transform: translateY(-6px); border-color: rgba(53, 102, 214, .4); }
.poster { aspect-ratio: .72; overflow: hidden; }
.feed-body { padding: 14px; }
.feed-body strong { display: block; min-height: 44px; line-height: 1.38; }
.columns { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.column-card { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, #fff, #f3f7ff); transition: .24s ease; }
.column-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.library-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 20px; align-items: start; }
.filters { position: sticky; top: 88px; }
.filter-group { margin-top: 16px; }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 9px; }
.search { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.list { display: grid; gap: 13px; }
.library-item { display: grid; grid-template-columns: 92px minmax(0,1fr) 150px; gap: 15px; align-items: center; padding: 12px; transition: .24s ease; }
.library-thumb { height: 128px; overflow: hidden; border-radius: 12px; }
.library-item h3 { margin: 0 0 7px; font-size: 20px; line-height: 1.3; }
.side-note { display: grid; gap: 8px; justify-items: end; }
.detail-card { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 24px; padding: 24px; }
.detail-poster { aspect-ratio: .72; overflow: hidden; border-radius: 16px; }
.fact-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin: 20px 0; }
.fact { padding: 14px; border-radius: 14px; background: var(--soft); }
.fact span { display: block; color: var(--muted); }
.fact strong { display: block; margin-top: 7px; }
.footer { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; padding-bottom: 34px; }
.footer section { padding: 18px; }
.muted { color: var(--muted); }
@media (max-width: 1200px) { .feed{grid-template-columns:repeat(2,minmax(0,1fr));} .columns,.footer,.fact-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width: 980px) { .shell,.hero,.library-layout,.detail-card,.header-inner{grid-template-columns:1fr;} .filters{position:relative;top:auto;} }
@media (max-width: 680px) { .feed,.columns,.footer,.fact-grid{grid-template-columns:1fr;} .library-item{grid-template-columns:82px minmax(0,1fr);} .side-note{grid-column:1/-1;justify-items:start;} }