/* ==========================================================================
   上海世佳特科技有限公司 — Page components
   site.css : hero, live dashboard, capability grid, solutions, timeline,
              ROI calculator, matrices, cases, contact
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Home hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 92px));
  padding-bottom: clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.06fr);
  gap: clamp(34px, 4.5vw, 60px);
  align-items: center;
}
.hero__copy { max-width: 660px; }
/* Slightly tighter than the global h1 so "跑出它该有的效率" holds one line
   inside the left column instead of breaking after "该". */
.hero h1 { margin-top: 26px; font-size: clamp(33px, 4.6vw, 57px); text-wrap: initial; }
.hero h1 .line2 { display: block; }
.hero .lede { margin-top: 26px; max-width: 560px; }
.hero__acts { margin-top: 36px; display: flex; gap: 13px; flex-wrap: wrap; }
.hero__proof {
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.hero__proof div { display: flex; flex-direction: column; gap: 3px; }
.hero__proof .v {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero__proof .k {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Faint vertical scanline over hero — instrument feel */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(47, 224, 192, 0.18) 45%, transparent);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Live line dashboard (hero centrepiece)
   -------------------------------------------------------------------------- */
.dash {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0e1218, #0a0d12);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 40px 90px -40px rgba(0, 0, 0, 0.95),
    0 0 70px -30px rgba(47, 224, 192, 0.22);
}
.dash__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.dash__id {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash__id b { color: var(--teal); font-weight: 600; }
/* 品牌名从 SJT 换成 SCATTER 后标签变长，窄屏会挤到胶囊折行 —— 胶囊锁死单行，副标题在 420px 断点隐藏 */
.dash__bar .pill { flex-shrink: 0; white-space: nowrap; }
.dash__body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }

/* Metric tiles */
.mtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mtile {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 11px 12px;
  min-width: 0;
}
.mtile__k {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mtile__v {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.mtile__v small { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.mtile__d { margin-top: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; }
.mtile__d.up { color: var(--teal); }
.mtile__d.dn { color: var(--amber); }
/* One-shot glow when a metric ticks — site.js retriggers it on each new value */
.mtile.bump { animation: mtile-pulse 0.5s var(--ease-out); }
@keyframes mtile-pulse {
  0%   { box-shadow: 0 0 0 1px var(--line-accent), 0 0 22px -4px rgba(47, 224, 192, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(47, 224, 192, 0); }
}

/* Chart */
.chart {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(to bottom, rgba(47, 224, 192, 0.03), transparent 70%),
    rgba(0, 0, 0, 0.22);
  padding: 12px 12px 8px;
  overflow: hidden;
}
.chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.chart__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chart__legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 10px; }
.chart__legend i { font-style: normal; color: var(--ink-3); }
.chart__legend b { font-weight: 600; }
.chart__legend .l1 b { color: var(--teal); }
.chart__legend .l2 b { color: var(--amber); }
.chart svg { width: 100%; height: auto; display: block; }
/* Quality-index target rule (dashed amber) + hover crosshair */
.chart .target-line { stroke: rgba(255, 180, 84, 0.42); stroke-width: 1; stroke-dasharray: 5 4; }
.chart .target-label {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  fill: rgba(255, 180, 84, 0.78);
}
.chart .cross-line { stroke: rgba(233, 237, 243, 0.34); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .cross-dot  { fill: var(--teal); stroke: rgba(7, 8, 10, 0.85); stroke-width: 1.5; }
.chart__scan {
  position: absolute;
  top: 34px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--teal), transparent);
  box-shadow: 0 0 14px 1px rgba(47, 224, 192, 0.55);
  animation: scan 5.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes scan {
  0%   { left: 2%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 98%; opacity: 0; }
}
.chart__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
  padding: 0 2px 2px;
}
/* Hover readout pinned to the chart's top edge */
.chart__tip {
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(10, 12, 16, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--z-raised);
}
.chart__tip b    { color: var(--teal); font-weight: 600; }
.chart__tip i    { font-style: normal; color: var(--amber); }
.chart__tip span { color: var(--ink-4); margin-left: 8px; }
.chart__tip[hidden] { display: none; }

/* Log stream */
.log {
  --lh: 21px;          /* 行高锁死，保证可视行数是整数 */
  --log-lines: 5;      /* 可视行数，移动端会调小；site.js 按同一变量裁剪行数 */
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
  padding: 11px 13px;
  /* 高度由行数推导（+24 = 上下 padding 22 + 上下边框 2）：
     既不出现半行裁切，也不会被 flex 压扁行高。 */
  height: calc(var(--log-lines) * var(--lh) + 24px);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: var(--lh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* 行高必须锁死：column flex 默认允许 shrink，当日志累积超过容器高度时
   会把每行压扁（11.5px 字被压到 12px 行高），这就是「滚动刷新时文字被挤压」。 */
.log__line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: var(--lh);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: log-in 0.4s var(--ease-out) both;
}
@keyframes log-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.log__t   { color: var(--ink-4); flex: none; }
.log__tag { flex: none; }
.log__tag--ok   { color: var(--teal); }
.log__tag--warn { color: var(--amber); }
.log__tag--info { color: #8fb6ff; }
/* Device badge column — the asset/plant id pulled out of the message so the
   stream can be scanned per device. Fixed min-width keeps the ids in a column. */
.log__dev {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-width: 4.2em;
  justify-content: center;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}
.log__m { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* 窄屏：行宽只够「时间 + 标签 + 消息」，让徽章列让位给消息本身，
   避免每条日志都被省略号切掉半句。 */
@media (max-width: 720px) {
  .log { font-size: 11px; }
  .log__line { gap: 8px; }
  .log__dev { display: none; }
}

/* Floating badge on the dashboard — sits half outside the bottom edge so it
   never covers the log lines behind it. */
.dash__float {
  position: absolute;
  right: 20px;
  bottom: -15px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-accent);
  background: rgba(10, 14, 18, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--teal);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  gap: 9px;
  /* 徽章语义：永远是单行。文案改英文后长度浮动，靠 nowrap 防止折行压住日志区，
     超长时由 max-width + 省略号兜底（当前文案在 360px 下仍有余量）。 */
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash__float > :last-child { overflow: hidden; text-overflow: ellipsis; }
.dash__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
  animation: pulse 2.4s infinite;
}

/* --------------------------------------------------------------------------
   2b. Live state — 呼吸
   dash__dot 的 pulse 是"扩散环"（向外报信），这里补的是"呼吸"（明暗起伏）。
   两者叠加才读得出"这东西在我来之前就在跑"。参数取自 Cursor 生产环境的
   --animate-pulse: pulse 2s cubic-bezier(.4,0,.6,1) infinite。
   全站 reduced-motion 已有全局兜底（animation-duration: 0.001ms !important）。
   -------------------------------------------------------------------------- */
@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.pill--live,
.is-live {
  animation: breathe 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* --------------------------------------------------------------------------
   3. Trust / vertical marquee row
   -------------------------------------------------------------------------- */
.trust { padding-block: 34px; border-block: 1px solid var(--line); }
.trust__label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 22px;
}

/* --------------------------------------------------------------------------
   4. Capability grid (home)
   -------------------------------------------------------------------------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cap {
  position: relative;
  background: var(--bg);
  padding: 30px 28px 32px;
  transition: background-color var(--dur-2);
  min-height: 232px;
  display: flex;
  flex-direction: column;
}
.cap:hover { background: var(--panel); }
.cap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--teal), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-2);
}
.cap:hover::before { opacity: 1; }
.cap__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cap h3 { margin-top: 20px; font-size: 18.5px; }
.cap p { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.72; }
.cap__tags { margin-top: auto; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 6px; }

/* --------------------------------------------------------------------------
   5. Solution explorer (tabs, home)
   -------------------------------------------------------------------------- */
.explorer { margin-top: 40px; }
.explorer__panel {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.exp-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.exp-main { padding: clamp(26px, 3.2vw, 40px); border-right: 1px solid var(--line); }
.exp-side {
  padding: clamp(26px, 3.2vw, 40px);
  background: linear-gradient(180deg, rgba(47, 224, 192, 0.035), transparent 60%);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.exp-main h3 { font-size: clamp(21px, 2.3vw, 27px); }
.exp-main > p { margin-top: 16px; }
.exp-block { margin-top: 26px; }
.exp-block__h {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.exp-block__h::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kpi {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.02);
}
.kpi__v { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--teal); font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi__k { margin-top: 7px; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }

/* --------------------------------------------------------------------------
   6. Process / delivery timeline (numbered, "01 / 05" device)
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.step {
  background: var(--bg);
  padding: 28px 24px 32px;
  position: relative;
  transition: background-color var(--dur-2);
  display: flex;
  flex-direction: column;
}
.step:hover { background: var(--panel); }
.step__n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--teal);
}
.step__n::after { content: " / 05"; color: var(--ink-4); }
.step h4 { margin-top: 16px; font-size: 16.5px; }
.step p { margin-top: 10px; font-size: 13.8px; color: var(--ink-2); line-height: 1.7; }
.step__meta {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}

/* Vertical variant (detail pages) */
.vsteps { display: flex; flex-direction: column; }
.vstep {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 22px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.vstep:first-child { padding-top: 0; }
.vstep:last-child { border-bottom: 0; padding-bottom: 0; }
.vstep__n {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-accent);
  background: var(--teal-a08);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
}
.vstep h4 { font-size: 17px; }
.vstep > div > p { margin-top: 9px; font-size: 14.5px; color: var(--ink-2); max-width: 74ch; }

/* --------------------------------------------------------------------------
   7. Solution detail blocks (solutions.html)
   -------------------------------------------------------------------------- */
.sol { border-top: 1px solid var(--line); padding-block: clamp(48px, 6vw, 84px); }
.sol:last-of-type { border-bottom: 1px solid var(--line); }
.sol__head { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 26px; align-items: start; }
.sol__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--teal);
  padding-top: 8px;
}
.sol__title h3 { font-size: clamp(23px, 2.7vw, 32px); }
.sol__title .sub {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sol__body {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 26px 34px;
}
.sol__col h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 16px;
}
.sol__col p { font-size: 14.5px; color: var(--ink-2); line-height: 1.75; }
.sol__metrics {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.sol__metric { background: var(--bg); padding: 13px 15px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sol__metric .k { font-size: 13px; color: var(--ink-2); }
.sol__metric .v { font-family: var(--font-mono); font-size: 13.5px; color: var(--teal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sol__foot {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. ROI calculator (consulting.html)
   -------------------------------------------------------------------------- */
.calc {
  border: 1px solid var(--line-accent);
  border-radius: var(--r-lg);
  background:
    radial-gradient(80% 100% at 0% 0%, rgba(47, 224, 192, 0.07), transparent 60%),
    var(--panel);
  overflow: hidden;
}
.calc__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.calc__inputs { padding: clamp(26px, 3.2vw, 40px); display: flex; flex-direction: column; gap: 28px; }
.calc__out {
  padding: clamp(26px, 3.2vw, 40px);
  border-left: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.range { display: flex; flex-direction: column; gap: 12px; }
.range__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.range__label { font-size: 14.5px; font-weight: 550; }
.range__val {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal) var(--pct, 50%), rgba(255, 255, 255, 0.1) var(--pct, 50%));
  cursor: pointer;
  outline: none;
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px rgba(47, 224, 192, 0.14);
  transition: transform var(--dur-1);
}
.range input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.range input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px rgba(47, 224, 192, 0.14);
}
.range__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.calc__headline {
  border: 1px solid var(--line-accent);
  border-radius: var(--r);
  padding: 22px;
  background: var(--teal-a08);
}
.calc__headline .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.calc__headline .v {
  margin-top: 10px;
  font-size: clamp(32px, 4.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.calc__headline .v small { font-size: 15px; color: var(--ink-2); font-weight: 500; margin-left: 6px; letter-spacing: 0; }
.calc__rows { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.calc__row { background: var(--bg); padding: 13px 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.calc__row .k { font-size: 13.5px; color: var(--ink-2); }
.calc__row .v { font-family: var(--font-mono); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__note { font-size: 12px; color: var(--ink-4); line-height: 1.65; }

/* --------------------------------------------------------------------------
   9. Technology-transfer components
   -------------------------------------------------------------------------- */
.trls { display: flex; gap: 6px; align-items: center; }
.trl { display: flex; gap: 3px; }
.trl i { width: 13px; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, 0.12); }
.trl i.on { background: var(--teal); }
.trl--amber i.on { background: var(--amber); }

.ipcard { display: flex; flex-direction: column; height: 100%; }
.ipcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ipcard h3 { margin-top: 18px; font-size: 17.5px; }
.ipcard p { margin-top: 11px; font-size: 14.2px; color: var(--ink-2); line-height: 1.72; }
.ipcard__spec { margin-top: auto; padding-top: 22px; }

/* Comparison table */
.ctable { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.ctable table { font-size: 14px; min-width: 720px; }
.ctable th, .ctable td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.ctable thead th {
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
}
.ctable tbody tr:last-child td { border-bottom: 0; }
.ctable tbody tr:hover td { background: rgba(255, 255, 255, 0.017); }
.ctable td:first-child { color: var(--ink); font-weight: 550; white-space: nowrap; }
.ctable td { color: var(--ink-2); }
.ctable .hl { color: var(--teal); }
.ctable--scroll { overflow-x: auto; }
/* 横向滚动容器：两侧硬边缘截断会让用户以为"内容就到这里"。用 12px 渐隐明确
   传达"还能滑"。本站的响应式设计本就依赖横滑（表格与标签栏），这一层提示
   是必要的可用性信号，不只是装饰。 */
.ctable--scroll {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}

/* --------------------------------------------------------------------------
   10. Case cards
   -------------------------------------------------------------------------- */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.case {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease), background-color var(--dur-2);
}
.case:hover { border-color: var(--line-strong); transform: translateY(-3px); background: var(--panel-2); }
.case__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.case__ind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.case h3 { margin-top: 20px; font-size: 19px; }
.case__row { margin-top: 18px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; font-size: 14.2px; }
.case__row .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 4px;
}
.case__row .v { color: var(--ink-2); line-height: 1.72; }
.case__kpis {
  margin-top: auto;
  padding-top: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.case__kpi { background: var(--bg); padding: 13px 12px; text-align: center; }
.case__kpi .v { font-size: 19px; font-weight: 600; color: var(--teal); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.case__kpi .k { margin-top: 5px; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

/* Quote / testimonial */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.quote {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote__mark { color: var(--teal); opacity: 0.5; }
.quote p { font-size: 15px; color: var(--ink); line-height: 1.75; }
.quote__by { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.quote__by b { display: block; color: var(--ink-2); font-weight: 550; margin-bottom: 3px; }

/* --------------------------------------------------------------------------
   11. Matrix (capability × industry)
   -------------------------------------------------------------------------- */
.matrix { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.matrix table { font-size: 13.5px; }
.matrix th, .matrix td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix thead th {
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.matrix thead th:first-child, .matrix tbody th {
  text-align: left;
  font-family: var(--font-sans);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: 550;
  white-space: nowrap;
}
.matrix tbody tr:last-child th, .matrix tbody tr:last-child td { border-bottom: 0; }
.lvl { display: inline-flex; gap: 3px; }
.lvl i { width: 7px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.lvl i.on { background: var(--teal); }
.lvl i.on-2 { background: var(--teal-dim); }
.matrix__legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 14px; }
.matrix__legend span { display: inline-flex; align-items: center; gap: 7px; }

/* --------------------------------------------------------------------------
   12. About — facts, timeline, team
   -------------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--teal-dim), var(--line) 60%, transparent);
}
.tl { position: relative; padding-bottom: 34px; }
.tl:last-child { padding-bottom: 0; }
.tl::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--teal-dim);
}
.tl:first-child::before { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 12px rgba(47, 224, 192, 0.7); }
.tl__y { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--teal); }
.tl h4 { margin-top: 8px; font-size: 16.5px; }
.tl p { margin-top: 8px; font-size: 14.2px; color: var(--ink-2); max-width: 66ch; }

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.team__item { background: var(--bg); padding: 26px 22px; }
.team__v { font-size: 26px; font-weight: 600; color: var(--teal); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.team__k { margin-top: 9px; font-size: 13.5px; color: var(--ink-2); }

/* Fact blocks */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fact { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 26px; }
.fact h4 { font-size: 15.5px; }
.fact p { margin-top: 12px; font-size: 14.2px; color: var(--ink-2); line-height: 1.72; }

/* --------------------------------------------------------------------------
   13. Contact page
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 26px; align-items: start; }
.form-card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: clamp(26px, 3.2vw, 38px);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-grid .span-2 { grid-column: 1 / -1; }

.infolist { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.info { background: var(--panel); padding: 22px 24px; display: flex; gap: 16px; }
.info__ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: var(--teal);
}
.info__ico svg { width: 17px; height: 17px; }
.info__k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.info__v { margin-top: 7px; font-size: 15px; color: var(--ink); line-height: 1.6; }
.info__v a:hover { color: var(--teal); }
.info__s { margin-top: 5px; font-size: 12.5px; color: var(--ink-3); }

.map {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
  height: 260px;
  display: grid;
  place-items: center;
}
.map__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.map__pin { position: relative; z-index: var(--z-content); text-align: center; }
.map__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--teal);
  margin: 0 auto 14px;
  box-shadow: 0 0 0 6px rgba(47, 224, 192, 0.12), 0 0 24px rgba(47, 224, 192, 0.5);
}
.map__txt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-2); }
.map__sub { margin-top: 6px; font-size: 12px; color: var(--ink-4); }

/* Service tier cards */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tier {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-2), transform var(--dur-2) var(--ease);
}
.tier:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.tier--featured {
  border-color: var(--line-accent);
  background: linear-gradient(180deg, rgba(47, 224, 192, 0.06), transparent 55%), var(--panel);
}
.tier h3 { margin-top: 18px; font-size: 20px; }
.tier__sub { margin-top: 10px; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.tier__list { margin-top: 22px; }
.tier__foot { margin-top: auto; padding-top: 24px; }
.tier__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  border: 1px solid var(--line-accent);
  background: rgba(7, 8, 10, 0.8);
  padding: 4px 9px;
  border-radius: var(--r-pill);
}
.tier { position: relative; }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .hero__copy { max-width: 100%; }
  .hero::after { display: none; }
  .dash__float { right: 16px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-grid { grid-template-columns: minmax(0, 1fr); }
  .exp-main { border-right: 0; border-bottom: 1px solid var(--line); }
  .sol__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc__grid { grid-template-columns: minmax(0, 1fr); }
  .calc__out { border-left: 0; border-top: 1px solid var(--line); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .tier__badge { position: static; display: inline-block; margin-bottom: 4px; }
}

@media (max-width: 720px) {
  .mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol__head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sol__body { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step__n::after { content: " / 05"; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  .case__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .caps { grid-template-columns: minmax(0, 1fr); }
  .cap { min-height: 0; }
  .dash__body { padding: 14px; }
  .hero__proof { gap: 22px; }
  .hero__proof .v { font-size: 18px; }
  .team { grid-template-columns: minmax(0, 1fr); }
  .vstep { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .case { padding: 22px; }
  .dash__float { right: 12px; bottom: -13px; font-size: 10px; }
  /* 4 整行（4×21 + padding 22 + border 2 = 108），JS 会按 --log-lines 同步行数 */
  .log { --log-lines: 4; font-size: 10.5px; }
  .chart__scan { display: none; }
}

/* ≤420px：看板标题条放不下「SCATTER · LINE-A / 实时工艺看板」（实测 360px 需 226px、只有 193px），
   去掉副标题只留「SCATTER · LINE-A」；414px 以上本来放得下，隐藏副标题也无副作用。 */
@media (max-width: 420px) {
  .dash__id-sub { display: none; }
}

/* --------------------------------------------------------------------------
   产业概览 demo —— chemical-info 框架演示（仅首页 #industry）
   外框是"图框"：bracket 角标 + 顶栏（路由 + 视图切换）+ 视图区 + 底注。
   -------------------------------------------------------------------------- */
.iov {
  margin-top: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  /* bracket 角标画在 -1px 处，不能被 overflow 裁掉 */
  overflow: visible;
}
.iov__bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.iov__route {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  white-space: nowrap;
}
.iov__route b { color: var(--teal); font-weight: 500; }
.iov__tabs { display: flex; gap: 2px; margin-left: auto; }
.iov__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: 600 13px/1 var(--font-sans);
  padding: 9px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--dur-1), background-color var(--dur-1);
}
.iov__tab:hover { color: var(--ink); background: var(--tint, rgba(255, 255, 255, 0.04)); }
.iov__tab.is-on { color: var(--teal); background: var(--teal-a08); }
.iov__demo {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--ink-3);
  white-space: nowrap;
}
.iov__view { min-height: 0; }

/* 底注 */
.iov__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.iov__foot span { font-size: 10.5px; color: var(--ink-4); }

/* 视图 1：产业链 8 层级 */
.iov-layers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.iov-layer {
  appearance: none;
  border: 0;
  text-align: left;
  background: var(--panel);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: background-color var(--dur-1);
}
.iov-layer:hover { background: var(--panel-2); }
.iov-layer__no { font-size: 10.5px; color: var(--ink-4); }
.iov-layer__cn { font-size: 16.5px; font-weight: 600; color: var(--ink); }
.iov-layer__code { font-size: 10px; color: var(--ink-4); letter-spacing: 0.08em; }
.iov-layer__bar { height: 3px; background: var(--tint, rgba(255, 255, 255, 0.05)); margin-top: 6px; }
.iov-layer__bar i { display: block; height: 100%; background: var(--teal); opacity: 0.75; }
.iov-layer__n { font-size: 11.5px; color: var(--ink-3); }
.iov-layer__n b { color: var(--ink); font-weight: 600; }

/* 视图 2：节点速查 */
.iov-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px 0;
}
.iov__search {
  flex: 1 1 260px;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 13.5px;
}
.iov__search::placeholder { color: var(--ink-4); }
.iov__search:focus { outline: none; border-color: var(--line-accent); box-shadow: 0 0 0 3px var(--teal-a08); }
.iov-bands { display: flex; gap: 6px; flex-wrap: wrap; }
.iov-chip {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background-color var(--dur-1);
}
.iov-chip:hover { color: var(--ink); }
.iov-chip.is-on { color: var(--teal); border-color: var(--line-accent); background: var(--teal-a08); }
.iov-count { padding: 12px 20px 10px; font-size: 10.5px; color: var(--ink-4); }
.iov-rows { display: flex; flex-direction: column; }
.iov-row {
  appearance: none;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 20px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1);
}
.iov-row:hover { background: var(--panel-2); }
.iov-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.iov-row__cn { font-size: 15px; font-weight: 600; color: var(--ink); }
.iov-row__meta { font-size: 11.5px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iov-row__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.iov-ss { display: flex; align-items: center; gap: 12px; flex: none; }
.iov-ss__bar { width: 88px; height: 4px; background: var(--tint, rgba(255, 255, 255, 0.05)); }
.iov-ss__bar i { display: block; height: 100%; background: var(--teal); }
.iov-ss b { font-family: var(--font-mono); font-size: 19px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.iov-ss b i { font-style: normal; font-size: 12px; color: var(--ink-4); margin-left: 2px; }
.iov-empty { padding: 28px 20px 34px; color: var(--ink-3); font-size: 13.5px; }

/* 视图 3：卡脖子 */
.iov-bns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.iov-bngrp { background: var(--panel); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.iov-bngrp__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.iov-bngrp__head .mono { font-size: 10px; color: var(--ink-4); }
.iov-bncard {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "cn ss" "imp ss";
  gap: 2px 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1), background-color var(--dur-1);
}
.iov-bncard:hover { border-color: var(--line-strong); background: var(--panel-3); }
.iov-bncard__cn { grid-area: cn; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.iov-bncard__imp { grid-area: imp; font-size: 11px; color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iov-bncard__ss { grid-area: ss; align-self: center; font-family: var(--font-mono); font-size: 21px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.iov-bncard__ss i { font-style: normal; font-size: 12px; color: var(--ink-4); }

/* 详情 */
.iov-detail { padding: 20px 20px 24px; }
.iov-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: 13px;
  font-weight: 550;
  padding: 0;
  margin-bottom: 14px;
  cursor: pointer;
}
.iov-back:hover { text-decoration: underline; }
.iov-detail__head h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 600; letter-spacing: 0; }
.iov-detail__head .mono { margin-top: 7px; color: var(--ink-4); letter-spacing: 0.06em; }
.iov-caps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-top: 18px;
}
.iov-cap { background: var(--panel-2); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.iov-cap__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-3); }
.iov-cap__val { font-family: var(--font-mono); font-size: 21px; color: var(--ink); font-variant-numeric: tabular-nums; }
.iov-cap__val b { font-weight: 500; }
.iov-cap__val i { font-style: normal; font-size: 11.5px; color: var(--ink-4); margin-left: 3px; }
.iov-kvs { margin-top: 18px; border-top: 1px solid var(--line); }
.iov-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.iov-kv__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); padding-top: 2px; }
.iov-kv__v { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.iov-bn {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  border-radius: var(--r-sm);
  background: var(--red-a10);
}
.iov-bn--orange { border-left-color: var(--amber); background: var(--amber-a12); }
.iov-bn--yellow { border-left-color: var(--blue); background: var(--blue-a12); }
.iov-bn__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.iov-bn__head b { font-size: 13.5px; color: var(--ink); }
.iov-bn__head .mono { font-size: 10.5px; color: var(--ink-4); }
.iov-bn p { font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.iov-src { margin-top: 16px; font-size: 10px; color: var(--ink-4); }

/* 标签 */
.iov-tag {
  display: inline-flex;
  align-items: center;
  padding: 2.5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  white-space: nowrap;
}
.iov-tag--red    { color: var(--red);   border-color: color-mix(in srgb, var(--red) 40%, transparent);   background: var(--red-a10); }
.iov-tag--orange { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); background: var(--amber-a12); }
.iov-tag--yellow { color: var(--blue);  border-color: color-mix(in srgb, var(--blue) 40%, transparent);  background: var(--blue-a12); }

/* 响应式 */
@media (max-width: 1080px) {
  .iov-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iov-bns { grid-template-columns: minmax(0, 1fr); }
  .iov-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .iov__bar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .iov__route { display: none; }
  .iov__tabs { margin-left: 0; }
  .iov__demo { margin-left: auto; }
  .iov__view { min-height: 0; }
  .iov-row { gap: 12px; }
  .iov-ss__bar { width: 52px; }
  .iov-ss b { font-size: 16px; }
  .iov-layer { padding: 14px 16px 12px; }
  .iov-detail { padding: 16px 14px 20px; }
  .iov-kv { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; }
  .iov-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 图谱视图（力导向 canvas） */
.iov-graph-wrap { padding: 18px 20px 20px; }
.iov-graph-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.iov-graph-head b { font-size: 16px; font-weight: 600; color: var(--ink); }
.iov-graph-head .mono { font-size: 10.5px; color: var(--ink-4); }
.iov-graph { position: relative; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); overflow: hidden; }
.iov-graph canvas { display: block; touch-action: none; }
.iov-graph__tip {
  position: absolute;
  pointer-events: none;
  max-width: 220px;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--tip-bg, var(--panel-3));
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
}
.iov-graph__tip i { font-style: normal; color: var(--ink-4); font-size: 11px; }
.iov-graph-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.iov-graph-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.iov-graph-legend__item i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--panel);
  border: 1.6px solid var(--ink-3);
}
.iov-graph-legend__item i[data-l="base_organic"]  { border-color: var(--teal); }
.iov-graph-legend__item i[data-l="intermediate"] { border-color: var(--blue); }
.iov-graph-legend__item i[data-l="polymer"]      { border-color: var(--violet); }
.iov-graph-legend__item i[data-l="fine_chemical"]{ border-color: var(--amber); }
.iov-graph-legend__note { margin-left: auto; font-size: 10px; color: var(--ink-4); }
.iov-detail__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.iov-detail__top .iov-back { margin-bottom: 0; }
@media (max-width: 720px) {
  .iov-graph-wrap { padding: 14px 12px 16px; }
  .iov-graph-legend__note { margin-left: 0; flex-basis: 100%; }
}

/* 事件层（P0）：图层 chips + 事件时间线 */
.iov-evchips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.iov-evchips .iov-chip b { font-weight: 500; opacity: 0.72; margin-left: 2px; }
.iov-events { margin-top: 14px; border-top: 1px solid var(--line); }
.iov-events__head { padding: 10px 20px 8px; font-size: 10px; color: var(--ink-4); }
.iov-event-row {
  appearance: none;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  width: 100%;
  display: grid;
  grid-template-columns: 84px auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 20px;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1);
}
.iov-event-row:hover { background: var(--panel-2); }
.iov-event-row__date { font-size: 10.5px; color: var(--ink-4); }
.iov-event-row__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px; height: 17px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
}
.iov-event-row__badge.sev-critical { background: var(--red); }
.iov-event-row__badge.sev-high,
.iov-event-row__badge.sev-elevated { background: var(--amber); }
.iov-event-row__badge.sev-watch,
.iov-event-row__badge.sev-info { background: var(--blue); }
.iov-event-row__title {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iov-event-row__title .iov-tag { margin-left: 6px; vertical-align: 1px; }
.iov-event-row__meta { font-size: 10px; color: var(--ink-4); white-space: nowrap; }
.iov-events__more {
  appearance: none;
  border: 0; border-top: 1px solid var(--line);
  background: transparent;
  width: 100%;
  padding: 9px 20px;
  color: var(--teal);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.iov-events__more:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .iov-event-row { grid-template-columns: 70px auto minmax(0, 1fr); }
  .iov-event-row__meta { display: none; }
}

/* --------------------------------------------------------------------------
   Material chains — 四条链总览页（chain-index）与子页（chain-puhe 等）
   复用 .edge / .bracket 等已实施的设计语言；样式与现有 ipcard / case 同源。
   ------------------------------------------------------------------------- */
.chain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.chain-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1), background-color var(--dur-1), transform var(--dur-2) var(--ease);
}
.chain-card:hover,
.chain-card:focus-visible {
  border-color: var(--line-strong);
  background: var(--panel-2);
  transform: translateY(-3px);
}
.chain-card__head { display: flex; align-items: center; gap: 10px; }
.chain-card__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--teal);
}
.chain-card__pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  color: var(--ink-3);
  text-transform: uppercase;
}
.chain-card__t { margin: 4px 0 0; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.chain-card__sub {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
}
.chain-card__nodes {
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.7;
}
.chain-card__nodes li { padding-left: 2px; }
.chain-card__nodes li::marker { color: var(--teal); }
.chain-card__cta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--teal);
}
.chain-note {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.7;
  border-left: 2px solid var(--line-strong);
  padding-left: 14px;
}
@media (max-width: 720px) {
  .chain-grid { grid-template-columns: 1fr; }
}

/* 子页节点卡：参照首页 iov__layers 卡片样式，与 .tc-chain 同源（节点卡模板） */
.node-card {
  position: relative;
  padding: 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.node-card__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.node-card__no {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--teal);
  flex: none;
}
.node-card__t { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
.node-card__sub { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; line-height: 1.55; }
.node-card__body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.node-card__col { display: flex; flex-direction: column; gap: 6px; }
.node-card__col h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--teal);
  text-transform: uppercase;
  font-weight: 600;
}
.node-card__col p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.65; }
.node-card__foot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.node-card__meta { display: flex; flex-direction: column; gap: 6px; }
.node-card__meta h4 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--amber);
  text-transform: uppercase;
  font-weight: 600;
}
.node-card__meta p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.65; }
@media (max-width: 720px) {
  .node-card__body, .node-card__foot { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Chain graph — 4 条材料产业链共享的力导向 canvas
   控件条（中心节点下拉 / 回到上一中心 / 简洁模式）横跨整行，下方是
   canvas 与右侧节点信息面板两栏；720px 以下全部单列。
   ------------------------------------------------------------------------- */
.graph-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.graph-ctl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.graph-ctl__k {
  flex: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.graph-select {
  min-width: 200px;
  max-width: 300px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--ink);
  font-size: 13px;
  font-family: inherit;
}
.graph-select:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.graph-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
/* iOS 风格开关：appearance:none 把复选框变成轨道，::after 是滑块 */
.graph-switch input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  margin: 0;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background .18s ease;
}
.graph-switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: transform .18s ease;
}
.graph-switch input:checked { background: var(--teal); }
.graph-switch input:checked::after { transform: translateX(14px); }
.graph-switch input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.graph-switch__txt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.graph-stat { margin-left: auto; color: var(--ink-4); font-size: 11px; }
.btn--sm { padding: 7px 14px; font-size: 13px; }
.graph-wrap {
  display: grid;
  /* 图谱优先：canvas 占约 77%（相对旧 1.6fr 的 +25%），右侧两个面板缩到约 23% */
  grid-template-columns: minmax(0, 3.33fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.graph-canvas-frame {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.graph-canvas {
  display: block;
  width: 100%;
  height: 540px;
  cursor: pointer;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(47,224,192,0.04), transparent 70%);
}
.graph-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  color: var(--ink-3); font-size: 13.5px;
  background: var(--panel);
}
/* 显式让 [hidden] 生效（CSS 的 .graph-empty{display:flex} 覆盖了 UA 默认的 [hidden]{display:none}） */
.graph-empty[hidden] { display: none; }
.graph-panels { display: flex; flex-direction: column; gap: 16px; }
.graph-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
}
.graph-panel__h {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.graph-panel__row {
  display: flex;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.graph-panel__row b { color: var(--ink); font-weight: 600; }
.graph-panel__row .k {
  flex: none;
  width: 64px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
}
.graph-meta {
  margin: 0;
  color: var(--ink-3);
  font-size: 11.5px;
  text-align: center;
}
@media (max-width: 1080px) {
  /* 中档宽度收一档，避免两个面板被压到不可读（1080 视口下仍 ~300px） */
  .graph-wrap { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .graph-wrap { grid-template-columns: 1fr; }
  .graph-canvas { height: 420px; }
  /* 控件条在窄屏换行：下拉独占一行，按钮与开关并列 */
  .graph-ctl { width: 100%; }
  .graph-select { min-width: 0; max-width: none; flex: 1; }
  .graph-stat { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   Member area（会员区 / 管理页 / VIP 弹层 / 信息图层 intel 面板）
   VIP 标识用琥珀（amber,第二声部）,不动 teal 的动作色地位。
   -------------------------------------------------------------------------- */
.member-entry {
  display: inline-flex; align-items: center; flex-shrink: 0;
  height: 32px; padding: 0 12px;
  font-size: 12.5px; color: var(--ink-2);
  background: var(--panel-2);
  border: 1px solid var(--line-strong); border-radius: 3px;
  white-space: nowrap;
  transition: color var(--dur-2), border-color var(--dur-2), background-color var(--dur-2);
}
.member-entry:hover { color: var(--teal); border-color: var(--line-accent); background: var(--panel-3); }
.member-entry.is-member {
  width: 32px; padding: 0; justify-content: center;
  color: var(--amber); border-color: var(--amber-a12); font-weight: 600;
}
.member-entry.is-member:hover { border-color: var(--amber); background: var(--amber-a12); }

.vip-chip {
  display: inline-block; padding: 2px 6px; margin-left: 6px;
  font-size: 10px; line-height: 1; letter-spacing: 0.1em;
  color: var(--amber); border: 1px solid var(--amber-a12); border-radius: 2px;
  font-family: var(--font-mono);
}
.btn.is-locked, [data-intel-real].is-locked { opacity: 0.55; cursor: help; }
[data-intel-real].is-on { color: var(--teal); border-color: var(--line-accent); }

/* intel 面板 */
.intel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.intel-head__act { display: flex; align-items: center; gap: 12px; }
.intel-badge {
  font-size: 11.5px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 2px; padding: 3px 8px;
  letter-spacing: 0.06em; white-space: nowrap;
}
.intel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.intel-box { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 16px; }
.intel-box__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.intel-box__head b { font-size: 14px; color: var(--ink); }
.intel-box__head .intel-badge { font-size: 10.5px; }
.intel-box__body { display: grid; gap: 10px; }
.intel-row { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.intel-row b.is-up { color: var(--red); }
.intel-row b.is-down { color: var(--teal); }
.intel-row b.is-flat { color: var(--ink-3); }
.intel-row__id { flex: none; min-width: 130px; color: var(--ink-3); font-size: 12px; }
.intel-row__note { color: var(--ink-2); }
.intel-ev { padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; }
.intel-ev__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.intel-ev__cat { font-size: 11.5px; color: var(--ev-cat, var(--ink-3)); border: 1px solid var(--line); border-radius: 2px; padding: 2px 7px; }
.intel-ev__date { font-size: 11.5px; color: var(--ink-4); }
.intel-ev__demo { font-size: 10.5px; color: var(--amber); border: 1px solid var(--amber-a12); border-radius: 2px; padding: 2px 6px; }
.intel-ev b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
.intel-ev p { margin: 0 0 6px; font-size: 13px; color: var(--ink-2); line-height: 1.7; }
.intel-ev__src { font-size: 11.5px; color: var(--ink-4); }
.intel-ins { padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; }
.intel-ins__tag { display: inline-block; font-size: 11px; letter-spacing: 0.1em; color: var(--teal); border: 1px solid var(--line-accent); border-radius: 2px; padding: 2px 7px; margin-bottom: 6px; }
.intel-ins p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.7; }

/* VIP 权益弹层 */
.vmodal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
.vmodal__card {
  width: min(520px, 100%); max-height: 86vh; overflow: auto;
  padding: 28px 28px 24px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.vmodal__card h3 { font-size: 20px; color: var(--ink); }

/* 轻提示 */
.member-toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate(-50%, 12px);
  z-index: 320; max-width: min(480px, calc(100vw - 32px));
  padding: 10px 18px; font-size: 13.5px;
  color: var(--ink); background: var(--panel-2);
  border: 1px solid var(--line-strong); border-radius: 3px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
}
.member-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* 徽章 / 收藏行 / 需求行 */
.badge {
  display: inline-block; padding: 2px 9px; font-size: 11.5px;
  letter-spacing: 0.08em; border-radius: 2px;
  border: 1px solid var(--line-strong); color: var(--ink-3); white-space: nowrap;
  font-family: var(--font-mono);
}
.badge--vip { color: var(--amber); border-color: var(--amber-a12); }
.badge--free { color: var(--ink-4); }
.badge--admin { color: var(--red); border-color: var(--red-a10); margin-left: 6px; }

.fav-list { display: grid; gap: 8px; }
.fav-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: 3px;
}
.fav-row__type { flex: none; font-size: 12px; color: var(--ink-4); }
.fav-row__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; }
.fav-row__del {
  flex: none; width: 22px; height: 22px; border: 1px solid var(--line-strong);
  border-radius: 50%; color: var(--ink-3); background: var(--panel); line-height: 1; cursor: pointer;
}
.fav-row__del:hover { color: var(--red); border-color: var(--red-a10); }

.req-row { padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; }
.req-row + .req-row { margin-top: 8px; }
.req-row__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.req-row__status { font-size: 12px; color: var(--teal); }
.req-row__date { font-size: 12px; color: var(--ink-4); margin-left: auto; font-family: var(--font-mono); }
.req-row__type { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-4); }

.admin-acts { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.admin-acts .input, .admin-acts .select { padding: 5px 9px; font-size: 12.5px; }
.linklike { text-decoration: underline; }

@media (max-width: 620px) {
  .member-entry { height: 28px; padding: 0 9px; }
  .admin-acts { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   空状态 / 骨架屏 / 案例筛选 / 关注节点动态 (improvement-plan B3/B4/A3/A4)
   -------------------------------------------------------------------------- */
.empty-note {
  margin: 0; padding: 18px 16px;
  border: 1px dashed var(--line);
  color: var(--ink-3);
  font-size: 13px; line-height: 1.7;
}
.empty-note::before { content: "∅ "; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-4); }

.intel-skel { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.intel-skel__bar {
  height: 12px; border-radius: 3px;
  background: var(--panel-2);
  animation: intel-skel-pulse 1.2s ease-in-out infinite;
}
@keyframes intel-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.case-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.case-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.case-chip {
  font: inherit; font-size: 12.5px; padding: 5px 12px;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-2); border-radius: 4px; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.case-chip:hover { border-color: var(--teal); color: var(--ink); }
.case-chip.is-on { background: var(--teal); border-color: var(--teal); color: #04211c; font-weight: 600; }
.case-filter__search { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.case-filter__search .input { min-height: 0; padding: 6px 12px; width: 220px; }
.case-filter__stat { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-4); }

.dyn-list { display: flex; flex-direction: column; }
.dyn-row {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line);
}
.dyn-row:last-child { border-bottom: 0; }
.dyn-row__meta { grid-column: 1; font-size: 11.5px; color: var(--ink-4); align-self: baseline; }
.dyn-row b { grid-column: 2; font-size: 14px; line-height: 1.5; }
.dyn-row__detail { grid-column: 2; font-size: 13px; color: var(--ink-3); line-height: 1.6; }
@media (max-width: 720px) {
  .dyn-row { grid-template-columns: minmax(0, 1fr); }
  .dyn-row b, .dyn-row__detail { grid-column: 1; }
  .case-filter__search { margin-left: 0; width: 100%; }
  .case-filter__search .input { width: 100%; }
}

/* --------------------------------------------------------------------------
   节点详情页 (open-items 3.2 / gen-node-pages.py 生成)
   -------------------------------------------------------------------------- */
.node-kv { display: flex; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; margin: 0; }
.node-kv:last-of-type { border-bottom: 0; }
.node-kv .k { flex: 0 0 8.5em; color: var(--ink-3); font-size: 12.5px; }
.node-kv .v { min-width: 0; }
.node-ev { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.node-ev:last-child { border-bottom: 0; }
.node-ev__meta { font-size: 11.5px; color: var(--ink-4); }
.node-ev b { font-size: 14.5px; line-height: 1.5; }
.node-ev__d { font-size: 13px; color: var(--ink-3); line-height: 1.6; }
.node-ev__src { font-size: 11.5px; color: var(--ink-4); }
.node-panel { margin-top: 14px; }
.node-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px 22px;
}
.node-panel .h3 { margin: 0 0 6px; }

/* 节点页分享弹层 */
.share-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6, 12, 22, .62);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.share-modal__card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 22px 24px; max-width: 480px; width: 100%; max-height: 90vh; overflow: auto;
}
.share-modal__card h3 { margin: 0 0 14px; font-size: 17px; }
.share-modal__card img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; display: block; }
.share-modal__url { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; word-break: break-all; }

/* 节点速查目录(链页 + chain-index) */
.node-dir__group { margin-bottom: 14px; }
.node-dir__k { margin: 0 0 8px; font-size: 11.5px; color: var(--ink-4); }
.node-dir__k b { color: var(--ink-2); }
.node-dir__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.node-link {
  display: inline-block; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink-2); text-decoration: none; font-size: 13px;
  transition: border-color .15s, color .15s;
}
.node-link:hover { border-color: var(--teal); color: var(--ink); }
.node-link--strong { color: var(--ink); font-weight: 600; border-color: var(--line-strong); }
.node-dir__details { border-top: 1px solid var(--line); padding: 14px 0; }
.node-dir__details summary { cursor: pointer; }
.node-dir__details[open] summary { padding-bottom: 4px; }

/* 节点页视觉批(A1 定位条/层级色带 + A3 sparkline) */
.node-accent { display: inline-block; width: 18px; height: 4px; margin-right: 9px; vertical-align: 2px; }
.node-pos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.node-pos__seg {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; padding: 4px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--lc, var(--teal));
  color: var(--ink-3); border-radius: 3px;
}
.node-pos__seg.is-here {
  color: var(--ink); border-color: var(--teal);
  background: var(--teal-a14); font-weight: 600;
}
.node-pos__ar { color: var(--ink-4); font-size: 11px; }
.spark { color: var(--teal); flex: 0 0 auto; }
.node-spark { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.node-spark__cap { font-size: 11px; color: var(--ink-4); }
.fut-row .spark--line { margin-left: auto; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .spark, .node-pos__seg { transition: opacity .15s; }
}

/* 图谱外框:工程图纸角标(四角刻度线,不进画布内部,避免干扰关系线) */
.graph-canvas-frame {
  --tick: var(--teal);
  background-image:
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick)),
    linear-gradient(var(--tick), var(--tick)), linear-gradient(var(--tick), var(--tick));
  background-repeat: no-repeat;
  background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
  background-position: left 10px top 10px, left 10px top 10px,
    right 10px top 10px, right 10px top 10px,
    left 10px bottom 10px, left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px;
}

/* 图签 / 件号 / 尺寸标注(工程图纸语言) */
.titleblock {
  margin: 20px 0 0 auto; border-collapse: collapse;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; color: var(--ink-2);
}
.titleblock th, .titleblock td { border: 1px solid var(--line); padding: 4px 10px; text-align: left; font-weight: 400; }
.titleblock th { color: var(--ink-4); background: var(--panel-2); white-space: nowrap; }
.titleblock td { white-space: nowrap; }

.dim-row { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dim-row:last-of-type { border-bottom: 0; }
.dim-row .k { flex: 0 0 8.5em; color: var(--ink-3); font-size: 12.5px; }
.dim { position: relative; flex: 1; max-width: 300px; height: 18px; }
.dim::before, .dim::after {
  content: ""; position: absolute; top: 0; width: 1px; height: 100%;
  background: var(--line-strong);
}
.dim::before { left: 0; }
.dim::after { right: 0; }
.dim__track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.dim__line { position: absolute; left: 0; top: 50%; height: 1.5px; width: var(--w); background: var(--teal); }
.dim__head {
  position: absolute; left: var(--w); top: 50%; transform: translateY(-50%);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  border-right: 6px solid var(--teal);
}
.dim__v {
  position: absolute; left: calc(var(--w) + 8px); top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--ink); white-space: nowrap;
}

/* 示例印章 / 技术要求块(工程图纸语言第二批) */
.stamp {
  display: inline-block; transform: rotate(-3deg);
  border: 2px solid var(--red, #d94848); color: var(--red, #d94848);
  padding: 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .25em; border-radius: 3px; opacity: .85; vertical-align: 2px;
}
.treq { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); padding: 12px 16px; margin-top: 20px; }
.treq__h { margin: 0 0 6px; font-size: 11px; color: var(--ink-4); letter-spacing: .12em; }
.treq ol { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-3); line-height: 1.9; }

