/* ========================================================================
   可视化手持遥测仪 · 设备端原型 - 通用样式系统
   2.88寸 480×640 竖屏 · 深色工业风 · 触摸友好
   ======================================================================== */

/* ---------- 设计变量 ---------- */
:root {
  /* 背景色阶 */
  --bg-base: #0f1419;
  --bg-surface: #1b2129;
  --bg-surface-2: #232b35;
  --bg-elevated: #2a323d;
  /* 文字 */
  --text-primary: #e6edf3;
  --text-secondary: #aab7c4;
  --text-tertiary: #6b7785;
  /* 主题色 */
  --accent: #2f6fed;
  --accent-soft: rgba(47, 111, 237, 0.15);
  /* 状态色 */
  --color-normal: #4ade80;
  --color-alarm: #ef4444;
  --color-warn: #f59e0b;
  /* 边框 */
  --border: #2a323d;
}

/* ---------- 顶部状态栏 ---------- */
.status-bar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-base);
  flex-shrink: 0;
}
.status-bar .sb-icons {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ---------- 顶部导航栏（页面内） ---------- */
.nav-bar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: var(--bg-surface);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.nav-bar .nav-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.nav-bar .nav-btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 18px;
}
.nav-bar .nav-btn:active { color: var(--accent); }

/* ---------- 页面主体 ---------- */
.page-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}

/* ---------- 卡片 ---------- */
.card {
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.card-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

/* ---------- 按钮（触摸友好 ≥44px） ---------- */
.btn {
  min-height: 44px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn:active { opacity: 0.85; transform: scale(0.98); }
.btn-block { width: 100%; }
.btn-ghost {
  background: var(--bg-surface-2);
  color: var(--text-primary);
}
.btn-danger { background: var(--color-alarm); }

/* ---------- 浓度数值显示 ---------- */
.metric-value {
  font-size: 30px;
  font-weight: 800;
  color: var(--color-normal);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.metric-value.alarm {
  color: var(--color-alarm);
  animation: pulse 1s ease-in-out infinite;
}
.metric-unit {
  font-size: 11px;
  color: var(--text-tertiary);
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ---------- 列表项 ---------- */
.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  background: var(--bg-surface);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.list-item:active { background: var(--bg-surface-2); }
.list-item .li-title {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
}
.list-item .li-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ---------- 状态徽章 ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.badge-green { background: rgba(74, 222, 128, 0.15); color: var(--color-normal); }
.badge-red   { background: rgba(239, 68, 68, 0.15); color: var(--color-alarm); }
.badge-gray  { background: var(--bg-surface-2); color: var(--text-tertiary); }
.badge-blue  { background: var(--accent-soft); color: var(--accent); }

/* ---------- 底部 TabBar ---------- */
.tab-bar {
  height: 56px;
  display: flex;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.tab-bar .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-tertiary);
  cursor: pointer;
  background: none;
  border: none;
}
.tab-bar .tab-item.active { color: var(--accent); }
.tab-bar .tab-item .tab-icon { font-size: 20px; }
.tab-bar .tab-item .tab-text { font-size: 10px; }

/* ---------- 进度条 ---------- */
.progress-track {
  width: 100%;
  height: 5px;
  background: var(--bg-elevated);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* ---------- 滚动条隐藏（全局，所有页面所有元素） ---------- */
*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; -ms-overflow-style: none; }

/* ---------- 工具类 ---------- */
.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.text-tertiary { color: var(--text-tertiary); }
.text-secondary { color: var(--text-secondary); }
.flex-center { display: flex; align-items: center; justify-content: center; }