/* ============================================================
 * theme.css —— 视觉刷新层（★2026-09-20）
 *
 * 定位：加载在 style.css 之后，只覆盖【外观令牌 + 组件表现】。
 *   - 不改任何布局结构（grid/flex/宽度都不动）
 *   - 不改任何 class 名 / id（JS 与 tests/frontend-contract.js 完全不受影响）
 *   - 回滚 = 删掉 index.html / login.html 里的那一行 <link>
 *
 * 刷新方向（2024-2025 主流后台设计语言，结合中文排版）：
 *   1. 去"浓渐变重投影"风格：按钮由 linear-gradient 改实色 + 轻投影 + 悬浮微抬
 *   2. 层次用【阴影 + 表面色】而不是硬边框；边框改到几乎不可见的低对比
 *   3. 圆角收一档（16→14/12/10 三档成体系），投影改成两层叠加（近实远虚）
 *   4. 中文排版：字号成比例、行高放宽（正文 1.65）、字重降一档
 *      （中文 700 会糊，标题用 600、正文 400/500）
 *   5. 数据统一等宽数字（tabular-nums），刷新时数字不跳动
 *   6. 补齐无障碍：:focus-visible 焦点环、尊重 prefers-reduced-motion
 *   7. 移动端点击目标 ≥44px（用户主要用手机看）
 * ============================================================ */

:root {
  /* ---------- 品牌色：保留"水/节能"的绿，但从 2019 式浓绿收成更克制的现代绿 ---------- */
  --green:        #0f9d63;
  --green-dark:   #0a6b45;
  --green-light:  #d9f2e6;
  --green-soft:   #f0faf5;
  --red:          #ef4a4a;
  --red-soft:     #fdecec;
  --amber:        #d97706;
  --amber-soft:   #fef6e7;
  --blue:         #2563eb;

  /* ---------- 中性色：带一点点冷调，比纯灰更"干净" ----------
     注意：v1 的 style.css 里 .strip-empty 引用了 --gray-400 却从未定义，
     这里把整条灰阶补齐（含 400），顺手修掉那个隐性失效。 */
  --gray-50:  #fafbfc;
  --gray-100: #f4f6f8;
  --gray-200: #e8ecef;
  --gray-300: #d7dde3;
  --gray-400: #9aa5b1;
  --gray-500: #6b7684;
  --gray-600: #52606d;
  --gray-700: #3e4c59;
  --gray-800: #1f2933;

  /* ---------- 表面 / 描边 / 阴影：两层投影（近处清晰 + 远处柔和）---------- */
  --surface:      #ffffff;
  --surface-sunk: #f7f9fa;
  --line:         rgba(31, 41, 51, 0.07);
  --line-strong:  rgba(31, 41, 51, 0.12);
  --shadow-sm:    0 1px 2px rgba(31,41,51,.05), 0 1px 1px rgba(31,41,51,.04);
  --shadow:       0 1px 3px rgba(31,41,51,.06), 0 8px 24px -6px rgba(31,41,51,.10);
  --shadow-lg:    0 2px 6px rgba(31,41,51,.07), 0 18px 44px -10px rgba(31,41,51,.16);

  /* ---------- 圆角成体系 ---------- */
  --radius:    14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --radius-pill: 999px;

  /* ---------- 间距（8 的倍数，节奏统一）---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;

  /* ---------- 字号阶梯（中文按奇数档更好看）---------- */
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px;
  --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 26px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

/* ============================================================
 * 排版基线
 * ============================================================ */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC',
               Roboto, sans-serif;
  /* 背景从"三色对角渐变"收成极淡的双色，避免和卡片抢注意力 */
  background: linear-gradient(180deg, #f6fbf8 0%, #f2f7fb 100%);
  background-attachment: fixed;
  color: var(--gray-800);
  font-size: var(--fs-md);
  line-height: 1.65;
  letter-spacing: 0.01em;          /* 中文正文略放开一点点更透气 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* 中文大标题不要用 700（会糊），600 + 轻微负字距更现代 */
h1, h2, h3, h4, .card h3, .topbar .brand h1 {
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
/* 所有数字统一等宽：实时数据每秒刷新时不会左右跳动 */
.stat .v, .stat .l, #pumpVal, .chart-meta, .history-item, .ov-stat .num,
.ov-row, #chartNow, .ov-time, .id-tag {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
 * 顶栏
 * ============================================================ */
.topbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  padding: 10px 20px;
}
.topbar .brand img { height: 34px; border-radius: var(--radius-xs); box-shadow: var(--shadow-sm); }
.topbar .brand h1 { font-size: var(--fs-xl); color: var(--green-dark); }
.topbar .brand .sub { font-size: var(--fs-sm); color: var(--gray-500); letter-spacing: 0.02em; }
.topbar select {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--gray-800);
  font-weight: 500;
  height: 36px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.topbar select:hover { border-color: var(--green); }
.topbar select:focus-visible {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15,157,99,.16);
}
.topbar .btn-ghost {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--gray-600);
  font-weight: 500;
  height: 36px;
  transition: all .18s var(--ease);
}
.topbar .btn-ghost:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-soft);
  transform: translateY(-1px);
}
.topbar .btn-ghost:active { transform: translateY(0); }