/* 事件→诊断 CTA / 修订记录表(工程图纸语言) */
.node-ev__cta, .dyn-row__cta {
  color: var(--teal); text-decoration: none; font-size: 11px;
  margin-left: 10px; white-space: nowrap;
}
.node-ev__cta:hover, .dyn-row__cta:hover { text-decoration: underline; }
.rev-box { border-top: 1px solid var(--line); padding-top: 14px; }
.rev-box summary { cursor: pointer; color: var(--ink-3); font-size: 12px; }
.rev-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.rev-table th, .rev-table td { border: 1px solid var(--line); padding: 7px 12px; text-align: left; vertical-align: top; line-height: 1.6; }
.rev-table th { color: var(--ink-4); background: var(--panel-2); font-weight: 600; white-space: nowrap; }
.rev-table td:first-child, .rev-table td:nth-child(2) { color: var(--ink-3); white-space: nowrap; }

/* 关于我们:发展历程与公司信息暂时隐藏后,合作原则占满整幅,五条原则排两列。 */
.about-principles { max-width: 100%; }
.about-principles__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 760px) {
  .about-principles__grid { grid-template-columns: minmax(0, 1fr); }
}

/* 试运行声明条 —— 贴在 hero 上方，随页面上移（header 是 fixed，故放在 main 内）。
   克制处理：左侧一道 amber 细线做锚点，不加辉光，与图纸语言一致。 */
.notice-bar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-top: calc(var(--header-h) + 22px);
  padding-bottom: 22px;
}
.notice-bar__tag {
  flex: none;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--amber);
  background: var(--amber-a12);
  border: 1px solid rgba(255, 180, 84, 0.3);
  border-radius: var(--r-sm);
  padding: 3px 9px;
  white-space: nowrap;
}
.notice-bar__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-3);
  padding-left: 14px;
  border-left: 2px solid var(--amber);
}
.notice-bar__en {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-4);
}
@media (max-width: 620px) {
  .notice-bar { flex-direction: column; gap: 8px; align-items: stretch; }
  .notice-bar__tag { align-self: flex-start; }
}