/* ============================================================
   服务流程模块（阳澄湖蟹农直发 · 方案C 原生移植）
   作用域：.sf-module
   CSS 变量前缀：--sf-*
   暗黑模式变量引用 --dm-*（由 dark-mode-core.css 统一管理）
   ============================================================ */
.sf-module,
.sf-module * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ======================================================================
   FAQ 页骨架镜像规则：已于 2026-07 单一真实源化，删除与 ipb-faq.css 重复的
   镜像规则（H1 视觉隐藏 / 摘要区 / facts / sec / layout grid / aside / 客服网格 /
   feedback 折叠态 / contact CTA 等），统一由 ipb-faq.css 维护（head 内晚于本文件
   加载，同特异性下自然胜出，渲染不变）。
   本文件仅保留下方 ipb-faq-tags--autohide 防闪规则——ipb-faq.css 无等价规则，
   且 ipb-faq.js 依赖此同步加载的默认隐藏态消除标签区闪现窗口，不可删。
   ====================================================================== */

/* 快速定位标签区防闪：条目 < 15 时本就该隐藏，但原逻辑靠 ipb-faq.js（idle~1.8s+）
   后加 hidden 属性实现，导致该区块先完整显示再被隐藏 = 「一闪而逝」。
   此处默认隐藏（同步 CSS 立即生效），ipb-faq.js 的 ipbMaybeHideTags 改为：
   条目 ≥ 15 时移除 .ipb-faq-tags--autohide 类以显示。反转默认态消除闪现窗口。 */
.ipb-faq-module .ipb-faq-section--tags.ipb-faq-tags--autohide {
  display: none;
}

/* ============================================================
   变量定义
   ============================================================ */
