* { box-sizing: border-box; }
body { margin:0; background:#0d0d12; color:#e8e8ef;
  font-family:'Noto Sans CJK SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif; }
header { text-align:center; padding:16px 16px 10px; }
.topbar { display:flex; justify-content:space-between; align-items:center; max-width:1100px; margin:0 auto 10px; }
.home { color:#9cc6ff; text-decoration:none; font-size:14px; }
.home:hover { text-decoration:underline; }
.navbar { position:sticky; top:0; z-index:50; display:flex; flex-wrap:wrap; gap:7px;
  justify-content:center; padding:9px 12px; background:rgba(13,13,18,.95); backdrop-filter:blur(8px);
  border-bottom:1px solid #23233a; }
.chip { flex:0 0 auto; padding:6px 13px; border-radius:20px; background:#16161f; border:1px solid #2a2a40;
  color:#cfcfe0; text-decoration:none; font-size:14px; transition:all .12s; }
@media (max-width:600px){ .chip{ padding:5px 10px; font-size:13px; } .navbar{ gap:6px; padding:7px 8px; } }
.chip:hover { border-color:#FF9AA2; color:#fff; }
.chip.on { background:#FF9AA2; color:#0d0d12; font-weight:700; border-color:#FF9AA2; }
.chip.switch { background:#26263a; color:#A0E7E5; font-weight:600; }
.chip.sep { background:transparent; border-color:transparent; color:#8a8aa0; font-weight:800; cursor:default; padding-left:4px; padding-right:4px; }
.vids { display:flex; gap:6px; margin:6px 0 4px; flex-wrap:wrap; }
.vid { font-size:12px; padding:3px 9px; border-radius:6px; text-decoration:none; font-weight:600; }
.vid.yt { background:#ff000022; color:#ff6b6b; border:1px solid #ff000044; }
.vid.bili { background:#00a1d622; color:#5ad1f0; border:1px solid #00a1d644; }
.vid.gg { background:#4285f422; color:#8ab4f8; border:1px solid #4285f444; }
.vid.wiki { background:#aaaaaa22; color:#cfcfcf; border:1px solid #88888844; }
.vid:hover { filter:brightness(1.3); }
header h1 { margin:0 0 6px; font-size:24px; font-weight:700;
  background:linear-gradient(90deg,#FF9AA2,#A0E7E5,#C7CEEA,#B5EAD7);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.meta { color:#9a9ab0; font-size:14px; }
.livebar { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
#refresh-live { border:1px solid #FF9AA2; background:#221820; color:#ffd9df; border-radius:999px; padding:8px 14px; font-weight:700; cursor:pointer; }
#refresh-live:hover { filter:brightness(1.18); }
#refresh-live:disabled { opacity:.65; cursor:wait; }
.freshness { border:1px solid #33334a; border-radius:999px; padding:7px 12px; font-size:13px; color:#cfcfe0; background:#16161f; }
.freshness.fresh { border-color:#48d597; color:#baf7d8; background:#10251b; }
.freshness.warn { border-color:#ffd166; color:#ffe8a3; background:#2a2412; }
.freshness.stale { border-color:#ff6b6b; color:#ffc0c0; background:#2b1418; }
.cloud-wrap { max-width:1100px; margin:10px auto 24px; padding:0 12px; text-align:center; }
#cloud { width:100%; border-radius:14px; background:#0d0d12; box-shadow:0 8px 40px #0008; }
.grid { max-width:1100px; margin:0 auto 60px; padding:0 12px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.card { background:#16161f; border:1px solid #26263a; border-radius:14px; padding:16px;
  transition:transform .15s, border-color .15s; scroll-margin-top:80px; }
.card:hover { transform:translateY(-3px); border-color:#3a3a55; }
.card.flash { border-color:#FF9AA2; box-shadow:0 0 0 2px #FF9AA266; }
.card-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.rank { background:#26263a; color:#aab; border-radius:8px; min-width:26px; height:26px;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.kw { font-size:18px; font-weight:700; flex:1; word-break:break-word; }
.heat { color:#ff8a8a; font-size:13px; white-space:nowrap; }
.summary { margin:8px 0; font-size:14px; line-height:1.6; color:#d2d2e0; }
.news { margin:8px 0 0; padding-left:18px; }
.news li { font-size:13px; line-height:1.5; margin-bottom:6px; }
.news a { color:#9cc6ff; text-decoration:none; }
.news a:hover { text-decoration:underline; }
.news .src { color:#777; margin-left:6px; font-size:12px; }
.nav { max-width:980px; margin:10px auto 60px; padding:0 16px; }
.group { margin-bottom:26px; }
.group h2 { font-size:15px; color:#8a8aa0; font-weight:600; margin:0 0 12px;
  border-left:3px solid #FF9AA2; padding-left:10px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.ovgrid { max-width:1100px; margin:10px auto 60px; padding:0 12px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.ovcard { background:#16161f; border:1px solid #26263a; border-radius:14px; padding:14px;
  text-decoration:none; color:#e8e8ef; transition:transform .15s,border-color .15s; }
.ovcard:hover { transform:translateY(-3px); border-color:#FF9AA2; }
.ovhead { font-size:15px; font-weight:700; margin-bottom:10px; }
.ovchip { display:inline-block; background:#23233a; color:#cfcfe0; border-radius:14px;
  padding:4px 10px; margin:0 6px 6px 0; font-size:13px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }
.cc { display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#16161f; border:1px solid #26263a; border-radius:14px; padding:18px 10px;
  text-decoration:none; color:#e8e8ef; transition:transform .15s, border-color .15s; }
.cc:hover { transform:translateY(-4px); border-color:#FF9AA2; }
.cc .flag { font-size:38px; line-height:1; margin-bottom:8px; }
.cc .nm { font-size:15px; font-weight:600; }
footer { text-align:center; color:#666; font-size:12px; padding:24px; line-height:1.6; }