:root{
  --bg:#0b1020; --bg-2:#111a33; --panel:rgba(20,28,52,.82); --panel-2:rgba(255,255,255,.04);
  --line:rgba(212,175,101,.28); --gold:#e8c57a; --gold-2:#c9a24b; --cyan:#5fd3e0;
  --orange:#f2a65a; --purple:#b58cff; --blue:#6ea8ff; --green:#7be0a8;
  --text:#eef2ff; --muted:#9aa6c7; --danger:#ff8b8b;
  --shadow:0 18px 50px rgba(0,0,0,.45); --radius:16px;
}
html[data-theme="light"]{
  --bg:#f5f3ee; --bg-2:#ece7dd; --panel:rgba(255,255,255,.94); --panel-2:rgba(20,20,20,.04);
  --line:rgba(140,100,40,.28); --gold:#a8791f; --gold-2:#8a6315; --cyan:#1d7f8c;
  --orange:#d0761f; --purple:#7652c8; --blue:#2c6bd6; --green:#1f8f5b;
  --text:#25201a; --muted:#6a6358; --danger:#c0392b; --shadow:0 12px 36px rgba(80,60,20,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,"WenQuanYi Micro Hei",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.75;
  transition:background .4s,color .4s;
}
a{color:var(--gold); text-decoration:none}
a:hover{color:var(--cyan); text-decoration:underline}
img{max-width:100%}
time{color:var(--muted); font-variant-numeric:tabular-nums}