.sf-module {
  /* 品牌色 */
  --sf-accent: var(--husir-coral, var(--dm-accent, #ff6b6b));
  --sf-accent-hover: var(--husir-coral-hover, var(--dm-accent-hover, #ff5252));
  --sf-accent-soft: var(--husir-coral-soft, var(--dm-accent-soft, rgba(255, 107, 107, 0.12)));
  --sf-accent-glow: var(--husir-coral-glow, var(--dm-accent-glow, rgba(255, 107, 107, 0.15)));
  --sf-accent-strong: var(--husir-coral-strong, var(--dm-accent-strong, rgba(255, 107, 107, 0.18)));
  --sf-accent-selection: var(--sf-accent-strong);
  --sf-on-accent: var(--husir-on-coral, var(--dm-on-accent, #ffffff));
  /* 阶段主题色 */
  --sf-eco: var(--dm-sf-eco, #d97706);
  --sf-eco-soft: var(--dm-sf-eco-soft, rgba(217, 119, 6, 0.1));
  --sf-eco-alt: var(--dm-sf-eco-alt, #f59e0b);
  --sf-chain: var(--dm-sf-chain, #2563eb);
  --sf-chain-soft: var(--dm-sf-chain-soft, rgba(37, 99, 235, 0.1));
  --sf-chain-alt: var(--dm-sf-chain-alt, #60a5fa);
  --sf-direct: var(--dm-sf-direct, #0d9488);
  --sf-direct-soft: var(--dm-sf-direct-soft, rgba(13, 148, 136, 0.1));
  --sf-direct-alt: var(--dm-sf-direct-alt, #14b8a6);
  --sf-fresh-soft: var(--dm-sf-fresh-soft, rgba(225, 29, 72, 0.1));
  --sf-success: var(--dm-success, #10b981);
  --sf-success-soft: var(--dm-sf-success-soft, rgba(16, 185, 129, 0.1));
  --sf-success-border: var(--dm-sf-success-border, rgba(16, 185, 129, 0.2));
  --sf-warning: var(--dm-warning, #d97706);
  --sf-warning-soft: var(--dm-sf-warning-soft, rgba(245, 158, 11, 0.08));
  --sf-warning-border: var(--dm-sf-warning-border, rgba(245, 158, 11, 0.2));
  --sf-error: var(--dm-error, #dc2626);
  --sf-error-soft: var(--dm-error-bg, rgba(239, 68, 68, 0.06));
  --sf-error-border: var(--dm-error-border, rgba(239, 68, 68, 0.15));
  --sf-on-image: var(--dm-sf-on-image, #ffffff);
  --sf-on-image-muted: var(--dm-sf-on-image-muted, rgba(255, 255, 255, 0.85));
  --sf-on-image-chip: var(--dm-sf-on-image-chip, rgba(255, 255, 255, 0.2));
  --sf-on-image-accent: var(--dm-sf-on-image-accent, #ffb88c);
  --sf-on-image-success: var(--dm-sf-on-image-success, #6ee7b7);
  --sf-overlay-strong: var(--dm-sf-overlay-strong, rgba(0, 0, 0, 0.6));
  --sf-overlay-soft: var(--dm-sf-overlay-soft, rgba(0, 0, 0, 0.15));
  /* 背景 */
  --sf-bg: var(--dm-bg);
  --sf-bg-card: var(--dm-bg-elevated);
  --sf-bg-subtle: var(--dm-bg-secondary);
  --sf-bg-hover: var(--dm-bg-hover, rgba(120, 120, 128, 0.06));
  /* 文字 */
  --sf-text: var(--dm-text);
  --sf-text-secondary: var(--dm-text-secondary);
  --sf-text-muted: var(--dm-text-tertiary);
  /* 边框 */
  --sf-border: var(--dm-border);
  --sf-divider: var(--dm-divider);
  /* 阴影 */
  --sf-shadow-sm: var(--dm-shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
  --sf-shadow-md: var(--dm-shadow-md, 0 4px 16px rgba(0,0,0,0.06));
  --sf-shadow-lg: var(--dm-shadow-lg, 0 8px 40px rgba(0,0,0,0.08));
  /* 圆角 */
  --sf-radius-xl: 22px;
  --sf-radius-lg: 18px;
  --sf-radius-md: 14px;
  --sf-radius-sm: 12px;
  /* 过渡 */
  --sf-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --sf-duration: 240ms;
  /* 等宽 */
  --sf-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  /* 排版量表（5 级，px 基准 — 项目根 font-size 为 vw 流式，rem 不可用）
     全局统一缩小 2px，匹配 Apple 中文正文节奏 */
  --sf-text-xs: 14px;        /* tiny 标签、徽章 */
  --sf-text-sm: 16px;        /* 小标签、元数据 */
  --sf-text-base: 18px;      /* 卡片正文、按钮 */
  --sf-text-lg: 18px;        /* 子标题、引导文本 */
  --sf-text-xl: 36px;        /* 标题 */
  /* 字重角色 */
  --sf-weight-body: 400;
  --sf-weight-label: 600;
  --sf-weight-heading: 700;
  --sf-weight-display: 800;
  /* 大写标签统一 tracking */
  --sf-tracking-label: 0.06em;
  /* 间距 */
  --sf-space-section: clamp(32px, 4vw, 56px);
  --sf-space-block: clamp(16px, 2.5vw, 28px);
  /* 安全区 */
  --sf-safe-bottom: env(safe-area-inset-bottom, 16px);

  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--sf-text);
  background: transparent;
  /* Apple HIG：全局色彩过渡丝滑跟随系统亮暗切换 */
  transition: color 0.5s ease, background-color 0.5s ease;
  /* 宽度链显式占满父级，避免动态工具内容参与容器定宽。 */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

/* JS 按需渲染前预留最终模块高度，避免首屏服务流程替换时推挤下方内容 */
#sf-service-module:not(.sf-module-ready) {
  min-height: clamp(1760px, 132vw, 2140px);
}

@media (max-width: 1100px) {
  #sf-service-module:not(.sf-module-ready) {
    min-height: clamp(2100px, 268vw, 2560px);
  }
}

@media (max-width: 600px) {
  #sf-service-module:not(.sf-module-ready) {
    /* CLS 预估占位：JS 渲染完成（.sf-module-ready）后此规则失效。
       下限 2200→1900：320-375px 主流手机实际渲染约 1800-2000px，原 2200 占位过高，
       JS 渲染后模块收缩致反向 CLS（内容上跳）。系数 570vw→520vw 配合下限下调。
       实测：320px→1900(下限)、375px→1950、390px→2028、430px→2236。 */
    min-height: clamp(1900px, 520vw, 2360px);
  }
}

/* ============================================================
   外层 Wrapper（Apple HIG 全宽居中容器）
   ============================================================ */
.sf-module-wrapper {
  width: 100%;
  min-width: 0;
  max-width: 1240px;
  margin: 0 auto;
}

.sf-module .sf-widget-wrap {
  width: 100%;
  min-width: 0;
}

/* noscript SEO 降级样式 */
.sf-noscript {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', sans-serif;
  color: var(--sf-text);
  line-height: 1.6;
}
.sf-noscript__title {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.sf-noscript__desc {
  font-size: 15px;
  color: var(--sf-text-secondary);
  margin: 0 0 24px;
  max-width: 52em;
}
.sf-noscript__stages {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 12px;
}
.sf-noscript__stages li {
  padding: 16px 20px;
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border);
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.6;
}
.sf-noscript__stages strong {
  color: var(--sf-accent);
}

/* JS 加载前的静态摘要：慢网下避免服务流程区域空白 */
.sf-module .sf-loading {
  padding: clamp(22px, 4vw, 36px);
  min-height: inherit;
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  box-shadow: var(--sf-shadow-sm);
  color: var(--sf-text);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sf-module .sf-loading__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sf-module .sf-loading__desc {
  max-width: 60em;
  margin: 0;
  color: var(--sf-text-secondary);
  line-height: 1.7;
}

/* JS 渲染异常兜底：保留关键信息，避免交互模块空白 */
.sf-module .sf-fallback {
  padding: clamp(22px, 4vw, 36px);
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  box-shadow: var(--sf-shadow-sm);
  color: var(--sf-text);
}
.sf-module .sf-fallback__title {
  margin: 0 0 10px;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sf-module .sf-fallback__desc {
  max-width: 60em;
  margin: 0 0 18px;
  color: var(--sf-text-secondary);
  line-height: 1.7;
}
.sf-module .sf-fallback__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--sf-text-secondary);
  line-height: 1.65;
}

/* ============================================================
   文字选中珊瑚色（Apple 品牌识别）
   ============================================================ */
.sf-module ::selection {
  background: var(--sf-accent-selection);
  color: var(--sf-accent);
}
.sf-module ::-moz-selection {
  background: var(--sf-accent-selection);
  color: var(--sf-accent);
}

/* ============================================================
   头部标签
   ============================================================ */
.sf-module .sf-header {
  text-align: center;
  margin-bottom: var(--sf-space-section);
}
.sf-module .sf-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  background: var(--sf-accent-soft);
  border: 1px solid var(--sf-accent-strong);
  border-radius: 999px;
  font-size: 16px;
  font-weight: var(--sf-weight-heading);
  color: var(--sf-accent);
  letter-spacing: var(--sf-tracking-label);
  margin-bottom: 14px;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.sf-module .sf-header__badge:hover {
  background: var(--sf-accent-strong);
  border-color: var(--sf-accent-glow);
}
.sf-module .sf-header__title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--sf-text);
  margin: 0 0 10px;
  text-wrap: balance;
}
.sf-module .sf-header__title em {
  font-style: normal;
  color: var(--sf-accent);
}
.sf-module .sf-header__sub {
  font-size: clamp(14px, 1.6vw, 18px);
  color: var(--sf-text-muted);
  margin: 0;
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.55;
}

/* ============================================================
   主面板（产地证据板）
   ============================================================ */
.sf-module .sf-panel {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sf-border);
  border-bottom: 1px solid var(--sf-border);
  border-radius: 0;
  padding: clamp(28px, 3vw, 40px) 0;
  box-shadow: none;
  margin-bottom: var(--sf-space-section);
  transition: border-color 0.5s ease;
}
.sf-module .sf-panel--height-stable {
  min-height: clamp(720px, 58vw, 800px);
}
.sf-module .sf-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
}
@media (min-width: 1024px) {
  .sf-module .sf-panel__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
    gap: clamp(36px, 4vw, 52px);
  }
}

/* 四阶段指标叠在同一网格行，隐藏项仍参与尺寸计算；
   容器因此采用最高阶段的自然高度，无需 CSP 敏感的运行期内联样式。 */
.sf-module .sf-panel__left {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}
.sf-module .sf-panel__left > .sf-showcase {
  grid-area: 1 / 1;
}
.sf-module .sf-panel__left > .sf-panel-metrics {
  grid-area: 2 / 1;
  visibility: hidden;
  pointer-events: none;
}
.sf-module .sf-panel__left > .sf-panel-metrics.is-active {
  visibility: visible;
  pointer-events: auto;
}

/* ============================================================
   图片展示区
   ============================================================ */
.sf-module .sf-showcase {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sf-bg-subtle);
  border: 1px solid var(--sf-border);
  transition: background 0.6s var(--sf-ease), border-color 0.5s ease;
}
@media (min-width: 901px) {
  .sf-module .sf-showcase {
    aspect-ratio: 16 / 9;
  }
}
/* 阶段渐变占位 — 收敛为 Apple HIG 浅灰底 + 发丝边框（与 FAQ 卡片语言统一） */
.sf-module .sf-showcase[data-stage="eco-breeding"],
.sf-module .sf-showcase[data-stage="cold-chain"],
.sf-module .sf-showcase[data-stage="direct-farmers"],
.sf-module .sf-showcase[data-stage="fresh-arrival"] {
  background: var(--sf-bg-subtle);
}
/* 纹理叠加已移除（配合渐变占位收敛为实底卡片） */
/* z-index 已并入下方 __overlay/__info 主定义块，避免孤立单行块 */
.sf-module .sf-showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: opacity 0.4s var(--sf-ease), transform 0.7s var(--sf-ease);
}
.sf-module .sf-showcase__img.is-entering {
  opacity: 0;
  transform: scale(1.02);
}
.sf-module .sf-showcase__img.is-active {
  opacity: 1;
  transform: scale(1);
}
.sf-module .sf-showcase__img.is-exiting {
  opacity: 0;
  transform: scale(1);
}
.sf-module .sf-showcase__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--sf-overlay-strong) 0%, var(--sf-overlay-soft) 40%, transparent 100%);
  pointer-events: none;
  transition: background 0.5s ease;
  z-index: 2;
}
.sf-module .sf-showcase__info {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  color: var(--sf-on-image);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 3;
}
@media (min-width: 640px) {
  .sf-module .sf-showcase__info {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.sf-module .sf-showcase__stage-tag {
  display: inline-block;
  font-size: var(--sf-text-xs);
  font-family: inherit;
  font-weight: var(--sf-weight-heading);
  letter-spacing: 0;
  background: var(--sf-on-image-chip);
  /* 不支持 backdrop-filter 时用更不透明的底色兜底，确保图片上的文字对比度可读 */
  padding: 4px 8px;
  border-radius: 2px;
  border: 1px solid var(--sf-on-image-chip);
  color: var(--sf-on-image-accent);
  margin-bottom: 6px;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sf-module .sf-showcase__stage-tag {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}
.sf-module .sf-showcase__title {
  font-size: 20px;
  font-weight: var(--sf-weight-heading);
  letter-spacing: 0;
  margin: 0 0 4px;
}
.sf-module .sf-showcase__desc {
  font-size: var(--sf-text-sm);
  color: var(--sf-on-image-muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 手机端(≤639px)隐藏阶段描述文字，与 showcase__info 竖排断点(min-width:640px)对齐；
   PC/平板(≥640px)保留显示 */
@media (max-width: 639px) {
  .sf-module .sf-showcase__desc {
    display: none;
  }
}
.sf-module .sf-showcase__badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-heading);
  color: var(--sf-on-image-accent);
  white-space: nowrap;
}

/* ============================================================
   指标面板（桌面端内联 / 移动端可弹窗）
   ============================================================ */
.sf-module .sf-metrics {
  background: var(--sf-bg-subtle);
  border-radius: 20px;
  border: 1px solid var(--sf-border);
  padding: 20px;
  transition: background-color 0.5s ease, border-color 0.5s ease;
}
.sf-module .sf-metrics--height-stable {
  min-height: 0;
}
/* PC 端：指标面板与上方阶段展示块(sf-showcase)拉开 10px 留白，移动端保持紧贴 */
@media (min-width: 901px) {
  .sf-module .sf-metrics {
    margin-top: 10px;
  }
}
.sf-module .sf-metrics__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sf-divider);
  margin-bottom: 12px;
}
.sf-module .sf-metrics__label {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-heading);
  color: var(--sf-text-muted);
  letter-spacing: var(--sf-tracking-label);
  text-transform: uppercase;
}
.sf-module .sf-metrics__sla {
  font-size: var(--sf-text-xs);
  font-family: var(--sf-mono);
  font-weight: var(--sf-weight-label);
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--sf-accent-soft);
  color: var(--sf-accent);
  border: 1px solid var(--sf-accent-strong);
}
.sf-module .sf-metrics__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .sf-module .sf-metrics__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sf-module .sf-metric {
  padding: 14px;
  background: var(--sf-bg-card);
  border-radius: 16px;
  border: 1px solid var(--sf-border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.sf-module .sf-metric:hover {
  border-color: var(--sf-accent-glow);
  box-shadow: 0 2px 12px var(--sf-accent-soft);
}
.sf-module .sf-metric__label {
  font-size: var(--sf-text-xs);
  color: var(--sf-text-muted);
  font-weight: var(--sf-weight-label);
  margin-bottom: 4px;
}
.sf-module .sf-metric__value {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-display);
  font-family: var(--sf-mono);
  color: var(--sf-accent);
  line-height: 1.3;
  margin-bottom: 2px;
}
.sf-module .sf-metric__desc {
  font-size: 12px;
  color: var(--sf-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   工作流程列表
   ============================================================ */
.sf-module .sf-workflow {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sf-divider);
}
.sf-module .sf-workflow__label {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-heading);
  color: var(--sf-text-muted);
  letter-spacing: var(--sf-tracking-label);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.sf-module .sf-workflow__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  line-height: 1.6;
  margin-bottom: 4px;
}
.sf-module .sf-workflow__item svg {
  width: 14px;
  height: 14px;
  color: var(--sf-accent);
  flex-shrink: 0;
  margin-top: 2px;
}

/* 提示：底色跟随公共珊瑚红，不再使用偏橙的旧色；
   不改共享 warning 变量，避免误伤溯源按钮。 */
.sf-module .sf-tip {
  margin-top: 12px;
  padding: 10px 12px;
  background: #ce453e;
  background: color-mix(in srgb, var(--sf-accent) 76%, #7a1110 24%);
  border: 1px solid #a92b27;
  border-color: color-mix(in srgb, var(--sf-accent) 58%, #7a1110 42%);
  border-radius: var(--sf-radius-sm);
  font-size: var(--sf-text-sm);
  color: var(--sf-on-accent);
  line-height: 1.6;
  font-style: italic;
}
.sf-module .sf-tip strong {
  color: var(--sf-on-accent);
  font-style: normal;
  font-weight: 800;
}

/* ============================================================
   阶段选择卡片
   ============================================================ */
.sf-module .sf-stages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
@media (min-width: 1024px) {
  .sf-module .sf-stages {
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--sf-divider);
    border-bottom: 1px solid var(--sf-divider);
  }
}
.sf-module .sf-stage-card {
  position: relative;
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background var(--sf-duration) var(--sf-ease),
              border-color 0.3s ease,
              color var(--sf-duration) var(--sf-ease);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
}
@media (min-width: 1024px) {
  .sf-module .sf-stage-card {
    flex-direction: row;
    text-align: left;
    min-height: 96px;
    padding: 16px 8px;
    gap: 14px;
    border: 0;
    border-bottom: 1px solid var(--sf-divider);
    border-radius: 0;
  }
  .sf-module .sf-stage-card:last-child {
    border-bottom: 0;
  }
  .sf-module .sf-stage-card__title {
    font-size: 18px;
  }
  .sf-module .sf-stage-card__en {
    font-size: 13px;
  }
  .sf-module .sf-stage-card__desc {
    font-size: 15px;
  }
}
.sf-module .sf-stage-card:hover {
  background: var(--sf-bg-hover);
}
.sf-module .sf-stage-card.is-active {
  background: var(--sf-accent-soft);
  box-shadow: inset 3px 0 0 var(--sf-accent);
}

/* 步骤编号默认隐藏，竖屏平板流程台账中显示以明确顺序。 */
.sf-module .sf-stage-card__step {
  display: none;
}

/* 图标容器 */
.sf-module .sf-stage-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  transition: color var(--sf-duration) var(--sf-ease);
  flex-shrink: 0;
}
.sf-module .sf-stage-card__icon svg {
  width: 28px;
  height: 28px;
  color: var(--sf-text-muted);
  transition: color var(--sf-duration) var(--sf-ease);
}
.sf-module .sf-stage-card.is-active .sf-stage-card__icon {
  background: transparent;
  border-color: transparent;
}
/* 4 阶段激活态图标配色统一为品牌强调色，合并前每阶段各写一行且逐字相同；
   去掉 [data-stage] 限定后特异性由 0,5,1 降为 0,4,1，仍 > 基块 L908(0,3,1)，无覆盖风险 */
.sf-module .sf-stage-card.is-active .sf-stage-card__icon svg { color: var(--sf-accent); }

/* 文字 */
.sf-module .sf-stage-card__body {
  flex: 1;
  min-width: 0;
}
.sf-module .sf-stage-card__title {
  font-size: var(--sf-text-base);
  font-weight: var(--sf-weight-heading);
  color: var(--sf-text);
  margin: 0;
}
.sf-module .sf-stage-card__en {
  display: none;
  font-size: var(--sf-text-xs);
  font-family: inherit;
  color: var(--sf-text-muted);
  letter-spacing: 0;
  margin-left: 6px;
}
@media (min-width: 1024px) {
  .sf-module .sf-stage-card__en { display: inline; }
}
.sf-module .sf-stage-card__desc {
  display: none;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-muted);
  line-height: 1.55;
  margin-top: 4px;
}
@media (min-width: 1024px) {
  .sf-module .sf-stage-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* 右箭头 */
.sf-module .sf-stage-card__arrow {
  display: none;
}
@media (min-width: 1024px) {
  .sf-module .sf-stage-card__arrow {
    display: flex;
    align-items: center;
  }
  .sf-module .sf-stage-card__arrow svg {
    width: 18px;
    height: 18px;
    color: var(--sf-border);
    transition: color var(--sf-duration) var(--sf-ease),
                transform var(--sf-duration) var(--sf-ease);
  }
  .sf-module .sf-stage-card.is-active .sf-stage-card__arrow svg {
    color: var(--sf-accent);
    transform: translateX(2px);
  }
}

/* 竖屏平板专属流程台账：适用于 600–833px 竖屏紧凑导航端型。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
  .sf-module .sf-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--sf-border);
    border-radius: 8px;
    background: var(--sf-bg-card);
  }

  .sf-module .sf-stage-card {
    min-height: 88px;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
  }

  .sf-module .sf-stage-card:nth-child(even) {
    border-left: 1px solid var(--sf-divider);
  }

  .sf-module .sf-stage-card:nth-child(3),
  .sf-module .sf-stage-card:nth-child(4) {
    border-top: 1px solid var(--sf-divider);
  }

  .sf-module .sf-stage-card.is-active {
    background: var(--sf-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sf-accent);
  }

  .sf-module .sf-stage-card__step {
    display: block;
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--sf-text-muted);
    font-family: var(--sf-mono);
    font-size: 12px;
    font-weight: var(--sf-weight-heading);
    line-height: 1;
  }

  .sf-module .sf-stage-card.is-active .sf-stage-card__step {
    color: var(--sf-accent);
  }

  .sf-module .sf-stage-card:focus-visible {
    outline-offset: -3px;
  }
}

.sf-module .sf-panel__nav-label,
.sf-module .sf-widget--iot .sf-transit__section-label {
  display: block;
  margin-bottom: 12px;
  color: var(--sf-text-muted);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-heading);
  letter-spacing: 0;
}

/* 信任提示 */
.sf-module .sf-trust-box {
  margin-top: 24px;
  padding: 20px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sf-divider);
  border-radius: 0;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  line-height: 1.65;
  transition: border-color 0.3s ease;
}
.sf-module .sf-trust-box__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--sf-weight-heading);
  color: var(--sf-accent);
  margin-bottom: 6px;
  font-size: var(--sf-text-base);
}
.sf-module .sf-trust-box__head svg { width: 16px; height: 16px; }

/* 主面板改为核验台账；弹窗复用同一 metrics DOM，因此所有视觉覆盖必须限定在左栏。 */
.sf-module .sf-panel__left > .sf-metrics {
  margin-top: 24px;
  padding: 20px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--sf-divider);
  border-radius: 0;
}
.sf-module .sf-panel__left > .sf-metrics .sf-metrics__head {
  padding: 0 0 12px;
  margin-bottom: 0;
}
.sf-module .sf-panel__left > .sf-metrics .sf-metrics__label,
.sf-module .sf-panel__left > .sf-metrics .sf-workflow__label {
  letter-spacing: 0;
  text-transform: none;
}
.sf-module .sf-panel__left > .sf-metrics .sf-metrics__sla {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  letter-spacing: 0;
}
.sf-module .sf-panel__left > .sf-metrics .sf-metrics__grid {
  gap: 0;
}
.sf-module .sf-panel__left > .sf-metrics .sf-metric {
  padding: 16px;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--sf-divider);
  border-radius: 0;
  box-shadow: none;
  transition: background-color var(--sf-duration) var(--sf-ease);
}
.sf-module .sf-panel__left > .sf-metrics .sf-metric:nth-child(odd) {
  border-left: 0;
}
.sf-module .sf-panel__left > .sf-metrics .sf-metric:nth-child(n + 3) {
  border-top: 1px solid var(--sf-divider);
}
.sf-module .sf-panel__left > .sf-metrics .sf-metric:hover {
  background: var(--sf-bg-hover);
  border-color: var(--sf-divider);
  box-shadow: none;
}
.sf-module .sf-panel__left > .sf-metrics .sf-metric__desc {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.sf-module .sf-panel__left > .sf-metrics .sf-workflow {
  margin-top: 0;
  padding-top: 16px;
}
.sf-module .sf-panel__left > .sf-metrics .sf-tip {
  margin-top: 16px;
  padding: 10px 12px;
  background: var(--sf-accent-soft);
  border: 0;
  border-left: 3px solid var(--sf-accent);
  border-radius: 0 4px 4px 0;
  color: var(--sf-text-secondary);
  font-style: normal;
}
.sf-module .sf-panel__left > .sf-metrics .sf-tip strong {
  color: var(--sf-accent);
}
@media (min-width: 768px) {
  .sf-module .sf-panel__left > .sf-metrics .sf-metric:nth-child(n) {
    border-top: 0;
    border-left: 1px solid var(--sf-divider);
  }
  .sf-module .sf-panel__left > .sf-metrics .sf-metric:first-child {
    border-left: 0;
  }
}
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
  .sf-module .sf-panel__left > .sf-metrics .sf-metrics__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sf-module .sf-panel__left > .sf-metrics .sf-metric {
    border-top: 0;
    border-left: 1px solid var(--sf-divider);
  }
  .sf-module .sf-panel__left > .sf-metrics .sf-metric:nth-child(odd) {
    border-left: 0;
  }
  .sf-module .sf-panel__left > .sf-metrics .sf-metric:nth-child(n + 3) {
    border-top: 1px solid var(--sf-divider);
  }
}

/* ============================================================
   分割线
   ============================================================ */
.sf-module .sf-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  margin-bottom: var(--sf-space-block);
}
.sf-module .sf-divider__line {
  flex: 1;
  height: 1px;
  background: var(--sf-divider);
}
.sf-module .sf-divider__text {
  font-size: var(--sf-text-sm);
  font-family: var(--sf-mono);
  font-weight: var(--sf-weight-heading);
  letter-spacing: var(--sf-tracking-label);
  color: var(--sf-text-muted);
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .sf-module .sf-divider__text {
    font-size: 22px;
  }
}

