:root{
  --c-primary-50:#EFF5FF; --c-primary-100:#D9E6FB; --c-primary-300:#8FB6EE;
  --c-primary-500:#2A6BD4; --c-primary-600:#1C56B5; --c-primary-700:#14418C; --c-primary-900:#0B2752;
  --c-neutral-0:#FFFFFF; --c-neutral-50:#F7F8FA; --c-neutral-100:#EFF1F5; --c-neutral-200:#E1E5EB;
  --c-neutral-400:#9AA3AF; --c-neutral-600:#5A6472; --c-neutral-900:#1F2937;
  --c-success:#15803D; --c-success-bg:#ECFDF3;
  --c-warning:#B45309; --c-warning-bg:#FFFBEB;
  --c-danger:#B91C1C;  --c-danger-bg:#FEF2F2;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 4px 12px rgba(16,24,40,.06);
  --shadow-lg:0 12px 32px rgba(11,39,82,.10);

  --container:1200px;
  --header-h:72px;

  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--c-neutral-0);color:var(--c-neutral-900);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--c-primary-500);outline-offset:2px;border-radius:var(--r-sm)}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--sp-6)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:var(--sp-4);top:-60px;z-index:100;background:var(--c-primary-600);color:#fff;
  padding:10px 16px;border-radius:var(--r-md);transition:top .2s ease}
.skip-link:focus{top:var(--sp-3)}

.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:16px;height:16px}
.icon-lg{width:24px;height:24px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:44px;padding:0 20px;border-radius:var(--r-md);
  font-size:15px;font-weight:500;line-height:1;white-space:nowrap;
  transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--c-primary-600);color:#fff}
.btn-primary:hover{background:var(--c-primary-700)}
.btn-outline{background:transparent;color:var(--c-primary-700);border:1px solid var(--c-primary-300)}
.btn-outline:hover{background:var(--c-primary-50);border-color:var(--c-primary-500)}
.btn-ghost{background:var(--c-neutral-100);color:var(--c-neutral-900)}
.btn-ghost:hover{background:var(--c-neutral-200)}
.btn-sm{height:38px;padding:0 16px;font-size:14px}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn-block{width:100%}
/* 软件下载按钮：接口调用失败时的状态色（不只靠颜色，按钮文字也会变成「下载失败…」并播报到 aria-live） */
.btn.is-error{background:var(--c-danger)}
.text-link{display:inline-flex;align-items:center;gap:6px;color:var(--c-primary-700);font-size:14px;font-weight:500;
  transition:transform .2s ease,color .2s ease}
.text-link .icon{width:16px;height:16px;transition:transform .2s ease}
.text-link:hover{color:var(--c-primary-500)}
.text-link:hover .icon{transform:translateX(3px)}

/* ---------- 顶部导航 ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  border-bottom:1px solid transparent;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease;
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
}
.site-header.is-scrolled{background:rgba(255,255,255,.94);border-bottom-color:var(--c-neutral-200);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);height:var(--header-h)}

.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);
  background:var(--c-primary-600);color:#fff;box-shadow:var(--shadow-sm)}
.brand-mark svg{width:23px;height:23px;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:18px;font-weight:600;letter-spacing:.5px}
.brand-text small{font-size:10px;letter-spacing:1.2px;color:var(--c-neutral-400);font-weight:400}

.nav ul{display:flex;align-items:center;gap:var(--sp-2)}
.nav a{display:block;padding:8px 14px;border-radius:var(--r-sm);font-size:15px;color:var(--c-neutral-900);
  transition:background-color .2s ease,color .2s ease}
.nav a:hover{background:var(--c-primary-50);color:var(--c-primary-700)}

.header-actions{display:flex;align-items:center;gap:var(--sp-2)}
.nav-toggle{display:none;place-items:center;width:44px;height:44px;border-radius:var(--r-md);
  border:1px solid var(--c-neutral-200);color:var(--c-neutral-900)}
.nav-toggle:hover{background:var(--c-neutral-50)}

/* ---------- 移动端抽屉 ---------- */
.nav-backdrop{position:fixed;inset:0;z-index:58;background:rgba(11,39,82,.35);opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease}
.nav-panel{position:fixed;z-index:60;left:0;right:0;top:0;background:#fff;padding:var(--sp-4) var(--sp-6) var(--sp-6);
  transform:translateY(-100%);transition:transform .25s ease;box-shadow:var(--shadow-lg)}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}
