:root {
  --font-sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
  --font-display:'Space Grotesk','Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
  --ink:#111820;
  --soft:#344450;
  --muted:#71808a;
  --line:#dfe6e9;
  --paper:#f5f7f8;
  --white:#fff;
  --blue:#0569a6;
  --blue-dark:#034a75;
  --orange:#e97536;
  --orange-dark:#b84d19;
  --green:#1b8b69
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.6 var(--font-sans)
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
img {
  display:block;
  width:100%;
  object-fit:cover
}
.container {
  width:min(1180px,calc(100% - 56px));
  margin:auto
}
.topbar {
  background:var(--ink);
  color:#b7c2c9;
  font-size:12px
}
.topbar-inner {
  min-height:34px;
  display:flex;
  align-items:center;
  gap:24px
}
.top-links {
  margin-left:auto;
  display:flex;
  gap:18px
}
.site-header {
  height:76px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:5
}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  gap:32px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-right:auto
}
.brand-mark {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
  /* 品牌标识为字母 IM：用无衬线变量字体并收紧字距，替代原单汉字 18px 雅黑 */
  font:700 14px var(--font-sans);
  letter-spacing:.5px
}
.brand strong {
  display:block;
  font:600 17px var(--font-display);
  letter-spacing:.5px
}
.brand small {
  display:block;
  color:var(--muted);
  font-size:8px;
  letter-spacing:2px
}
.brand-light {
  color:#fff
}
.brand-light small {
  color:#95a3ab
}
.site-header nav {
  display:flex;
  align-items:center;
  gap:27px
}
.site-header nav a {
  font-size:13px;
  color:var(--soft);
  padding:8px 0;
  border-bottom:2px solid transparent
}
.site-header nav a:hover,.site-header nav a.active {
  color:var(--blue);
  border-color:var(--blue)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:43px;
  padding:0 18px;
  border-radius:6px;
  border:0;
  font-weight:600;
  font-size:13px
}
.button-blue {
  background:var(--blue);
  color:#fff
}
.button-blue:hover {
  background:var(--blue-dark)
}
.button-orange {
  background:var(--orange);
  color:#fff
}
.button-orange:hover {
  background:var(--orange-dark)
}
.button-outline {
  background:#fff;
  color:var(--soft);
  border:1px solid var(--line)
}
.button-outline:hover {
  border-color:var(--blue);
  color:var(--blue)
}
.full {
  width:100%
}
.hero {
  background:#fff;
  padding:82px 0 76px;
  border-bottom:1px solid var(--line)
}
.hero-grid {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:72px;
  align-items:center
}
.eyebrow {
  color:var(--blue);
  font:600 11px var(--font-display);
  letter-spacing:1.5px
}
.eyebrow.light {
  color:#a6d5e8
}
.hero h1,.page-copy h1,.page-hero h1 {
  font:600 clamp(44px,6vw,68px)/1.05 var(--font-display);
  margin:17px 0 22px;
  letter-spacing:-1px
}
.hero h1 em,.page-copy h1 em {
  color:var(--orange);
  font-style:normal
}
.lead {
  color:var(--muted);
  font-size:17px;
  line-height:1.85;
  max-width:510px
}
.actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:29px
}
.hero-visual {
  height:475px;
  position:relative
}
.hero-visual img {
  height:100%;
  filter:saturate(.8)
}
.hero-card {
  position:absolute;
  left:-22px;
  bottom:-25px;
  background:#fff;
  border:1px solid var(--line);
  padding:17px 20px;
  width:260px
}
.hero-card b,.hero-card span {
  display:block
}
.hero-card b {
  font-size:13px
}
.hero-card span {
  font-size:11px;
  color:var(--muted)
}
.hero-proof {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:40px;
  color:var(--muted);
  font-size:11px
}
.hero-proof strong {
  color:var(--ink);
  font-size:15px
}
.hero-proof i {
  height:28px;
  width:1px;
  background:var(--line);
  margin:0 8px
}
.stats {
  background:var(--ink);
  color:#fff
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:105px;
  align-items:center
}
.stats-grid div {
  padding:0 25px;
  border-right:1px solid #3b454d
}
.stats-grid div:first-child {
  padding-left:0
}
.stats-grid div:last-child {
  border:0
}
.stats-grid b,.stats-grid span {
  display:block
}
.stats-grid b {
  color:#f0a072;
  font:600 25px var(--font-display)
}
.stats-grid span {
  color:#aab8c0;
  font-size:12px
}
.section {
  padding:88px 0
}
.section:nth-child(even) {
  background:#fff
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:30px
}
.section-head h2 {
  font:600 34px var(--font-display);
  margin:10px 0 0
}
.section-head>a,.text-link {
  color:var(--blue);
  font-weight:600;
  font-size:13px
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.product-card {
  background:#fff;
  border:1px solid var(--line)
}
.product-image {
  height:235px;
  position:relative;
  display:block;
  overflow:hidden;
  background:#d9e0e3
}
.product-image img {
  height:100%;
  transition:transform .3s
}
.product-image:hover img {
  transform:scale(1.04)
}
.status {
  position:absolute;
  left:13px;
  top:13px;
  background:var(--blue);
  color:#fff;
  font-size:11px;
  padding:4px 8px
}
.product-body {
  padding:17px
}
.product-meta,.product-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.product-meta {
  font-size:11px;
  color:var(--blue)
}
.product-body h3 {
  font:600 18px var(--font-display);
  margin:8px 0 3px
}
.product-body p {
  color:var(--muted);
  font-size:12px;
  margin:0
}
.product-bottom {
  border-top:1px solid var(--line);
  margin-top:14px;
  padding-top:13px
}
.product-bottom strong {
  font:600 18px var(--font-display)
}
.product-bottom a {
  color:var(--blue);
  font-size:11px
}
.trust {
  background:#eaf1f4;
  padding:90px 0
}
.trust-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center
}
.trust-grid>img {
  height:440px
}
.trust h2 {
  font:600 39px/1.15 var(--font-display);
  margin:12px 0 18px
}
.check-list {
  padding:0;
  margin:23px 0;
  list-style:none;
  display:grid;
  gap:10px
}
.check-list li {
  font-size:13px;
  color:var(--soft)
}
.check-list li::before {
  content:'✓';
  color:var(--green);
  margin-right:8px
}
.cta {
  background:var(--blue-dark);
  color:#fff;
  padding:54px 0
}
.cta-inner {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.cta h2 {
  font:600 32px var(--font-display);
  margin:8px 0
}
.cta p {
  color:#b9d2dc;
  margin:0
}
.footer {
  background:var(--ink);
  color:#fff;
  padding:58px 0 20px
}
.footer-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.3fr;
  gap:45px;
  padding-bottom:48px
}
.footer p {
  color:#99a7b0;
  font-size:12px
}
.footer h4 {
  font-size:13px;
  margin:0 0 12px
}
.footer-grid>div:not(:first-child) a {
  display:block;
  color:#99a7b0;
  font-size:12px;
  margin:8px 0
}
.footer-bottom {
  border-top:1px solid #303b43;
  padding-top:18px;
  color:#76858e;
  font-size:10px
}
.page-hero {
  padding:58px 0 0;
  background:#fff
}
.page-hero-inner {
  min-height:190px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  border-bottom:1px solid var(--line);
  padding-bottom:18px
}
/* page-hero 紧跟的 section 默认 88px 上内边距太高，收紧到 52px */
.page-hero + .section {
  padding-top:52px
}
/* 标题已移到独立 page-hero，这两个网格自带的 margin-top 是旧结构残留，
   叠加上去会造成 110px / 97px 的过高留白且两页不一致 */
