/* hotrunner.汽车注塑模具.中国 —— 独立样式（石墨黑 × 熔融橙） */
:root {
  --htr-ink: #171a21;
  --htr-ink-2: #2a2f3a;
  --htr-paper: #f5f6f8;
  --htr-card: #ffffff;
  --htr-line: #e3e6ec;
  --htr-muted: #6b7280;
  --htr-fire: #ff6a00;
  --htr-fire-2: #ff9a3d;
  --htr-ember: #b34700;
  --htr-cool: #1f6feb;
  --htr-radius: 14px;
  --htr-inset: 28px;
  --htr-max: 1180px;
  --htr-font: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Segoe UI", sans-serif;
  --htr-mono: Consolas, "Cascadia Code", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--htr-font); background: var(--htr-paper); color: var(--htr-ink); line-height: 1.85; font-size: 16px; }
img { max-width: 100%; display: block; }
a { color: var(--htr-ember); text-decoration: none; }
a:hover { color: var(--htr-fire); }

/* ---------- 顶部导航 ---------- */
.htr-topbar { position: sticky; top: 0; z-index: 90; background: linear-gradient(180deg, #14161c 0%, #1b1e26 100%); border-bottom: 2px solid var(--htr-fire); }
.htr-topbar-in { max-width: var(--htr-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; min-height: 62px; gap: 16px; }
.htr-brand { display: flex; align-items: center; gap: 10px; }
.htr-brand-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; background: conic-gradient(from 220deg, var(--htr-fire), #ffd28f, var(--htr-fire)); position: relative; }
.htr-brand-mark::after { content: ""; position: absolute; inset: 9px; border-radius: 4px; background: #14161c; }
.htr-brand b { color: #fff; font-size: 18px; letter-spacing: 1px; display: block; line-height: 1.3; }
.htr-brand small { display: block; color: #9aa2b1; font-size: 11px; letter-spacing: 2px; line-height: 1.3; }
.htr-nav { display: flex; align-items: center; gap: 4px; }
.htr-nav a { color: #c9cfda; font-size: 15px; padding: 8px 14px; border-radius: 8px; }
.htr-nav a:hover, .htr-nav a.is-cur { color: #fff; background: rgba(255, 106, 0, .18); }
.htr-burger { display: none; background: none; border: 1px solid #3a4050; border-radius: 8px; width: 42px; height: 38px; cursor: pointer; position: relative; }
.htr-burger span, .htr-burger span::before, .htr-burger span::after { content: ""; position: absolute; left: 9px; right: 9px; height: 2px; background: #e8ebf2; }
.htr-burger span { top: 17px; }
.htr-burger span::before { top: -7px; left: 0; right: 0; }
.htr-burger span::after { top: 7px; left: 0; right: 0; }

/* ---------- 面包屑（与正文 H2 左缘严格对齐：容器 + 卡片内衬双对齐） ---------- */
.htr-crumbs { font-size: 13px; color: var(--htr-muted); max-width: var(--htr-max); margin: 18px auto 0; padding-left: calc(24px + var(--htr-inset)); padding-right: 24px; }
.htr-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.htr-crumbs li + li::before { content: "→"; margin-right: 6px; color: #b6bdc9; }
.htr-crumbs a { color: var(--htr-muted); }
.htr-crumbs a:hover { color: var(--htr-fire); }

/* ---------- 文章 / 产品骨架 ---------- */
.htr-shell { max-width: var(--htr-max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 28px; padding: 18px 24px 60px; }
.htr-main { min-width: 0; }
.htr-paper-card { background: var(--htr-card); border: 1px solid var(--htr-line); border-radius: var(--htr-radius); padding: 34px var(--htr-inset) 44px; box-shadow: 0 6px 24px rgba(23, 26, 33, .05); }
.htr-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: 1px; color: var(--htr-ember); background: #fff3e9; border: 1px solid #ffd9bd; border-radius: 999px; padding: 3px 12px; margin-bottom: 14px; }
.htr-h1 { font-size: 27px; line-height: 1.45; letter-spacing: .5px; margin-bottom: 10px; }
.htr-meta { font-size: 13px; color: var(--htr-muted); display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.htr-meta time { color: var(--htr-ember); }
.htr-abstract { background: linear-gradient(135deg, #fff7ef, #fffdfa); border: 1px solid #ffdfc2; border-left: 5px solid var(--htr-fire); border-radius: 10px; padding: 16px 20px; margin-bottom: 30px; }
.htr-abstract b { color: var(--htr-ember); }
.htr-abstract p { font-size: 15.5px; }

/* ---------- 正文排版 ---------- */
.htr-prose h2 { font-size: 21.5px; line-height: 1.5; margin: 40px 0 16px; padding-left: 14px; border-left: 5px solid var(--htr-fire); }
.htr-prose h3 { font-size: 17.5px; margin: 26px 0 10px; color: var(--htr-ink-2); }
.htr-prose p { margin: 0 0 15px; }
.htr-prose ul, .htr-prose ol { margin: 0 0 15px 1.6em; }
.htr-prose li { margin-bottom: 6px; }
.htr-prose strong { color: var(--htr-ember); }
.htr-prose blockquote { border-left: 4px solid var(--htr-cool); background: #f2f7ff; padding: 12px 18px; border-radius: 0 10px 10px 0; margin: 0 0 16px; color: #35507a; }
.htr-prose hr { border: none; border-top: 1px dashed var(--htr-line); margin: 30px 0; }
.htr-prose code { font-family: var(--htr-mono); background: #eef1f5; border-radius: 5px; padding: 1px 7px; font-size: 14px; }
.htr-tablewrap { overflow-x: auto; margin: 0 0 20px; border-radius: 10px; border: 1px solid var(--htr-line); }
.htr-prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 520px; }
.htr-prose th { background: #1d2129; color: #f2f4f8; text-align: left; padding: 10px 14px; white-space: nowrap; letter-spacing: .5px; }
.htr-prose td { padding: 10px 14px; border-top: 1px solid var(--htr-line); vertical-align: top; }
.htr-prose tbody tr:nth-child(even) { background: #fafbfd; }

/* ---------- 结论块 ---------- */
.htr-verdict { margin-top: 34px; border-radius: 12px; padding: 22px 24px; background: linear-gradient(135deg, #20242e, #2c2530); color: #eef1f6; border: 1px solid #3a4150; }
.htr-verdict h2 { color: #ffb877; border: none; padding: 0; margin: 0 0 12px; font-size: 19px; }
.htr-verdict p { color: #d4d9e3; margin-bottom: 10px; }
.htr-verdict strong { color: #ffc98f; }

/* ---------- FAQ 裸 details ---------- */
.htr-faq { margin-top: 38px; }
.htr-faq > h2 { font-size: 21.5px; margin-bottom: 16px; padding-left: 14px; border-left: 5px solid var(--htr-fire); }
.htr-faq details { border: 1px solid var(--htr-line); border-radius: 10px; margin-bottom: 10px; background: #fbfcfe; overflow: hidden; }
.htr-faq summary { cursor: pointer; padding: 13px 18px; font-weight: 600; font-size: 15.5px; list-style: none; position: relative; padding-right: 42px; }
.htr-faq summary::-webkit-details-marker { display: none; }
.htr-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--htr-fire); font-size: 20px; font-weight: 400; }
.htr-faq details[open] summary::after { content: "−"; }
.htr-faq details p { padding: 0 18px 14px; color: #444c59; font-size: 15px; }

/* ---------- 相关阅读 ---------- */
.htr-rel { margin-top: 38px; }
.htr-rel > h2 { font-size: 21.5px; margin-bottom: 16px; padding-left: 14px; border-left: 5px solid var(--htr-fire); }
.htr-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.htr-rel-grid a { display: block; border: 1px solid var(--htr-line); border-radius: 10px; padding: 14px 15px; font-size: 14.5px; line-height: 1.6; color: var(--htr-ink); background: #fff; transition: border-color .15s, transform .15s; }
.htr-rel-grid a:hover { border-color: var(--htr-fire); transform: translateY(-2px); color: var(--htr-ember); }
.htr-rel-grid small { display: block; color: var(--htr-muted); font-size: 12px; margin-top: 6px; }

/* ---------- 右侧栏 ---------- */
.htr-aside { min-width: 0; }
.htr-side-card { background: var(--htr-card); border: 1px solid var(--htr-line); border-radius: var(--htr-radius); padding: 20px 18px; margin-bottom: 18px; box-shadow: 0 4px 16px rgba(23, 26, 33, .04); }
.htr-side-card h3 { font-size: 15px; letter-spacing: 1px; color: var(--htr-ink-2); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--htr-fire); }
.htr-side-card ul { list-style: none; }
.htr-side-card li { margin-bottom: 8px; }
.htr-side-card li a { font-size: 14px; color: #454d5c; display: block; padding: 3px 0; }
.htr-side-card li a:hover { color: var(--htr-fire); }
.htr-side-card li.is-on > a { color: var(--htr-ember); font-weight: 700; }
.htr-toc li a { border-left: 2px solid transparent; padding-left: 10px; }
.htr-toc li a:hover { border-left-color: var(--htr-fire); }
/* 移动端分类折叠按钮 */
.htr-fold-btn { display: none; width: 100%; border: 1px solid var(--htr-line); background: #fff; border-radius: 10px; padding: 11px 16px; font-size: 15px; font-weight: 600; color: var(--htr-ink-2); cursor: pointer; text-align: left; position: relative; margin-bottom: 12px; }
.htr-fold-btn::after { content: "▾"; position: absolute; right: 16px; color: var(--htr-fire); }
.htr-fold-btn.is-open::after { content: "▴"; }

/* ---------- 首页 ---------- */
.htr-hero { background: radial-gradient(1100px 460px at 78% -60px, rgba(255, 106, 0, .32), transparent 60%), linear-gradient(160deg, #14161c 10%, #232733 90%); color: #fff; padding: 78px 24px 86px; position: relative; overflow: hidden; }
.htr-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 44px 44px; pointer-events: none; }
.htr-hero-in { max-width: var(--htr-max); margin: 0 auto; position: relative; z-index: 1; }
.htr-hero-tag { display: inline-block; font-size: 13px; letter-spacing: 3px; color: #ffb877; border: 1px solid rgba(255, 154, 61, .5); border-radius: 999px; padding: 4px 16px; margin-bottom: 20px; }
.htr-hero h1 { font-size: 40px; line-height: 1.35; letter-spacing: 1px; max-width: 760px; }
.htr-hero h1 em { font-style: normal; color: var(--htr-fire-2); }
.htr-hero p { margin-top: 18px; max-width: 680px; color: #c3c9d6; font-size: 16.5px; }
.htr-hero-cta { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.htr-btn { display: inline-block; border-radius: 999px; padding: 11px 30px; font-size: 15.5px; font-weight: 600; }
.htr-btn-hot { background: linear-gradient(120deg, var(--htr-fire), var(--htr-fire-2)); color: #fff; box-shadow: 0 8px 22px rgba(255, 106, 0, .35); }
.htr-btn-hot:hover { color: #fff; filter: brightness(1.07); }
.htr-btn-ghost { border: 1px solid #4a5163; color: #d6dbe5; }
.htr-btn-ghost:hover { border-color: var(--htr-fire-2); color: #ffb877; }

.htr-section { max-width: var(--htr-max); margin: 0 auto; padding: 52px 24px 8px; }
.htr-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.htr-sec-head h2 { font-size: 25px; letter-spacing: 1px; padding-left: 14px; border-left: 5px solid var(--htr-fire); }
.htr-sec-head p { color: var(--htr-muted); font-size: 14px; }
.htr-sec-head a { font-size: 14px; white-space: nowrap; }

.htr-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.htr-feat { background: var(--htr-card); border: 1px solid var(--htr-line); border-radius: var(--htr-radius); padding: 24px 22px; }
.htr-feat i { font-style: normal; display: inline-flex; width: 42px; height: 42px; border-radius: 11px; background: #fff1e4; color: var(--htr-fire); align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px; }
.htr-feat h3 { font-size: 17px; margin-bottom: 8px; }
.htr-feat p { font-size: 14.5px; color: var(--htr-muted); }

.htr-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.htr-Card { background: var(--htr-card); border: 1px solid var(--htr-line); border-radius: var(--htr-radius); padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.htr-Card:hover { transform: translateY(-3px); border-color: var(--htr-fire); box-shadow: 0 12px 28px rgba(255, 106, 0, .12); }
.htr-Card small { color: var(--htr-fire); font-size: 12px; letter-spacing: 1.5px; }
.htr-Card h3 { font-size: 16.5px; line-height: 1.55; }
.htr-Card p { font-size: 14px; color: var(--htr-muted); flex: 1; }
.htr-Card span { font-size: 13px; color: var(--htr-ember); }

.htr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.htr-panel { background: var(--htr-card); border: 1px solid var(--htr-line); border-radius: var(--htr-radius); padding: 26px 24px; }
.htr-panel h3 { font-size: 18px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--htr-fire); }
.htr-panel ol { margin-left: 1.5em; }
.htr-panel li { margin-bottom: 9px; font-size: 15px; }

/* ---------- 页脚 ---------- */
.htr-footer { background: #14161c; color: #8b93a3; margin-top: 70px; border-top: 2px solid var(--htr-fire); }
.htr-footer-in { max-width: var(--htr-max); margin: 0 auto; padding: 36px 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
.htr-footer h4 { color: #dfe3ea; font-size: 15px; margin-bottom: 12px; letter-spacing: 1px; }
.htr-footer p, .htr-footer a { font-size: 13.5px; color: #8b93a3; }
.htr-footer a:hover { color: var(--htr-fire-2); }
.htr-footer li { margin-bottom: 7px; list-style: none; }
.htr-copy { border-top: 1px solid #262b36; text-align: center; padding: 16px; font-size: 12.5px; color: #5d6474; }

/* ---------- 悬浮胶囊 + 名片弹层 ---------- */
.htr-capsule { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 95; display: flex; flex-direction: column; gap: 10px; }
.htr-capsule button { border: none; cursor: pointer; writing-mode: horizontal-tb; display: flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; box-shadow: 0 8px 20px rgba(23, 26, 33, .25); transition: transform .15s; }
.htr-capsule button:hover { transform: scale(1.05); }
.htr-cap-top { background: linear-gradient(120deg, #2b3038, #3d4453); }
.htr-cap-wx { background: linear-gradient(120deg, var(--htr-fire), var(--htr-fire-2)); }
.htr-modal { position: fixed; inset: 0; z-index: 120; background: rgba(15, 17, 22, .62); display: none; align-items: center; justify-content: center; padding: 20px; }
.htr-modal.is-open { display: flex; }
.htr-modal-box { position: relative; width: 300px; height: 500px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.htr-modal-box img { width: 300px; height: 500px; object-fit: contain; background: #fff; }
.htr-modal-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(23, 26, 33, .55); color: #fff; font-size: 16px; cursor: pointer; }

.htr-cat-label { font-size: 12px; color: #9aa2b1; letter-spacing: 1px; margin: 12px 0 6px; }
.htr-idx-h2 { font-size: 21px; letter-spacing: 1px; padding-left: 14px; border-left: 5px solid var(--htr-fire); margin: 34px 0 16px; }

/* ---------- 移动端 ---------- */
@media (max-width: 1020px) {
  .htr-shell { grid-template-columns: 1fr; }
  .htr-aside { order: -1; }
  .htr-aside .htr-side-card { display: none; }
  .htr-aside .htr-side-card.is-unfolded { display: block; }
  .htr-fold-btn { display: block; }
}
@media (max-width: 860px) {
  :root { --htr-inset: 20px; }
  .htr-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #171a21; flex-direction: column; align-items: stretch; padding: 10px 18px 16px; border-bottom: 2px solid var(--htr-fire); }
  .htr-nav.is-open { display: flex; }
  .htr-nav a { padding: 11px 10px; border-bottom: 1px solid #232838; }
  .htr-burger { display: block; }
  .htr-topbar-in { position: relative; }
  .htr-hero { padding: 52px 20px 60px; }
  .htr-hero h1 { font-size: 28px; }
  .htr-feats, .htr-cards, .htr-split, .htr-rel-grid { grid-template-columns: 1fr; }
  .htr-footer-in { grid-template-columns: 1fr; gap: 22px; }
  .htr-paper-card { padding: 24px var(--htr-inset) 32px; }
  .htr-h1 { font-size: 22px; }
  .htr-capsule { right: 10px; }
  .htr-capsule button { padding: 9px 12px; font-size: 13px; }
  .htr-section { padding: 38px 18px 6px; }
}