/* ============================================================
 * 卡片：去硬边，用"表面 + 阴影"分层
 * ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lg); }
.card h3 { font-size: var(--fs-lg); color: var(--gray-800); margin-bottom: var(--sp-3); }
.card h3 .dim { font-size: var(--fs-sm); color: var(--gray-500); font-weight: 400; }
.container { padding: var(--sp-4) var(--sp-4) 48px; }
.grid { gap: var(--sp-4); }

/* 状态块 */
.stat {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-2);
}
.stat .v { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.02em; color: var(--gray-800); }
.stat .l { font-size: var(--fs-xs); color: var(--gray-500); letter-spacing: 0.04em; }

/* ============================================================
 * 按钮：实色 + 轻投影（替代 2019 式浓渐变）
 * ============================================================ */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: var(--fs-md);
  padding: 10px 18px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: all .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(15,157,99,.20); }
.btn-primary {
  background: var(--green);
  color: #fff;
}
.btn-primary:hover { background: var(--green-dark); }
.btn-secondary {
  background: var(--surface);
  color: var(--gray-600);
  border-color: var(--line-strong);
}
.btn-secondary:hover { color: var(--gray-800); border-color: var(--gray-400); }
.btn-danger { background: var(--red); color: #fff; }

/* 模式按钮 / 日期按钮：分段控件观感 */
.mode-btn, .day-btn {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--gray-600);
  font-weight: 500;
  transition: all .18s var(--ease);
}
.mode-btn:hover, .day-btn:hover { border-color: var(--green); color: var(--green-dark); background: var(--green-soft); }
.mode-btn.active, .day-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px -1px rgba(15,157,99,.45);
}
.pump-big {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-sm);
  transition: all .2s var(--ease);
}
.pump-big:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* ============================================================
 * 表单控件：统一高度与焦点环
 * ============================================================ */
input[type=text], input[type=number], input[type=tel], select:not(.topbar select) {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--gray-800);
  padding: 9px 12px;
  font-size: var(--fs-md);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input[type=text]:focus-visible, input[type=number]:focus-visible,
input[type=tel]:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15,157,99,.15);
}
input::placeholder { color: var(--gray-400); }
.field { gap: var(--sp-3); }
.hint { font-size: var(--fs-sm); color: var(--gray-500); line-height: 1.6; }

/* ============================================================
 * 传感器气泡 / 记录 / 提示
 * ============================================================ */
.sensor-chip {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: all .18s var(--ease);
}
.sensor-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.history-item {
  font-size: var(--fs-base);
  color: var(--gray-600);
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.history-item:last-child { border-bottom: none; }
.toast {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-md);
  font-weight: 500;
  backdrop-filter: blur(8px);
}

/* ============================================================
 * 登录页
 * ============================================================ */
.login-card {
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  padding: 36px 28px;
}
.login-card h1 { font-size: var(--fs-2xl); color: var(--green-dark); }
.login-card .sub { color: var(--gray-500); font-size: var(--fs-base); }
.login-card input { height: 44px; }
.login-card button {
  height: 46px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--green);
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px -2px rgba(15,157,99,.45);
  transition: all .18s var(--ease);
}
.login-card button:hover { background: var(--green-dark); transform: translateY(-1px); }

/* 总览页 */
.ov-card {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ov-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.ov-stat {
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.ov-stat .num { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.02em; }
.ov-stat .lab { font-size: var(--fs-xs); color: var(--gray-500); }
.badge { border-radius: var(--radius-pill); font-weight: 600; padding: 3px 10px; }
.ov-faults { border-radius: var(--radius-xs); }
.ov-legend, .ov-time { color: var(--gray-500); }

/* ============================================================
 * 无障碍 + 动效偏好
 * ============================================================ */
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
 * 移动端：点击目标 ≥44px（用户主要在手机上看）
 * ============================================================ */
@media (max-width: 560px) {
  :root { --radius: 12px; }
  .topbar { padding: 8px 12px; gap: 8px; }
  .topbar .brand h1 { font-size: var(--fs-lg); }
  .topbar .brand .sub { display: none; }        /* 窄屏优先保住操作区 */
  .topbar .btn-ghost, .topbar select { height: 40px; }
  .btn, .mode-btn, .day-btn { min-height: 44px; }
  .card { padding: var(--sp-4); }
  .stat .v { font-size: 22px; }
  .container { padding: var(--fs-sm) var(--fs-sm) 36px; }
}