/**
 * styles.css —— 全局公共样式层（白底简约风）
 * --------------------------------------------------
 * 设计基调：纯白背景 + 白卡片 + 极细灰线 + 微阴影 + 单一克制蓝色强调。
 * 去除深色辉光、电路点阵与多彩渐变，强调干净、留白、信息聚焦。
 */

:root {
  --bg: #FFFFFF;            /* 页面白底 */
  --card: #FFFFFF;          /* 卡片白底 */
  --soft: #F4F6F8;          /* 浅灰填充（图标底/芯片/轨道） */
  --cyan: #0EA5E9;          /* 主强调色：克制天蓝 */
  --blue: #0EA5E9;          /* 辅助蓝（与强调色统一） */
  --green: #10B981;         /* 在线 / 正常 */
  --gray: #9AA4B2;          /* 离线 / 次要 */
  --red: #EF4444;           /* 告警 / 停机 */
  --text: #111827;          /* 主文字 近黑 */
  --subtext: #6B7280;       /* 次要文字 */
  --line: #ECEEF2;          /* 极细分隔/描边线 */
  --shadow: 0 1px 2px rgba(17,24,39,.04), 0 1px 3px rgba(17,24,39,.06);
  --grad: var(--cyan);      /* 简约：强调统一为纯色 */
}

/* ====== 基础重置 ====== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;        /* 整页不滚动，仅列表区内部滚动 */
  background: #E9ECF1;
  color: var(--text);
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
}

/* ====== 手机外框：纯白底，高度用动态视口避免地址栏导致的整页滚动 ====== */
.phone {
  position: relative;
  width: 100%; max-width: 430px;
  height: 100vh;
  height: 100dvh;          /* 现代浏览器：动态视口高度 */
  max-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
}
/* 模拟手机状态栏：默认隐藏（移动端用真机状态栏），桌面外壳模式显示 */
.status-bar { display: none; }

/* 桌面端：居中显示为 iPhone 外壳（iPhone 15 Pro 比例 393×852 + 灵动岛 + Home 指示条） */
@media (min-width: 480px) {
  .status-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: absolute; top: 0; left: 0; right: 0; height: 30px;
    padding: 0 28px; z-index: 91; pointer-events: none;
    color: var(--text); font-size: 14px; font-weight: 600;
    letter-spacing: .3px;
  }
  .status-bar .sb-right { display: flex; align-items: center; gap: 6px; }
  .status-bar .sb-right svg { display: block; }

  body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; background: #d8dade; }
  .phone {
    width: 393px;
    height: 852px;
    max-height: calc(100vh - 48px);
    border: 13px solid #1c1c1e;        /* 机身钛色边框 */
    border-radius: 56px;               /* iPhone 大圆角 */
    box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 0 0 2px #48484a;
    padding-top: 30px;                 /* 状态栏区域（灵动岛悬浮其上） */
  }
  /* 灵动岛 */
  .phone::after {
    content: ''; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 126px; height: 36px; background: #000; border-radius: 19px; z-index: 90;
  }
  /* 底部 Home 指示条 */
  .phone::before {
    content: ''; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    width: 134px; height: 5px; background: rgba(17,24,39,.32); border-radius: 3px; z-index: 90;
  }
}

/* ====== 视图容器 ====== */
.view { display: none; height: 100%; flex-direction: column; position: relative; z-index: 1; }
.view.active { display: flex; }

.scroll-area { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.scroll-area::-webkit-scrollbar { width: 0; }

/* ====== 卡片：白底 + 极细线 + 微阴影 ====== */
.glass {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.glass.accent::after { content: none; } /* 简约：取消渐变高光线 */

/* ====== 点击缩放反馈 ====== */
.tap { transition: transform .12s ease, box-shadow .2s ease; cursor: pointer; }
.tap:active { transform: scale(0.97); }

/* 在线占比进度条 */
.track { height: 5px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.track .bar { height: 100%; background: var(--green); border-radius: 4px; transition: width .5s ease; }

/* 快速操作磁贴 */
.qa { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 14px 6px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.qa-ic { width: 42px; height: 42px; border-radius: 12px; background: rgba(14,165,233,.10); color: var(--cyan); display: inline-flex; align-items: center; justify-content: center; }
.qa-ic svg { width: 22px; height: 22px; display: block; }   /* 保证图标填满，避免不显示 */
.qa-tx { font-size: 12px; color: var(--text); }

/* 统计明细小圆点 */
.sdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

/* 工作状态芯片（比普通标签略醒目） */
.work-chip { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }

/* 横向拖动滑块（工作时长调节） */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; background: var(--soft); outline: none; cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.22); cursor: pointer; }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.22); cursor: pointer; }

/* 在线占比圆环图 */
.ring {
  position: relative; width: 76px; height: 76px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--green) calc(var(--p,0) * 1%), var(--soft) 0);
  display: flex; align-items: center; justify-content: center;
  transition: background .5s ease;
}
.ring::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.ring-val { position: relative; text-align: center; line-height: 1; }

/* 搜索输入占位符 */
#search-input::placeholder { color: #9AA4B2; }