/* ============================================================
   Tab 切换栏
   ============================================================ */
.sf-module .sf-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--sf-space-block);
}
.sf-module .sf-tab-btn {
  min-height: 44px;
  padding: 8px 16px;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-heading);
  border-radius: var(--sf-radius-sm);
  border: 1px solid var(--sf-border);
  background: var(--sf-bg-card);
  color: var(--sf-text-secondary);
  cursor: pointer;
  transition: background var(--sf-duration) var(--sf-ease),
              border-color var(--sf-duration) var(--sf-ease),
              color var(--sf-duration) var(--sf-ease),
              box-shadow var(--sf-duration) var(--sf-ease);
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
.sf-module .sf-tab-btn:hover {
  background: var(--sf-bg-subtle);
}
.sf-module .sf-tab-btn.is-active {
  color: var(--sf-on-image);
  border-color: transparent;
  background: var(--sf-accent);
}

/* ----- 移动端：sf-tabs 改纯粹等宽 2×2 网格
   第一行：联动当前流程：规格测算 | 规格测算
   第二行：恒温冷运追踪         | 官方溯源
   长按钮文字按冒号自然断行（"联动当前流程：" / "规格测算"），语义更清晰。
   断点 833px 对齐全站导航断点（service-flow.js:1217 用同值做移动判定）。
   JS 只靠 DOM 选择器/属性切 tab，不读布局几何，改 grid 零影响。
   暗黑走 --sf-* 变量自动适配，无需额外规则。 ----- */