.page-hero + .section .process-grid,
.page-hero + .section .case-list {
  margin-top:0
}
/* 左侧文字区不随 min-height 被 flex 拉伸，贴底对齐 strong，避免标题下方悬空留白 */
.page-hero-inner > div:first-child {
  align-self:flex-end
}
.page-hero h1 {
  font-size:52px;
  line-height:1.2;
  margin:12px 0 6px
}
/* page-hero 里的 em 与首页 hero 保持统一：橙色高亮、不使用中文斜体 */
.page-hero h1 em {
  color:var(--orange);
  font-style:normal
}
.page-hero p {
  color:var(--muted);
  margin:0
}
.page-hero strong {
  font:600 30px var(--font-display);
  padding-bottom:4px
}
.page-hero small {
  font:400 12px var(--font-sans);
  color:var(--muted)
}
.search-bar {
  display:flex;
  gap:10px;
  margin-bottom:27px
}
.search-bar input,.search-bar select {
  height:46px;
  background:#fff;
  border:1px solid var(--line);
  padding:0 13px;
  min-width:0
}
.search-bar input {
  flex:1
}
.search-bar select {
  width:190px
}
.inventory-grid {
  grid-template-columns:repeat(3,1fr)
}
.empty {
  padding:50px;
  text-align:center;
  background:#fff;
  color:var(--muted)
}
.pagination {
  display:flex;
  gap:6px;
  justify-content:center;
  margin-top:34px
}
.pagination a {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  font-size:12px
}
.pagination a.active {
  background:var(--blue);
  color:#fff
}
.breadcrumbs {
  color:var(--muted);
  font-size:12px;
  margin-bottom:26px
}
.breadcrumbs a {
  color:var(--blue)
}
.detail-page {
  padding-top:45px
}
.detail-grid {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px
}
.detail-grid>* {
  min-width:0;
  min-height:0
}
.detail-image {
  width:100%;
  min-width:0;
  height:500px;
  position:relative;
  background:#dde4e6;
  overflow:hidden;
  border-radius:8px
}
.detail-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in
}
.thumbs {
  display:flex;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
  min-width:0
}
.thumbs button {
  width:72px;
  height:54px;
  flex:none;
  padding:0;
  border:2px solid transparent;
  background:none;
  cursor:pointer;
  border-radius:5px;
  overflow:hidden
}
.thumbs button:hover {
  border-color:var(--blue)
}
.thumbs img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.detail-copy {
  padding-top:20px
}
.detail-copy h1 {
  font:600 44px/1.1 var(--font-display);
  margin:14px 0
}
.detail-sub {
  color:var(--muted);
  font-size:12px
}
.price {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:27px 0 23px;
  padding:17px 0
}
.price span,.price small {
  display:block;
  color:var(--muted);
  font-size:11px
}
.price strong {
  display:block;
  font:600 31px var(--font-display);
  margin:4px 0
}
.detail-trust {
  color:var(--green);
  font-size:12px;
  margin-top:20px
}
.detail-lower {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  margin-top:60px
}
.spec-panel,.inquiry-card,.contact-form {
  background:#fff;
  border:1px solid var(--line);
  padding:26px
}
.spec-panel h2 {
  font:600 20px var(--font-display);
  margin:0 0 20px
}
.spec-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:19px 0;
  font-size:12px
}
.spec-list div {
  color:var(--soft)
}
.spec-table {
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  font-size:12px
}
.spec-table th {
  width:34%;
  text-align:left;
  font-weight:500;
  color:var(--muted);
  background:#f2f5f6;
  padding:10px 13px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
  white-space:nowrap
}
.spec-table td {
  padding:10px 13px;
  border-bottom:1px solid var(--line);
  color:var(--soft);
  vertical-align:top;
  line-height:1.65
}
.spec-table tr:last-child th,.spec-table tr:last-child td {
  border-bottom:0
}
.detail-gallery {
  min-width:0
}
.inquiry-card h3 {
  font:600 18px var(--font-display);
  margin:0
}
.inquiry-card>p {
  color:var(--muted);
  font-size:12px
}
.inquiry-card label,.contact-form label {
  display:block;
  font-size:12px;
  color:var(--soft);
  margin:13px 0
}
.inquiry-card input,.inquiry-card textarea,.contact-form input,.contact-form textarea {
  display:block;
  width:100%;
  margin-top:6px;
  background:#fbfcfc;
  border:1px solid var(--line);
  padding:10px 11px;
  resize:vertical;
  outline:0
}
.page-copy {
  min-height:620px
}
.narrow {
  max-width:850px
}
.page-copy h1 {
  font-size:58px
}
.page-copy>.container>p {
  max-width:580px
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:58px
}
.process-grid>div,.case-list article {
  background:#fff;
  border:1px solid var(--line);
  padding:20px
}
.process-grid b {
  font:600 29px var(--font-display);
  color:#c4d0d5
}
.process-grid h3 {
  font:600 18px var(--font-display);
  margin:18px 0 5px
}
.process-grid p,.case-list p {
  font-size:12px;
  color:var(--muted);
  margin:0
}
.case-list {
  display:grid;
  gap:14px;
  margin-top:45px
}
.case-list article>b {
  color:var(--blue);
  font-size:11px
}
.case-list h3 {
  font:600 20px var(--font-display);
  margin:7px 0
}
.contact-form {
  margin-top:35px
}
.contact-form label {
  margin:0 0 15px
}
.success {
  text-align:center
}
.success-icon {
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#fff;
  border-radius:50%;
  font-size:25px;
  margin-bottom:22px
}
.admin-page {
  padding-top:45px
}
.admin-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:35px
}
.admin-head h1 {
  font:600 43px var(--font-display);
  margin:10px 0
}
.admin-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
.admin-stats div {
  background:#fff;
  border:1px solid var(--line);
  padding:20px
}
.admin-stats span,.admin-stats b {
  display:block
}
.admin-stats span {
  font-size:12px;
  color:var(--muted)
}
.admin-stats b {
  font:600 30px var(--font-display);
  margin-top:8px
}
.admin-actions {
  display:flex;
  gap:10px;
  margin:24px 0 45px
}
.admin-page h2 {
  font:600 22px var(--font-display)
}
.table-wrap {
  overflow:auto;
  background:#fff;
  border:1px solid var(--line)
}
table {
  border-collapse:collapse;
  width:100%;
  min-width:760px;
  font-size:12px
}
th,td {
  text-align:left;
  padding:13px 15px;
  border-bottom:1px solid var(--line);
  vertical-align:top
}
th {
  background:#f2f5f6;
  color:var(--muted);
  font-weight:500
}
.pill {
  display:inline-block;
  background:#eaf7f2;
  color:var(--green);
  padding:3px 7px;
  font-size:10px
}
.alert {
  background:#fff1e8;
  color:var(--orange-dark);
  padding:11px 13px;
  margin:15px 0;
  font-size:12px
}
.admin-login {
  max-width:520px
}
.admin-login h1 {
  font-size:48px
}
@media(max-width:850px) {
  .container {
    width:calc(100% - 36px)
  }
  .site-header nav {
    gap:12px
  }
  .site-header nav a {
    font-size:12px
  }
  .hero-grid,.trust-grid,.detail-grid,.detail-lower {
    grid-template-columns:1fr;
    gap:40px
  }
  .hero-visual {
    height:380px
  }
  .product-grid,.inventory-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .process-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-grid {
    grid-template-columns:1.5fr 1fr 1fr
  }
  .footer-grid>div:last-child {
    grid-column:1/-1
  }
  .stats-grid b {
    font-size:20px
  }
}
@media(max-width:600px) {
  .container {
    width:calc(100% - 30px)
  }
  .topbar-inner>span:nth-child(2),.top-links span:not(:last-child) {
    display:none
  }
  .header-inner {
    gap:10px
  }
  .site-header {
    height:67px
  }
  .site-header nav {
    gap:9px
  }
  .site-header .button {
    min-height:36px;
    padding:0 11px;
    font-size:11px
  }
  .brand strong {
    font-size:14px
  }
  .hero {
    padding:45px 0 58px
  }
  .hero h1,.page-copy h1 {
    font-size:43px
  }
  .hero-visual {
    height:290px
  }
  .hero-card {
    left:0
  }
  .stats-grid {
    grid-template-columns:repeat(2,1fr);
    padding:20px 0;
    gap:18px 0
  }
  .stats-grid div,.stats-grid div:first-child {
    padding:0 12px
  }
  .stats-grid div:nth-child(2n) {
    border:0
  }
  .section {
    padding:58px 0
  }
  .section-head {
    align-items:start;
    flex-direction:column;
    gap:10px
  }
  .product-grid,.inventory-grid,.process-grid {
    grid-template-columns:1fr
  }
  .page-hero-inner {
    align-items:start;
    flex-direction:column;
    gap:17px;
    padding-bottom:25px
  }
  .page-hero h1 {
    font-size:43px
  }
  .search-bar {
    flex-direction:column
  }
  .search-bar select {
    width:100%
  }
  .detail-image {
    height:300px
  }
  .detail-copy h1 {
    font-size:35px
  }
  .spec-list {
    grid-template-columns:1fr
  }
  .cta-inner {
    align-items:start;
    flex-direction:column;
    gap:23px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr;
    gap:30px 22px
  }
  .footer-grid>div:first-child,.footer-grid>div:last-child {
    grid-column:1/-1
  }
  .footer-bottom {
    font-size:9px
  }
  .admin-stats {
    grid-template-columns:1fr
  }
  .admin-head {
    align-items:start;
    gap:15px;
    flex-direction:column
  }
  .admin-actions {
    flex-wrap:wrap
  }
  .page-copy {
    min-height:0
  }
}