body.nav-open .nav-panel{transform:translateY(0)}
.nav-panel-head{display:flex;align-items:center;justify-content:space-between;height:56px}
.nav-panel ul{display:flex;flex-direction:column;padding:var(--sp-2) 0 var(--sp-4)}
.nav-panel a{display:block;padding:14px 4px;font-size:16px;border-bottom:1px solid var(--c-neutral-100)}
.nav-panel .btn{width:100%;margin-top:var(--sp-3)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#F2F6FD 0%,#FFFFFF 100%);
  padding:var(--sp-12) 0 var(--sp-16)}
.hero-grid{display:grid;gap:var(--sp-12);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--c-primary-100);color:var(--c-primary-700);font-size:13px;box-shadow:var(--shadow-sm)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--c-primary-500)}
.hero h1{margin-top:var(--sp-6);font-size:30px;line-height:1.3;font-weight:600;letter-spacing:-.5px}
.hero h1 em{font-style:normal;color:var(--c-primary-600)}
.hero-sub{margin-top:var(--sp-4);max-width:34em;font-size:16px;color:var(--c-neutral-600)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-8)}
.hero-facts{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:1px solid var(--c-neutral-200)}
.hero-fact{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--c-neutral-600)}
.hero-fact .icon{width:18px;height:18px;color:var(--c-primary-500)}

/* ---------- Hero 图片轮播（图源=新闻封面） ---------- */
.hero-visual{position:relative}
.carousel{position:relative}
.carousel-viewport{overflow:hidden;border:1px solid var(--c-neutral-200);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);background:#fff}
.carousel-track{display:flex;margin:0;padding:0;list-style:none;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.slide{flex:0 0 100%;min-width:100%}
.slide-link{position:relative;display:block;aspect-ratio:16/10;color:var(--c-neutral-900)}
.slide-art{position:absolute;inset:0}
.slide-art svg{display:block;width:100%;height:100%}
/* 轮播里的真实封面图：容器是 aspect-ratio:16/10 的绝对定位层，
   不给尺寸的话 <img> 会按原始像素铺出来、盖住右下角的标题文字 */
.slide-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.slide-copy{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:5px;
  padding:var(--sp-8) var(--sp-6) var(--sp-4);
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.93) 44%,#fff 100%)}
.slide-tag{align-self:flex-start;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;
  background:var(--c-primary-50);color:var(--c-primary-700)}
.slide-tag-warn{background:var(--c-warning-bg);color:var(--c-warning)}
.slide-copy strong{font-size:clamp(15px,1.3vw,17px);font-weight:600;line-height:1.45;letter-spacing:-.2px}
.slide-copy time{font-size:12px;color:var(--c-neutral-400)}
.slide-link:hover .slide-copy strong{color:var(--c-primary-700)}
.slide-link:focus-visible{outline:2px solid var(--c-primary-600);outline-offset:-2px;border-radius:var(--r-lg)}
.carousel-btn{position:absolute;top:34%;z-index:3;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;border:1px solid var(--c-neutral-200);background:rgba(255,255,255,.94);
  color:var(--c-primary-700);cursor:pointer;box-shadow:var(--shadow-md);
  transition:transform .2s ease,background-color .2s ease}
.carousel-btn:hover{background:#fff;transform:scale(1.05)}
.carousel-btn:active{transform:scale(.95)}
.carousel-btn .icon{width:18px;height:18px}
.carousel-prev{left:var(--sp-3)}
.carousel-next{right:var(--sp-3)}
.carousel-dots{display:flex;justify-content:center;gap:2px;margin-top:var(--sp-4)}
.carousel-dot{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer}
.carousel-dot i{display:block;width:8px;height:8px;border-radius:var(--r-pill);background:var(--c-neutral-400);
  transition:width .25s ease,background-color .25s ease}
.carousel-dot:hover i{background:var(--c-primary-500)}
.carousel-dot[aria-current="true"] i{width:22px;background:var(--c-primary-600)}

/* ---------- 通用 section ---------- */
.section{padding:var(--sp-16) 0}
.section-alt{background:var(--c-neutral-50)}
.section-head{max-width:640px}
.section-head .label{font-size:13px;font-weight:500;color:var(--c-primary-600);letter-spacing:1px}
.section-head h2{margin-top:var(--sp-2);font-size:24px;font-weight:600;letter-spacing:-.3px}
.section-head p{margin-top:var(--sp-3);font-size:15px;color:var(--c-neutral-600)}
.section-head-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:flex-end;justify-content:space-between}

.grid-cards{display:grid;gap:var(--sp-6);margin-top:var(--sp-8)}
.grid-3{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}

/* ---------- 新闻 ---------- */
.news-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--c-neutral-200);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.news-card:hover{transform:translateY(-2px);border-color:var(--c-primary-300);box-shadow:var(--shadow-md)}
/* overflow:hidden 不可少：真实封面图按 object-fit:cover 裁切，容器之外的内容必须被切掉，
   否则 158px 高的卡片会被图片撑开、压到下面的标题与摘要 */
