/* stainless.精密冲压.中国 —— 钢液科技风（独立设计，stn- 前缀） */
:root{
  --bg:#0c0f14; --bg2:#11161e; --panel:#161c26; --panel2:#1b2230;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.05);
  --text:#d7dee8; --muted:#8a97a8; --faint:#5d6b7d;
  --accent:#19e3c2; --accent2:#4aa8ff; --warn:#ffb454;
  --h2-inset:0px;
  --maxw:1040px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 80% -10%, rgba(74,168,255,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(25,227,194,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
h1,h2,h3,h4{color:#eef3f8; line-height:1.35; font-weight:700; letter-spacing:.2px}
h1{font-size:30px; margin:0 0 14px}
h2{font-size:23px; margin:38px 0 14px; padding-bottom:8px; border-bottom:1px solid var(--line)}
h3{font-size:19px; margin:26px 0 10px; color:#dfe7f0}
h4{font-size:16px; margin:18px 0 8px; color:#cdd6e2}
p{margin:12px 0}
ul,ol{padding-left:22px}
li{margin:6px 0}
code{background:var(--panel2); padding:2px 6px; border-radius:4px; font-size:13px; color:#bfe9e0}
pre{background:var(--panel2); padding:14px; border-radius:8px; overflow:auto; border:1px solid var(--line)}
blockquote{
  margin:14px 0; padding:12px 16px; background:linear-gradient(90deg,rgba(25,227,194,.08),transparent);
  border-left:3px solid var(--accent); border-radius:0 8px 8px 0; color:#cfe0dc;
}
table.spec{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px; background:var(--panel); border:1px solid var(--line); border-radius:8px; overflow:hidden}
table.spec th,table.spec td{padding:10px 12px; border-bottom:1px solid var(--line2); text-align:left}
table.spec th{background:var(--panel2); color:#e7eef6; font-weight:600}
table.spec tr:last-child td{border-bottom:none}
.tag-text{display:inline-block; background:var(--panel2); border:1px solid var(--line); color:var(--muted); padding:2px 9px; border-radius:20px; font-size:12.5px; margin:2px 4px 2px 0}

/* 容器与面包屑对齐 */
.stn-container{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.stn-crumbs{font-size:13.5px; color:var(--muted); padding:18px var(--h2-inset) 4px; padding-left:var(--h2-inset); border-left:0}
.stn-crumbs a{color:var(--muted)} .stn-crumbs a:hover{color:var(--accent)}
.stn-crumbs .sep{margin:0 8px; color:var(--faint)}

/* 顶部导航 */
.stn-header{position:sticky; top:0; z-index:50; background:rgba(12,15,20,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.stn-nav{max-width:1200px; margin:0 auto; padding:0 24px; height:60px; display:flex; align-items:center; gap:6px}
.stn-brand{font-weight:800; font-size:17px; color:#eef3f8; letter-spacing:.3px; white-space:nowrap; margin-right:auto}
.stn-brand b{color:var(--accent)}
.stn-menu{display:flex; gap:2px; align-items:center}
.stn-menu a{color:var(--text); padding:8px 13px; border-radius:8px; font-size:14.5px; white-space:nowrap}
.stn-menu a:hover{background:var(--panel); text-decoration:none; color:#fff}
.stn-menu .has-sub{position:relative}
.stn-sub{display:none; position:absolute; top:100%; left:0; margin-top:8px; min-width:170px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.5)}
.stn-sub::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px}
.stn-menu .has-sub:hover .stn-sub{display:block}
.stn-sub a{display:block; padding:7px 12px; border-radius:6px; font-size:13.5px}
.stn-toggle{display:none; background:none; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:7px 12px; font-size:14px; cursor:pointer}

/* 文章/产品两栏布局：主列左缘 = 容器左缘 = 面包屑左缘 */
.stn-article{display:grid; grid-template-columns:minmax(0,720px) 240px; gap:44px; align-items:start; margin:8px 0 60px}
.stn-main{min-width:0}
.stn-lead{background:linear-gradient(135deg,rgba(25,227,194,.10),rgba(74,168,255,.06)); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:6px 0 18px; color:#d6e6e2; font-size:16px}
.stn-kw{margin:10px 0 4px}
.stn-update{font-size:13px; color:var(--muted); margin:8px 0 6px}
.stn-update time{color:var(--accent)}
.stn-case{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--accent2); border-radius:0 10px 10px 0; padding:14px 18px; margin:22px 0}
.stn-case b{color:#cfe0ff}
.stn-rel{margin:34px 0 0; padding:18px 20px; background:var(--panel); border:1px solid var(--line); border-radius:12px}
.stn-rel h3{margin:0 0 10px; font-size:17px}
.stn-rel a{display:block; padding:7px 0; border-bottom:1px solid var(--line2); color:#cfe0e6}
.stn-rel a:last-child{border-bottom:none}

/* 右侧 TOC（sticky，非 fixed） */
.stn-toc{position:sticky; top:78px; align-self:start}
.stn-toc-inner{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; max-height:calc(100vh - 100px); overflow:auto}
.stn-toc-inner .t{font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px}
.stn-toc-inner ul{list-style:none; margin:0; padding:0}
.stn-toc-inner li{margin:0}
.stn-toc-inner a{display:block; padding:5px 8px; border-radius:6px; color:var(--muted); font-size:13.5px; border-left:2px solid transparent}
.stn-toc-inner a:hover{background:var(--panel2); color:#fff; text-decoration:none; border-left-color:var(--accent)}
.stn-toc-inner li.lv3 a{padding-left:20px; font-size:12.5px}

/* FAQ 裸 details */
details{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:0 16px; margin:10px 0}
details summary{cursor:pointer; padding:13px 0; font-weight:600; color:#e7eef6; list-style:none}
details summary::-webkit-details-marker{display:none}
details summary:before{content:"＋"; color:var(--accent); margin-right:10px; font-weight:700}
details[open] summary:before{content:"－"}
.stn-faq-a{padding:0 0 14px; color:#cdd6e2}
.stn-faq-h{font-size:20px; margin:34px 0 12px; color:#eef3f8}

/* 列表页：左分类 + 右内容 */
.stn-list{display:grid; grid-template-columns:220px minmax(0,1fr); gap:36px; margin:8px 0 60px}
.stn-side{position:sticky; top:78px; align-self:start}
ul.category-list{list-style:none; margin:0; padding:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; overflow:hidden}
ul.category-list li a{display:block; padding:12px 16px; color:var(--text); border-bottom:1px solid var(--line2); font-size:14.5px}
ul.category-list li:last-child a{border-bottom:none}
ul.category-list li a:hover,ul.category-list li a.active{background:var(--panel2); color:#fff; text-decoration:none; border-left:3px solid var(--accent); padding-left:13px}
.stn-list-head{margin-bottom:18px}
.stn-list-head p{color:var(--muted); margin:6px 0 0}
.stn-card{display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:14px 0; color:var(--text)}
.stn-card:hover{border-color:rgba(25,227,194,.4); text-decoration:none; transform:translateY(-2px); transition:.15s}
.stn-card h3{margin:0 0 8px; color:#eef3f8; font-size:18px}
.stn-card .meta{font-size:12.5px; color:var(--faint); margin-bottom:8px}
.stn-card p{margin:0; color:var(--muted); font-size:14px}

/* 首页 */
.stn-hero{padding:64px 0 40px; text-align:center}
.stn-hero .badge{display:inline-block; font-size:13px; color:var(--accent); border:1px solid rgba(25,227,194,.4); border-radius:20px; padding:4px 14px; margin-bottom:18px; background:rgba(25,227,194,.06)}
.stn-hero h1{font-size:40px; margin:0 0 16px; background:linear-gradient(120deg,#eef3f8,#9fe9dc); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.stn-hero p{color:var(--muted); font-size:17px; max-width:720px; margin:0 auto 24px}
.stn-hero .cta{display:inline-flex; gap:12px}
.stn-btn{display:inline-block; padding:11px 22px; border-radius:10px; font-weight:600; font-size:15px}
.stn-btn.primary{background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#06231f}
.stn-btn.ghost{border:1px solid var(--line); color:var(--text)}
.stn-section{max-width:1200px; margin:0 auto; padding:40px 24px}
.stn-section h2{font-size:24px; border:none; margin:0 0 6px; padding:0}
.stn-section .sub{color:var(--muted); margin:0 0 24px}
.stn-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px}
.stn-tile{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; transition:.15s}
.stn-tile:hover{border-color:rgba(25,227,194,.4); transform:translateY(-3px)}
.stn-tile h3{margin:0 0 8px; font-size:17px}
.stn-tile p{color:var(--muted); font-size:14px; margin:0}
.stn-tile .k{font-size:12.5px; color:var(--accent); margin-bottom:10px; display:block}
.stn-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0}
.stn-stat{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px; text-align:center}
.stn-stat .n{font-size:30px; font-weight:800; color:var(--accent)}
.stn-stat .l{color:var(--muted); font-size:13.5px; margin-top:6px}

/* 悬浮胶囊 */
.stn-capsule{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:10px}
.stn-cap{display:flex; align-items:center; gap:8px; background:linear-gradient(120deg,var(--accent),var(--accent2)); color:#06231f; border:none; border-radius:30px; padding:11px 16px; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 10px 30px rgba(25,227,194,.35); white-space:nowrap}
.stn-cap svg{width:18px; height:18px}
.stn-modal{display:none; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.7); align-items:center; justify-content:center}
.stn-modal.show{display:flex}
.stn-modal img{max-width:90vw; max-height:90vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6)}
.stn-modal .close{position:absolute; top:18px; right:22px; color:#fff; font-size:30px; cursor:pointer; background:none; border:none}

/* 页脚 */
.stn-footer{border-top:1px solid var(--line); background:var(--bg2); margin-top:40px; padding:36px 0 28px}
.stn-footer .grid{max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
.stn-footer h4{color:#eef3f8; font-size:14px; margin:0 0 12px}
.stn-footer a{display:block; color:var(--muted); font-size:13.5px; padding:4px 0}
.stn-footer .copy{grid-column:1/-1; border-top:1px solid var(--line2); margin-top:18px; padding-top:16px; color:var(--faint); font-size:12.5px}

/* 响应式 */
@media (max-width:1000px){
  .stn-article{grid-template-columns:1fr}
  .stn-toc{display:none}
  .stn-list{grid-template-columns:1fr}
  .stn-side{position:static}
  .stn-stats{grid-template-columns:repeat(2,1fr)}
  .stn-footer .grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .stn-menu{display:none; position:absolute; top:60px; left:0; right:0; flex-direction:column; background:var(--panel); border-bottom:1px solid var(--line); padding:10px}
  .stn-menu.open{display:flex}
  .stn-menu .has-sub .stn-sub{position:static; display:block; box-shadow:none; border:none; background:transparent; padding-left:10px}
  .stn-toggle{display:block}
  .stn-hero h1{font-size:30px}
  .stn-container{padding:0 16px}
}