@media (max-width: 833px) {
  .sf-module .sf-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: stretch;
    gap: 8px;
  }
  /* 长按钮换行后会撑高第一行；min-height 让 4 个按钮等高，两行行高一致。
     54px 容下两行 14px 文字（≈34px）+ padding 16px + 余量。
     flex 居中让单/多行文字都垂直居中，避免顶对齐参差。 */
  .sf-module .sf-tab-btn {
    white-space: normal;
    word-break: keep-all;
    padding: 8px 10px;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   工具卡片容器（通用外壳）
   ============================================================ */
.sf-module .sf-widget {
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--sf-shadow-sm);
  transition: opacity 0.3s var(--sf-ease), transform 0.3s var(--sf-ease), background-color 0.5s ease, border-color 0.5s ease;
}
.sf-module .sf-widget.is-entering {
  opacity: 0;
  transform: translateY(12px);
}
.sf-module .sf-widget.is-active {
  opacity: 1;
  transform: translateY(0);
}
.sf-module .sf-widget__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.sf-module .sf-widget__head-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sf-accent-soft);
  color: var(--sf-accent);
  flex-shrink: 0;
}
.sf-module .sf-widget__head-icon svg { width: 20px; height: 20px; }
.sf-module .sf-widget__head-title {
  font-size: var(--sf-text-base);
  font-weight: var(--sf-weight-heading);
  color: var(--sf-text);
  margin: 0;
}
.sf-module .sf-widget__head-desc {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-muted);
  margin: 2px 0 0;
}

/* ============================================================
   规格计算器
   ============================================================ */
.sf-module .sf-widget.sf-widget--calculator {
  display: grid;
  min-width: 0;
  border-radius: 8px;
}

.sf-module .sf-widget--calculator > * {
  min-width: 0;
}

.sf-module .sf-widget--calculator > .sf-widget__head {
  grid-area: head;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sf-divider);
}

.sf-module .sf-widget--calculator > .sf-widget__head > div {
  min-width: 0;
}

/* 蟹别采用同一外框内的等宽分段，选中态只用背景与内描边确认状态。 */
.sf-module .sf-widget--calculator > .sf-calc__gender {
  grid-area: gender;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: var(--sf-bg-subtle);
}

.sf-module .sf-widget--calculator .sf-calc__gender-btn {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-heading);
  line-height: 1.4;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sf-text-secondary);
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color var(--sf-duration) var(--sf-ease),
    color var(--sf-duration) var(--sf-ease),
    box-shadow var(--sf-duration) var(--sf-ease);
  -webkit-appearance: none;
  appearance: none;
}

.sf-module .sf-widget--calculator .sf-calc__gender-btn span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sf-module .sf-widget--calculator .sf-calc__gender-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--sf-text-muted);
  transition: color var(--sf-duration) var(--sf-ease);
}

.sf-module .sf-widget--calculator .sf-calc__gender-btn:hover:not(.is-active) {
  background: var(--sf-bg-hover);
  color: var(--sf-text);
}

.sf-module .sf-widget--calculator .sf-calc__gender-btn.is-active {
  background: var(--sf-bg-card);
  color: var(--sf-accent);
  box-shadow: inset 0 0 0 1px var(--sf-accent);
}

.sf-module .sf-widget--calculator .sf-calc__gender-btn.is-active svg {
  color: var(--sf-accent);
}

/* 重量与克重同组呈现，数值优先，单位允许在窄空间内自然换行。 */
.sf-module .sf-widget--calculator > .sf-calc__weight-head {
  grid-area: weight;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  margin: 0;
}

.sf-module .sf-widget--calculator .sf-calc__weight-label {
  min-width: 0;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-label);
  color: var(--sf-text-muted);
}

.sf-module .sf-widget--calculator .sf-calc__weight-value {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  font-family: var(--sf-mono);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--sf-accent);
}

.sf-module .sf-widget--calculator .sf-calc__weight-unit {
  margin-left: 4px;
  font-size: var(--sf-text-base);
  font-weight: var(--sf-weight-label);
  color: var(--sf-text-muted);
}

.sf-module .sf-widget--calculator .sf-calc__weight-gram {
  margin-left: 8px;
  font-size: var(--sf-text-sm);
  font-weight: 500;
  color: var(--sf-text-muted);
}

.sf-module .sf-widget--calculator > .sf-calc__slider-row {
  grid-area: slider;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.sf-module .sf-widget--calculator .sf-calc__slider-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: inherit;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: var(--sf-bg-card);
  color: var(--sf-text);
  cursor: pointer;
  transition:
    background-color var(--sf-duration) var(--sf-ease),
    border-color var(--sf-duration) var(--sf-ease);
  -webkit-appearance: none;
  appearance: none;
}

.sf-module .sf-widget--calculator .sf-calc__slider-btn:hover:not(:disabled) {
  border-color: var(--sf-accent-strong);
  background: var(--sf-bg-hover);
}

.sf-module .sf-widget--calculator .sf-calc__slider-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.sf-module .sf-widget--calculator .sf-calc__slider-btn svg {
  width: 16px;
  height: 16px;
}

.sf-module .sf-widget--calculator .sf-calc__slider {
  min-width: 0;
  height: 44px;
  min-height: 44px;
  flex: 1 1 auto;
  background: transparent;
  cursor: pointer;
  accent-color: var(--sf-accent);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.sf-module .sf-widget--calculator .sf-calc__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--sf-border);
}

.sf-module .sf-widget--calculator .sf-calc__slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--sf-border);
}

.sf-module .sf-widget--calculator .sf-calc__slider::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--sf-accent);
  box-shadow: 0 2px 6px var(--sf-accent-glow);
  cursor: pointer;
  -webkit-appearance: none;
}

.sf-module .sf-widget--calculator .sf-calc__slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--sf-accent);
  cursor: pointer;
}

/* 结果共用一个外框，子项仅以细分隔线组织，不形成嵌套卡片。 */
.sf-module .sf-widget--calculator > .sf-calc__results {
  grid-area: results;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: var(--sf-bg-subtle);
  overflow: hidden;
}

.sf-module .sf-widget--calculator .sf-calc__result-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(odd) {
  border-right: 1px solid var(--sf-divider);
}

.sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(-n + 2) {
  border-bottom: 1px solid var(--sf-divider);
}

.sf-module .sf-widget--calculator .sf-calc__result-label {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-label);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--sf-text-muted);
}

.sf-module .sf-widget--calculator .sf-calc__result-label span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.sf-module .sf-widget--calculator .sf-calc__result-label svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(1) .sf-calc__result-label svg {
  color: var(--sf-chain);
}

.sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(2) .sf-calc__result-label svg {
  color: var(--sf-success);
}

.sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(3) .sf-calc__result-label svg {
  color: var(--sf-warning);
}

.sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(4) .sf-calc__result-label svg {
  color: var(--sf-chain-alt);
}

.sf-module .sf-widget--calculator .sf-calc__result-value {
  min-width: 0;
  font-family: var(--sf-mono);
  font-size: var(--sf-text-base);
  font-weight: var(--sf-weight-heading);
  line-height: 1.45;
  color: var(--sf-text);
  overflow-wrap: anywhere;
}