.news-cover{position:relative;height:158px;overflow:hidden;background:var(--c-primary-50);display:grid;place-items:center}
.news-cover svg{width:100%;height:100%}
/* 真实封面图（news.cover_image_url）：铺满 + 居中裁切。
   卡片是 158px 高的扁容器，16:9 的图会上下各裁约 13%，故出图时关键信息须落在中间安全区 */
.news-cover img{width:100%;height:100%;object-fit:cover;object-position:center}
.news-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-4) var(--sp-6) var(--sp-6)}
.tag{align-self:flex-start;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;
  background:var(--c-primary-50);color:var(--c-primary-700)}
.tag-neutral{background:var(--c-neutral-100);color:var(--c-neutral-600)}
/* 「政策解读」分类：首页当前无该类条目，样式先留着，接入真实新闻数据后可直接使用 */
.tag-warn{background:var(--c-warning-bg);color:var(--c-warning)}
.news-card h3{margin-top:var(--sp-3);font-size:17px;font-weight:600;line-height:1.45}
.news-card p{margin-top:var(--sp-2);font-size:14px;color:var(--c-neutral-600);flex:1}
.news-meta{display:flex;align-items:center;gap:8px;margin-top:var(--sp-4);padding-top:var(--sp-3);
  border-top:1px solid var(--c-neutral-100);font-size:13px;color:var(--c-neutral-400)}
.empty-state{margin-top:var(--sp-8);padding:var(--sp-12) var(--sp-6);text-align:center;
  border:1px dashed var(--c-neutral-200);border-radius:var(--r-lg);background:#fff;color:var(--c-neutral-600)}
.empty-state .icon{width:32px;height:32px;margin:0 auto var(--sp-3);color:var(--c-neutral-400)}
.empty-state strong{display:block;font-size:16px;font-weight:500;color:var(--c-neutral-900)}
.empty-state span{display:block;margin-top:6px;font-size:14px}

/* ---------- 软件下载 ---------- */
.soft-card{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);padding:var(--sp-6);
  background:#fff;border:1px solid var(--c-neutral-200);border-radius:var(--r-lg);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.soft-card:hover{transform:translateY(-2px);border-color:var(--c-primary-300);box-shadow:var(--shadow-md)}
.soft-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--c-primary-50);color:var(--c-primary-600)}
.soft-icon .icon{width:26px;height:26px}
.soft-main{min-width:0}
.soft-main h3{font-size:17px;font-weight:600}
.soft-main>p{margin-top:6px;font-size:14px;color:var(--c-neutral-600)}
.soft-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:1px solid var(--c-neutral-100)}
.soft-meta li{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--c-neutral-600)}
.soft-meta .icon{width:15px;height:15px;color:var(--c-neutral-400)}
.soft-actions{grid-column:1/-1;display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-2)}

/* ---------- 首页：新闻卡片整卡可点 ---------- */
/* 链接只挂在标题上，再用 ::after 铺满整张卡片（stretched link）。
   这样卡片里只有一个可聚焦链接、且链接的可访问名称就是标题；
   若把 <article> 整个包进 <a>，读屏会把「分类＋标题＋摘要＋日期」整段念成链接名。 */
