/* ============================================================
   insert.注塑.公司 — 设计系统「铜线蓝图」
   深蓝图纸底 × 黄铜金（铜嵌件材质呼应）× 等宽参数标注
   表格 class = spec（与 skeleton_contract.yaml 对齐）
   ============================================================ */
:root{
  --bg0:#070D1A; --bg1:#0B1526; --bg2:#0F1D33; --bg3:#13253F;
  --line:#1D2E4A; --line-soft:#16243C;
  --brass:#C8A24B; --brass-bright:#E4C87E; --brass-dim:#8A7134;
  --blue:#3F8CFF; --blue-deep:#1D5BD6;
  --ink:#E8EDF6; --dim:#9FB0C9; --faint:#6B7C97;
  --danger:#E06C5A;
  --mono:"Cascadia Code","JetBrains Mono",Consolas,"Courier New",monospace;
  --serif:"Noto Serif SC","Source Han Serif SC","STZhongsong","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --maxw:1160px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--bg0); color:var(--ink);
  line-height:1.75; font-size:16px;
  background-image:
    linear-gradient(rgba(63,140,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,140,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
}
a{color:var(--blue); text-decoration:none}
a:hover{color:var(--brass-bright)}
img{max-width:100%; display:block}
::selection{background:rgba(200,162,75,.35)}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.35}
h1,h2,h3,p,li,td,th{overflow-wrap:anywhere; word-break:break-word}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}

/* ── 顶部导航 ─────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,13,26,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header::after{content:""; display:block; height:2px;
  background:linear-gradient(90deg,var(--brass-dim),var(--brass),var(--brass-dim)); opacity:.55}
.header-in{max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; gap:28px; height:64px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); flex-shrink:0}
.brand img{width:30px; height:30px}
.brand b{font-family:var(--serif); font-size:17px; letter-spacing:.5px}
.brand small{display:block; font-family:var(--mono); font-size:10px; color:var(--faint); letter-spacing:1px}
.main-nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap}
.main-nav a{
  color:var(--dim); font-size:14px; padding:6px 12px; border-radius:3px;
  border:1px solid transparent; transition:.18s;
}
.main-nav a:hover{color:var(--brass-bright); border-color:var(--line)}
.main-nav a.on{color:var(--brass); border-color:var(--brass-dim); background:rgba(200,162,75,.08)}

/* ── 面包屑 ─────────────────────────────── */
.crumb{font-family:var(--mono); font-size:12px; color:var(--faint); padding:18px 0 0}
.crumb nav[aria-label="breadcrumb"]{display:flex; flex-wrap:wrap; gap:6px}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--brass)}
.crumb .sep{color:var(--brass-dim)}

/* ── 页首标注行（工程图纸语言） ────────────── */
.sec-tag{
  font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--brass);
  display:flex; align-items:center; gap:10px; margin:26px 0 10px; text-transform:uppercase;
}
.sec-tag::before{content:""; width:34px; height:1px; background:var(--brass)}
.sec-tag::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}