/* 推荐结论用顶部强调线承接测算结果，不再增加一层卡片边界。 */
.sf-module .sf-widget--calculator > .sf-calc__tier {
  grid-area: tier;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-top: 2px solid var(--sf-accent);
  border-radius: 0;
  background: var(--sf-accent-soft);
  font-size: var(--sf-text-sm);
  line-height: 1.6;
  color: var(--sf-text-secondary);
}

.sf-module .sf-widget--calculator .sf-calc__tier strong {
  display: block;
  margin-bottom: 4px;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-heading);
  color: var(--sf-accent);
}

/* PC / 大屏：标题横跨工作台，左侧输入与结论、右侧四项质检结果。 */
@media (min-width: 901px) {
  .sf-module .sf-widget--calculator {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "head head"
      "gender results"
      "weight results"
      "slider results"
      "tier results";
    column-gap: 28px;
    row-gap: 16px;
  }

  .sf-module .sf-widget--calculator .sf-calc__weight-value {
    font-size: 32px;
  }
}

/* 紧凑基线：手机、竖屏平板和窄大屏依次呈现输入、结果与推荐。 */
@media (max-width: 900px) {
  .sf-module .sf-widget--calculator {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "gender"
      "weight"
      "slider"
      "results"
      "tier";
    gap: 16px;
  }

  .sf-module .sf-widget--calculator .sf-calc__gender-btn {
    gap: 6px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: var(--sf-text-xs);
  }
}

/* 竖屏平板：沿用紧凑单列结构，增加组间呼吸感和结果阅读空间。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
  .sf-module .sf-widget--calculator {
    gap: 20px;
  }

  .sf-module .sf-widget--calculator .sf-calc__result-card {
    padding: 18px;
  }
}

/* 手机竖屏：结果改为单列，重量标签与数值分层，避免长文本挤压。 */
@media (max-width: 599px) {
  .sf-module .sf-widget--calculator > .sf-calc__weight-head {
    display: grid;
    justify-items: start;
    gap: 8px;
  }

  .sf-module .sf-widget--calculator .sf-calc__weight-value {
    justify-content: flex-start;
  }

  .sf-module .sf-widget--calculator > .sf-calc__results {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(odd) {
    border-right: 0;
  }

  .sf-module .sf-widget--calculator .sf-calc__result-card:nth-child(-n + 3) {
    border-bottom: 1px solid var(--sf-divider);
  }

  .sf-module .sf-widget--calculator .sf-calc__result-card:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   冷链仪表盘
   ============================================================ */
.sf-module .sf-widget--iot {
  --sf-iot-surface: var(--dm-bg-elevated, #ffffff);
  --sf-iot-surface-muted: var(--dm-bg-secondary, #ffffff);
  --sf-iot-cold: var(--sf-chain);
  position: relative;
  width: 100%;
  min-width: 0;
  /* 四个运输阶段按桌面端最大实测内容高度对齐，切换时不再带动后续模块跳动。 */
  min-height: 1214px;
  overflow: hidden;
  color: var(--sf-text);
  background: var(--sf-iot-surface);
  border-color: var(--sf-border);
  border-radius: 8px;
  box-shadow: var(--sf-shadow-md);
}

.sf-module .sf-widget--iot .sf-widget__head {
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--sf-divider);
}

.sf-module .sf-widget--iot .sf-widget__head-icon {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: var(--sf-accent-soft);
  color: var(--sf-accent);
}

.sf-module .sf-widget--iot .sf-widget__head-icon::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border: 2px solid var(--sf-iot-surface);
  border-radius: 50%;
  background: var(--sf-success);
}

.sf-module .sf-widget--iot .sf-widget__head-title {
  font-size: var(--hs-fs-title-m, 20px);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--sf-text);
  text-wrap: balance;
}

.sf-module .sf-widget--iot .sf-widget__head-desc {
  max-width: 72ch;
  margin-top: 4px;
  font-size: var(--hs-fs-body-s, 14px);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--sf-text-secondary);
  text-wrap: pretty;
}

.sf-module .sf-widget--iot .sf-transit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  min-width: 0;
}

.sf-module .sf-widget--iot .sf-transit__left,
.sf-module .sf-widget--iot .sf-transit__right {
  min-width: 0;
}

/* 步进器 */
.sf-module .sf-widget--iot .sf-transit__section-label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-heading);
  line-height: 1.5;
  color: var(--sf-text-muted);
  letter-spacing: 0;
}

.sf-module .sf-widget--iot .sf-transit__stepper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sf-module .sf-widget--iot .sf-transit__stepper::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 15px;
  width: 1px;
  background: var(--sf-divider);
}

.sf-module .sf-widget--iot .sf-transit__step {
  position: relative;
  z-index: 1;
  cursor: pointer;
  width: 100%;
  min-height: 60px;
  padding: 10px 12px 10px 42px;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  transition:
    background-color var(--sf-duration) var(--sf-ease),
    border-color var(--sf-duration) var(--sf-ease),
    opacity var(--sf-duration) var(--sf-ease);
}

.sf-module .sf-widget--iot .sf-transit__step.is-past { opacity: 1; }
.sf-module .sf-widget--iot .sf-transit__step.is-current { opacity: 1; }
.sf-module .sf-widget--iot .sf-transit__step:not(.is-current):not(.is-past) { opacity: 1; }
.sf-module .sf-widget--iot .sf-transit__step:hover { background: var(--sf-bg-hover); }
.sf-module .sf-widget--iot .sf-transit__step.is-current {
  background: var(--sf-accent-soft);
  border-color: var(--sf-accent);
  box-shadow: inset 0 0 0 1px var(--sf-accent);
}

.sf-module .sf-widget--iot .sf-transit__dot {
  position: absolute;
  left: 8px;
  top: 15px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sf-border);
  border-radius: 50%;
  background: var(--sf-bg-card);
  transition: background 0.3s var(--sf-ease),
              border-color 0.3s var(--sf-ease),
              opacity 0.3s var(--sf-ease);
}

.sf-module .sf-widget--iot .sf-transit__dot svg { width: 10px; height: 10px; }
.sf-module .sf-widget--iot .sf-transit__dot-core {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}
.sf-module .sf-widget--iot .sf-transit__step.is-current .sf-transit__dot-core {
  background: var(--sf-on-accent);
}
.sf-module .sf-widget--iot .sf-transit__step.is-current .sf-transit__dot {
  background: var(--sf-accent);
  border-color: var(--sf-accent);
  color: var(--sf-on-accent);
  box-shadow: 0 2px 8px var(--sf-accent-glow);
}
.sf-module .sf-widget--iot .sf-transit__step.is-past .sf-transit__dot {
  background: var(--sf-success);
  border-color: var(--sf-success);
  color: var(--sf-on-accent);
}
.sf-module .sf-widget--iot .sf-transit__step-label {
  display: block;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-heading);
  line-height: 1.45;
  color: var(--sf-text);
}
.sf-module .sf-widget--iot .sf-transit__step.is-current .sf-transit__step-label { color: var(--sf-accent); }
.sf-module .sf-widget--iot .sf-transit__step-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--sf-text-xs);
  line-height: 1.55;
  color: var(--sf-text-muted);
}
.sf-module .sf-widget--iot .sf-transit__step:focus-visible {
  outline: 2px solid var(--dm-focus, var(--sf-accent));
  outline-offset: 2px;
}

/* 传感器 */
.sf-module .sf-widget--iot .sf-transit__sensors {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--sf-divider);
}
.sf-module .sf-widget--iot .sf-transit__sensors-label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-heading);
  line-height: 1.5;
  color: var(--sf-text-muted);
  letter-spacing: 0;
}
.sf-module .sf-widget--iot .sf-transit__sensors-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--sf-divider);
  border-bottom: 1px solid var(--sf-divider);
}
.sf-module .sf-widget--iot .sf-transit__sensor {
  min-width: 0;
  padding: 14px 12px 15px 0;
}
.sf-module .sf-widget--iot .sf-transit__sensor + .sf-transit__sensor {
  padding-right: 0;
  padding-left: 14px;
  border-left: 1px solid var(--sf-divider);
}
.sf-module .sf-widget--iot .sf-transit__sensor-label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-label);
  line-height: 1.4;
  color: var(--sf-text-muted);
}
.sf-module .sf-widget--iot .sf-transit__sensor-label svg { width: 12px; height: 12px; }
.sf-module .sf-widget--iot .sf-transit__sensor-value {
  display: inline;
  font-size: 26px;
  font-weight: var(--sf-weight-display);
  font-family: var(--sf-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.sf-module .sf-widget--iot .sf-transit__sensor-target {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--sf-text-muted);
  white-space: nowrap;
}
.sf-module .sf-widget--iot .sf-temp { color: var(--sf-accent); }
.sf-module .sf-widget--iot .sf-humid { color: var(--sf-iot-cold); }

/* 波形图 */
.sf-module .sf-widget--iot .sf-transit__sparkline {
  padding: 12px 14px 10px;
  border: 1px solid var(--sf-border);
  border-radius: 8px;
  background: var(--sf-iot-surface-muted);
}
.sf-module .sf-widget--iot .sf-transit__sparkline-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: var(--sf-text-xs);
  line-height: 1.5;
  color: var(--sf-text-muted);
}
.sf-module .sf-widget--iot .sf-transit__sparkline-status {
  color: var(--sf-success);
  font-weight: var(--sf-weight-heading);
  font-family: var(--sf-mono);
  font-size: var(--sf-text-xs);
  letter-spacing: 0;
  white-space: nowrap;
}
.sf-module .sf-widget--iot .sf-transit__sparkline svg {
  width: 100%;
  height: 52px;
}

