:root {
  --primary: #7c3aed;
  --primary-dark: #5c2baf;
  --primary-darker: #401e7b;
  --accent: #f472b6;
  --accent-soft: #fde8f3;
  --accent-ink: #14161a;
  --primary-ink: #ffffff;
  --bg: #faf8fe;
  --bg-alt: #f3edfd;
  --card: #ffffff;
  --card-alt: #f7f3fe;
  --text: #171a20;
  --muted: #5b6472;
  --border: #ebe1fc;
  --hero-ink: #ffffff;
  --header-grad: linear-gradient(120deg,#632ebe 0%,(124, 58, 237) 100%);
  --footer-bg: #3e1d76;
  --shadow: 0 6px 20px rgba(20,25,40,0.08);
  --shadow-hover: 0 14px 34px rgba(20,25,40,0.16);
}
* { margin:0; padding:0; box-sizing:border-box; }
:root { --radius:14px; --maxw:1180px; --pad:56px;
  --font:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.75; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 22px; }

/* ---- topbar ---- */
.topbar { position:sticky; top:0; z-index:60; background:var(--header-grad); color:#fff; box-shadow:0 2px 18px rgba(0,0,0,.18); }
.topbar-inner { max-width:var(--maxw); margin:0 auto; padding:0 22px; height:66px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand-logo { font-size:1.42rem; font-weight:800; letter-spacing:-.5px; color:#fff; display:flex; align-items:center; gap:.5rem; }
.brand-logo b { color:var(--accent); }
.brand-dot { width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.main-nav { display:flex; gap:1.6rem; flex-wrap:wrap; }
.main-nav a { font-size:.94rem; font-weight:600; color:rgba(255,255,255,.82); padding:.4rem 0; border-bottom:2px solid transparent; transition:.2s; }
.main-nav a:hover, .main-nav a.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ---- hero ---- */
.hero { position:relative; overflow:hidden; background:var(--primary-darker); color:var(--hero-ink); }
.hero-media img { width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(100deg,rgba(6,9,15,.9) 0%,rgba(6,9,15,.55) 55%,rgba(6,9,15,.25) 100%); }
.hero-inner { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:64px 22px; }
.hero-badge { display:inline-block; background:var(--accent); color:var(--accent-ink); font-size:.76rem; font-weight:800; padding:4px 14px; border-radius:20px; letter-spacing:.5px; margin-bottom:1rem; }
.hero-title { font-size:2.3rem; font-weight:800; line-height:1.25; margin-bottom:.9rem; text-shadow:0 2px 12px rgba(0,0,0,.35); max-width:16em; }
.hero-excerpt { font-size:1.02rem; color:rgba(255,255,255,.9); max-width:44em; margin-bottom:1.5rem; }
.hero-cta { display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:var(--accent-ink); font-weight:700; padding:.7rem 1.5rem; border-radius:30px; transition:.2s; box-shadow:0 8px 22px rgba(0,0,0,.28); }
.hero-cta:hover { transform:translateY(-2px); }
.hero-stats { display:flex; gap:2.4rem; margin-top:2rem; flex-wrap:wrap; }
.hero-stat .n { font-size:1.7rem; font-weight:800; color:var(--accent); }
.hero-stat .l { font-size:.82rem; color:rgba(255,255,255,.78); }
/* hero kinds */
.hero.kind-lead .hero-media { position:absolute; inset:0; }
.hero.kind-split { display:block; }
.hero.kind-split .hero-media { position:absolute; inset:0; }
.hero.kind-split .hero-inner { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:2rem; }
.hero.kind-split .hero-copy { max-width:34em; }
.hero.kind-split .hero-panel { background:rgba(255,255,255,.1); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); padding:1.4rem 1.5rem; }
.hero.kind-stack .hero-media { position:absolute; inset:0; }
.hero.kind-stack .hero-overlay { background:linear-gradient(180deg,rgba(6,9,15,.86),rgba(6,9,15,.72)); }
.hero.kind-stack .hero-inner { text-align:center; display:flex; flex-direction:column; align-items:center; }
.hero.kind-stack .hero-title { max-width:20em; }
.hero.kind-stack .hero-stats { justify-content:center; }

/* ---- ticker ---- */
.ticker { background:var(--card); border-bottom:1px solid var(--border); overflow:hidden; }
.ticker-inner { max-width:var(--maxw); margin:0 auto; padding:0 22px; display:flex; align-items:center; height:46px; gap:1rem; }
.ticker-tag { flex-shrink:0; background:var(--primary); color:var(--primary-ink); font-size:.76rem; font-weight:800; padding:3px 12px; border-radius:14px; }
.ticker-view { overflow:hidden; flex:1; }
.ticker-view ul { display:flex; gap:2.6rem; white-space:nowrap; list-style:none; animation:marquee 34s linear infinite; }
.ticker-view li { font-size:.9rem; color:var(--muted); }
.ticker-view li b { color:var(--text); font-weight:600; }
.ticker-view li i { color:var(--accent); font-style:normal; margin-right:.4rem; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ---- section ---- */
.section { padding:var(--pad) 0; }
.section.alt { background:var(--bg-alt); }
.section-h { font-size:1.5rem; font-weight:800; margin-bottom:1.6rem; display:flex; align-items:center; gap:.7rem; color:var(--text); }
.section-h::before { content:''; width:6px; height:1.25em; border-radius:3px; background:var(--accent); }
.section-h small { font-size:.82rem; font-weight:500; color:var(--muted); margin-left:auto; }

/* ---- chips ---- */
.chips { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.chip { font-size:.85rem; font-weight:600; padding:.4rem 1.1rem; border-radius:22px; background:var(--card); border:1px solid var(--border); color:var(--muted); transition:.2s; }
.chip:hover, .chip.on { background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }

/* ---- news feed ---- */
.news-feed { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.post-card { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .22s,box-shadow .22s; }
.post-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-hover); }
.card-link { display:flex; flex-direction:column; height:100%; }
.card-img { width:100%; height:184px; object-fit:cover; background:var(--card-alt); }
.card-body { padding:1.1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card-cat { align-self:flex-start; font-size:.72rem; font-weight:700; color:var(--accent-ink); background:var(--accent); padding:2px 10px; border-radius:5px; }
.card-title { font-size:1.02rem; font-weight:700; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-card:hover .card-title { color:var(--primary); }
.card-excerpt { font-size:.86rem; color:var(--muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.card-meta { display:flex; align-items:center; justify-content:space-between; font-size:.76rem; color:var(--muted); padding-top:.6rem; margin-top:.2rem; border-top:1px solid var(--border); }
.card-meta .card-read { color:var(--primary); font-weight:600; }

/* ---- feat / stat / boards ---- */
.feat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.feat-item { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem 1.3rem; box-shadow:var(--shadow); }
.feat-icon { font-size:1.7rem; margin-bottom:.6rem; }
.feat-t { font-weight:700; margin-bottom:.3rem; }
.feat-d { font-size:.85rem; color:var(--muted); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat-item { text-align:center; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.6rem 1rem; }
.stat-num { font-size:2rem; font-weight:800; color:var(--primary); }
.stat-label { font-size:.85rem; color:var(--muted); margin-top:.2rem; }
.boards { display:flex; flex-wrap:wrap; gap:.7rem; }
.board-chip { font-size:.9rem; font-weight:600; padding:.55rem 1.2rem; border-radius:10px; background:var(--card); border:1px solid var(--border); transition:.2s; }
.board-chip:hover { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:translateY(-2px); }

/* ---- footer ---- */
.site-footer { background:var(--footer-bg); color:rgba(255,255,255,.72); margin-top:1rem; }
.footer-inner { max-width:var(--maxw); margin:0 auto; padding:2.6rem 22px; text-align:center; font-size:.88rem; }
.footer-inner a { color:var(--accent); font-weight:600; }
.footer-nav { display:flex; gap:1.4rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.footer-note { margin-top:.6rem; font-size:.8rem; color:rgba(255,255,255,.5); }

/* ---- article ---- */
.post { max-width:880px; margin:0 auto; padding:2.4rem 22px 3rem; }
.post-cover { width:100%; height:400px; object-fit:cover; border-radius:var(--radius); margin-bottom:1.8rem; box-shadow:var(--shadow); }
.post-head { margin-bottom:1.6rem; }
.post-cat { display:inline-block; background:var(--accent); color:var(--accent-ink); font-size:.76rem; font-weight:800; padding:3px 12px; border-radius:6px; margin-bottom:.8rem; }
.post-title { font-size:1.9rem; font-weight:800; line-height:1.35; color:var(--text); margin-bottom:.9rem; }
.post-meta { display:flex; gap:1rem; align-items:center; font-size:.86rem; color:var(--muted); flex-wrap:wrap; }
.post-meta .tag { background:var(--primary); color:var(--primary-ink); padding:2px 10px; border-radius:5px; font-weight:600; }
.post-body { font-size:1.06rem; line-height:2; color:var(--text); }
.post-body p { margin-bottom:1.3rem; }
.post-body h3 { font-size:1.2rem; font-weight:700; margin:1.9rem 0 .8rem; padding-left:.8rem; border-left:4px solid var(--accent); color:var(--primary); }
.related { margin-top:3rem; padding-top:2rem; border-top:2px solid var(--border); }
.related .news-feed { grid-template-columns:repeat(3,1fr); }

/* ---- about ---- */
.about-hero { background:var(--header-grad); color:#fff; padding:3.4rem 0; }
.about-hero .wrap { max-width:880px; }
.about-hero h1 { font-size:2rem; font-weight:800; margin-bottom:.6rem; }
.about-hero p { color:rgba(255,255,255,.88); }
.about-body { max-width:880px; margin:0 auto; padding:2.6rem 22px; font-size:1.04rem; line-height:2; }
.about-body h2 { font-size:1.3rem; font-weight:800; color:var(--primary); margin:2rem 0 .8rem; }
.about-body p { margin-bottom:1.2rem; color:var(--text); }
.about-body ul { margin:0 0 1.2rem 1.4rem; }
.about-body li { margin-bottom:.5rem; color:var(--muted); }

@media (max-width:900px) {
  .news-feed, .related .news-feed { grid-template-columns:repeat(2,1fr); }
  .feat-grid, .stat-grid { grid-template-columns:repeat(2,1fr); }
  .hero.kind-split .hero-inner { grid-template-columns:1fr; }
  .hero.kind-split .hero-panel { display:none; }
  .hero-title { font-size:1.7rem; }
}
@media (max-width:600px) {
  .news-feed, .related .news-feed, .feat-grid, .stat-grid { grid-template-columns:1fr; }
  .main-nav { gap:1rem; }
  .topbar-inner { height:auto; padding:12px 22px; flex-direction:column; align-items:flex-start; gap:.5rem; }
  .post-cover { height:220px; }
  .post-title { font-size:1.4rem; }
  .hero-title { font-size:1.4rem; }
}