/* 状态筛选标签栏：横向滚动、不换行、隐藏滚动条 */
.chip-bar { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.chip-bar::-webkit-scrollbar { height: 0; }
.chip-bar > button { flex: 0 0 auto; }

/* 标签芯片（可点击筛选） */
.tag-chip { font-size: 10px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.tag-add { font-size: 10px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; color: var(--cyan); border: 1px dashed #C9D2DC; }

/* 统计卡片（简约：静态，无呼吸辉光） */
.stat-card { transition: box-shadow .2s ease; }

/* ====== 在线脉冲指示点 ====== */
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.4);} 70%{ box-shadow: 0 0 0 6px rgba(16,185,129,0);} 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0);} }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--green); animation: ring 1.8s infinite; }
.dot.off { background: var(--gray); }

/* ====== 信号强度条 ====== */
.signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.signal i { width: 3px; border-radius: 1px; background: rgba(154,164,178,.4); }
.signal i:nth-child(1){height:5px} .signal i:nth-child(2){height:8px}
.signal i:nth-child(3){height:11px} .signal i:nth-child(4){height:14px}
.signal.lv i.on { background: var(--cyan); }

/* ====== 环形仪表盘（档位/进度，--p 由 JS 设置） ====== */
.gauge {
  position: relative; width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--p,0) * 1%), var(--soft) 0);
  display: flex; align-items: center; justify-content: center;
}
.gauge::before { content:''; position:absolute; inset:11px; border-radius:50%; background:#fff; box-shadow: inset 0 0 0 1px var(--line); }
.gauge .gauge-val { position: relative; text-align: center; }

/* ====== 工作模式卡片（图标 + 文字，单选） ====== */
.mode-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 8px; border-radius: 12px;
  background: var(--soft); border: 1px solid var(--line);
  color: var(--subtext); font-size: 13px; font-weight: 500;
}
.mode-card .mode-ic { width: 24px; height: 24px; display: inline-flex; color: var(--gray); }
.mode-card.active { background: rgba(14,165,233,.10); border-color: var(--cyan); color: var(--cyan); }
.mode-card.active .mode-ic { color: var(--cyan); }

/* ====== 分段选择（如档位 1~5） ====== */
.seg { display: flex; gap: 6px; }
.seg-item {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 10px;
  background: var(--soft); border: 1px solid var(--line);
  color: var(--subtext); font-weight: 600; font-size: 15px;
}
.seg-item.active { background: var(--cyan); color: #fff; border-color: var(--cyan); }

/* ====== 圆形拨盘（可拖动设置 + 展示） ====== */
.dial {
  position: relative; border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--p,0) * 1%), var(--soft) 0);
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.dial::before { content:''; position:absolute; inset:11px; border-radius:50%; background:#fff; box-shadow: inset 0 0 0 1px var(--line); }
.dial-val { position: relative; text-align: center; pointer-events: none; }
.dial-pointer { position: absolute; inset: 0; pointer-events: none; transition: transform .12s ease; }
.dial-pointer::before {
  content: ''; position: absolute; top: 4px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--cyan); box-shadow: 0 1px 4px rgba(14,165,233,.5);
}

/* ====== 弹窗（白底简约、圆角16px） ====== */
.modal-mask { position:absolute; inset:0; z-index:50; background: rgba(17,24,39,.32); display:none; align-items:flex-end; justify-content:center; }
.modal-mask.show { display:flex; }
.modal-card {
  position: relative; width:100%;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(17,24,39,.12);
  padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.modal-mask.show .modal-card { transform: translateY(0); }

/* ====== Toast ====== */
.toast {
  position:absolute; left:50%; bottom:96px; z-index:80;
  transform: translateX(-50%) translateY(10px);
  background: rgba(17,24,39,.92); color: #fff;
  padding:10px 18px; border-radius:10px; font-size:13px;
  box-shadow: 0 6px 20px rgba(17,24,39,.2);
  opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
}
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }

/* ====== 加载动画 ====== */
@keyframes spin { to { transform: rotate(360deg); } }
.loader { width:26px; height:26px; border-radius:50%; border:2px solid rgba(14,165,233,.18); border-top-color: var(--cyan); animation: spin .8s linear infinite; }

/* ====== 开关 Switch ====== */
.switch { position:relative; width:44px; height:24px; border-radius:999px; background:#D6DBE2; transition: background .2s; }
.switch.on { background: var(--cyan); }
.switch::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(17,24,39,.2); transition: transform .2s; }
.switch.on::after { transform: translateX(20px); }

/* ====== 滑块 ====== */
input[type="range"] { -webkit-appearance:none; width:100%; height:4px; border-radius:4px; background: var(--soft); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background: var(--cyan); box-shadow:0 1px 4px rgba(14,165,233,.4); cursor:pointer; }

/* 输入框 */
.field { width:100%; background:#F8FAFC; color: var(--text); border:1px solid var(--line); border-radius:10px; padding:11px 12px; font-size:14px; outline:none; }
.field:focus { border-color: var(--cyan); background:#fff; box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.field::placeholder { color:#9AA4B2; }