/* 运单详情 */
.sf-module .sf-widget--iot .sf-waybill {
  position: relative;
  min-width: 0;
  padding: 18px 0 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.sf-module .sf-widget--iot .sf-waybill__stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sf-accent);
}
.sf-module .sf-widget--iot .sf-waybill__stripe.sf-waybill-stripe-eco { background: var(--sf-eco); }
.sf-module .sf-widget--iot .sf-waybill__stripe.sf-waybill-stripe-chain { background: var(--sf-chain); }
.sf-module .sf-widget--iot .sf-waybill__stripe.sf-waybill-stripe-direct { background: var(--sf-direct); }
.sf-module .sf-widget--iot .sf-waybill__stripe.sf-waybill-stripe-fresh { background: var(--sf-success); }

.sf-module .sf-widget--iot .sf-waybill__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--sf-divider);
  margin-bottom: 0;
}
.sf-module .sf-widget--iot .sf-waybill__head-title {
  min-width: 0;
  font-size: var(--hs-fs-title-s, 17px);
  font-weight: var(--sf-weight-heading);
  font-family: inherit;
  color: var(--sf-text);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.5;
  letter-spacing: 0;
}
.sf-module .sf-widget--iot .sf-waybill__head-title--eco { color: var(--sf-eco); }
.sf-module .sf-widget--iot .sf-waybill__head-title--chain { color: var(--sf-chain); }
.sf-module .sf-widget--iot .sf-waybill__head-title--direct { color: var(--sf-direct); }
.sf-module .sf-widget--iot .sf-waybill__head-title--fresh { color: var(--sf-success); }
.sf-module .sf-widget--iot .sf-waybill__head-title svg { width: 14px; height: 14px; }
.sf-module .sf-widget--iot .sf-waybill__tracking {
  font-size: var(--hs-fs-caption, 12px);
  font-weight: var(--sf-weight-heading);
  font-family: var(--sf-mono);
  line-height: 1.5;
  padding: 5px 9px;
  background: var(--sf-accent-soft);
  border: 1px solid var(--sf-accent-strong);
  border-radius: 4px;
  color: var(--sf-accent);
  letter-spacing: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sf-module .sf-widget--iot .sf-waybill__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 36px);
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--sf-divider);
}
.sf-module .sf-widget--iot .sf-waybill__info > div {
  min-width: 0;
  padding: 12px 0;
}
.sf-module .sf-widget--iot .sf-waybill__info > div:nth-child(n + 3) {
  border-top: 1px solid var(--sf-divider);
}
.sf-module .sf-widget--iot .sf-waybill__info-label {
  margin-bottom: 4px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-label);
  line-height: 1.5;
  color: var(--sf-text-muted);
  letter-spacing: 0;
}
.sf-module .sf-widget--iot .sf-waybill__info-value {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-label);
  line-height: 1.55;
  color: var(--sf-text);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.sf-module .sf-widget--iot .sf-waybill__info-value--success {
  color: var(--sf-success);
}
.sf-module .sf-widget--iot .sf-waybill__info-value svg { width: 14px; height: 14px; flex-shrink: 0; }
.sf-module .sf-widget--iot .sf-waybill__route {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 18px 0;
  font-size: var(--sf-text-sm);
  line-height: 1.6;
  border-bottom: 1px solid var(--sf-divider);
  background: transparent;
}
.sf-module .sf-widget--iot .sf-waybill__route svg { width: 16px; height: 16px; color: var(--sf-accent); flex-shrink: 0; margin-top: 3px; }
.sf-module .sf-widget--iot .sf-waybill__route-label {
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-label);
  line-height: 1.5;
  color: var(--sf-text-muted);
}
.sf-module .sf-widget--iot .sf-waybill__route-value {
  font-weight: var(--sf-weight-heading);
  color: var(--sf-text);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* 条形码 */
.sf-module .sf-widget--iot .sf-waybill__barcode {
  margin: 0;
  padding: 18px 16px;
  text-align: center;
  border-right: 1px solid var(--sf-divider);
  background: var(--sf-iot-surface-muted);
}
.sf-module .sf-widget--iot .sf-waybill__barcode-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  height: 32px;
  margin-bottom: 6px;
}
.sf-module .sf-widget--iot .sf-waybill__barcode-bars span {
  display: inline-block;
  height: 100%;
  background: var(--sf-text);
  border-radius: 1px 1px 0 0;
}
.sf-module .sf-widget--iot .sf-waybill__barcode-bar--1 { width: 1px; }
.sf-module .sf-widget--iot .sf-waybill__barcode-bar--2 { width: 2px; }
.sf-module .sf-widget--iot .sf-waybill__barcode-bar--3 { width: 3px; }
.sf-module .sf-widget--iot .sf-waybill__barcode-bar--4 { width: 4px; }
.sf-module .sf-widget--iot .sf-waybill__barcode-text {
  font-size: var(--sf-text-xs);
  font-family: var(--sf-mono);
  font-weight: 900;
  color: var(--sf-text-muted);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* 事件日志 */
.sf-module .sf-widget--iot .sf-waybill__logs-label {
  margin: 0;
  padding: 16px 0 8px 20px;
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-heading);
  line-height: 1.5;
  color: var(--sf-text-muted);
  letter-spacing: 0;
}
.sf-module .sf-widget--iot .sf-waybill__logs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--sf-divider);
  padding-left: 20px;
}
.sf-module .sf-widget--iot .sf-waybill__log {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 2px;
  font-size: var(--sf-text-sm);
  color: var(--sf-text-secondary);
  line-height: 1.6;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--sf-divider);
  border-radius: 0;
}
.sf-module .sf-widget--iot .sf-waybill__log svg { width: 14px; height: 14px; color: var(--sf-success); flex-shrink: 0; margin-top: 2px; }