.bg-layer{position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none}
.bg-grid{position:absolute; inset:0; background-image:linear-gradient(rgba(233,197,122,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(233,197,122,.06) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at 50% 20%,#000 0%,transparent 75%)}
.bg-glow{position:absolute; width:42vw; height:42vw; border-radius:50%; filter:blur(90px); opacity:.45}
.bg-glow--gold{top:-12vw; left:-10vw; background:radial-gradient(circle,#e8c57a,#000 70%)}
.bg-glow--cyan{bottom:-14vw; right:-8vw; background:radial-gradient(circle,#5fd3e0,#000 70%)}
html[data-theme="light"] .bg-glow{opacity:.25}
.bg-particles{position:absolute; inset:0; background:
  radial-gradient(circle at 12% 18%, rgba(255,255,255,.5) 1px, transparent 2px),
  radial-gradient(circle at 78% 62%, rgba(255,255,255,.45) 1px, transparent 2px),
  radial-gradient(circle at 45% 82%, rgba(255,255,255,.4) 1px, transparent 2px);
  animation:drift 30s linear infinite}
@keyframes drift{from{background-position:0 0,0 0,0 0}to{background-position:60px 120px,-80px 60px,40px -90px}}

.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:color-mix(in srgb,var(--bg) 86%,transparent); border-bottom:1px solid var(--line)}
.topbar__inner{max-width:1320px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px}
.brand__mark{font-size:28px; filter:drop-shadow(0 0 12px var(--gold))}
.brand__text{display:flex; flex-direction:column; line-height:1.25}
.brand__text strong{font-size:19px; letter-spacing:.5px}
.brand__text em{font-style:normal; font-size:12px; color:var(--muted)}
.topnav{display:flex; gap:6px; flex-wrap:wrap}
.topnav a{padding:7px 13px; border-radius:999px; font-size:14px; color:var(--text); background:var(--panel-2); border:1px solid transparent}
.topnav a:hover{border-color:var(--line); text-decoration:none; color:var(--gold)}
.topbar__meta{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted)}
.clock{font-variant-numeric:tabular-nums; background:var(--panel-2); padding:6px 12px; border-radius:999px; border:1px solid var(--line)}

.btn{display:inline-block; padding:11px 22px; border-radius:10px; font-weight:700; border:1px solid transparent; cursor:pointer; transition:.25s; font-size:15px}
.btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; box-shadow:0 8px 24px rgba(233,197,122,.28)}
.btn--gold:hover{filter:brightness(1.08); text-decoration:none}
.btn--cyan{background:rgba(95,211,224,.14); color:var(--cyan); border-color:rgba(95,211,224,.5)}
.btn--cyan:hover{background:rgba(95,211,224,.26); text-decoration:none}
.btn--ghost{background:var(--panel-2); color:var(--text); border:1px solid var(--line)}
.btn--small{padding:7px 15px; font-size:13px; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; border-radius:8px}

.hero{max-width:1320px; margin:30px auto 0; padding:0 22px; display:grid; grid-template-columns:1.5fr 1fr; gap:22px}
.hero__panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); backdrop-filter:blur(6px)}
.hero__panel--left{position:relative; overflow:hidden}
.hero__panel--left::before{content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; background:radial-gradient(circle,var(--gold),transparent 70%); opacity:.35}
.badge{border:1px solid var(--gold); color:var(--gold); padding:4px 12px; border-radius:999px; font-size:12px; letter-spacing:1px}
.hero h1{font-size:clamp(28px,4vw,46px); margin:14px 0 8px; line-height:1.2}
.hero h1 span{background:linear-gradient(120deg,var(--gold),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero__sub{font-size:16px; color:var(--muted); margin:0 0 16px}
.hero__tags{display:flex; gap:8px; flex-wrap:wrap; padding:0; list-style:none}
.hero__tags a{border:1px solid var(--line); padding:5px 12px; border-radius:999px; font-size:13px; color:var(--text); background:var(--panel-2)}
.hero__tags a:hover{color:var(--gold); text-decoration:none}
.hero__cta{margin-top:20px; display:flex; gap:12px; flex-wrap:wrap}
.hero__note{margin:16px 0 0; font-size:13px; color:var(--muted)}

.panel-head{display:flex; align-items:center; justify-content:space-between}
.panel-head h2{font-size:19px; margin:0}
.dot{width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(123,224,168,.7); animation:pulse 1.8s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(123,224,168,0)}100%{box-shadow:0 0 0 0 rgba(123,224,168,0)}}
.live-list{padding:0; margin:16px 0 0; list-style:none; display:flex; flex-direction:column; gap:11px}
.live-list li{display:flex; gap:12px; font-size:14px; border-left:2px solid var(--gold); padding-left:12px}
.live-list time{color:var(--gold); white-space:nowrap}
.live-list b{color:var(--cyan); font-weight:600}

.stats{max-width:1320px; margin:22px auto 0; padding:0 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center; box-shadow:var(--shadow)}
.stat b{display:block; font-size:32px; color:var(--gold); font-variant-numeric:tabular-nums}
.stat span{font-size:13px; color:var(--muted)}

.crumbs{max-width:1320px; margin:20px auto 0; padding:0 22px; font-size:13px; color:var(--muted)}
.crumbs ol{list-style:none; padding:0; margin:0; display:flex; gap:8px; flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs [aria-current="page"]{color:var(--gold)}

#main{max-width:1320px; margin:26px auto 0; padding:0 22px; display:grid; grid-template-columns:2.4fr 1fr; gap:26px}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin:34px 0 16px; flex-wrap:wrap}
.section-head h2{font-size:24px; margin:0 0 6px; background:linear-gradient(120deg,var(--gold),var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block}
.section-head p{margin:0; color:var(--muted); max-width:58ch}
.link-more{color:var(--cyan); font-size:14px}

.filters{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:7px 15px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); cursor:pointer; font-size:13px}
.chip--active{background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; border-color:transparent}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:18px; box-shadow:var(--shadow); transition:.25s}
.card:hover{transform:translateY(-3px); border-color:var(--gold)}
.card__head{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.ver{padding:4px 12px; border-radius:8px; font-size:12px; font-weight:700; color:#15100a}
.ver--gold{background:linear-gradient(135deg,#f4d98b,#c9a24b)}
.ver--cyan{background:linear-gradient(135deg,#9ee6ee,#3fa7b4); color:#06262a}
.ver--purple{background:linear-gradient(135deg,#d3baff,#8b5cf6); color:#190a33}
.ver--orange{background:linear-gradient(135deg,#ffd0a1,#e58a2c); color:#2b1704}
.ver--blue{background:linear-gradient(135deg,#bcd6ff,#4a86e8); color:#071c3d}
.card__head h3{margin:0; font-size:20px}
.tag{font-size:12px; padding:3px 9px; border-radius:6px; border:1px solid var(--gold); color:var(--gold)}
.tag--hot{background:var(--gold); color:#1a1408; border-color:transparent}
.tag--full{background:var(--danger); color:#fff; border-color:transparent}
.tag--merge{background:var(--purple); color:#fff; border-color:transparent}
.card__meta{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; padding:14px; background:var(--panel-2); border-radius:12px}
.card__meta div{display:flex; flex-direction:column}
.card__meta dt{font-size:12px; color:var(--muted)}
.card__meta dd{margin:2px 0 0; font-size:14px}
.card__desc{margin:0 0 14px; color:var(--text)}
.card__foot{display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px dashed var(--line); padding-top:12px}
.trust{color:var(--green); font-size:13px}
.trust i{display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center; border-radius:50%; background:var(--green); color:#06261a; margin-right:5px; font-style:normal}

.review-grid,.know-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.review,.know-grid article{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
.review h3,.know-grid h3{margin:0 0 10px; font-size:16px; color:var(--gold)}
.review p,.know-grid p{font-size:14px; color:var(--muted); margin:0 0 10px}
.review ul{padding-left:18px; margin:0; font-size:13px; color:var(--text)}
.score{position:relative; width:66px; height:66px; border-radius:50%; background:var(--panel-2); display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--gold); margin-bottom:10px}
.score span{position:absolute; inset:0; border-radius:50%; background:conic-gradient(var(--gold) var(--p), transparent 0); -webkit-mask:radial-gradient(circle farthest-side,transparent 62%,#000 64%); mask:radial-gradient(circle farthest-side,transparent 62%,#000 64%)}

.rep-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rep{margin:0; background:var(--panel); border-left:3px solid var(--cyan); border-radius:12px; padding:18px; box-shadow:var(--shadow)}
.rep blockquote{margin:0 0 10px; font-size:15px; color:var(--text)}
.rep figcaption{font-size:12px; color:var(--muted)}
.notice{margin-top:18px; background:color-mix(in srgb,var(--gold) 12%,transparent); border:1px solid var(--line); border-radius:12px; padding:16px 18px}
.notice h3{margin:0 0 6px; font-size:16px; color:var(--gold)}
.notice p{margin:0; font-size:14px; color:var(--muted)}

.guide-list{padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.guide-list li{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow)}
.guide-list b{display:block; color:var(--gold); font-size:17px; margin-bottom:6px}

.faq-item{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:4px 18px; margin-bottom:10px}
.faq-item summary{cursor:pointer; font-weight:700; padding:14px 0; color:var(--gold)}
.faq-item p{margin:0 0 14px; color:var(--text)}

.about-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.about-grid article{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
.about-grid h3{margin:0 0 8px; color:var(--gold)}
.about-grid p{margin:0; font-size:14px; color:var(--muted)}

.side{display:flex; flex-direction:column; gap:18px}
.widget{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.widget h3{margin:0 0 12px; font-size:16px; color:var(--gold)}
.rank{padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.rank li{display:flex; align-items:center; gap:10px; font-size:14px}
.rank span{width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:linear-gradient(135deg,var(--gold),var(--gold-2)); color:#1a1408; font-weight:700; font-size:12px}
.rank em{margin-left:auto; font-style:normal; font-size:12px; color:var(--cyan)}
.cal{padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:9px; font-size:14px}
.cal time{color:var(--gold); margin-right:8px}
.cal-hint{font-size:13px; color:var(--muted); margin:0 0 10px}
.trust-list{padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:13px}
.trust-list i{color:var(--green); font-style:normal; margin-right:8px}

.footer{margin-top:40px; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold) 6%,transparent)); border-top:1px solid var(--line)}
.footer__top{max-width:1320px; margin:0 auto; padding:34px 22px 18px; display:grid; grid-template-columns:1.4fr 2.6fr; gap:26px}
.footer__brand strong{font-size:20px}
.footer__brand p{color:var(--muted); font-size:14px; margin:10px 0 0}
.footer__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.footer__cols h4{margin:0 0 10px; color:var(--gold); font-size:15px}
.footer__cols ul{padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.footer__cols a{font-size:13px; color:var(--muted)}
.footer__cols a:hover{color:var(--cyan)}
.footer__keywords{max-width:1320px; margin:0 auto; padding:0 22px; display:flex; flex-wrap:wrap; gap:8px}
.footer__keywords span{padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel-2); font-size:12px; color:var(--muted)}
.footer__bottom{max-width:1320px; margin:0 auto; padding:18px 22px 30px; border-top:1px dashed var(--line); margin-top:20px; font-size:12px; color:var(--muted)}
.updated{color:var(--gold)}

@media (max-width:1024px){
  #main{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .review-grid,.rep-grid,.know-grid{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .topbar__meta .clock{font-size:11px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .card__meta{grid-template-columns:repeat(2,1fr)}
  .review-grid,.rep-grid,.know-grid,.guide-list,.about-grid{grid-template-columns:1fr}
  .section-head h2{font-size:20px}
}
@media print{body{background:#fff;color:#000}.bg-layer,.topbar,.side,.live-list{display:none}}

/* 无障碍：键盘焦点可见 */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}