.news-card{position:relative}
.news-card .card-link::after{content:"";position:absolute;inset:0}
.news-card:hover h3{color:var(--c-primary-700)}
/* 焦点环画在整张卡上，而不是只圈住标题那几个字，键盘用户才能看清选中的是哪张卡 */
.news-card:focus-within{outline:3px solid var(--c-primary-500);outline-offset:2px}

/* ---------- 首页：软件未上架安装包时的状态文本 ---------- */
/* 用一句文字说明，而不是渲染「禁用按钮」或给它 aria-disabled ——
   前者会让人以为能点（点了没反应），后者是在为一个假控件写解释。 */
.soft-unavailable{display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:13px;color:var(--c-neutral-600)}
.soft-unavailable .icon{width:15px;height:15px;color:var(--c-warning)}

/* ---------- 关于我们 / 联系方式 ---------- */
.about-grid{display:grid;gap:40px;margin-top:var(--sp-8)}
.about-copy{display:flex;flex-direction:column}
.about-copy .label{font-size:13px;font-weight:500;color:var(--c-primary-600);letter-spacing:1px}
.about-copy h2{margin-top:var(--sp-2);font-size:24px;font-weight:600}
.about-copy p{margin-top:var(--sp-4);font-size:15px;color:var(--c-neutral-600)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-8);
  padding:var(--sp-6) 0;border-top:1px solid var(--c-neutral-200);border-bottom:1px solid var(--c-neutral-200)}