/* 桌面端：环节轨、遥测带、运单台账纵向展开，避免左右分栏留下空洞。 */
@media (min-width: 901px) {
  .sf-module .sf-widget--iot .sf-transit__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .sf-module .sf-widget--iot .sf-transit__left {
    display: block;
  }

  .sf-module .sf-widget--iot .sf-transit__section-label {
    margin-bottom: 12px;
    padding: 0;
    border: 0;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-height: 0;
    padding: 0;
    border: 0;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper::before {
    top: 16px;
    right: calc(12.5% + 8px);
    bottom: auto;
    left: calc(12.5% + 8px);
    width: auto;
    height: 1px;
  }

  .sf-module .sf-widget--iot .sf-transit__step {
    min-height: 94px;
    padding: 36px 12px 12px;
    text-align: center;
  }

  .sf-module .sf-widget--iot .sf-transit__dot {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }

  .sf-module .sf-widget--iot .sf-transit__sensors {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
    grid-template-areas:
      "label label"
      "values chart";
    column-gap: clamp(22px, 3vw, 40px);
    margin-top: 28px;
    padding-top: 22px;
  }

  .sf-module .sf-widget--iot .sf-transit__sensors-label {
    grid-area: label;
  }

  .sf-module .sf-widget--iot .sf-transit__sensors-grid {
    grid-area: values;
    align-self: stretch;
    margin-bottom: 0;
  }

  .sf-module .sf-widget--iot .sf-transit__sparkline {
    grid-area: chart;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .sf-module .sf-widget--iot .sf-transit__sparkline svg {
    flex: 1 1 auto;
    min-height: 52px;
  }

  .sf-module .sf-widget--iot .sf-transit__right {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--sf-divider);
  }

  .sf-module .sf-widget--iot .sf-waybill {
    display: grid;
    grid-template-columns: minmax(190px, 0.28fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
  }

  .sf-module .sf-widget--iot .sf-waybill__head,
  .sf-module .sf-widget--iot .sf-waybill__info,
  .sf-module .sf-widget--iot .sf-waybill__route {
    grid-column: 1 / -1;
  }

  .sf-module .sf-widget--iot .sf-waybill__head { grid-row: 1; }
  .sf-module .sf-widget--iot .sf-waybill__info { grid-row: 2; }
  .sf-module .sf-widget--iot .sf-waybill__route { grid-row: 3; }

  .sf-module .sf-widget--iot .sf-waybill__barcode {
    grid-column: 1;
    grid-row: 4 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .sf-module .sf-widget--iot .sf-waybill__logs-label {
    grid-column: 2;
    grid-row: 4;
  }

  .sf-module .sf-widget--iot .sf-waybill__logs {
    grid-column: 2;
    grid-row: 5;
  }
}

/* 紧凑基线：阶段、遥测和运单按阅读顺序堆叠。 */
@media (max-width: 900px) {
  .sf-module .sf-widget--iot {
    min-height: 1429px;
  }

  .sf-module .sf-widget--iot .sf-transit__right {
    padding-top: 24px;
    border-top: 1px solid var(--sf-divider);
  }

  .sf-module .sf-widget--iot .sf-waybill__barcode {
    border-right: 0;
    border-bottom: 1px solid var(--sf-divider);
  }

  .sf-module .sf-widget--iot .sf-waybill__logs-label {
    padding-left: 0;
  }

  .sf-module .sf-widget--iot .sf-waybill__logs {
    padding-left: 0;
  }
}

/* 竖屏平板将阶段导航改为双列，提高单列控制台的横向利用率。 */
@media (min-width: 600px) and (max-width: 833px) and (orientation: portrait) {
  .sf-module .sf-widget--iot {
    /* 600px 窄端保留四阶段最大实测高度，随宽度增加连续收敛，
       约 744px 起回到紧凑基线，避免常见竖屏平板出现大段尾部空白。 */
    min-height: clamp(1429px, calc(2424px - 133.333vw), 1566px);
    padding: 24px;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper::before {
    display: none;
  }
}

/* 紧凑大屏 834–900px：沿用双列阶段导航，避免跨过导航断点后密度反向退化。 */
@media (min-width: 834px) and (max-width: 900px) {
  .sf-module .sf-widget--iot .sf-transit__stepper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper::before {
    display: none;
  }
}

/* 手机竖屏让阶段横向浏览，遥测和运单保持完整单列阅读。 */
@media (max-width: 599px) {
  .sf-module .sf-widget--iot {
    min-height: 1764px;
    padding: 18px 16px;
  }

  .sf-module .sf-widget--iot .sf-widget__head {
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
  }

  .sf-module .sf-widget--iot .sf-widget__head-title {
    font-size: var(--sf-text-base);
  }

  .sf-module .sf-widget--iot .sf-transit__grid {
    gap: 22px;
  }

  /* 固定回顶入口覆盖内容区，标题与波形数据共同保留可读安全区。 */
  .sf-module .sf-widget--iot .sf-transit__sparkline {
    padding-right: calc(var(--pc-float-size, 56px) + 20px);
  }

  .sf-module .sf-widget--iot .sf-transit__stepper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 6px;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper::-webkit-scrollbar { display: none; }

  .sf-module .sf-widget--iot .sf-transit__stepper::before {
    display: none;
  }

  .sf-module .sf-widget--iot .sf-transit__step {
    flex: 0 0 184px;
    width: 184px;
    scroll-snap-align: start;
  }

  .sf-module .sf-widget--iot .sf-transit__step:focus {
    outline: 2px solid var(--sf-accent);
    outline-offset: -2px;
  }

  .sf-module .sf-widget--iot .sf-transit__step:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: -2px;
  }

  .sf-module .sf-widget--iot .sf-transit__sensors-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-module .sf-widget--iot .sf-transit__sensor {
    padding-right: 0;
  }

  .sf-module .sf-widget--iot .sf-transit__sensor + .sf-transit__sensor {
    padding-left: 0;
    border-top: 1px solid var(--sf-divider);
    border-left: 0;
  }

  .sf-module .sf-widget--iot .sf-transit__sensor-target {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sf-module .sf-widget--iot .sf-waybill__head {
    align-items: flex-start;
  }

  .sf-module .sf-widget--iot .sf-waybill__tracking {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sf-module .sf-widget--iot .sf-waybill__info {
    grid-template-columns: minmax(0, 1fr);
  }

  .sf-module .sf-widget--iot .sf-waybill__info > div + div {
    border-top: 1px solid var(--sf-divider);
  }
}

/* 手机窄屏按换行密度分档取最大实测高度，避免统一成 320px 档后产生过量空白。 */
@media (max-width: 479px) {
  .sf-module .sf-widget--iot {
    min-height: 1841px;
  }
}

@media (max-width: 390px) {
  .sf-module .sf-widget--iot {
    min-height: 1940px;
  }
}

@media (max-width: 359px) {
  .sf-module .sf-widget--iot {
    min-height: 2064px;
  }
}

/* 短视口触控横屏即使跨过 834px，也将阶段区改为横向扫读并维持页面零溢出。 */
@media (min-width: 834px) and (max-height: 500px) and (hover: none),
       (min-width: 834px) and (max-height: 500px) and (pointer: coarse) {
  .sf-module .sf-widget--iot .sf-transit__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 22px;
  }

  .sf-module .sf-widget--iot .sf-transit__left {
    display: block;
  }

  .sf-module .sf-widget--iot .sf-transit__section-label {
    margin-bottom: 10px;
    padding: 0;
    border-right: 0;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper {
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-height: 0;
    overflow-x: auto;
    padding: 2px 2px 6px;
    border-right: 0;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sf-module .sf-widget--iot .sf-transit__stepper::-webkit-scrollbar { display: none; }

  .sf-module .sf-widget--iot .sf-transit__stepper::before {
    display: none;
  }

  .sf-module .sf-widget--iot .sf-transit__step {
    flex: 0 0 196px;
    width: 196px;
    scroll-snap-align: start;
  }

  .sf-module .sf-widget--iot .sf-transit__step:focus {
    outline: 2px solid var(--sf-accent);
    outline-offset: -2px;
  }

  .sf-module .sf-widget--iot .sf-transit__step:focus-visible {
    outline: 2px solid var(--sf-accent);
    outline-offset: -2px;
  }

  .sf-module .sf-widget--iot .sf-transit__sensors {
    margin-top: 20px;
    padding: 18px 0 0;
    border-top: 1px solid var(--sf-divider);
  }

  .sf-module .sf-widget--iot .sf-transit__right {
    grid-column: 1;
    grid-row: auto;
    padding: 24px 0 0;
    border-top: 1px solid var(--sf-divider);
  }
}

/* ============================================================
   防伪溯源终端
   ============================================================ */
.sf-module .sf-trace__input-row {
  display: flex;
  gap: 8px;
}
.sf-module .sf-trace__input-wrap {
  position: relative;
  flex: 1;
}
.sf-module .sf-trace__input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--sf-text-muted);
}
.sf-module .sf-trace__input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  font-size: var(--sf-text-base);
  font-family: inherit;
  background: var(--sf-bg-subtle);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-md);
  color: var(--sf-text);
  outline: none;
  transition: border-color var(--sf-duration) var(--sf-ease);
}
.sf-module .sf-trace__input::placeholder { color: var(--sf-text-muted); }
.sf-module .sf-trace__input:focus { border-color: var(--sf-accent); }
.sf-module .sf-trace__verify-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: var(--sf-text-base);
  font-weight: var(--sf-weight-label);
  font-family: inherit;
  background: var(--sf-accent);
  color: var(--sf-on-accent);
  border: none;
  border-radius: var(--sf-radius-md);
  cursor: pointer;
  transition: background var(--sf-duration) var(--sf-ease);
  white-space: nowrap;
}
.sf-module .sf-trace__verify-btn:hover { background: var(--sf-accent-hover); }
.sf-module .sf-trace__verify-btn:disabled { opacity: 0.55; cursor: default; }
.sf-module .sf-trace__verify-btn svg { width: 16px; height: 16px; }

/* 样本推荐 */
.sf-module .sf-trace__samples {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: var(--sf-text-sm);
  flex-wrap: wrap;
}
.sf-module .sf-trace__samples-label { color: var(--sf-text-muted); font-weight: 500; }
.sf-module .sf-trace__sample-btn {
  min-height: 44px;
  padding: 8px 12px;
  font-size: var(--sf-text-sm);
  font-family: var(--sf-mono);
  font-weight: var(--sf-weight-heading);
  background: var(--sf-warning-soft);
  border: 1px solid var(--sf-warning-border);
  border-radius: 6px;
  color: var(--sf-warning);
  cursor: pointer;
  transition: background var(--sf-duration) var(--sf-ease);
}
.sf-module .sf-trace__sample-btn:hover { background: var(--sf-eco-soft); }

/* 结果区域 */
.sf-module .sf-trace__result {
  margin-top: 20px;
  min-height: 60px;
}
.sf-module .sf-trace__idle {
  padding: 32px;
  text-align: center;
  color: var(--sf-text-muted);
  border: 2px dashed var(--sf-border);
  border-radius: var(--sf-radius-lg);
}
.sf-module .sf-trace__idle svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.3; }
.sf-module .sf-trace__idle p { font-size: var(--sf-text-sm); margin: 0; }

