:root {
--bg:#0b0e17;
--b2:#111827;
--ac:#f0b90b;
--a2:#f59e0b;
--tx:#f1f5f9;
--mt:#94a3b8;
--bd:rgba(255,255,255,0.07);
--navbg:rgba(11,14,23,0.95);
--cardbg:rgba(255,255,255,0.02);
--r:12px;
--fn:'Inter',system-ui,sans-serif
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--fn);background:var(--bg);color:var(--tx);line-height:1.7;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}

/* ===== 导航 ===== */
.h{background:var(--navbg);backdrop-filter:blur(20px);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:100}
.hi{max-width:900px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:52px}
.lgo{font-size:1.05rem;font-weight:800;background:linear-gradient(135deg,var(--ac),#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.5px}
.nv{display:flex;align-items:center;gap:2px}
.nv a{padding:6px 14px;font-size:.82rem;color:var(--mt);border-radius:6px;transition:all .2s}
.nv a:hover,.nv a.act{color:var(--ac);background:rgba(240,185,11,0.08)}
.nv .nv-cta{padding:5px 18px;background:linear-gradient(135deg,var(--ac),var(--a2));color:#0b0e17;font-weight:700;font-size:.78rem;border-radius:50px;margin-left:4px}
.nv .nv-cta:hover{opacity:.9;color:#0b0e17;background:linear-gradient(135deg,var(--ac),var(--a2))}

/* ===== 首页专属样式 ===== */
.hp-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;margin:0 auto;padding:60px 24px;align-items:center}
.hp-hero-text .hp-badge{font-size:.68rem;font-weight:600;color:var(--ac);letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}
.hp-hero-text h1{font-size:2.2rem;font-weight:800;line-height:1.1;margin-bottom:12px;background:linear-gradient(135deg,#fff 40%,var(--mt));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hp-hero-text p{font-size:.88rem;color:var(--mt);line-height:1.8;margin-bottom:20px}
.hp-hero-text .hp-btns{display:flex;gap:10px;flex-wrap:wrap}
.hp-hero-text .hp-btns .primary{padding:10px 28px;background:linear-gradient(135deg,var(--ac),var(--a2));color:#0b0e17;font-weight:700;font-size:.85rem;border-radius:50px}
.hp-hero-text .hp-btns .secondary{padding:10px 28px;border:1px solid rgba(240,185,11,0.2);color:var(--ac);font-weight:600;font-size:.85rem;border-radius:50px}
.hp-hero-visual{background:linear-gradient(135deg,rgba(240,185,11,0.04),rgba(240,185,11,0.01));border:1px solid rgba(240,185,11,0.08);border-radius:16px;padding:28px 20px;text-align:center}
.hp-hero-visual .hp-chart{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:160px;padding:0 8px}
.hp-hero-visual .hp-chart .bar{width:7%;border-radius:4px 4px 0 0;background:linear-gradient(0deg,var(--ac),#fbbf24);transition:all .3s;min-height:10%}

/* ===== 数据指标 ===== */
.hp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:900px;margin:0 auto;padding:0 24px 40px}
.hp-stat-card{background:rgba(255,255,255,0.02);border:1px solid var(--bd);border-radius:12px;padding:20px;text-align:center}
.hp-stat-card .num{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,var(--ac),#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hp-stat-card .label{font-size:.72rem;color:var(--mt);margin-top:4px}

/* ===== 精选文章卡片 ===== */
.hp-featured{background:linear-gradient(135deg,rgba(240,185,11,0.04),rgba(240,185,11,0.01));border:1px solid rgba(240,185,11,0.1);border-radius:16px;padding:28px;max-width:900px;margin:0 auto 20px;display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center}
.hp-featured .hp-f-img{height:180px;background:linear-gradient(135deg,rgba(240,185,11,0.06),rgba(240,185,11,0.02));border-radius:10px;display:flex;align-items:center;justify-content:center}
.hp-featured .hp-f-body .tag{font-size:.65rem;color:var(--ac);font-weight:600;letter-spacing:1px;text-transform:uppercase}
.hp-featured .hp-f-body h2{font-size:1.15rem;font-weight:700;margin:4px 0 6px}
.hp-featured .hp-f-body p{font-size:.82rem;color:var(--mt);line-height:1.7}
.hp-featured .hp-f-body .meta{font-size:.72rem;color:#475569;margin:6px 0 10px}
.hp-featured .hp-f-body .link{color:var(--ac);font-weight:600;font-size:.8rem}

/* ===== 文章网格 ===== */
.hp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:900px;margin:0 auto;padding:0 24px 40px}
.hp-grid .ac{background:rgba(255,255,255,0.02);border:1px solid var(--bd);border-radius:10px;padding:16px;transition:all .25s}
.hp-grid .ac:hover{border-color:rgba(240,185,11,0.2);background:rgba(240,185,11,0.03);transform:translateY(-2px)}
.hp-grid .ac .tag{font-size:.6rem;color:var(--ac);font-weight:600;letter-spacing:1px;text-transform:uppercase}
.hp-grid .ac h3{font-size:.88rem;font-weight:600;margin:3px 0;line-height:1.3}
.hp-grid .ac p{font-size:.75rem;color:var(--mt);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hp-grid .ac .meta{font-size:.68rem;color:#475569;margin-top:6px}

/* ===== 首页CTA ===== */
.hp-cta{max-width:900px;margin:0 auto;padding:0 24px 40px;text-align:center}
.hp-cta .hp-cta-btn{display:inline-block;padding:12px 36px;background:linear-gradient(135deg,var(--ac),var(--a2));color:#0b0e17;font-weight:700;font-size:.9rem;border-radius:50px}
.hp-cta p{font-size:.75rem;color:var(--mt);margin-top:8px}

/* ===== 文章页 ===== */
.hd{max-width:900px;margin:0 auto;padding:40px 24px 14px}
.hd h1{font-size:1.4rem;font-weight:700}
.abd{font-size:.88rem;line-height:2;color:#cbd5e1;max-width:700px}
.abd p{margin-bottom:14px}
.abd h2{font-size:1.15rem;font-weight:700;color:var(--tx);margin:28px 0 10px}

/* ===== 分类页 ===== */
table{width:100%;border-collapse:collapse;font-size:.85rem}
thead tr{background:rgba(240,185,11,0.08)}
th{padding:10px 12px;text-align:left;color:var(--ac);font-weight:600;border-bottom:1px solid var(--bd)}
td{padding:10px 12px;border-bottom:1px solid var(--bd);color:var(--mt)}
td a{color:var(--tx);font-weight:500}
td a:hover{color:var(--ac)}

/* ===== 分页 ===== */
.pg{display:flex;justify-content:center;gap:6px;padding:20px 24px;max-width:900px;margin:0 auto}
.pg a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--bd);border-radius:8px;font-size:.8rem;color:var(--mt);transition:all .2s}
.pg a:hover,.pg a.act{border-color:var(--ac);color:var(--ac);background:rgba(240,185,11,0.06)}

/* ===== 底部推荐 ===== */
.rec-box{max-width:700px;margin:16px auto;padding:12px 20px;background:var(--cardbg);border:1px solid var(--bd);border-radius:8px;text-align:center;font-size:.78rem}
.rec-box p{color:var(--mt)}

/* ===== 底部CTA ===== */
.btm-cta{text-align:center;padding:24px 20px 8px}

/* ===== 页脚 ===== */
.ft{border-top:1px solid var(--bd);padding:14px 20px;max-width:900px;margin:0 auto;font-size:.78rem;color:var(--mt);text-align:center}
.ft a{color:var(--ac)}

/* ===== 移动端 ===== */
@media(max-width:640px){
.hp-hero{grid-template-columns:1fr;padding:40px 16px;gap:24px}
.hp-hero-text h1{font-size:1.6rem}
.hp-stats{grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px 24px}
.hp-featured{grid-template-columns:1fr;padding:20px}
.hp-grid{grid-template-columns:1fr;padding:0 16px 24px}
.hd{padding:24px 16px}
.nv a{padding:4px 8px;font-size:.75rem}
.nv .nv-cta{font-size:.72rem;padding:4px 12px}
}
.hp-features { max-width: 900px; margin: 0 auto; padding: 0 24px 36px; text-align: center; }
.hp-features-title { font-size: .7rem; font-weight: 600; color: #f0b90b; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; }
.hp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.07); border-radius: 12px; overflow: hidden; max-width: 720px; margin: 0 auto; }
.hp-feature-item { background: #0b0e17; padding: 32px 20px; transition: all .25s; }
.hp-feature-item:hover { background: rgba(240,185,11,0.02); }
.hp-feature-icon { margin-bottom: 12px; }
.hp-feature-item h3 { font-size: .85rem; font-weight: 700; color: #f1f5f9; margin-bottom: 8px; }
.hp-feature-item p { font-size: .72rem; color: #94a3b8; line-height: 1.8; max-width: 220px; margin: 0 auto; }
@media(max-width:640px){ .hp-features-grid{grid-template-columns:1fr;max-width:100%} }

@media(max-width:640px){
  .hi{padding:0 12px}
  .nv a{padding:4px 8px;font-size:.72rem}
  .nv .nv-cta{font-size:.7rem;padding:3px 10px}
  .hd{padding:20px 16px}
  .hd h1{font-size:1.1rem}
  .abd{font-size:.82rem;line-height:1.8}
  .ft{font-size:.72rem;padding:10px 16px}
  .pg{gap:4px}
  .pg a{width:30px;height:30px;font-size:.72rem}
  table{font-size:.75rem}
  th,td{padding:6px 8px}
  [style*="grid-template-columns:1fr 3fr"]{grid-template-columns:1fr!important}
  [style*="position:sticky;top:80px"]{position:static!important;margin-bottom:12px}
}
@media(max-width:640px){
  .hi{padding:0 12px}
  .nv a{padding:4px 6px;font-size:.7rem}
  .nv .nv-cta{font-size:.68rem;padding:3px 8px}
  .hd{padding:16px 16px}
  .hd h1{font-size:1rem}
  .abd{font-size:.82rem;line-height:1.8}
  .ft{font-size:.72rem;padding:10px 16px}
  .pg{gap:4px}
  .pg a{width:28px;height:28px;font-size:.7rem}
  table{font-size:.72rem}
  th,td{padding:4px 6px}
  [style*="grid-template-columns:1fr 3fr"]{grid-template-columns:1fr !important}
  [style*="position:sticky;top:80px"]{position:static !important;margin-bottom:8px}
  [style*="max-width:1000px;margin:0 auto;padding:40px 20px"]{padding:20px 12px !important}
  .btm-cta{padding:16px 12px 8px}
  .rec-box{margin:8px auto;padding:10px 12px}
}