/* ── Hero（首页） ─────────────────────────── */
.hero{position:relative; padding:72px 0 60px; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center}
.hero-kicker{font-family:var(--mono); font-size:13px; color:var(--blue); letter-spacing:3px; margin-bottom:18px}
.hero h1{font-size:46px; letter-spacing:1px}
.hero h1 em{font-style:normal; color:var(--brass)}
.hero-sub{color:var(--dim); font-size:17px; margin:20px 0 8px; max-width:560px}
.hero-props{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.tol-chip{
  font-family:var(--mono); font-size:12.5px; color:var(--brass-bright);
  border:1px solid var(--brass-dim); background:rgba(200,162,75,.07);
  padding:4px 10px; border-radius:2px;
}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; padding:11px 22px; border-radius:2px; transition:.18s; cursor:pointer;
  border:1px solid var(--brass); color:#0A1428; background:linear-gradient(180deg,var(--brass-bright),var(--brass));
  font-weight:600;
}
.btn:hover{filter:brightness(1.08); color:#0A1428}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brass); color:var(--brass-bright)}

/* 图纸卡片（首屏右侧） */
.drawing-card{
  position:relative; background:var(--bg1); border:1px solid var(--line); border-radius:4px;
  padding:22px;
}
.drawing-card::before,.drawing-card::after,
.drawing-card .tick-b::before,.drawing-card .tick-b::after{
  content:""; position:absolute; width:12px; height:12px; border-color:var(--brass); border-style:solid;
}
.drawing-card::before{top:-1px; left:-1px; border-width:2px 0 0 2px}
.drawing-card::after{top:-1px; right:-1px; border-width:2px 2px 0 0}
.drawing-card .tick-b::before{bottom:-1px; left:-1px; border-width:0 0 2px 2px}
.drawing-card .tick-b::after{bottom:-1px; right:-1px; border-width:0 2px 2px 0}
.dwg-head{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px;
  color:var(--faint); border-bottom:1px dashed var(--line); padding-bottom:10px; margin-bottom:14px; letter-spacing:1px}
.axis-row{display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.axis-row:last-child{border-bottom:none}
.axis-no{font-family:var(--mono); font-size:12px; color:var(--brass); border:1px solid var(--brass-dim);
  width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.axis-row h3{font-size:15.5px; color:var(--ink); font-family:var(--sans); font-weight:600}
.axis-row p{font-size:13px; color:var(--dim); line-height:1.6}

/* ── 通用版块 ─────────────────────────────── */
.section{padding:56px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:30px; flex-wrap:wrap}
.section-head h2{font-size:30px}
.section-head .more{font-family:var(--mono); font-size:13px; color:var(--blue)}

/* 卡片网格：3/4 列 */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.card{
  background:var(--bg1); border:1px solid var(--line); border-radius:4px; padding:22px;
  transition:border-color .18s, transform .18s; position:relative; display:flex; flex-direction:column;
}
.card:hover{border-color:var(--brass-dim); transform:translateY(-2px)}
.card .c-tag{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:1.5px; margin-bottom:8px}
.card h3{font-size:17px; margin-bottom:8px; font-family:var(--sans); font-weight:600}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--brass-bright)}
.card p{font-size:13.5px; color:var(--dim); flex:1}
.card .c-foot{font-family:var(--mono); font-size:12px; color:var(--brass); margin-top:14px; padding-top:10px;
  border-top:1px dashed var(--line)}

/* 数据条（首页能力参数带） */
.spec-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg1),var(--bg0))}
.spec-strip-in{max-width:var(--maxw); margin:0 auto; padding:26px 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.spec-item .v{font-family:var(--mono); font-size:26px; color:var(--brass-bright)}
.spec-item .v small{font-size:14px; color:var(--brass)}
.spec-item .k{font-size:13px; color:var(--dim); margin-top:2px}

/* ── 文章/产品详情布局 ────────────────────── */
.layout{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:40px; padding:30px 0 60px; align-items:start}
.article-body{max-width:760px}
.page-title{font-size:34px; margin:10px 0 6px}
.page-title-sm{font-size:28px}
.title-meta{display:flex; flex-wrap:wrap; gap:14px; font-family:var(--mono); font-size:12.5px;
  color:var(--faint); margin-bottom:6px}
.title-meta .cat{color:var(--brass)}
.kw-line{font-family:var(--mono); font-size:12.5px; color:var(--faint); margin:10px 0 4px}
.kw-line b{color:var(--blue); font-weight:500}

.article-body .abstract{
  background:var(--bg1); border-left:3px solid var(--brass); padding:16px 18px;
  font-size:15px; color:var(--ink); margin:18px 0; border-radius:0 3px 3px 0;
}
.article-body .abstract b{color:var(--brass); font-family:var(--mono); font-size:12px; letter-spacing:2px}
.time-line{font-family:var(--mono); font-size:12.5px; color:var(--faint); margin:8px 0}
.article-body h2{font-size:23px; margin:38px 0 14px; padding-left:12px; border-left:3px solid var(--brass)}
.article-body h3{font-size:18px; margin:26px 0 10px; color:var(--brass-bright)}
.article-body p{margin:12px 0; color:#C9D4E4; font-size:15.5px}
.article-body ul,.article-body ol{margin:12px 0 12px 22px; color:#C9D4E4; font-size:15.5px}
.article-body li{margin:6px 0}
.article-body blockquote{
  border-left:3px solid var(--blue); background:rgba(63,140,255,.06);
  padding:12px 16px; margin:16px 0; font-size:14.5px; color:var(--dim); border-radius:0 3px 3px 0;
}
.article-body blockquote strong{color:var(--brass-bright)}
.callout-practice{
  border:1px dashed var(--brass-dim); background:rgba(200,162,75,.05);
  padding:14px 18px; margin:20px 0; font-size:14px; color:var(--dim); border-radius:3px;
}
.callout-practice b{color:var(--brass); display:block; font-family:var(--mono); font-size:12px;
  letter-spacing:2px; margin-bottom:6px}

/* 参数表 table.spec（与契约一致） */
table.spec{
  width:100%; border-collapse:collapse; margin:18px 0; font-size:14px;
  border:1px solid var(--line);
}
table.spec caption{
  caption-side:top; text-align:left; font-family:var(--mono); font-size:12px;
  color:var(--faint); padding-bottom:8px; letter-spacing:1px;
}
table.spec th{
  background:var(--bg3); color:var(--brass-bright); font-weight:600; text-align:left;
  padding:10px 12px; border:1px solid var(--line); font-size:13.5px; white-space:nowrap;
}
table.spec td{padding:9px 12px; border:1px solid var(--line-soft); color:#C9D4E4; vertical-align:top}
table.spec tr:nth-child(even) td{background:rgba(15,29,51,.5)}
table.spec td:first-child{color:var(--ink); white-space:nowrap}

/* FAQ 裸 <details>（与契约 bare_details 对齐） */
details{border:1px solid var(--line); border-radius:3px; margin:10px 0; background:var(--bg1)}
details summary{
  cursor:pointer; padding:13px 16px; font-size:15px; color:var(--ink); list-style:none;
  display:flex; align-items:center; gap:10px; font-weight:500;
}
details summary::-webkit-details-marker{display:none}
details summary::before{
  content:"+/"; font-family:var(--mono); font-size:12px; color:var(--brass);
  border:1px solid var(--brass-dim); width:22px; height:22px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}
details[open] summary::before{content:"−/"; color:var(--blue); border-color:var(--blue-deep)}
details .a{padding:0 16px 14px 48px; font-size:14.5px; color:var(--dim)}
.faq-block{margin:34px 0 10px}
.faq-block>h2{font-size:23px; margin:38px 0 14px; padding-left:12px; border-left:3px solid var(--brass)}

/* 相关阅读 / 相关产品 */
.rel-links{display:grid; gap:10px; margin:14px 0}
.rel-links a{
  display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  background:var(--bg1); border:1px solid var(--line); padding:12px 16px; border-radius:3px;
  font-size:14.5px; color:var(--ink); transition:.15s;
}
.rel-links a:hover{border-color:var(--brass-dim)}
.rel-links .why{font-size:12.5px; color:var(--faint); font-family:var(--mono); text-align:right; flex-shrink:0; max-width:46%}

/* 标签（M8：仅 span.tag-text） */
.tag-text{
  display:inline-block; font-family:var(--mono); font-size:12px; color:var(--faint);
  border:1px solid var(--line); padding:2px 9px; border-radius:2px; margin:0 6px 6px 0;
}

/* ── TOC（详情页目录，sticky，禁 fixed） ────── */
.toc-aside{position:sticky; top:84px; max-height:calc(100vh - 104px); overflow-y:auto;
  border-left:1px solid var(--line); padding-left:18px; font-size:13.5px}
.toc-aside .toc-head{font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--faint); margin-bottom:10px}
.toc-aside ul{list-style:none}
.toc-aside li{margin:7px 0}
.toc-aside a{color:var(--dim); display:block; border-left:2px solid transparent; margin-left:-20px; padding-left:18px; transition:.15s}
.toc-aside a:hover,.toc-aside a.on{color:var(--brass); border-left-color:var(--brass)}
.toc-aside li.lv3{margin-left:14px; font-size:12.5px}

/* ── 列表页 ─────────────────────────────── */
.list-layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:36px; padding:30px 0 60px; align-items:start}
.cat-side{position:sticky; top:84px}
ul.category-list{list-style:none; border:1px solid var(--line); border-radius:4px; overflow:hidden; background:var(--bg1)}
ul.category-list li+li{border-top:1px solid var(--line-soft)}
ul.category-list a{
  display:flex; justify-content:space-between; align-items:center; padding:11px 15px;
  color:var(--dim); font-size:14px; transition:.15s; border-left:2px solid transparent;
}
ul.category-list a:hover{color:var(--brass-bright); background:rgba(200,162,75,.05)}
ul.category-list a.on{color:var(--brass); border-left-color:var(--brass); background:rgba(200,162,75,.07)}
ul.category-list .n{font-family:var(--mono); font-size:11px; color:var(--faint)}
.cat-content .cat-desc{color:var(--dim); font-size:14.5px; margin:6px 0 24px; max-width:720px}
.item-row{
  display:block; background:var(--bg1); border:1px solid var(--line); border-radius:3px;
  padding:16px 20px; margin-bottom:12px; transition:.15s;
}
.item-row:hover{border-color:var(--brass-dim)}
.item-row h3{font-size:16.5px; font-family:var(--sans); font-weight:600; margin-bottom:4px}
.item-row h3 a{color:var(--ink)}
.item-row h3 a:hover{color:var(--brass-bright)}
.item-row p{font-size:13.5px; color:var(--dim)}
.item-row .meta{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:6px; display:flex; gap:14px; flex-wrap:wrap}
.item-row .meta .cat{color:var(--brass)}

/* ── 页脚 ─────────────────────────────── */
.site-footer{border-top:1px solid var(--line); background:var(--bg1); margin-top:40px}
.footer-in{max-width:var(--maxw); margin:0 auto; padding:36px 24px 26px}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:30px; margin-bottom:28px}
.footer-grid h4{font-size:14px; color:var(--ink); margin-bottom:10px; font-family:var(--sans)}
.footer-grid p,.footer-grid a{font-size:13px; color:var(--faint)}
.footer-grid ul{list-style:none}
.footer-grid li{margin:5px 0}
.footer-grid a:hover{color:var(--brass)}
.beian-bar{
  border-top:1px solid var(--line-soft); padding-top:18px; display:flex; flex-wrap:wrap;
  gap:8px 22px; align-items:center; justify-content:center; font-size:12.5px; color:var(--faint);
}
.beian-bar a{color:var(--faint); display:inline-flex; align-items:center; gap:5px; transition:.15s}
.beian-bar a:hover{color:var(--brass-bright)}
.beian-bar img,.beian-bar svg.icon{width:15px; height:15px; display:inline-block}
.footer-domain{font-family:var(--mono); font-size:11px; color:#4A5A75; text-align:center; margin-top:14px}

/* ── 浮动栏（右缘垂直居中）：企业微信名片 + 一键到顶 ── */
.float-rail{
  position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:60;
  display:flex; flex-direction:column; gap:10px;
}
.float-btn{
  height:44px; padding:0 15px 0 13px; border-radius:999px; border:1px solid var(--brass-dim);
  background:rgba(11,21,38,.92); color:var(--brass-bright); cursor:pointer;
  display:flex; align-items:center; gap:8px; transition:.18s;
  box-shadow:0 4px 18px rgba(0,0,0,.4); backdrop-filter:blur(6px);
}
.float-btn:hover{border-color:var(--brass); transform:translateY(-2px)}
.float-btn svg{width:19px; height:19px; flex:none}
.float-btn#backTopBtn{opacity:0; pointer-events:none; transition:opacity .25s, transform .18s}
.float-btn#backTopBtn.show{opacity:1; pointer-events:auto}
.float-btn .fb-label{
  font-size:12px; letter-spacing:.5px; white-space:nowrap;
  color:var(--brass-bright);
}

/* ── 企业微信名片弹层 ─────────────────────── */
.wechat-modal-overlay{
  position:fixed; inset:0; z-index:80; background:rgba(4,8,16,.78);
  display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(4px);
}
.wechat-modal-overlay.open{display:flex}
.wechat-modal{
  position:relative; background:var(--bg1); border:1px solid var(--brass-dim); border-radius:6px;
  padding:30px 30px 24px; max-width:340px; width:100%; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.wechat-modal .qr-box{
  width:220px; height:220px; margin:16px auto; background:#fff; padding:8px; border-radius:4px;
}
.wechat-modal h3{font-size:18px; margin-bottom:2px}
.wechat-modal .m-sub{font-size:13px; color:var(--dim)}
.wechat-modal .m-tip{font-size:12px; color:var(--faint); font-family:var(--mono); margin-top:10px}
.wechat-modal .m-close{
  position:absolute; top:10px; right:12px; background:none; border:none; color:var(--faint);
  font-size:20px; cursor:pointer;
}
.wechat-modal .m-close:hover{color:var(--brass)}
.wechat-modal img,.wechat-modal .qr-box svg{max-width:100%; height:auto}
.wechat-modal .qr-box svg{width:100%; height:100%}

/* ── 名片页：深蓝金边玻璃拟态卡片 ───────────── */
.card-stage{
  min-height:calc(100vh - 220px); display:flex; align-items:center; justify-content:center;
  padding:50px 20px 70px;
  background:
    radial-gradient(ellipse 60% 45% at 70% 20%, rgba(29,91,214,.18), transparent),
    radial-gradient(ellipse 50% 40% at 25% 80%, rgba(200,162,75,.10), transparent);
}
.glass-card{
  position:relative; width:min(880px,100%); border-radius:18px; overflow:hidden;
  background:linear-gradient(135deg, rgba(13,27,52,.88), rgba(9,17,34,.94));
  border:1px solid rgba(200,162,75,.45);
  box-shadow:0 0 0 1px rgba(200,162,75,.12), 0 0 42px rgba(29,91,214,.16), 0 30px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0;
}
.glass-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.06) 0%, transparent 32%);
}
.gc-left{padding:44px 42px; display:flex; flex-direction:column; justify-content:center}
.gc-mark{font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--brass); margin-bottom:16px}
.gc-name{font-family:var(--serif); font-size:38px; letter-spacing:2px; color:#F2ECDC}
.gc-title{font-size:15px; color:var(--brass-bright); margin-top:6px; letter-spacing:1px}
.gc-co{font-size:13.5px; color:var(--dim); margin-top:2px}
.gc-line{height:1px; margin:24px 0; background:linear-gradient(90deg, var(--brass-dim), transparent)}
.gc-points{list-style:none; font-size:13.5px; color:var(--dim)}
.gc-points li{margin:7px 0; padding-left:18px; position:relative}
.gc-points li::before{content:"◆"; position:absolute; left:0; font-size:9px; color:var(--brass); top:5px}
.gc-right{
  padding:40px 38px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-left:1px solid rgba(200,162,75,.22);
  background:linear-gradient(180deg, rgba(200,162,75,.05), transparent);
}
.gc-qr-wrap{width:216px; height:216px; background:#FBFCFE; border-radius:10px; padding:9px;
  border:1px solid rgba(200,162,75,.5); box-shadow:inset 0 0 0 3px rgba(29,91,214,.06), 0 10px 30px rgba(0,0,0,.35)}
.gc-qr-wrap svg{width:100%; height:100%; display:block}
.gc-qr-cap{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:12px; letter-spacing:1px; text-align:center}
.gc-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:13.5px;
  padding:9px 20px; border-radius:3px; color:#0A1428; font-weight:600;
  background:linear-gradient(180deg,var(--brass-bright),var(--brass)); border:1px solid var(--brass);
  transition:.18s;
}
.gc-btn:hover{filter:brightness(1.08); color:#0A1428}
.gc-corner{position:absolute; width:26px; height:26px; border-color:var(--brass); border-style:solid; opacity:.85}
.gc-corner.tl{top:10px; left:10px; border-width:2px 0 0 2px}
.gc-corner.tr{top:10px; right:10px; border-width:2px 2px 0 0}
.gc-corner.bl{bottom:10px; left:10px; border-width:0 0 2px 2px}
.gc-corner.br{bottom:10px; right:10px; border-width:0 2px 2px 0}

/* ── 服务包 / 边界区块 ─────────────────────── */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px}
.boundary-box{border:1px solid var(--line); border-radius:4px; background:var(--bg1); padding:24px}
.boundary-box h3{font-size:17px; margin-bottom:12px; font-family:var(--sans)}
.boundary-box ul{list-style:none}
.boundary-box li{font-size:14px; color:var(--dim); margin:9px 0; padding-left:20px; position:relative}
.boundary-box li::before{content:"▸"; position:absolute; left:0; color:var(--blue)}
.boundary-box.no-go li::before{content:"✕"; color:var(--danger); font-size:12px; top:1px}
.boundary-box.yes-go li::before{content:"✓"; color:var(--brass)}
.step-flow{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; counter-reset:step}
.step{background:var(--bg1); border:1px solid var(--line); border-radius:4px; padding:16px 14px; position:relative}
.step::before{
  counter-increment:step; content:"0" counter(step); font-family:var(--mono);
  font-size:12px; color:var(--brass); display:block; margin-bottom:8px;
}
.step h4{font-size:14.5px; font-family:var(--sans); margin-bottom:6px}
.step p{font-size:12.5px; color:var(--faint); line-height:1.6}