.fact strong{display:block;font-size:24px;font-weight:600;color:var(--c-primary-700);line-height:1.2}
.fact span{display:block;margin-top:6px;font-size:13px;color:var(--c-neutral-600)}
.contact-card{background:#fff;border:1px solid var(--c-neutral-200);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.contact-card h3{font-size:17px;font-weight:600}
.contact-list{margin-top:var(--sp-4);display:grid;gap:var(--sp-4)}
.contact-item{display:flex;gap:12px;font-size:14px}
.contact-item .icon{width:18px;height:18px;margin-top:3px;color:var(--c-primary-600)}
.contact-item dt{font-size:13px;color:var(--c-neutral-400)}
.contact-item dd{margin:2px 0 0;color:var(--c-neutral-900)}
.contact-link{color:var(--c-primary-700);text-decoration:none;border-bottom:1px solid var(--c-primary-300);
  transition:color .2s ease,border-color .2s ease}
.contact-link:hover{color:var(--c-primary-600);border-color:var(--c-primary-600)}
/* ---------- 页脚 ---------- */
.site-footer{background:var(--c-primary-900);color:#C7D6EC;padding:var(--sp-16) 0 0}
.footer-grid{display:grid;gap:var(--sp-8)}
.footer-brand .brand-text strong{color:#fff}
.footer-brand .brand-text small{color:#7E96BC}
.footer-brand p{margin-top:var(--sp-4);max-width:30em;font-size:13px;line-height:1.7;color:#A8BEDC}
.site-footer h4{font-size:14px;font-weight:600;color:#fff;margin-bottom:var(--sp-4)}
.site-footer li+li{margin-top:10px}
.site-footer a,.site-footer .footer-text{font-size:13px;color:#A8BEDC;transition:color .2s ease}
.site-footer a:hover{color:#fff}
.footer-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;margin-top:var(--sp-12);
  padding:var(--sp-4) 0 var(--sp-6);border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#A8BEDC}
.footer-bottom .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-4)}

/* ---------- ICP 备案展示（与版权行同行） ----------
   用户口径：备案编号紧跟在统一社会信用代码之后，同处一行，不单起一行。
   .meta 是 flex-wrap 容器，窄屏下自动折行，无需额外媒体查询。
   字号不单独下调：与版权行保持 13px 一致（同行内字号不齐会很显眼）。 */
.footer-bottom .icp-no{color:#C7D6EC}
.footer-bottom .icp-no b{font-weight:500}
.footer-bottom .icp-link{color:#A8BEDC;text-decoration:none;border-bottom:1px solid rgba(168,190,220,.35)}
.footer-bottom .icp-link:hover{color:#fff;border-bottom-color:currentColor}
.site-footer :focus-visible{outline-color:#8FB6EE}

/* ================================================================================
   新闻详情页（/news/{id}）与错误页
   ----------------------------------------------------------------
   新建页面沿用既有 token，不引入新颜色；正文区 .prose 只针对 MarkdownRenderer
   的白名单标签写样式（h2/h3/p/ul/ol/li/strong/em/code/pre/blockquote/hr/a），
   不写通配选择器，避免与后台样式互相污染。
   响应式：默认单列（320px 不横向滚动），≥768px 才出现双列翻页条。
   ================================================================================ */

/* ---------- 面包屑 ---------- */
.breadcrumb{padding:var(--sp-6) 0 0;font-size:13px;color:var(--c-neutral-400)}
.breadcrumb ol,.breadcrumb li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.breadcrumb li{min-width:0}
.breadcrumb a{color:var(--c-neutral-600);transition:color .2s ease}
.breadcrumb a:hover{color:var(--c-primary-600)}
.breadcrumb .icon{width:14px;height:14px;color:var(--c-neutral-400)}
/* 末项是当前文章标题，可能很长：截断而不是撑破布局，完整标题在 h1 里 */
.breadcrumb [aria-current="page"]{color:var(--c-neutral-900);
  max-width:20em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 文章主体 ---------- */
.article{max-width:760px;margin:0 auto;padding:var(--sp-8) 0 var(--sp-16)}
.article-head h1{margin-top:var(--sp-3);font-size:26px;line-height:1.35;font-weight:600;letter-spacing:-.3px}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-6);
  margin-top:var(--sp-4);padding-bottom:var(--sp-6);border-bottom:1px solid var(--c-neutral-200);
  font-size:13px;color:var(--c-neutral-400)}
.article-meta .meta-item{display:flex;align-items:center;gap:6px}
.article-meta .icon{width:15px;height:15px;color:var(--c-neutral-400)}

.article-cover{margin-top:var(--sp-8);aspect-ratio:16/9;display:grid;place-items:center;
  border:1px solid var(--c-neutral-200);border-radius:var(--r-lg);overflow:hidden;background:var(--c-primary-50)}
.article-cover svg{width:100%;height:100%}
.article-cover img{width:100%;height:100%;object-fit:cover}

/* 摘要导语：正文缺失时它就是正文，因此单独给一条左色条，与正文段落区分开 */
.article-lede{margin-top:var(--sp-8);padding:var(--sp-4) var(--sp-6);
  border-left:3px solid var(--c-primary-300);border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--c-neutral-50);font-size:15px;color:var(--c-neutral-600)}

/* ---------- 正文排版 ---------- */
.prose{margin-top:var(--sp-8);font-size:16px;line-height:1.85;color:var(--c-neutral-900)}
.prose > * + *{margin-top:var(--sp-6)}
/* 正文首块不再叠加上边距，否则与导语之间的空隙会翻倍 */
.prose > :first-child{margin-top:0}
.prose h2{margin-top:var(--sp-12);font-size:20px;font-weight:600;line-height:1.45}
.prose h3{margin-top:var(--sp-8);font-size:17px;font-weight:600;line-height:1.5}
.prose h4{margin-top:var(--sp-6);font-size:16px;font-weight:600;line-height:1.5}
/* 标题与紧随其后的正文贴紧，避免标题看起来「悬在半空」 */
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:var(--sp-3)}
.prose ul{list-style:disc;padding-left:1.4em}
.prose ol{list-style:decimal;padding-left:1.5em}
.prose li+li{margin-top:var(--sp-2)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  padding:2px 6px;border-radius:var(--r-sm);background:var(--c-neutral-100);color:var(--c-primary-700)}
.prose pre{margin:0;padding:var(--sp-4) var(--sp-6);border:1px solid var(--c-neutral-200);
  border-radius:var(--r-md);background:var(--c-neutral-50);overflow-x:auto}
.prose pre code{padding:0;background:none;color:var(--c-neutral-900);font-size:13px;line-height:1.7}
.prose blockquote{margin:0;padding:var(--sp-3) var(--sp-6);border-left:3px solid var(--c-primary-300);
  border-radius:0 var(--r-md) var(--r-md) 0;background:var(--c-primary-50);color:var(--c-neutral-600)}
.prose blockquote > * + *{margin-top:var(--sp-3)}
.prose hr{border:0;border-top:1px solid var(--c-neutral-200)}
.prose a{color:var(--c-primary-700);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--c-primary-300);transition:color .2s ease,text-decoration-color .2s ease}
.prose a:hover{color:var(--c-primary-600);text-decoration-color:var(--c-primary-600)}

/* ---------- 上一篇 / 下一篇 ---------- */
.pager{display:grid;gap:var(--sp-4);margin-top:var(--sp-12);padding-top:var(--sp-8);
  border-top:1px solid var(--c-neutral-200)}
.pager-item{display:flex;flex-direction:column;gap:6px;padding:var(--sp-4) var(--sp-6);
  border:1px solid var(--c-neutral-200);border-radius:var(--r-md);background:#fff;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.pager-item:hover{transform:translateY(-2px);border-color:var(--c-primary-300);box-shadow:var(--shadow-md)}
.pager-item .label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--c-neutral-400)}
.pager-item .label .icon{width:14px;height:14px}
.pager-item strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:15px;font-weight:500;line-height:1.5}
.pager-item:hover strong{color:var(--c-primary-700)}

/* ---------- 文章底部行动区 ---------- */
.article-cta{margin-top:var(--sp-12);padding:var(--sp-8);text-align:center;
  border:1px solid var(--c-primary-100);border-radius:var(--r-lg);background:var(--c-primary-50)}
.article-cta strong{display:block;font-size:17px;font-weight:600}
.article-cta p{margin-top:var(--sp-2);font-size:14px;color:var(--c-neutral-600)}
.article-cta .btn{margin-top:var(--sp-6)}

/* ---------- 错误页 ---------- */
.error-page{min-height:100vh;display:grid;place-items:center;padding:var(--sp-16) var(--sp-6);
  background:linear-gradient(180deg,#F2F6FD 0%,#FFF 100%)}
.error-box{width:100%;max-width:520px;text-align:center}
.error-mark{display:inline-grid;place-items:center;width:48px;height:48px;margin-bottom:var(--sp-6);
  border-radius:var(--r-md);background:var(--c-primary-600);color:#fff}
.error-mark svg{width:28px;height:28px}
.error-code{font-size:64px;font-weight:600;line-height:1;letter-spacing:-2px;color:var(--c-primary-600)}
.error-box h1{margin-top:var(--sp-4);font-size:22px;font-weight:600}
.error-box p{margin-top:var(--sp-3);font-size:15px;color:var(--c-neutral-600)}
.error-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8)}

@media (min-width:768px){
  .article-head h1{font-size:30px}
  .pager{grid-template-columns:1fr 1fr}
  /* 固定占右列：只有「下一篇」时不会被排到左上角，左右语义始终一致 */
  .pager-item.is-next{grid-column:2;text-align:right;align-items:flex-end}
  .pager-item.is-next .label{flex-direction:row-reverse}
}
@media (max-width:575px){
  .article{padding:var(--sp-6) 0 var(--sp-12)}
  .article-head h1{font-size:22px}
  .article-lede{padding:var(--sp-3) var(--sp-4)}
  .prose{font-size:15px;line-height:1.8}
  .prose pre{padding:var(--sp-3) var(--sp-4)}
  .error-code{font-size:52px}
}

/* ---------- 断点 ---------- */
@media (min-width:576px){
  .hero h1{font-size:30px}
}
@media (min-width:768px){
  .section{padding:var(--sp-20) 0}
  .hero{padding:var(--sp-16) 0 var(--sp-20)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .section-head h2{font-size:30px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:992px){
  .nav-toggle{display:none}
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-16)}
  .hero h1{font-size:38px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1fr 1fr;gap:var(--sp-12)}
  .footer-grid{grid-template-columns:1.6fr 1fr 1.3fr;gap:var(--sp-12)}
}
@media (max-width:991px){
  .nav{display:none}
  .nav-toggle{display:grid}
  .header-actions .btn{display:none}
}
@media (max-width:575px){
  .container{padding:0 var(--sp-4)}
  .section{padding:var(--sp-12) 0}
  .carousel-btn{width:34px;height:34px}
  .carousel-btn .icon{width:16px;height:16px}
  .slide-copy{padding:var(--sp-6) var(--sp-4) var(--sp-3)}
  .soft-card{grid-template-columns:1fr}
  .soft-icon{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}