:root{
  --bg:#eef3ef;
  --card:#ffffff;
  --ink:#16241c;
  --ink2:#4d5f55;
  --ink3:#8b9c92;
  --line:#e6efe9;
  --green:#2f8f4e;
  --green-d:#1f6b39;
  --green-soft:#e8f5ec;
  --amber:#b0741c;
  --amber-soft:#fdf3e2;
  --red:#c22a3d;
  --red-soft:#fdecef;
  --blue:#2f7fc9;
  --blue-soft:#e9f2fb;
  --shadow:0 1px 2px rgba(22,36,28,.04),0 6px 18px rgba(22,36,28,.05);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#e4ebe5;
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;justify-content:center;
  min-height:100vh;
}
button{font-family:inherit;}

.app{
  position:relative;
  width:100%;max-width:480px;
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);
  box-shadow:0 0 60px rgba(15,36,24,.07);
  overflow:hidden;
}

/* ══════════ 顶栏 ══════════ */
.topbar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px 11px;
  background:rgba(238,243,239,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(228,238,232,.9);
  z-index:20;
}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0;}
.logo{
  width:32px;height:32px;border-radius:10px;flex:none;
  background:linear-gradient(145deg,#3aa25c,#237a41);
  color:#fff;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(35,122,65,.28);
}
.tb-left h1{margin:0;font-size:15px;font-weight:650;letter-spacing:-.2px;}
.tb-left p{margin:1px 0 0;font-size:10.5px;color:var(--ink3);}
.tb-right{display:flex;align-items:center;gap:8px;flex:none;}
.pill{
  display:flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:7px;
  background:var(--amber-soft);color:var(--amber);
}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor;}
.pill.night{background:var(--blue-soft);color:var(--blue);}
.pill.src{background:#eef1f4;color:#6b7a86;}
.pill.src.live{background:#e7f5ec;color:#2f8f4e;}
.pill.src.stale{background:var(--red-soft);color:#c22a3d;}
.clock{font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}

/* ══════════ 主内容 ══════════ */
main{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;
  padding:14px 16px 18px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
main::-webkit-scrollbar{display:none;}
.page{display:none;flex-direction:column;gap:12px;}
.page.active{display:flex;}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:15px;box-shadow:var(--shadow);
}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:11px;}
.card-head h2{margin:0;font-size:14px;font-weight:650;letter-spacing:-.15px;}
.ch-note{font-size:10.5px;color:var(--ink3);flex:none;}

/* ══════════ 主卡 ══════════ */
.hero{padding:16px 16px 13px;}
.hero-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.hm-label{font-size:10.5px;color:var(--ink3);margin-bottom:1px;}
.hm-val{display:flex;align-items:baseline;gap:2px;}
.hm-val span{font-size:42px;font-weight:640;letter-spacing:-2px;line-height:1.05;font-variant-numeric:tabular-nums;}
.hm-val small{font-size:14px;color:var(--ink2);font-weight:500;}
.hero-sub{font-size:11px;color:var(--ink3);margin-top:3px;}

.ring-wrap{position:relative;width:82px;height:82px;flex:none;}
.ring{width:82px;height:82px;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:#eef4f0;stroke-width:7;}
.ring-fg{fill:none;stroke:var(--green);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:238.8;stroke-dashoffset:238.8;transition:stroke-dashoffset .5s ease,stroke .3s;}
.ring-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;}
.ring-txt b{font-size:17px;font-weight:660;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.ring-txt span{font-size:8.5px;color:var(--ink3);letter-spacing:.3px;}

.hero-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  padding:11px 0 10px;margin-top:9px;border-top:1px solid #f2f7f4;
}
.hero-grid>div{display:flex;flex-direction:column;gap:0;position:relative;}
.hero-grid>div+div::before{content:"";position:absolute;left:-3px;top:3px;bottom:3px;width:1px;background:#f2f7f4;}
.hero-grid span{font-size:9.5px;color:var(--ink3);}
.hero-grid b{font-size:15px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}
.hero-grid i{font-style:normal;font-size:8.5px;color:#a8b6ae;}

.speed-row{display:flex;align-items:center;gap:9px;padding-top:10px;border-top:1px solid #f2f7f4;}
.sr-label{font-size:10.5px;color:var(--ink3);flex:none;}
.seg{display:flex;background:#f2f7f4;border-radius:9px;padding:2px;gap:2px;flex:1;}
.seg button{
  flex:1;border:0;background:transparent;color:var(--ink2);
  font-size:11px;font-weight:600;padding:5px 0;border-radius:7px;cursor:pointer;
  transition:.16s;font-variant-numeric:tabular-nums;
}
.seg button.on{background:#fff;color:var(--green-d);box-shadow:0 1px 3px rgba(22,36,28,.09);}

/* ══════════ 热力图 ══════════ */
.heat-card{padding:15px 13px 13px;}
.heat-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:11px;}
.heat-tabs button{
  border:1px solid var(--line);background:#fafcfb;color:var(--ink2);
  font-size:11px;font-weight:550;padding:6px 0;border-radius:9px;cursor:pointer;transition:.16s;
}
.heat-tabs button.on{background:var(--green-soft);border-color:#cfe8d8;color:var(--green-d);font-weight:650;}

.heat-grid{
  display:grid;
  grid-template-columns:24px repeat(3,1fr);
  gap:3px;
}
.hg-corner{font-size:8.5px;color:#b6c4bb;display:grid;place-items:center;}
.hg-col{
  font-size:10px;font-weight:650;color:var(--ink2);text-align:center;padding-bottom:1px;
}
.hg-row{font-size:9.5px;color:var(--ink3);display:grid;place-items:center;font-weight:550;}
.hg-cell{
  border-radius:8px;padding:5px 2px 4px;cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:transform .12s ease,box-shadow .12s;min-height:34px;
  border:1px solid transparent;
}
.hg-cell:active{transform:scale(.95);}
.hg-cell b{font-size:12px;font-weight:640;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.hg-cell span{font-size:8px;opacity:.7;line-height:1.1;}
.hg-cell.act{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green);}
.hg-valvedot{
  position:absolute;top:3px;right:3px;width:4px;height:4px;border-radius:50%;
  background:#1f6b39;box-shadow:0 0 0 2px rgba(47,143,78,.22);
}
.heat-legend{margin-top:10px;}
.hl-bar{height:5px;border-radius:3px;}
.hl-ends{display:flex;justify-content:space-between;font-size:9px;color:#a8b6ae;margin-top:3px;}

/* ══════════ 设备条 ══════════ */
.devstrip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
.ds-item{
  border-radius:10px;padding:7px 2px 6px;text-align:center;
  background:#f8fbf9;border:1px solid #eef4f0;transition:.2s;
}
.ds-item.on{background:var(--green-soft);border-color:#d5ebdd;}
.ds-dot{width:5px;height:5px;border-radius:50%;background:#cfdad3;margin:0 auto 3px;}
.ds-item.on .ds-dot{background:var(--green);box-shadow:0 0 0 3px rgba(47,143,78,.14);}
.ds-name{font-size:9.5px;color:var(--ink2);font-weight:550;line-height:1.2;}
.ds-state{font-size:8.5px;color:var(--ink3);margin-top:1px;}
.ds-item.on .ds-state{color:var(--green-d);font-weight:600;}

.valve-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:9px;border-top:1px solid #f2f7f4;
}
.vb-left{display:flex;align-items:baseline;gap:4px;}
.vb-left span{font-size:10.5px;color:var(--ink3);}
.vb-left b{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;}
.vb-left small{font-size:9.5px;color:#a8b6ae;}
.vb-right span{font-size:10.5px;color:var(--ink3);background:#f4f8f5;padding:3px 8px;border-radius:6px;}

/* ══════════ 告警 ══════════ */
.alarm-list{display:flex;flex-direction:column;gap:7px;}
.alarm-item{
  display:flex;gap:8px;padding:9px 10px;border-radius:10px;
  background:#fbfdfb;border:1px solid #f0f5f2;
}
.alarm-item.warn{background:#fffcf5;border-color:#f8ecd6;}
.alarm-item.danger{background:#fff8f9;border-color:#fadde3;}
.al-dot{width:6px;height:6px;border-radius:50%;margin-top:5px;flex:none;background:#c8d5cc;}
.alarm-item.warn .al-dot{background:var(--amber);}
.alarm-item.danger .al-dot{background:var(--red);}
.al-txt{font-size:11.5px;color:var(--ink2);line-height:1.45;}
.alarm-item.danger .al-txt{color:#a01e2f;}
.alarm-empty{font-size:11.5px;color:var(--ink3);padding:10px 0;text-align:center;}

.tip-card{display:flex;gap:10px;background:#f4f9f5;border-color:#e4f0e8;}
.tip-icon{
  width:20px;height:20px;border-radius:6px;flex:none;margin-top:1px;
  background:var(--green-soft);color:var(--green-d);
  display:grid;place-items:center;font-size:12px;font-weight:700;
}
.tip-body b{font-size:12px;font-weight:650;display:block;margin-bottom:3px;}
.tip-body p{margin:0;font-size:11px;color:var(--ink2);line-height:1.55;}

/* ══════════ 分层页 ══════════ */
.rack-tabs{display:flex;gap:6px;}
.rack-tabs button{
  flex:1;border:1px solid var(--line);background:#fff;color:var(--ink2);
  padding:9px 0;border-radius:11px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s;
  box-shadow:var(--shadow);
}
.rack-tabs button.on{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 3px 12px rgba(47,143,78,.28);}
.rack-tabs button small{display:block;font-size:9px;font-weight:500;opacity:.72;margin-top:1px;}

.rack-summary{padding:14px 15px 13px;}
.rs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.rs-head h2{margin:0;font-size:15px;font-weight:650;}
.rs-head p{margin:2px 0 0;font-size:10.5px;color:var(--ink3);}
.rs-badge{font-size:10.5px;font-weight:600;padding:4px 8px;border-radius:7px;background:var(--green-soft);color:var(--green-d);flex:none;}
.rs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid #f2f7f4;}
.rs-grid>div{display:flex;flex-direction:column;gap:0;}
.rs-grid span{font-size:9.5px;color:var(--ink3);}
.rs-grid b{font-size:16px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}
.rs-grid i{font-style:normal;font-size:8.5px;color:#a8b6ae;}

.layer-list{display:flex;flex-direction:column;gap:6px;}
.layer-row{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:9px 11px;box-shadow:var(--shadow);cursor:pointer;transition:.14s;
}
.layer-row:active{transform:scale(.988);}
.lr-badge{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--green-soft);color:var(--green-d);
  display:grid;place-items:center;font-size:10.5px;font-weight:700;
}
.lr-mid{flex:1;min-width:0;}
.lr-top{display:flex;align-items:center;gap:6px;}
.lr-name{font-size:12px;font-weight:600;}
.lr-risk{
  font-size:8.5px;font-weight:650;padding:1.5px 5px;border-radius:4px;
  background:#f0f5f1;color:var(--ink3);flex:none;
}
.lr-risk.low{background:#e7f5ec;color:#2f8f4e;}
.lr-risk.mid{background:var(--amber-soft);color:var(--amber);}
.lr-risk.high{background:var(--red-soft);color:var(--red);}
.lr-metrics{display:flex;gap:10px;margin-top:2px;font-size:9.5px;color:var(--ink3);}
.lr-metrics b{font-size:11.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.lr-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:none;min-width:46px;}
.lr-valve{font-size:9.5px;color:var(--ink3);}
.lr-valve.on{color:var(--green-d);font-weight:600;}
.foot-note{font-size:10px;color:#a8b6ae;text-align:center;margin:2px 0 0;}

/* ══════════ 控制页 ══════════ */
.preset-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 2px;}
.preset-label{font-size:11px;color:var(--ink3);}
.preset-row button{
  border:1px solid var(--line);background:#fff;color:var(--ink2);
  font-size:11px;font-weight:550;padding:6px 10px;border-radius:8px;cursor:pointer;transition:.18s;
}
.preset-row button.on{background:var(--green-soft);border-color:#cfe8d8;color:var(--green-d);font-weight:650;}

.notice{background:#fbfdfb;border-color:#eaf2ec;padding:11px 13px;}
.notice b{font-size:10.5px;color:var(--ink3);font-weight:600;}
.notice p{margin:2px 0 0;font-size:12px;color:var(--ink);font-weight:550;}
.notice.warn{background:#fffcf5;border-color:#f8ecd6;}
.notice.warn p{color:var(--amber);}
.notice.warn b{color:var(--amber);}

.dev-list{display:flex;flex-direction:column;gap:10px;}
.dev-card{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;
}
.dev-head{display:flex;align-items:center;gap:10px;padding:12px 13px;}
.dev-ico{
  width:32px;height:32px;border-radius:9px;flex:none;
  background:#f4f8f5;color:var(--ink2);display:grid;place-items:center;transition:.2s;
}
.dev-ico.on{background:var(--green-soft);color:var(--green-d);}
.dev-ico svg{width:17px;height:17px;}
.dev-mid{flex:1;min-width:0;}
.dev-title{display:flex;align-items:center;gap:6px;}
.dev-title b{font-size:12.5px;font-weight:620;}
.dev-src{
  font-size:8.5px;font-weight:600;padding:1.5px 5px;border-radius:4px;
  background:#f2f7f4;color:var(--ink3);
}
.dev-src.auto{background:var(--green-soft);color:var(--green-d);}
.dev-src.manual{background:var(--amber-soft);color:var(--amber);}
.dev-status{font-size:9.5px;color:var(--ink3);margin-top:1px;}
.dev-status.live{color:var(--green-d);}
.dev-status.live::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--green);margin-right:3px;vertical-align:1px;
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.dev-right{display:flex;align-items:center;gap:8px;flex:none;}

.switch{position:relative;width:42px;height:25px;flex:none;}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.switch .track{
  position:absolute;inset:0;border-radius:13px;background:#dfe8e2;
  transition:background .2s;pointer-events:none;
}
.switch .track::after{
  content:"";position:absolute;width:19px;height:19px;border-radius:50%;
  background:#fff;top:3px;left:3px;transition:transform .2s;
  box-shadow:0 1px 3px rgba(22,36,28,.2);
}
.switch input:checked+.track{background:var(--green);}
.switch input:checked+.track::after{transform:translateX(17px);}
.switch.disabled{opacity:.42;}
.switch.disabled input{cursor:not-allowed;}

.dev-body{display:none;padding:0 13px 12px;border-top:1px solid #f5f9f7;}
.dev-card.open .dev-body{display:block;}
.dev-toggle{
  width:100%;border:0;background:transparent;color:var(--ink3);
  font-size:10px;padding:7px 0 9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.dev-toggle::after{content:"⌄";font-size:11px;transition:.2s;display:inline-block;}
.dev-card.open .dev-toggle::after{transform:rotate(180deg);}

.mode-switch{display:flex;background:#f2f7f4;border-radius:9px;padding:2px;gap:2px;margin:9px 0 2px;}
.mode-switch button{
  flex:1;border:0;background:transparent;color:var(--ink2);
  font-size:11px;font-weight:600;padding:6px 0;border-radius:7px;cursor:pointer;transition:.16s;
}
.mode-switch button.on{background:#fff;box-shadow:0 1px 3px rgba(22,36,28,.09);color:var(--ink);}
.mode-switch button.on.auto-on{color:var(--green-d);}
.mode-switch button.on.manual-on{color:var(--amber);}

.param{padding:9px 0 4px;}
.param label{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--ink2);margin-bottom:5px;}
.param output{font-size:12px;font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums;}
.param output small{font-size:9px;color:var(--ink3);font-weight:400;margin-left:1px;}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;
  background:#e8f0ea;outline:none;margin:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid var(--green);cursor:pointer;
  box-shadow:0 1px 4px rgba(22,36,28,.16);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;
  border:2px solid var(--green);cursor:pointer;
}
.param-hint{font-size:10px;color:#a8b6ae;line-height:1.55;margin:8px 0 2px;}

.time-row{display:flex;gap:8px;margin-top:9px;}
.time-row>div{flex:1;}
.time-row label{display:block;font-size:10px;color:var(--ink3);margin-bottom:3px;}
.time-row input[type=time]{
  width:100%;border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;font-size:12px;font-family:inherit;color:var(--ink);
  background:#fafcfb;font-variant-numeric:tabular-nums;
}
.inten-row{display:flex;gap:8px;margin-top:10px;}
.inten-row>div{flex:1;text-align:center;}
.inten-row span{font-size:9.5px;color:var(--ink3);display:block;margin-bottom:3px;}
.inten-row input{width:100%;}

.btn-row{display:flex;gap:8px;}
.btn{
  flex:1;border:1px solid var(--line);background:#fff;color:var(--ink2);
  font-size:11.5px;font-weight:600;padding:10px 0;border-radius:10px;cursor:pointer;transition:.16s;
}
.btn.ghost:active{background:#f7faf8;}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff;}
.btn.danger{background:var(--red-soft);border-color:#f8d7de;color:var(--red);}
.btn:disabled{opacity:.42;cursor:not-allowed;}

/* ══════════ 趋势页 ══════════ */
.chart-box{margin-top:2px;}
#trendChart{width:100%;height:auto;display:block;overflow:visible;}
.chart-legend{display:flex;gap:12px;margin-top:8px;font-size:9.5px;color:var(--ink3);flex-wrap:wrap;align-items:center;}
.chart-legend i{display:inline-block;width:12px;height:3px;border-radius:2px;margin-right:4px;vertical-align:2px;}
.chart-legend i.lg-band{background:#cfe8d8;height:9px;border-radius:3px;}
.chart-legend i.lg-avg{background:#2f8f4e;}
.chart-legend i.lg-zone{background:#e8663f;}

.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.stat-grid>div{display:flex;flex-direction:column;gap:0;}
.stat-grid span{font-size:9.5px;color:var(--ink3);}
.stat-grid b{font-size:16px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.4px;}

.bar-list{display:flex;flex-direction:column;gap:5px;}
.bar-row{display:grid;grid-template-columns:40px 1fr 46px;gap:7px;align-items:center;cursor:pointer;}
.bar-row span{font-size:9.5px;color:var(--ink3);font-variant-numeric:tabular-nums;}
.bar-track{height:14px;background:#f4f8f5;border-radius:7px;overflow:hidden;position:relative;}
.bar-fill{height:100%;border-radius:7px;transition:width .3s,background .3s;}
.bar-row b{font-size:10.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
.bar-row.sel span{color:var(--green-d);font-weight:700;}
.bar-row.sel b{color:var(--green-d);}

/* ══════════ 日志 ══════════ */
.log-filter{margin-bottom:2px;}
.log-list{display:flex;flex-direction:column;}
.log-item{
  display:flex;gap:9px;padding:9px 11px;background:#fff;
  border:1px solid var(--line);border-radius:10px;margin-bottom:5px;
}
.log-time{font-size:10px;color:#a8b6ae;flex:none;font-variant-numeric:tabular-nums;padding-top:1px;}
.log-body{flex:1;min-width:0;}
.log-text{font-size:11.5px;color:var(--ink2);line-height:1.45;}
.log-tag{
  font-size:8.5px;font-weight:650;padding:1px 5px;border-radius:4px;margin-right:5px;
  background:#f2f7f4;color:var(--ink3);vertical-align:1px;
}
.log-tag.auto{background:var(--green-soft);color:var(--green-d);}
.log-tag.user{background:var(--amber-soft);color:var(--amber);}
.log-tag.off{background:#f4f6f5;color:#96a69c;}
.log-tag.act{background:#eaf2ff;color:#2f6fc9;}
.log-empty{font-size:11.5px;color:var(--ink3);text-align:center;padding:26px 0;}

/* ══════════ 底栏 ══════════ */
.tabbar{
  flex:none;display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);
  padding:7px 0 calc(6px + env(safe-area-inset-bottom));
  z-index:20;
}
.tabbar button{
  border:0;background:transparent;color:#a2b0a8;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:3px 0;cursor:pointer;transition:.16s;
}
.tabbar svg{width:20px;height:20px;}
.tabbar span{font-size:9px;font-weight:550;}
.tabbar button.on{color:var(--green-d);}

/* ══════════ 抽屉 ══════════ */
.sheet-mask{
  position:fixed;inset:0;background:rgba(15,30,22,.36);
  opacity:0;pointer-events:none;transition:opacity .22s;z-index:40;
}
.sheet-mask.show{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,101%);
  width:100%;max-width:480px;max-height:84vh;overflow-y:auto;
  background:#fff;border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(15,30,22,.18);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  z-index:41;padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.sheet.show{transform:translate(-50%,0);}
.sheet-grab{width:34px;height:4px;border-radius:2px;background:#e2eae4;margin:9px auto 0;}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 18px 12px;}
.sheet-head h3{margin:0;font-size:15px;font-weight:650;}
.sheet-head p{margin:2px 0 0;font-size:10.5px;color:var(--ink3);line-height:1.45;}
.sheet-close{
  border:1px solid var(--line);background:#fafcfb;color:var(--ink2);
  font-size:11px;font-weight:600;padding:5px 11px;border-radius:8px;cursor:pointer;flex:none;
}
.sh-body{padding:0 18px;}

.sh-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:13px;}
.sh-metrics>div{
  background:#f8fbf9;border:1px solid #eef4f0;border-radius:10px;
  padding:8px 9px;display:flex;flex-direction:column;gap:0;
}
.sh-metrics span{font-size:9.5px;color:var(--ink3);}
.sh-metrics b{font-size:15px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.sh-metrics b small{font-size:9px;font-weight:400;color:var(--ink3);margin-left:1px;}

.sh-sec{border-top:1px solid #f2f7f4;padding:12px 0;}
.sh-sec-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;}
.sh-sec-title b{font-size:12px;font-weight:620;}
.sh-state{font-size:10.5px;color:var(--ink3);}
.sh-state.on{color:var(--green-d);font-weight:600;}
.sh-actions{display:flex;gap:8px;margin-top:9px;}
.sh-actions .btn{padding:9px 0;font-size:11.5px;}
.sh-reset{
  border:0;background:transparent;color:var(--ink3);font-size:10px;
  text-decoration:underline;padding:2px 0;cursor:pointer;
}
.chip-custom{
  font-size:9px;font-weight:650;padding:1.5px 6px;border-radius:5px;
  background:var(--amber-soft);color:var(--amber);
}
.sh-note{font-size:10px;color:#a8b6ae;line-height:1.55;margin:4px 0 0;}

/* ══════════ 数据源卡片 ══════════ */
.src-card{padding:13px 14px 14px;}
.src-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px;}
.src-head h2{margin:0;font-size:13.5px;font-weight:650;}
.src-head em{font-style:normal;font-size:10.5px;color:var(--ink3);}
.src-head em.live{color:#2f8f4e;font-weight:600;}
.src-head em.stale{color:#c22a3d;font-weight:600;}

/* ══════════ 全无线链路（上行探头 / 下行设备两行） ══════════ */
.linkrows{margin-top:11px;padding-top:11px;border-top:1px dashed var(--line);}
.devlink{
  display:flex;align-items:baseline;gap:8px;font-size:11.5px;line-height:1.5;
}
.linkrows .devlink + .devlink{margin-top:5px;}
.devlink .k{color:var(--ink3);flex:none;}
.devlink .v{color:var(--ink2);}
.devlink .v b{font-weight:650;}
.devlink.ok .v b{color:#2f8f4e;}
.devlink.bad .v{color:#c22a3d;}
.devlink.bad .v b{color:#c22a3d;}

/* ══════════ 运行模式卡 ══════════ */
.mode-card{padding:14px 15px 13px;border-color:#dff0e5;background:linear-gradient(180deg,#fbfefc,#fff);}
.mode-card.is-manual{border-color:#f6e2c4;background:linear-gradient(180deg,#fffdf7,#fff);}
.mode-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.mode-title h2{margin:0;font-size:14px;font-weight:650;}
.mode-title p{margin:2px 0 0;font-size:10.5px;color:var(--ink3);}
.seg.mode{flex:none;width:120px;}
.mode-card.is-manual .seg.mode button.on{color:var(--amber);}
.mode-note{
  margin-top:10px;padding:9px 10px;border-radius:9px;background:#f4f9f5;
  font-size:10.5px;line-height:1.55;color:var(--ink2);
}
.mode-note b{color:var(--amber);font-weight:650;}
.mode-note.warn{background:var(--amber-soft);color:#8a5c11;}
.mode-note.danger{background:var(--red-soft);color:#a01e2f;}
.mode-note.danger b{color:var(--red);}
.mode-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  margin-top:11px;padding-top:10px;border-top:1px solid #f2f7f4;
}
.mode-stats>div{display:flex;flex-direction:column;}
.mode-stats span{font-size:9.5px;color:var(--ink3);}
.mode-stats b{font-size:15px;font-weight:640;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.mode-card.is-manual .mode-stats b{color:var(--amber);}

/* ══════════ 设备模式行 / 手动操作 ══════════ */
.dev-mode{display:flex;align-items:center;gap:8px;padding:0 13px 10px;}
.seg.mini{flex:none;width:114px;background:#f4f8f5;}
.seg.mini button{font-size:10.5px;padding:4px 0;}
.dev-mode-note{font-size:9.5px;color:var(--ink3);line-height:1.4;flex:1;min-width:0;text-align:right;}
.dev-card.is-manual{border-color:#f3e3c8;}
.dev-card.is-manual .dev-mode-note{color:var(--amber);font-weight:600;}
.dev-card.is-manual .seg.mini button.on{color:var(--amber);}
.dev-manual{display:none;padding:2px 13px 11px;}
.dev-card.is-manual .dev-manual{display:block;}
.man-row{display:flex;align-items:center;gap:9px;margin-bottom:2px;}
.man-row .seg.mini{flex:1;width:auto;}
.man-label{font-size:10.5px;color:var(--ink3);flex:none;}
.man-slider{display:flex;flex-direction:column;gap:2px;}
.man-slider label{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;color:var(--ink2);}
.man-slider output{font-size:12px;font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums;}
.man-slider input{width:100%;}
.man-hint{font-size:10px;color:#a8b6ae;line-height:1.55;margin:8px 0 0;}

/* ══════════ 阀门手动面板 ══════════ */
.vpanel{padding:14px 14px 13px;}
.vpanel-grid{display:flex;flex-direction:column;gap:6px;}
.vrow{display:flex;align-items:center;gap:5px;}
.vrk{font-size:9.5px;color:var(--ink3);width:26px;flex:none;}
.vcell{
  flex:1;min-width:0;border:1px solid var(--line);background:#fafcfb;color:var(--ink3);
  font-size:9.5px;font-weight:600;padding:8px 0;border-radius:7px;cursor:pointer;
  transition:.15s;font-variant-numeric:tabular-nums;
}
.vcell:active{transform:scale(.94);}
.vcell.man{border-color:#f0dcbc;background:var(--amber-soft);color:var(--amber);}
.vcell.on{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 2px 8px rgba(47,143,78,.24);}
.vcell.on.man{background:#c98a24;border-color:#c98a24;color:#fff;}

/* ══════════ 登录闸门 ══════════ */
.gate{
  position:fixed;inset:0;z-index:999;padding:24px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(600px 340px at 20% -8%, #e7f4ec 0%, transparent 62%),
    radial-gradient(520px 300px at 100% 104%, #eef6f0 0%, transparent 58%),
    var(--bg, #f4f7f5);
}
.gate[hidden]{display:none !important;}
.gate-card{
  width:100%;max-width:344px;background:#fff;border:1px solid #e5ece8;
  border-radius:18px;padding:26px 22px 20px;text-align:center;
  box-shadow:0 1px 2px rgba(16,40,28,.05), 0 16px 40px -22px rgba(16,40,28,.35);
}
.gate-logo{
  width:44px;height:44px;margin:0 auto 12px;border-radius:13px;
  background:#eaf5ee;color:#2f7d52;display:grid;place-items:center;
}
.gate-logo svg{width:26px;height:26px;}
.gate-card h1{font-size:16px;font-weight:650;letter-spacing:-.01em;margin:0;}
.gate-card>p{margin:5px 0 18px;font-size:11.5px;color:#93a29a;}
.gate-card input{
  width:100%;padding:10px 12px;margin-bottom:10px;border:1px solid #e5ece8;
  border-radius:10px;background:#fcfdfc;font:inherit;font-size:13px;color:#16211b;
  outline:none;transition:.15s;text-align:left;
}
.gate-card input:focus{border-color:#3f9264;background:#fff;box-shadow:0 0 0 3px rgba(63,146,100,.11);}
.gate-card button{
  width:100%;padding:11px;margin-top:4px;border:0;border-radius:10px;
  background:#2f7d52;color:#fff;font:inherit;font-size:13.5px;font-weight:620;
  cursor:pointer;transition:.15s;
}
.gate-card button:active{transform:translateY(1px);background:#276845;}
.gate-card button:disabled{opacity:.6;}
.gate-err{
  margin:0 0 10px;padding:8px 10px;border-radius:9px;text-align:left;
  background:#fdeef0;color:#c22a3d;font-size:11.5px;
}
.gate-err[hidden]{display:none;}
.gate-foot{margin-top:14px;font-size:10.5px;color:#a8b6ae;line-height:1.6;}