/* 归档 */
.archive-year{font-family:var(--mono); color:var(--brass); font-size:16px; margin:26px 0 10px}

/* 入场动效（html.js 时才启用，脚本失败内容始终可见） */
@media (prefers-reduced-motion:no-preference){
  .js .anim{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
  .js .anim.in{opacity:1; transform:none}
}

/* ════════ 响应式 ════════ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr; gap:30px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .spec-strip-in{grid-template-columns:repeat(2,1fr)}
  .layout{grid-template-columns:1fr; gap:24px}
  .toc-aside{position:static; max-height:none; border-left:none; padding-left:0;
    border-top:1px dashed var(--line); padding-top:16px}
  .list-layout{grid-template-columns:1fr; gap:22px}
  .cat-side{position:static}
  .glass-card{grid-template-columns:1fr}
  .gc-right{border-left:none; border-top:1px solid rgba(200,162,75,.22)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .step-flow{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15px}
  .header-in{flex-wrap:wrap; height:auto; padding:10px 16px; gap:8px}
  .main-nav{margin-left:0; width:100%; gap:2px}
  .main-nav a{padding:5px 9px; font-size:13px}
  .hero{padding:44px 0 40px}
  .hero h1{font-size:29px}
  .page-title{font-size:24px}
  .section{padding:40px 0}
  .section-head h2{font-size:23px}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .spec-strip-in{grid-template-columns:repeat(2,1fr); padding:20px 16px}
  .spec-item .v{font-size:21px}
  .article-body h2{font-size:20px}
  .article-body p,.article-body li{font-size:14.5px}
  .table-scroll{overflow-x:auto}
  .sidebar,.toc-aside{display:none}
  .float-rail{right:12px}
  .float-btn{height:38px; padding:0 11px 0 10px; gap:6px}
  .float-btn svg{width:17px; height:17px}
  .float-btn .fb-label{font-size:11px}
  .gc-left{padding:30px 24px}
  .gc-name{font-size:29px}
  .footer-grid{grid-template-columns:1fr}
  .step-flow{grid-template-columns:1fr}
  .rel-links .why{display:none}
  table.spec{font-size:13px}
  table.spec td:first-child{white-space:normal}
}