/* 水务运维 · 小程序 H5 演示版 · 统一样式
   说明:把微信原生小程序(water-ops-mp)的设计翻成 H5 展示。
   尺度:iPhone 390×844 框;原生 rpx ÷ 2 = 本文件 px。仅演示,扫码/GPS/相机为样子。 */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "PingFang SC", "Source Han Sans SC", "Helvetica Neue", sans-serif;
  background: linear-gradient(135deg, #e0e7ef, #cfd8e3);
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; color: #1F2937;
}
.label { position: fixed; top: 14px; left: 18px; font-size: 13px; color: #6b7280; font-weight: 500; z-index: 99; }

/* ===== 设计 token ===== */
:root {
  --c-primary:#1890FF; --c-primary-2:#096DD9;
  --c-success:#52C41A; --c-warning:#FAAD14; --c-danger:#FF4D4F; --c-verify:#722ED1;
  --c-bg:#F5F7FA; --c-card:#FFFFFF; --c-border:#E5E7EB; --c-text:#1F2937; --c-text-2:#6B7280;
  --shadow-card:0 2px 8px rgba(0,0,0,.05);
}

/* ===== iPhone 外壳 ===== */
.phone { width:390px; height:844px; background:#1c1c1e; border-radius:54px; padding:12px;
  box-shadow:0 30px 60px rgba(0,0,0,.18),0 0 0 2px #2c2c2e, inset 0 0 0 5px #0a0a0c; flex:none; position:relative; }
.screen { width:100%; height:100%; background:var(--c-bg); border-radius:42px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.island { position:absolute; top:11px; left:50%; transform:translateX(-50%); width:120px; height:36px; background:#000; border-radius:20px; z-index:10; }

.statusbar { height:54px; display:flex; align-items:flex-end; padding:0 28px 8px; font-size:15px; font-weight:600; color:#000; flex:none; position:relative; z-index:2; }
.statusbar.light { color:#fff; }
.statusbar .time { flex:1; }
.statusbar .icons { display:flex; align-items:center; gap:6px; font-size:13px; }

.navbar { height:44px; display:flex; align-items:center; justify-content:center; position:relative; background:var(--c-bg); flex:none; z-index:2; }
.navbar.transparent { background:transparent; }
.navbar .title { font-size:17px; font-weight:600; color:#000; }
.navbar.light .title { color:#fff; }
.navbar .back { position:absolute; left:8px; top:8px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#1f2937; text-decoration:none; font-size:22px; }
.navbar.light .back { color:#fff; }
.navbar .right-action { position:absolute; right:14px; top:13px; font-size:13px; color:var(--c-primary); cursor:pointer; text-decoration:none; }
.navbar .capsule { position:absolute; right:12px; top:6px; width:87px; height:32px; background:rgba(0,0,0,.05); border:.5px solid rgba(0,0,0,.06); border-radius:16px; display:flex; align-items:center; justify-content:space-around; color:#1f2937; }
.navbar .capsule::before { content:""; position:absolute; width:1px; height:18px; background:rgba(0,0,0,.1); left:50%; }
.navbar.light .capsule { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#fff; }
.navbar.light .capsule::before { background:rgba(255,255,255,.3); }
.dot { width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block; }
.ring { width:14px; height:14px; border:1.5px solid currentColor; border-radius:50%; display:inline-block; }

/* 内容滚动区 */
.content { flex:1; overflow-y:auto; position:relative; z-index:1; -webkit-overflow-scrolling:touch; }
.content::-webkit-scrollbar { display:none; }
.body-pad { padding:12px; }

/* ===== 自定义 tabBar(四角 + 中央凸起 ⊕上报) ===== */
.tabbar { height:60px; background:#fff; border-top:.5px solid var(--c-border); display:flex; align-items:center; flex:none; position:relative; z-index:2; }
.tabbar .tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--c-text-2); font-size:10px; text-decoration:none; gap:3px; }
.tabbar .tab .ico { font-size:20px; line-height:1; }
.tabbar .tab.on { color:var(--c-primary); }
.tabbar .tab.center { position:relative; }
.tabbar .fab { position:absolute; top:-22px; width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg,#1890FF,#096DD9); box-shadow:0 4px 10px rgba(24,144,255,.4); display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:300; }
.tabbar .tab.center .txt { margin-top:30px; color:var(--c-primary-2); }

/* ===== 组件 ===== */
.card { background:var(--c-card); border-radius:12px; box-shadow:var(--shadow-card); padding:12px; }
.card + .card { margin-top:12px; }
.card-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.card-hd .t { font-size:15px; font-weight:600; color:var(--c-text); }
.card-hd .extra { font-size:12px; color:var(--c-primary); }

.badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; line-height:1.6; }
.badge.success { color:#52C41A; background:rgba(82,196,26,.12); }
.badge.warning { color:#FAAD14; background:rgba(250,173,20,.12); }
.badge.danger  { color:#FF4D4F; background:rgba(255,77,79,.12); }
.badge.verify  { color:#722ED1; background:rgba(114,46,209,.12); }
.badge.primary { color:#1890FF; background:rgba(24,144,255,.12); }
.badge.info    { color:#6B7280; background:rgba(107,114,128,.12); }

.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:5px 14px; border-radius:16px; background:#F0F2F5; color:var(--c-text-2); font-size:13px; cursor:pointer; }
.chip.on { background:var(--c-primary); color:#fff; }

/* 分段(巡检/工单、模式切换) */
.seg-bar { display:flex; background:#fff; border-bottom:.5px solid #F0F2F5; }
.seg { flex:1; text-align:center; height:44px; line-height:44px; font-size:15px; color:var(--c-text-2); position:relative; cursor:pointer; }
.seg.on { color:var(--c-primary); font-weight:600; }
.seg.on::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:28px; height:3px; background:var(--c-primary); border-radius:2px; }
/* 胶囊分段(模式切换) */
.seg-pill { display:inline-flex; background:#F0F2F5; border-radius:16px; padding:2px; }
.seg-pill .s { padding:4px 16px; border-radius:14px; font-size:13px; color:var(--c-text-2); cursor:pointer; }
.seg-pill .s.on { background:#fff; color:var(--c-primary); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.08); }

/* 任务/工单行 */
.ti { display:flex; align-items:center; padding:12px; background:#fff; border-radius:10px; text-decoration:none; color:inherit; }
.ti.urgent { border-left:4px solid var(--c-danger); background:#FFF7F7; }
.ti .main { flex:1; min-width:0; }
.ti .row1 { display:flex; align-items:center; gap:6px; }
.ti .t { font-size:15px; font-weight:600; color:var(--c-text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ti .sub { font-size:13px; color:var(--c-text); margin-top:4px; }
.ti .meta { font-size:11px; color:var(--c-text-2); margin-top:3px; }
.ti .right { display:flex; align-items:center; gap:4px; margin-left:8px; }
.ti .arr { color:#C0C4CC; font-size:18px; }
.list { display:flex; flex-direction:column; gap:8px; }

/* 表单字段 */
.fld { padding:10px 0; border-bottom:.5px solid #F0F2F5; }
.fld .lb { font-size:13px; color:var(--c-text-2); margin-bottom:6px; }
.fld .req { color:var(--c-danger); margin-right:3px; }
.inp, .ta { width:100%; border:none; font-size:14px; font-family:inherit; color:var(--c-text); background:transparent; outline:none; }
.ta { min-height:70px; resize:none; }
.field-box { border:.5px solid var(--c-border); border-radius:8px; padding:8px; }

/* 照片网格 */
.pg { display:flex; flex-wrap:wrap; gap:8px; }
.pg .cell, .pg .add { width:80px; height:80px; border-radius:8px; }
.pg .cell { background:#eef1f4; }
.pg .add { border:1px dashed #C0C4CC; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--c-text-2); }
.pg .add .plus { font-size:24px; }
.pg .add .cnt { font-size:11px; margin-top:2px; }

/* GPS 到点 */
.gps { display:flex; align-items:center; gap:5px; padding:8px 10px; border-radius:6px; font-size:13px; }
.gps.ok { background:rgba(82,196,26,.12); color:#52C41A; }
.gps.no { background:rgba(250,173,20,.12); color:#FAAD14; }

/* 空态 */
.empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 0; color:#C0C4CC; }
.empty .ico { font-size:48px; margin-bottom:10px; }
.empty .txt { font-size:13px; }

/* 按钮 */
.btn { height:48px; line-height:48px; text-align:center; border-radius:8px; font-size:15px; font-weight:600; border:none; cursor:pointer; display:block; width:100%; }
.btn-primary { background:var(--c-primary); color:#fff; }
.btn-primary.disabled { background:#A9CFF5; }
.btn-ghost { background:#fff; color:var(--c-primary); border:1px solid var(--c-primary); }
.btn-danger { background:#fff; color:var(--c-danger); border:1px solid var(--c-danger); }

/* 底部固定操作条 */
.footer { position:absolute; left:0; right:0; bottom:0; padding:8px 12px 12px; background:#fff; border-top:.5px solid #F0F2F5; z-index:5; }
.footer-holder { height:76px; }

/* 底部弹层 */
.mask { position:absolute; inset:0; background:rgba(0,0,0,.4); z-index:20; display:flex; align-items:flex-end; }
.sheet { width:100%; background:#fff; border-radius:16px 16px 0 0; padding:16px; }
.sheet .st { font-size:16px; font-weight:600; text-align:center; }
.sheet .tip { font-size:12px; color:var(--c-text-2); margin:8px 0; }

/* 工具 */
.muted { color:var(--c-text-2); font-size:12px; }
.c-primary{color:var(--c-primary)} .c-success{color:var(--c-success)} .c-warning{color:var(--c-warning)} .c-danger{color:var(--c-danger)} .c-verify{color:var(--c-verify)}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}
.row{display:flex;align-items:center}.between{display:flex;align-items:center;justify-content:space-between}.flex1{flex:1;min-width:0}
.divider{height:.5px;background:var(--c-border)}
.demo-note { position:absolute; bottom:70px; left:0; right:0; text-align:center; font-size:10px; color:#b0b6bf; z-index:1; }

/* ===== 移动端(甲方扫码在手机上看):去掉外框,铺满屏幕,像真 App ===== */
@media (max-width: 430px) {
  body { padding:0; margin:0; background:#000; display:block; }
  .label { display:none; }
  .phone { width:100vw; height:100vh; height:100dvh; border-radius:0; padding:0; box-shadow:none; }
  .screen { width:100%; height:100%; border-radius:0; }
  .island { display:none; }
}