/* ---------- i18n language switcher ---------- */
.lang-link{color:var(--white);opacity:.75;text-decoration:none;font-size:12px;padding:2px 4px;border-radius:4px}
.lang-link:hover{opacity:1;text-decoration:underline}
.lang-link.lang-active{opacity:1;font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* ---------- detail page enhancements ---------- */
.thumb-active{outline:2px solid var(--blue);outline-offset:-2px;border-radius:6px}
.detail-hint{margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
.detail-copy-block{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.detail-copy-block h3{margin:0 0 12px;font-size:15px;color:var(--ink)}
.detail-desc{margin:0;font-size:14px;line-height:1.9;color:var(--soft);white-space:pre-wrap}
.section-tight{padding-top:0}
.status-inline{display:inline-block;padding:2px 12px;border-radius:999px;background:var(--green);color:#fff;font-size:12px;font-weight:600}
/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(8,12,16,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:30px;cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:88vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:18px;right:22px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.25)}
/* ---------- WhatsApp ---------- */
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:10px;background:#25d366;color:#fff;padding:13px 20px;border-radius:999px;font-weight:600;box-shadow:0 10px 30px rgba(37,211,102,.45);transition:transform .15s ease,box-shadow .15s ease}
.whatsapp-float:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(37,211,102,.55)}
.whatsapp-float svg{flex:none}
.button-whatsapp{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;font-weight:600;border-radius:8px}
.button-whatsapp:hover{background:#1ebe5b}
.detail-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
/* ---------- admin product form ---------- */
.admin-form{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:26px;margin-top:20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--soft)}
.form-grid .span-2{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-weight:400;background:var(--paper)}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:2px solid rgba(5,105,166,.25);border-color:var(--blue)}
.form-grid input[type=file]{padding:8px;background:var(--white)}
.form-error{background:#fdecec;border:1px solid #f5b5b5;color:#a93226;border-radius:10px;padding:14px 18px;margin-top:16px;font-size:14px}
.form-actions{display:flex;gap:12px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.media-edit{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.media-edit h4{margin:0 0 12px;font-size:14px;color:var(--soft)}
.media-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.media-thumb{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500}
.media-thumb img{width:100%;height:100px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.media-thumb span{color:var(--muted)}
/* ---------- admin table actions ---------- */
.inline-form{display:inline;margin:0}
.row-actions{white-space:nowrap}
.row-actions .inline-form{margin-right:6px}
.mini-btn{display:inline-block;padding:4px 10px;border:1px solid var(--line);border-radius:6px;font-size:12px;color:var(--blue);background:var(--white);cursor:pointer;text-decoration:none}
.mini-btn:hover{border-color:var(--blue)}
.mini-danger{color:#c0392b}
.mini-danger:hover{border-color:#c0392b}
.row-actions select{padding:4px 8px;border:1px solid var(--line);border-radius:6px;font-size:12px;background:var(--white)}
@media (max-width:720px){.form-grid{grid-template-columns:1fr}.whatsapp-float span{display:none}.whatsapp-float{padding:14px;right:16px;bottom:16px}}

/* ===== 技术文章 ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}
.article-hero h1{font-size:34px;line-height:1.25;max-width:820px;margin:10px 0 12px}
.article-hero-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted)}
.article-list{display:flex;flex-direction:column;gap:18px;margin-top:24px}
.article-card{display:flex;gap:20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.article-card:hover{box-shadow:0 10px 30px rgba(15,42,64,.08);transform:translateY(-2px)}
.article-card-cover{flex:none;width:220px;height:140px;border-radius:8px;overflow:hidden;background:#d9e0e3}
.article-card-cover img{width:100%;height:100%;object-fit:cover;display:block}
.article-card-body h2{font-size:19px;margin:6px 0 8px;line-height:1.35}
.article-card-body p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 10px}
.article-cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.article-card-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.article-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:#f2f5f6;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start}
.article-main{min-width:0}
.article-cover{width:100%;max-height:440px;object-fit:cover;border-radius:12px;margin-bottom:24px;display:block}
.article-body{font-size:15.5px;line-height:1.85;color:#2b3a46}
.article-body h2{font-size:24px;margin:34px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.article-body h3{font-size:19px;margin:26px 0 10px}
.article-body h4{font-size:16px;margin:20px 0 8px}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 16px;padding-left:24px}
.article-body li{margin-bottom:6px}
.article-body blockquote{margin:0 0 16px;padding:12px 18px;border-left:3px solid var(--blue);background:#f2f5f6;border-radius:0 8px 8px 0;color:var(--muted)}
.article-body pre{margin:0 0 16px;padding:14px 16px;background:#0f2a40;color:#dce8f2;border-radius:10px;overflow-x:auto;font-size:13px;line-height:1.6}
.article-body code{font-family:Consolas,Menlo,monospace;font-size:.92em;background:#f2f5f6;padding:1px 6px;border-radius:5px}
.article-body pre code{background:none;padding:0}
.article-body img{max-width:100%;height:auto;border-radius:10px;margin:8px 0}
.article-body hr{border:none;border-top:1px solid var(--line);margin:28px 0}
.article-body a{color:var(--blue)}
.article-body strong{color:var(--ink)}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0}
.article-machine h3{margin:8px 0 14px;font-size:18px}
.article-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.article-nav-link{font-size:13px;color:var(--muted);text-decoration:none}
.article-nav-link:hover{color:var(--ink)}
.article-side{position:sticky;top:20px;display:flex;flex-direction:column;gap:20px}
.article-cta{background:linear-gradient(135deg,#0f2a40,#1c4a6e);color:#fff;border-radius:12px;padding:22px}
.article-cta h4{margin:0 0 8px;font-size:17px}
.article-cta p{font-size:13px;opacity:.85;margin:0 0 14px}
.article-related{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.article-related h4{margin:0 0 12px;font-size:15px}
.article-related-item{display:block;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);text-decoration:none;line-height:1.5}
.article-related-item:hover{color:var(--blue)}
.article-related-item:first-of-type{border-top:none}
.button-sm{padding:7px 14px;font-size:13px}
.button-block{display:block;width:100%;text-align:center}
@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
  .article-side{position:static}
  .article-card{flex-direction:column;gap:12px}
  .article-card-cover{width:100%;height:180px}
}

/* ---------- v6.1: inventory detail page layout ---------- */
.price{background:#f2f5f6;border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:26px 0 22px}
.price span{display:block;font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.price strong{font-size:38px;margin:6px 0}
.price small{font-size:12px}
.detail-lower{margin-top:56px;gap:56px}
.detail-copy-block{margin-top:0;padding-top:0;border-top:none}
.detail-copy-block h3{font-size:17px;margin:0 0 14px}
.spec-table{font-size:14px}
.spec-table th{padding:12px 16px;font-size:13px;width:30%}
.spec-table td{padding:12px 16px}
.detail-desc{color:var(--soft);line-height:1.85;font-size:14px;white-space:pre-line}
.detail-hint{text-align:left}
@media(max-width:850px){
  .detail-lower{margin-top:36px;gap:36px}
  .price strong{font-size:30px}
}

/* honeypot anti-spam field: visually hidden but present for bots */
.hp-field{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}

/* ---------- v6.4: article detail typography rhythm ---------- */
.article-hero{padding:44px 0 8px}
.article-hero h1{font-size:32px;line-height:1.35;margin:10px 0 14px}
.article-hero .article-hero-meta,.article-hero .meta-row{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted);margin-bottom:26px}
.article-layout{gap:48px}
.article-main>.article-cover{margin-bottom:32px}
.article-body{font-size:16px;line-height:1.9}
.article-body h2{font-size:25px;margin:44px 0 18px;padding-top:22px}
.article-body h2:first-child{margin-top:8px}
.article-body h3{font-size:20px;margin:32px 0 12px}
.article-body p{margin:0 0 18px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:24px}
.article-body li{margin-bottom:8px}
.article-body blockquote{margin:24px 0;padding:14px 20px}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.article-body table th{background:#f2f5f6;text-align:left}
.article-body table th,.article-body table td{border:1px solid var(--line);padding:10px 14px}
.article-body img{border-radius:10px;margin:22px 0}
.article-tags{margin:36px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.article-side{top:28px}

/* ============================================================
   v7.0 首屏性能 + 品牌 + 移动端导航
   ============================================================ */

/* Hero / 信任区：内联 SVG 视觉，零外部请求、无版权与水印风险 */
.hero-visual {
  height:475px;
  position:relative;
  border-radius:14px;
  overflow:hidden
}
.hero-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}
.trust-art {
  display:block;
  width:100%;
  height:440px;
  object-fit:cover;
  border-radius:14px
}
@media(max-width:850px) {
  .hero-visual {
    height:380px
  }
  .trust-art {
    height:320px
  }
}
@media(max-width:600px) {
  .hero-visual {
    height:290px
  }
  .trust-art {
    height:260px
  }
}

/* 移动端汉堡菜单：替代原来「直接隐藏两个导航项」的做法 */
.nav-toggle {
  display:none;
  flex:none;
  width:44px;
  height:44px;
  padding:0;
  border:0;
  background:none;
  position:relative
}
.nav-toggle span {
  position:absolute;
  left:11px;
  width:22px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease
}
.nav-toggle span:nth-child(1) {
  top:15px
}
.nav-toggle span:nth-child(2) {
  top:21px
}
.nav-toggle span:nth-child(3) {
  top:27px
}
.nav-toggle.is-open span:nth-child(1) {
  transform:translateY(6px) rotate(45deg)
}
.nav-toggle.is-open span:nth-child(2) {
  opacity:0
}
.nav-toggle.is-open span:nth-child(3) {
  transform:translateY(-6px) rotate(-45deg)
}
.nav-lang {
  display:none
}
.lang-link-inline {
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  padding:6px 4px
}
.lang-link-inline.lang-active {
  color:var(--blue);
  font-weight:600
}
.nav-backdrop[hidden] {
  display:none
}
@media(max-width:850px) {
  .nav-toggle {
    display:block;
    margin-left:auto
  }
  .nav-cta {
    display:none
  }
  .site-nav {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:60;
    width:min(320px,84vw);
    background:var(--white);
    border-left:1px solid var(--line);
    box-shadow:-12px 0 40px rgba(15,23,42,.14);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:78px 20px 24px;
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform .24s ease, visibility .24s ease
  }
  body.nav-open .site-nav {
    transform:none;
    visibility:visible
  }
  .site-nav a {
    display:flex;
    align-items:center;
    min-height:46px;
    padding:12px;
    font-size:15px;
    border-bottom:1px solid var(--line)
  }
  .site-header .site-nav a:hover,.site-header .site-nav a.active {
    color:var(--blue);
    background:#eef6fb;
    border-color:var(--line)
  }
  .nav-lang {
    display:flex;
    gap:16px;
    margin-top:16px;
    padding-top:16px;
    border-top:1px solid var(--line)
  }
  .nav-backdrop {
    position:fixed;
    inset:0;
    z-index:55;
    background:rgba(15,23,42,.45)
  }
  body.nav-open {
    overflow:hidden
  }
}

/* ============================================================
   v7.1 可访问性 + 视觉细节 + 转化
   ============================================================ */

/* 键盘焦点：之前只有表单有，导航/链接/按钮全都看不到焦点 */
:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:2px;
  border-radius:4px
}
.brand:focus-visible,.site-header a:focus-visible,.nav-toggle:focus-visible {
  outline-offset:4px
}

/* 图片容器用比例占位，加载时不跳版；字号与点击区优化 */
.product-image {
  height:auto;
  aspect-ratio:3/2;
  min-height:200px
}
.brand small {
  font-size:10px;
  letter-spacing:1.4px
}
@media(max-width:600px) {
  .footer-bottom {
    font-size:11px
  }
  .site-header nav a {
    min-height:44px
  }
}

/* 产品卡信任徽标 */
.trust-line {
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--green);
  font-weight:500
}
.trust-line svg {
  flex:none
}

/* 详情页主图计数与左右切换 */
.gallery-count {
  position:absolute;
  right:12px;
  bottom:12px;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:12px;
  letter-spacing:.5px
}
.gallery-arrow {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--ink);
  font-size:17px;
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:0 4px 14px rgba(15,23,42,.18)
}
.gallery-arrow:hover {
  background:#fff
}
.gallery-prev {
  left:12px
}
.gallery-next {
  right:12px
}
@media(max-width:600px) {
  .gallery-arrow {
    width:32px;
    height:32px;
    font-size:15px
  }
}

/* 尊重系统的「减少动态效果」设置 */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }
}

/* ============================================================
   v7.1 全站页面结构统一 + 列表/详情细节优化
   ============================================================ */

/* 页面头部按钮：服务页 CTA 落在 hero 内，与标题拉开距离 */
.hero-cta {
  margin-top:18px
}

/* 分页：上一页/下一页 + 省略号 */
.pagination {
  flex-wrap:wrap;
  align-items:center;
  gap:6px
}
.pagination-step {
  width:auto;
  padding:0 14px;
  font-size:13px;
  color:var(--ink)
}
.pagination-step.is-disabled {
  color:#b6bfc4;
  background:#f7f9fa;
  cursor:not-allowed
}
.pagination-gap {
  width:24px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--muted);
  font-size:14px
}
@media(max-width:520px) {
  .pagination-step span {
    display:none
  }
  .pagination-step {
    padding:0 10px
  }
}

/* 案例页结尾转化区 */
.inline-cta {
  margin-top:44px;
  padding:26px 28px;
  background:#f2f5f6;
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  justify-content:space-between
}
.inline-cta h3 {
  margin:0 0 6px;
  font-size:19px
}
.inline-cta p {
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
  /* 案例页是 850px 窄栏：520px 会把右侧按钮挤到换行，收到 420px 留出按钮位 */
  max-width:420px
}
.inline-cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
@media(max-width:640px) {
  .inline-cta {
    padding:22px 20px
  }
  .inline-cta-actions {
    width:100%
  }
  .inline-cta-actions .button {
    flex:1;
    text-align:center
  }
}

/* 文章详情页封面：锁定比例，图片加载不再顶开正文 */
.article-cover {
  aspect-ratio:16 / 9;
  height:auto
}

/* 文章目录 */
.article-toc {
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px
}
.article-toc h4 {
  margin:0 0 12px;
  font-size:15px
}
.article-toc ol {
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:toc
}
.article-toc li {
  counter-increment:toc;
  font-size:13.5px;
  line-height:1.5
}
.article-toc li a {
  display:block;
  padding:7px 0;
  color:var(--soft);
  text-decoration:none;
  border-top:1px solid var(--line)
}
.article-toc li:first-child a {
  border-top:none
}
.article-toc li a:hover {
  color:var(--blue)
}
.article-toc .toc-lv3 a {
  padding-left:14px;
  font-size:13px
}
/* 锚点跳转时不被吸顶导航遮住 */
.article-body h2[id],.article-body h3[id] {
  scroll-margin-top:96px
}

/* 分享区 */
.article-share {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:24px;
  padding:16px 18px;
  background:#f2f5f6;
  border-radius:10px;
  font-size:13.5px;
  color:var(--muted)
}
.article-share span {
  margin-right:2px
}

/* 目录过长时内部滚动，避免把侧栏撑出视口（侧栏是 sticky 布局） */
.article-toc ol {
  max-height:38vh;
  overflow-y:auto
}