#tool-body {
  --primary: #16baaa;
  --primary-rgb: 22, 186, 170;
  --primary-light: rgba(22,186,170,0.08);
  --primary-light2: rgba(22,186,170,0.15);
  --bg: #f0f4f7;
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,0.06);
  --label-color: #8fa3b1;
  --value-color: #1c2b36;
  --section-head-bg: rgba(22,186,170,0.06);
  --divider: rgba(0,0,0,0.05);
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --badge-bg: rgba(22,186,170,0.12);
  --chip-bg: rgba(22,186,170,0.07);
  --card-head: #70808b;
}
.theme-dark-mode #tool-body {
  --bg: #111820;
  --card-bg: #1a2230;
  --card-border: rgba(255,255,255,0.06);
  --label-color: #5a7080;
  --value-color: #cee0ea;
  --section-head-bg: rgba(22,186,170,0.08);
  --divider: rgba(255,255,255,0.05);
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --badge-bg: rgba(22,186,170,0.15);
  --chip-bg: rgba(22,186,170,0.10);
  --card-head: #7a95a9;
}

/* ── 頭部 ── */
#tool-body .si-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
#tool-body .si-logo {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #16baaa, #0e9e90);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  box-shadow: 0 4px 14px rgba(22,186,170,0.35);
  flex-shrink: 0;
}
#tool-body .si-header-info { flex: 1; }
#tool-body .si-header-title {
  font-size: 17px; font-weight: 700;
  color: var(--value-color); letter-spacing: -0.2px;
}
#tool-body .si-header-sub {
  font-size: 12px; color: var(--label-color); margin-top: 2px;
}
#tool-body .si-live-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--badge-bg);
  border: 1px solid rgba(22,186,170,0.2);
  border-radius: 20px; padding: 5px 12px;
  font-size: 12px; font-weight: 600; color: var(--primary);
  flex-shrink: 0;
}
#tool-body .si-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary);
  animation: si-blink 1.8s ease-in-out infinite;
}
@keyframes si-blink {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:0.35; transform:scale(0.65); }
}

/* ── Hero 分辨率卡 ── */
#tool-body .si-hero {
  background: linear-gradient(135deg, #16baaa 0%, #0d9d8f 100%);
  border-radius: 16px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(22,186,170,0.30);
}
#tool-body .si-hero::before {
  content: '';
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}
#tool-body .si-hero::after {
  content: '';
  position: absolute; bottom: -40px; right: 60px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
#tool-body .si-hero-item {
  padding: 6px 16px;
  border-right: 1px solid rgba(255,255,255,0.15);
  position: relative; z-index: 1;
}
#tool-body .si-hero-item:last-child { border-right: none; }
#tool-body .si-hero-label {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
#tool-body .si-hero-value {
  font-size: 24px; font-weight: 800; color: #fff;
  letter-spacing: -0.5px; line-height: 1.15;
}
#tool-body .si-hero-unit {
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-left: 2px;
}
#tool-body .si-hero-sub {
  font-size: 11px; color: rgba(255,255,255,0.5);
  margin-top: 3px;
}

/* ── 普通卡片 ── */
#tool-body .si-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
#tool-body .si-card-head {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--divider);
  background: var(--section-head-bg);
  font-size: 12px; font-weight: 700;
  color: var(--card-head);
  letter-spacing: 0.05em; text-transform: uppercase;
}
#tool-body .si-card-head i { font-size: 13px; }

/* ── 數值網格 ── */
#tool-body .si-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
#tool-body .si-cell {
  padding: 16px 18px;
  border-right: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
#tool-body .si-cell:last-child { border-right: none; }
/* 移除最後一行底邊 */
#tool-body .si-cell-label {
  font-size: 11px; color: var(--label-color);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
#tool-body .si-cell-label i { font-size: 11px; color: var(--primary); opacity: 0.8; }
#tool-body .si-cell-value {
  font-size: 20px; font-weight: 800;
  color: var(--value-color);
  letter-spacing: -0.3px; line-height: 1.2;
}
#tool-body .si-cell-unit {
  font-size: 12px; font-weight: 400;
  color: var(--label-color); margin-left: 2px;
}
#tool-body .si-cell-sub {
  font-size: 11px; color: var(--label-color); margin-top: 4px;
}

/* ── 色域 chips ── */
#tool-body .si-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--divider);
}
#tool-body .si-chip {
  display: flex; align-items: center; gap: 7px;
  background: var(--chip-bg);
  border-radius: 8px; padding: 6px 12px;
  font-size: 12px; font-weight: 600; color: var(--value-color);
}
#tool-body .si-chip-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}

/* ── 方向可視化 ── */
#tool-body .si-orient-row {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 18px;
}
#tool-body .si-orient-phone {
  border: 2.5px solid var(--primary);
  border-radius: 6px;
  background: var(--primary-light);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
  position: relative;
}
#tool-body .si-orient-phone::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 60%; height: 35%;
  border: 1.5px solid var(--primary);
  border-radius: 2px;
  opacity: 0.4;
}
#tool-body .si-orient-desc { font-size: 14px; color: var(--value-color); }
#tool-body .si-orient-desc strong { color: var(--primary); }
#tool-body .si-orient-angle { font-size: 11px; color: var(--label-color); margin-top: 4px; }

/* ── 底部提示 ── */
#tool-body .si-hint {
  text-align: center; font-size: 11px;
  color: var(--label-color); padding: 8px 0 4px;
}
#tool-body .si-hint i { color: var(--primary); margin-right: 4px; }

/* ── 狀態標籤 ── */
#tool-body .si-tag-on {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(22,186,170,0.1);
  color: var(--primary);
  border-radius: 6px; padding: 3px 9px;
  font-size: 13px; font-weight: 600;
}
#tool-body .si-tag-off {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--chip-bg);
  color: var(--label-color);
  border-radius: 6px; padding: 3px 9px;
  font-size: 13px; font-weight: 600;
}

@media (max-width: 600px) {
  #tool-body .si-hero { grid-template-columns: repeat(2, 1fr); }
  #tool-body .si-hero-item { border-bottom: 1px solid rgba(255,255,255,0.12); }
  #tool-body .si-hero-item:nth-child(2n) { border-right: none; }
  #tool-body .si-hero-item:nth-last-child(-n+2) { border-bottom: none; }
  #tool-body .si-hero-value { font-size: 18px; }
  #tool-body .si-grid { grid-template-columns: repeat(2, 1fr); }
  #tool-body .si-cell:nth-child(2n) { border-right: none; }
}