/* 验证中 */
.sf-module .sf-trace__loading {
  padding: 24px;
  text-align: center;
  border: 2px dashed var(--sf-accent-strong);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-accent-soft);
}
.sf-module .sf-trace__spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--sf-border);
  border-top-color: var(--sf-accent);
  border-radius: 50%;
  animation: sf-spin 0.8s linear infinite;
  margin: 0 auto 12px;
  position: relative;
}
.sf-module .sf-trace__spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-module .sf-trace__loading p {
  font-size: var(--sf-text-sm);
  font-family: var(--sf-mono);
  color: var(--sf-accent);
  margin: 0;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* 错误 */
.sf-module .sf-trace__error {
  padding: 14px;
  background: var(--sf-error-soft);
  border: 1px solid var(--sf-error-border);
  border-radius: var(--sf-radius-md);
  font-size: var(--sf-text-sm);
  color: var(--sf-error);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.sf-module .sf-trace__error svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

/* 成功 */
.sf-module .sf-trace__success {
  padding: 20px;
  border: 2px solid var(--sf-success-border);
  border-radius: var(--sf-radius-lg);
  background: var(--sf-success-soft);
  position: relative;
  overflow: hidden;
}
.sf-module .sf-trace__stamp {
  position: absolute;
  right: 16px;
  top: 16px;
  border: 2px dashed var(--sf-success-border);
  border-radius: 50%;
  padding: 8px;
  transform: rotate(12deg);
  font-size: var(--sf-text-xs);
  font-weight: var(--sf-weight-heading);
  color: var(--sf-success);
  letter-spacing: var(--sf-tracking-label);
}
.sf-module .sf-trace__success-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sf-module .sf-trace__success-head svg { width: 20px; height: 20px; color: var(--sf-success); }
.sf-module .sf-trace__success-code {
  font-size: var(--sf-text-base);
  font-weight: var(--sf-weight-heading);
  font-family: var(--sf-mono);
  color: var(--sf-success);
}
.sf-module .sf-trace__quality-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--sf-success-soft);
  color: var(--sf-success);
  font-size: 10px;
  font-weight: 700;
}
.sf-module .sf-trace__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--sf-divider);
  font-size: var(--sf-text-xs);
}
.sf-module .sf-trace__summary-label {
  color: var(--sf-text-muted);
}
.sf-module .sf-trace__summary-value {
  color: var(--sf-text);
}
.sf-module .sf-trace__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
@media (min-width: 640px) {
  .sf-module .sf-trace__fields { gap: 16px 24px; }
}
.sf-module .sf-trace__field {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.sf-module .sf-trace__field svg { width: 14px; height: 14px; color: var(--sf-accent); flex-shrink: 0; margin-top: 1px; }
.sf-module .sf-trace__field-label {
  font-size: var(--sf-text-sm);
  color: var(--sf-text-muted);
}
.sf-module .sf-trace__field-value {
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-label);
  color: var(--sf-text);
}
.sf-module .sf-trace__status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--sf-bg-subtle);
  border-radius: 8px;
  font-size: var(--sf-text-sm);
  font-family: var(--sf-mono);
  color: var(--sf-text-secondary);
}
.sf-module .sf-trace__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sf-accent);
  animation: sf-ping 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes sf-ping { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ============================================================
   移动端弹窗
   ============================================================ */
.sf-module .sf-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--dm-z-modal, 10300);
  background: var(--sf-overlay-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--sf-ease),
              visibility 0.3s var(--sf-ease),
              background 0.3s var(--sf-ease);
}
/* backdrop-filter 仅在支持时叠加模糊，不支持的浏览器靠 --sf-overlay-strong 底色即可 */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sf-module .sf-modal-overlay {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.sf-module .sf-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* 防止移动端弹窗在刷新或旧缓存样式下误显示 */
#sf-service-module .sf-modal-overlay:not(.is-open) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sf-module .sf-modal {
  background: var(--sf-bg-card);
  border: 1px solid var(--sf-border);
  border-radius: var(--sf-radius-xl);
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: var(--sf-shadow-lg);
  transform: translateY(8px);
  transition: transform 0.3s var(--sf-ease);
}
.sf-module .sf-modal-overlay.is-open .sf-modal { transform: translateY(0); }
.sf-module .sf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sf-divider);
  margin-bottom: 16px;
}
.sf-module .sf-modal__head-title { font-size: var(--sf-text-base); font-weight: var(--sf-weight-heading); color: var(--sf-text); }
.sf-module .sf-modal__close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--sf-text-muted);
  cursor: pointer;
  transition: background var(--sf-duration) var(--sf-ease);
}
.sf-module .sf-modal__close:hover { background: var(--sf-bg-subtle); }
.sf-module .sf-modal__close svg { width: 18px; height: 18px; }
.sf-module .sf-modal__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--sf-divider);
  margin-top: 16px;
}
.sf-module .sf-modal__foot-btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: var(--sf-text-sm);
  font-weight: var(--sf-weight-label);
  font-family: inherit;
  background: var(--sf-bg-subtle);
  border: 1px solid var(--sf-border);
  border-radius: 10px;
  color: var(--sf-text-secondary);
  cursor: pointer;
  transition: background var(--sf-duration) var(--sf-ease);
}
.sf-module .sf-modal__foot-btn:hover { background: var(--sf-bg-hover); }

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce) {
  .sf-module *,
  .sf-module *::before,
  .sf-module *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   焦点可见样式（键盘无障碍）
   ============================================================ */
.sf-module *:focus { outline: none; }
.sf-module *:focus-visible {
  outline: 2px solid var(--sf-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
.sf-module button:focus-visible {
  outline: 2px solid var(--sf-accent);
  outline-offset: 2px;
}
.sf-module input:focus-visible {
  outline: none;
  border-color: var(--sf-accent);
  box-shadow: 0 0 0 3px var(--sf-accent-soft);
}

/* ============================================================
   内联 SVG 图标统一尺寸
   ============================================================ */
.sf-module button svg,
.sf-module .sf-widget__head-icon svg,
.sf-module .sf-widget--iot .sf-transit__dot svg,
.sf-module .sf-widget--iot .sf-waybill__info-value svg,
.sf-module .sf-widget--iot .sf-waybill__route svg,
.sf-module .sf-widget--iot .sf-waybill__log svg,
.sf-module .sf-trace__field svg,
.sf-module .sf-trace__error svg,
.sf-module .sf-trust-box__head svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}
.sf-module .sf-showcase__badge svg {
  width: 14px;
  height: 14px;
}
/* __workflow__item svg 的 14px 尺寸在主声明块(L789)已含，此处重复，移除该选择器仅留 __header__badge */
.sf-module .sf-header__badge svg {
  width: 14px;
  height: 14px;
}
.sf-module .sf-calc__result-label svg {
  width: 12px;
  height: 12px;
}

/* ============================================================
   布局适配：容器宽度
   （容器 max-width/overflow-x 已上提到 .sf-module 根块声明，此处保留响应式降级）
   ============================================================ */
/* 中等屏幕大网格降级为单列 */
@media (min-width: 1024px) and (max-width: 1200px) {
  .sf-module .sf-panel__grid {
    grid-template-columns: 1fr;
  }

  .sf-module .sf-panel--height-stable {
    min-height: 0;
  }

  /* 中等大屏主面板降为单列后，阶段导航改双列，避免四行流程把页面拉得过长。 */
  .sf-module .sf-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    border-top: 1px solid var(--sf-divider);
    border-bottom: 1px solid var(--sf-divider);
  }

  .sf-module .sf-stage-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* 紧凑基线：压缩流程指标与弹窗信息密度，计算器规则在组件主声明处独立维护。 */
@media (max-width: 900px) {
  .sf-module .sf-panel--height-stable {
    min-height: 0;
  }

  .sf-module .sf-metrics {
    padding: 14px;
    border-radius: 16px;
  }

  .sf-module .sf-metrics--height-stable {
    min-height: clamp(340px, 58vw, 430px);
  }

  .sf-module .sf-metrics__head {
    padding-bottom: 8px;
    margin-bottom: 10px;
  }

  .sf-module .sf-metrics__label {
    font-size: 13px;
    line-height: 1.35;
  }

  .sf-module .sf-metrics__grid {
    gap: 8px;
  }

  .sf-module .sf-metric {
    padding: 10px;
    border-radius: 12px;
  }

  .sf-module .sf-metric__label {
    font-size: 12px;
    margin-bottom: 3px;
  }

  .sf-module .sf-metric__value {
    font-size: 15px;
    line-height: 1.25;
  }

  .sf-module .sf-metric__desc {
    line-height: 1.42;
    -webkit-line-clamp: 2;
  }

  .sf-module .sf-workflow {
    margin-top: 10px;
    padding-top: 10px;
  }

  /* 弹窗内执行规范 / 提示细则 */
  .sf-module .sf-workflow__label,
  .sf-module .sf-workflow__item {
    font-size: 13px;
    line-height: 1.45;
  }

  .sf-module .sf-workflow__item span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sf-module .sf-tip,
  .sf-module .sf-tip strong {
    font-size: 13px;
    line-height: 1.45;
  }

  .sf-module .sf-metrics__sla {
    display: none;
  }
}

/* 手机竖屏：保持两列阶段入口与两列核验指标，但收紧图标和内边距。 */
@media (max-width: 599px) {
  /* 手机竖屏内容宽度不足以容纳中英双语标题，允许换行以免被模块横向裁切。 */
  .sf-module .sf-divider__text {
    min-width: 0;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
  }

  .sf-module .sf-panel {
    padding: 20px 0;
  }

  .sf-module .sf-panel__grid {
    gap: 24px;
  }

  .sf-module .sf-showcase {
    border-radius: 4px;
  }

  .sf-module .sf-showcase__info {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .sf-module .sf-stages {
    gap: 2px;
  }

  .sf-module .sf-stage-card {
    min-height: 70px;
    padding: 11px 8px;
    gap: 8px;
  }

  .sf-module .sf-stage-card__icon {
    width: 32px;
    height: 32px;
  }

  .sf-module .sf-stage-card__icon svg {
    width: 24px;
    height: 24px;
  }

  .sf-module .sf-stage-card__title {
    font-size: 14px;
  }

  .sf-module .sf-panel__left > .sf-metrics {
    padding-top: 16px;
  }

  .sf-module .sf-panel__left > .sf-metrics .sf-metric {
    padding: 12px 10px;
  }

  .sf-module .sf-trust-box {
    margin-top: 18px;
    padding-top: 16px;
  }
}

/* 移动端阶段核验弹窗打开时锁定 body 滚动，防滚动穿透。
   与 ipb-faq.css 的 body.ipb-faq-modal-lock 模式一致。 */
body.sf-modal-lock {
  overflow: hidden;
}