:root{
    --bg:#f6f8fb;
    --card:#ffffff;
    --text:#182235;
    --muted:#607089;
    --line:#dfe7f3;
    --brand:#243b63;
    --accent:#ffb347;
    --soft:#edf3fb;
    --good:#1f8a70;
    --danger:#c65f5f;
    --shadow:0 18px 44px rgba(34,54,86,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
    line-height:1.75;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.site-header{
    position:sticky;top:0;z-index:20;
    background:rgba(246,248,251,.96);
    backdrop-filter: blur(14px);
    border-bottom:1px solid var(--line);
}
.topbar{
    max-width:1180px;margin:auto;
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;padding:16px 20px 10px;
}
.logo,.footer-logo{display:flex;align-items:center;gap:10px;font-weight:900}
.logo-mark{
    display:inline-grid;place-items:center;
    width:42px;height:42px;border-radius:14px;
    background:linear-gradient(135deg,var(--brand),#4b6fa6);
    color:#fff;box-shadow:var(--shadow);
}
.logo-text{display:flex;flex-direction:column;font-size:22px;line-height:1.1}
.logo-text small{font-size:12px;color:var(--muted);font-weight:700;margin-top:4px}
.domain-pill{
    padding:8px 14px;border:1px solid var(--line);
    border-radius:999px;background:#fff;color:var(--muted);font-size:14px;
}
.main-nav{
    max-width:1180px;margin:auto;display:flex;gap:8px;overflow:auto;
    padding:0 20px 10px;
}
.main-nav a{
    white-space:nowrap;padding:9px 13px;border-radius:999px;color:var(--muted);font-weight:700;
}
.main-nav a:hover,.main-nav a.is-active{background:var(--brand);color:#fff}
.search-strip{
    max-width:1180px;margin:auto;padding:0 20px 16px;
    display:flex;gap:10px;align-items:center;
}
.search-strip input{
    flex:1;border:1px solid var(--line);border-radius:16px;
    padding:12px 14px;font-size:15px;background:#fff;outline:none;
}
.search-strip button,.btn{
    border:0;border-radius:16px;background:var(--brand);color:#fff;
    padding:12px 18px;font-weight:800;cursor:pointer;
}
#searchHint{font-size:13px;color:var(--muted)}
.container{max-width:1180px;margin:auto;padding:28px 20px}
.hero{
    display:grid;grid-template-columns:1.25fr .75fr;gap:22px;align-items:stretch;
}
.card{
    background:var(--card);border:1px solid var(--line);border-radius:28px;
    box-shadow:var(--shadow);overflow:hidden;
}
.hero-copy{padding:30px}
.eyebrow{display:inline-flex;gap:8px;align-items:center;color:var(--good);font-weight:900;font-size:14px}
h1,h2,h3{line-height:1.25;margin:0 0 12px}
h1{font-size:clamp(30px,5vw,54px);letter-spacing:-.04em}
h2{font-size:clamp(24px,3.5vw,34px);letter-spacing:-.025em}
h3{font-size:21px}
.lead{font-size:18px;color:var(--muted)}
.meta-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.meta-row span,.tag{
    border:1px solid var(--line);background:var(--soft);border-radius:999px;
    padding:6px 10px;color:var(--muted);font-size:13px;font-weight:700;
}
.hero-media{position:relative;min-height:360px}
.hero-media img,.media-frame img{width:100%;height:100%;object-fit:cover}
.hero-media figcaption,.media-frame figcaption{
    position:absolute;left:16px;right:16px;bottom:14px;
    background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.6);
    border-radius:16px;padding:10px 12px;color:var(--muted);font-size:13px;
}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.section{margin-top:34px}
.section-head{
    display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:16px;
}
.section-head p{margin:0;color:var(--muted)}
.news-card,.author-card,.comment-card,.faq-card,.topic-card{
    padding:22px;border:1px solid var(--line);background:#fff;border-radius:24px;box-shadow:0 10px 30px rgba(34,54,86,.06)
}
.news-card .category{font-size:13px;color:var(--good);font-weight:900}
.news-card p,.topic-card p,.faq-card p,.author-card p,.comment-card p{color:var(--muted);margin:8px 0 0}
.video-card{position:relative;overflow:hidden}
.media-frame{position:relative;aspect-ratio:16/9;background:var(--soft)}
.play-btn{
    position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;
    background:rgba(36,59,99,.84);display:grid;place-items:center;color:#fff;
    transform:scale(.82);opacity:0;transition:.22s ease;font-weight:900;
}
.video-card:hover .play-btn,.video-card.is-hover .play-btn{opacity:1;transform:scale(1)}
.video-card .body{padding:18px}
.stat-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;color:var(--muted);font-size:13px}
.stat-row span{padding:4px 8px;background:var(--soft);border-radius:999px}
.split{
    display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;align-items:start;
}
.breadcrumb{color:var(--muted);font-size:14px;margin:0 0 18px}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.article-body{padding:30px}
.article-body p{color:#334158}
.article-body blockquote{
    border-left:4px solid var(--accent);background:#fff8ed;margin:22px 0;padding:14px 18px;border-radius:14px;color:#5a4630
}
.article-body ul{padding-left:22px}
.side-box{padding:22px;position:sticky;top:160px}
.author-list{display:flex;gap:12px;align-items:center;margin-top:12px}
.avatar{
    width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#dbe7fa,#fff2d9);
    display:grid;place-items:center;font-weight:900;color:var(--brand)
}
.cta{
    background:linear-gradient(135deg,#243b63,#5a78af);color:#fff;
    padding:26px;border-radius:28px;box-shadow:var(--shadow)
}
.cta p{color:rgba(255,255,255,.82)}
.form-grid{display:grid;gap:14px}
.form-grid input,.form-grid textarea{
    width:100%;border:1px solid var(--line);border-radius:16px;padding:12px 14px;font:inherit;background:#fff
}
.table-list{width:100%;border-collapse:separate;border-spacing:0 10px}
.table-list td,.table-list th{padding:12px 14px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.table-list th:first-child,.table-list td:first-child{border-left:1px solid var(--line);border-radius:16px 0 0 16px}
.table-list th:last-child,.table-list td:last-child{border-right:1px solid var(--line);border-radius:0 16px 16px 0}
.site-footer{
    margin-top:46px;background:#121d30;color:#dbe6f5;padding:36px 20px
}
.footer-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:24px}
.footer-grid p{color:#aebbd0}
.footer-grid h2{font-size:18px;color:#fff}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.notice{padding:14px 16px;border-radius:18px;background:#fff8ed;border:1px solid #f3d9ad;color:#6b4e23}
@media (max-width:900px){
    .hero,.split,.article-layout,.footer-grid{grid-template-columns:1fr}
    .grid-3,.grid-2{grid-template-columns:1fr}
    .topbar{align-items:flex-start;flex-direction:column}
    .search-strip{flex-wrap:wrap}
    #searchHint{width:100%}
    .hero-copy,.article-body{padding:22px}
    .side-box{position:static}
}