:root{--bg:#fff;--sub:#f6f7f8;--line:#e5e7eb;--t1:#18191c;--t2:#61666d;--t3:#9499a0;--acc:#fb7299;--acc2:#00aeec;--accs:#fff0f4;--r:10px}
@media (prefers-color-scheme:dark){:root{--bg:#17181a;--sub:#202124;--line:#2f3134;--t1:#e7e9ea;--t2:#b3b6ba;--t3:#7d8187;--accs:#3a2028}}
*{box-sizing:border-box}body{margin:0;font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--t1)}
a{color:inherit;text-decoration:none}a.link{color:var(--acc2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:16px;height:56px}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;white-space:nowrap}
.logo i{font-style:normal;width:28px;height:28px;border-radius:8px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center}
nav{display:flex;gap:14px}nav a{color:var(--t3);padding:4px 2px;border-bottom:2px solid transparent}nav a.on{color:var(--t1);font-weight:600;border-color:var(--acc)}
.search{flex:1;display:flex;gap:8px;min-width:0}.search input{flex:1;min-width:0;padding:7px 12px;border:1px solid var(--line);border-radius:99px;background:var(--sub);color:var(--t1);font:inherit}
.btn{cursor:pointer;display:inline-block;padding:6px 14px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--t1);font:inherit;font-size:13px}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}.btn.on{background:var(--t1);color:var(--bg);border-color:var(--t1)}
.hero{padding:28px 0 8px}.hero h1{margin:0;font-size:26px}.hero p{margin:6px 0 0;color:var(--t2)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center}.chips .lab{color:var(--t3);font-size:13px;margin-right:2px}
.chip{cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--t2);border-radius:99px;padding:4px 12px;font:inherit;font-size:13px}.chip.on{background:var(--t1);border-color:var(--t1);color:var(--bg)}
.shelf{margin:28px 0}.shelf h2{font-size:18px;margin:0}.shelf .note{color:var(--t3);font-size:12px;margin:2px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:6px;min-width:0}
.cover{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--sub)}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.badge{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:1px 7px;border-radius:6px}
.cover .meta{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;padding:14px 8px 5px;color:#fff;font-size:11px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.ttl{font-weight:600;line-height:20px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sm{font-size:12px;color:var(--t3)}.ex{font-size:12px;color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pill{display:inline-block;padding:0 8px;border-radius:99px;font-size:12px;background:var(--accs);color:var(--acc);white-space:nowrap}.pill.g{background:var(--sub);color:var(--t2)}
.detail{display:flex;flex-wrap:wrap;gap:24px;margin:20px 0 40px}.detail .main{flex:1 1 560px;min-width:0}.detail .side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:16px}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#000}.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jump{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:var(--sub)}
.jump img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}.jump>*:not(img){position:relative}
.panel{border:1px solid var(--line);border-radius:var(--r);padding:16px}.panel h3{margin:0 0 10px;font-size:14px}
.quote{padding:10px 0;border-top:1px solid var(--line)}.quote:first-of-type{border-top:0}.quote .q{font-size:14px}
.bar{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--t2);margin:4px 0}.bar .tr{flex:1;height:8px;background:var(--sub);border-radius:4px;overflow:hidden}.bar .tr div{height:100%;background:var(--acc)}
.years{display:flex;align-items:flex-end;gap:4px;height:90px}.years div{flex:1;background:var(--acc2);border-radius:3px 3px 0 0;min-height:2px}
.ylab{display:flex;justify-content:space-between;font-size:11px;color:var(--t3);margin-top:4px}
.rank{display:flex;flex-direction:column}.rrow{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.rrow .no{width:32px;text-align:center;font-size:20px;font-weight:700;color:var(--t3)}.rrow .no.top{color:var(--acc)}
.rrow img{width:128px;aspect-ratio:16/10;object-fit:cover;border-radius:8px;flex-shrink:0;background:var(--sub)}
.rrow .info{flex:1;min-width:0}.rrow .sc{font-size:18px;font-weight:700;width:64px;text-align:right}
.about{max-width:760px;margin:24px 0 60px}.about h2{font-size:18px;margin-top:28px}
footer{border-top:1px solid var(--line);color:var(--t3);font-size:12px;padding:18px 0 30px;margin-top:30px}
.tabs{display:flex;gap:8px;margin:12px 0 18px}
@media (max-width:640px){nav{gap:10px}.search{display:none}.rrow img{width:96px}.hero h1{font-size:21px}}