:root{--bd:#6b1a2a;--bm:#8b2439;--bb:#2e86c1;--teal:#17a589;--bg:#f0f4f8;--card:#fff;--text:#1a2b3c;--mu:#7f8c8d;--border:#dce6ef;--low:#e74c3c;--lowbg:#fdecea;--ok:#27ae60;--okbg:#eafaf1;--hi:#e67e22;--hibg:#fef5ec;--r:16px;--rs:10px;--gold:#c9a96e;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html{background:var(--bd);}body{font-family:'DM Sans',sans-serif;background:var(--bd);color:var(--text);min-height:100vh;padding-bottom:84px;}
.header{background:linear-gradient(135deg,var(--bd),var(--bm));color:white;padding:48px 16px 14px;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(107,26,42,.3);}
.header-inner{display:flex;align-items:center;justify-content:space-between;}
.header-left{display:flex;align-items:center;gap:10px;}

.header-club{font-size:11px;font-weight:700;color:var(--gold);letter-spacing:.8px;text-transform:uppercase;line-height:1;}
.header-app{font-size:17px;font-weight:700;color:white;line-height:1.2;}
.sync-row{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(255,255,255,.7);}
.sdot{width:9px;height:9px;border-radius:50%;background:#aaa;transition:background .3s;}
.sdot.ok{background:#2ecc71;}.sdot.sync{background:#f39c12;animation:pu .8s infinite;}.sdot.err{background:#e74c3c;}
@keyframes pu{0%,100%{opacity:1}50%{opacity:.3}}
.screen{display:none;padding:16px;background:var(--bg);min-height:100vh;}.modal{background:white;}.screen.active{display:block;}
.card{background:var(--card);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:0 2px 8px rgba(10,61,98,.07);}
.ct{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px;}
.ppills{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;scrollbar-width:none;}
.ppills::-webkit-scrollbar{display:none;}
.pill{flex-shrink:0;background:white;border:2px solid var(--border);border-radius:20px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;}
.pill.active{background:var(--bd);border-color:var(--bd);color:white;}
.pill.add{border-style:dashed;color:var(--mu);}
.daynav{display:flex;align-items:center;justify-content:space-between;background:white;border-radius:var(--rs);padding:10px 14px;margin-bottom:14px;box-shadow:0 2px 6px rgba(10,61,98,.06);}
.daynav-arrow{width:36px;height:36px;border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s;background:var(--bg);}
.daynav-arrow.disabled{opacity:.3;pointer-events:none;}
.daynav-center{text-align:center;cursor:pointer;flex:1;padding:0 10px;}
.daynav-date{font-size:16px;font-weight:700;color:var(--bd);}
.daynav-sub{font-size:11px;color:var(--mu);margin-top:1px;}
.cal-overlay{position:fixed;inset:0;background:rgba(107,26,42,.7);z-index:400;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;padding:20px;}
.cal-overlay.open{opacity:1;pointer-events:all;}
.cal-box{background:white;border-radius:var(--r);padding:20px;width:100%;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,.2);}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.cal-month{font-size:17px;font-weight:700;color:var(--bd);}
.cal-nav{width:32px;height:32px;border:none;background:var(--bg);border-radius:50%;cursor:pointer;font-size:16px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-dow{text-align:center;font-size:11px;font-weight:700;color:var(--mu);padding:4px 0;}
.cal-day{text-align:center;padding:6px 2px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;position:relative;transition:all .15s;}
.cal-day.today{font-weight:700;color:var(--bd);}
.cal-day.selected{background:var(--bd);color:white;}
.cal-day.future{color:var(--border);pointer-events:none;}
.cal-day.empty{pointer-events:none;}
.cal-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);margin:2px auto 0;}
.cal-day.selected .cal-dot{background:rgba(255,255,255,.7);}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.si{background:var(--card);border-radius:var(--rs);padding:14px;box-shadow:0 2px 6px rgba(10,61,98,.06);}
.si.ok{border-left:3px solid var(--ok);}.si.low{border-left:3px solid var(--low);}.si.high{border-left:3px solid var(--hi);}.si.unk{border-left:3px solid var(--border);}
.si-lbl{font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px;}
.si-val{font-size:26px;font-weight:700;font-family:'DM Mono',monospace;line-height:1;}
.si.ok .si-val{color:var(--ok);}.si.low .si-val{color:var(--low);}.si.high .si-val{color:var(--hi);}.si.unk .si-val{color:var(--mu);font-size:18px;}
.si-unit{font-size:11px;color:var(--mu);margin-top:2px;}
.si-bar{height:4px;border-radius:2px;margin-top:8px;background:var(--border);overflow:hidden;}
.si-fill{height:100%;border-radius:2px;}
.si.ok .si-fill{background:var(--ok);}.si.low .si-fill{background:var(--low);}.si.high .si-fill{background:var(--hi);}
.day-summary{background:var(--card);border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:0 2px 8px rgba(10,61,98,.07);}
.ds-title{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px;}
.ds-entry{border-left:3px solid var(--bd);padding:10px 12px;border-radius:0 var(--rs) var(--rs) 0;background:var(--bg);margin-bottom:8px;}
.ds-entry:last-child{margin-bottom:0;}
.ds-who{font-size:13px;font-weight:700;color:var(--bd);}
.ds-time{font-size:11px;color:var(--mu);}
.ds-chems{font-size:13px;margin-top:6px;}
.ds-notes{font-size:13px;color:var(--mu);font-style:italic;margin-top:4px;}
.ds-nodata{text-align:center;padding:20px;color:var(--mu);font-size:14px;}
.le{border-left:3px solid #aed6f1;padding:12px 14px;background:var(--card);border-radius:0 var(--rs) var(--rs) 0;margin-bottom:10px;box-shadow:0 1px 4px rgba(10,61,98,.05);}
.le-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}
.le-pool{font-size:11px;font-weight:700;color:var(--bb);text-transform:uppercase;letter-spacing:.5px;}
.le-date{font-size:12px;color:var(--mu);}
.le-who{font-size:12px;font-weight:600;color:var(--bd);margin-bottom:6px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;}
.chip{border-radius:6px;padding:3px 8px;font-size:12px;font-family:'DM Mono',monospace;font-weight:500;background:var(--bg);}
.chip.ok{background:var(--okbg);color:var(--ok);}.chip.low{background:var(--lowbg);color:var(--low);}.chip.high{background:var(--hibg);color:var(--hi);}
.le-chems{margin-top:8px;font-size:13px;}
.le-notes{margin-top:6px;font-size:13px;color:var(--mu);font-style:italic;}
.btn{display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--rs);padding:14px 20px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;transition:all .15s;width:100%;}
.btn-p{background:var(--bd);color:white;}.btn-p:active{transform:scale(.98);}
.btn-t{background:var(--teal);color:white;}
.btn-s{background:var(--bg);color:var(--bd);border:2px solid var(--border);}
.fab{position:fixed;bottom:90px;right:20px;width:56px;height:56px;background:var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(23,165,137,.4);cursor:pointer;z-index:200;border:none;font-size:28px;color:white;transition:transform .15s;}
.fab:active{transform:scale(.92);}
.fg{margin-bottom:16px;}
.fl{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px;display:block;}
.fi{width:100%;border:2px solid var(--border);border-radius:var(--rs);padding:12px 14px;font-size:16px;font-family:'DM Sans',sans-serif;background:white;color:var(--text);transition:border-color .2s;-webkit-appearance:none;}
.fi:focus{outline:none;border-color:var(--bb);}
.fhint{font-size:11px;color:var(--mu);margin-top:4px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
select.fi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f8c8d' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.ccard{background:var(--card);border-radius:var(--r);padding:22px;margin-bottom:14px;box-shadow:0 2px 8px rgba(10,61,98,.07);}
.cname{font-size:19px;font-weight:700;color:var(--bd);margin-bottom:6px;}
.cdesc{font-size:14px;color:var(--mu);margin-bottom:22px;line-height:1.5;}
.cfields{display:flex;flex-direction:column;gap:16px;}
.cfield label{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.7px;display:block;margin-bottom:7px;}
.cfield input,.cfield select{width:100%;border:2px solid var(--border);border-radius:var(--rs);padding:14px;font-size:18px;font-family:'DM Mono',monospace;font-weight:500;background:white;color:var(--text);-webkit-appearance:none;transition:border-color .2s;}
.cfield input:focus,.cfield select:focus{outline:none;border-color:var(--bb);}
.cfield .chint{font-size:11px;color:var(--mu);margin-top:5px;}
.cfield .ctarget{display:inline-block;background:#eaf4fb;color:var(--bb);border-radius:6px;padding:3px 9px;font-size:11px;font-weight:700;margin-top:6px;}
.cbtn{margin-top:20px;background:var(--bd);color:white;border:none;border-radius:var(--rs);padding:16px;font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;width:100%;transition:all .15s;}
.cbtn:active{transform:scale(.98);}
.cresult{margin-top:16px;background:linear-gradient(135deg,var(--bd),var(--bm));color:white;border-radius:var(--r);padding:24px;text-align:center;}
.cr-lbl{font-size:12px;opacity:.75;margin-bottom:6px;text-transform:uppercase;letter-spacing:.7px;}
.cr-amt{font-size:44px;font-weight:700;font-family:'DM Mono',monospace;line-height:1;}
.cr-unit{font-size:14px;opacity:.8;margin-top:6px;font-weight:600;}
.cr-note{font-size:13px;opacity:.75;margin-top:14px;line-height:1.6;border-top:1px solid rgba(255,255,255,.2);padding-top:14px;white-space:pre-line;}
.cok{margin-top:14px;padding:14px 16px;background:var(--okbg);border-radius:var(--rs);color:var(--ok);font-weight:600;line-height:1.5;white-space:pre-line;}
.cerr{margin-top:14px;padding:14px 16px;background:var(--lowbg);border-radius:var(--rs);color:var(--low);font-weight:600;}
.ctabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;}
.ctab{background:white;border:2px solid var(--border);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}
.ctab.active{background:var(--bd);border-color:var(--bd);color:white;}
.rtable{width:100%;border-collapse:collapse;}
.rtable th{text-align:left;font-size:11px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;padding:8px 10px;border-bottom:2px solid var(--border);}
.rtable td{padding:12px 10px;font-size:14px;border-bottom:1px solid var(--border);}
.rtable tr:last-child td{border-bottom:none;}
.rp{font-weight:700;color:var(--bd);}.rr{font-family:'DM Mono',monospace;font-weight:600;color:var(--teal);}.ri{font-family:'DM Mono',monospace;font-size:13px;color:var(--mu);}
.overlay{position:fixed;inset:0;background:rgba(107,26,42,.7);z-index:300;display:flex;align-items:flex-end;opacity:0;pointer-events:none;transition:opacity .25s;-webkit-overflow-scrolling:touch;}
.overlay.open{opacity:1;pointer-events:all;background:rgba(107,26,42,.6);}
.modal{background:white;border-radius:24px 24px 0 0;padding:24px 20px 44px;width:100%;max-height:92vh;overflow-y:auto;transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);}
.overlay.open .modal{transform:translateY(0);}
.mhandle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 20px;}
.mtitle{font-size:20px;font-weight:700;margin-bottom:20px;color:var(--bd);}
.div{height:1px;background:var(--border);margin:16px 0;}
.ibox{background:#eaf4fb;border-left:3px solid var(--bb);border-radius:0 8px 8px 0;padding:12px 14px;font-size:13px;color:var(--bd);line-height:1.5;margin-bottom:16px;}
.nchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.nchip{background:var(--bg);border:2px solid var(--border);border-radius:20px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;}
.nchip.sel{background:var(--bd);border-color:var(--bd);color:white;}
.ei{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border);}
.ei:last-child{border-bottom:none;}
.ei-name{font-weight:600;font-size:15px;}.ei-det{font-size:13px;color:var(--mu);margin-top:2px;}
.estatus{font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;}
.estatus.ok{background:var(--okbg);color:var(--ok);}.estatus.needs{background:var(--hibg);color:var(--hi);}.estatus.replace{background:var(--lowbg);color:var(--low);}
.bnav{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid var(--border);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom);}
.ni{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 0;cursor:pointer;color:var(--mu);gap:3px;transition:color .2s;}
.ni.active{color:var(--bd);}
.ni svg{width:22px;height:22px;}.ni span{font-size:11px;font-weight:600;}
.stitle{font-size:18px;font-weight:700;color:var(--bd);margin-bottom:6px;}
.ssub{font-size:13px;color:var(--mu);margin-bottom:16px;}
.empty{text-align:center;padding:40px 20px;color:var(--mu);}
.empty .ico{font-size:48px;margin-bottom:12px;}

.chat-msg{background:var(--card);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:0 2px 6px rgba(10,61,98,.06);}
.chat-msg-who{font-size:13px;font-weight:700;color:var(--bd);margin-bottom:2px;}
.chat-msg-time{font-size:11px;color:var(--mu);}
.chat-msg-text{font-size:15px;margin-top:6px;line-height:1.5;}
.chat-input-bar{position:fixed;bottom:68px;left:0;right:0;background:white;border-top:1px solid var(--border);padding:10px 12px;display:none;gap:8px;align-items:center;z-index:99;}
.chat-input-bar.visible{display:flex;}
.chat-input{flex:1;border:2px solid var(--border);border-radius:20px;padding:10px 16px;font-size:15px;font-family:"DM Sans",sans-serif;background:white;color:var(--text);outline:none;}
.chat-input:focus{border-color:var(--bb);}
.chat-send{width:40px;height:40px;border-radius:50%;background:var(--teal);border:none;color:white;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.chat-who-bar{background:white;border-top:1px solid var(--border);padding:10px 12px;position:fixed;bottom:68px;left:0;right:0;z-index:99;display:none;}
.chat-who-bar.visible{display:block;}
.chat-who-label{font-size:12px;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;}
.chat-badge{background:var(--low);color:white;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:4px;vertical-align:middle;}

.name-overlay{position:fixed;inset:0;background:linear-gradient(135deg,var(--bd),var(--bm));z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;}
.name-box{background:white;border-radius:24px;padding:32px 24px;width:100%;max-width:360px;text-align:center;}
.name-box-logo{font-size:48px;margin-bottom:12px;}
.name-box-club{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;}
.name-box-title{font-size:22px;font-weight:700;color:var(--bd);margin-bottom:6px;}
.name-box-sub{font-size:14px;color:var(--mu);margin-bottom:24px;line-height:1.5;}
.name-box input{width:100%;border:2px solid var(--border);border-radius:var(--rs);padding:14px;font-size:18px;font-family:"DM Sans",sans-serif;text-align:center;color:var(--text);outline:none;margin-bottom:14px;}
.name-box input:focus{border-color:var(--bd);}
.name-box button{width:100%;background:var(--bd);color:white;border:none;border-radius:var(--rs);padding:15px;font-size:16px;font-weight:700;font-family:"DM Sans",sans-serif;cursor:pointer;}

.rec-tab{flex:1;text-align:center;padding:10px;border-radius:var(--rs);font-size:14px;font-weight:600;cursor:pointer;color:var(--mu);transition:all .2s;}
.rec-tab.active{background:var(--bd);color:white;}

.header-weather{display:flex;align-items:center;gap:5px;font-size:13px;color:rgba(255,255,255,.85);font-weight:600;}
.header-weather .w-icon{font-size:16px;}
.header-weather .w-temp{font-size:14px;font-weight:700;color:white;}

/* =========================
   LIVE MONITORING DASHBOARD
   ========================= */

.live-page{
  max-width:1180px;
  margin:0 auto;
  padding:24px 20px 110px;
}

.live-page-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
}

.live-eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--mu);
  margin-bottom:4px;
}

.live-page-heading h1{
  margin:0;
  font-size:30px;
  line-height:1.1;
  color:var(--bd);
}

.live-connection{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#e9f8ef;
  color:#168348;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.live-connection-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#22a85a;
  box-shadow:0 0 0 4px rgba(34,168,90,.13);
}

.live-connection.offline{
  background:#edf0f3;
  color:#6d7680;
}

.live-connection.offline .live-connection-dot{
  background:#8c949c;
  box-shadow:0 0 0 4px rgba(140,148,156,.13);
}

.live-status-card{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  padding:22px;
  margin-bottom:26px;
  border:1px solid #dce3e8;
  background:#fff;
  box-shadow:0 10px 30px rgba(27,39,51,.08);
}

.live-status-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:7px;
  background:#89939d;
}

.live-status-card.normal::before{
  background:#23a55a;
}

.live-status-card.warning::before{
  background:#dc8b16;
}

.live-status-card.critical::before{
  background:#c93636;
}

.live-status-card.offline::before{
  background:#89939d;
}

.live-status-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.13em;
  color:var(--mu);
  margin-bottom:14px;
}

.live-status-main{
  display:flex;
  align-items:center;
  gap:16px;
}

.live-status-icon{
  flex:0 0 auto;
  width:54px;
  height:54px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#edf0f3;
  color:#6c7680;
  font-size:27px;
  font-weight:900;
}

.live-status-card.normal .live-status-icon{
  background:#e9f8ef;
  color:#168348;
}

.live-status-card.warning .live-status-icon{
  background:#fff4df;
  color:#b36a00;
}

.live-status-card.critical .live-status-icon{
  background:#fdeaea;
  color:#b32626;
}

.live-status-title{
  font-size:26px;
  font-weight:800;
  line-height:1.05;
  color:var(--bd);
  margin-bottom:5px;
}

.live-status-message{
  font-size:14px;
  line-height:1.45;
  color:var(--mu);
}

.live-status-time{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid #edf0f2;
  font-size:12px;
  color:var(--mu);
}

.live-section-title{
  margin:0 2px 10px;
  font-size:13px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bd);
}

.live-card-grid{
  display:grid;
  gap:14px;
  margin-bottom:26px;
}

.live-chemistry-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.live-equipment-grid,
.live-supply-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.live-reading-card,
.live-info-card,
.live-diagnostic-card,
.live-trend-card{
  border:1px solid #dce3e8;
  background:#fff;
  box-shadow:0 8px 22px rgba(27,39,51,.06);
}

.live-reading-card{
  border-radius:19px;
  padding:18px;
  min-height:154px;
}

.live-reading-card.normal{
  border-color:#bfe7cf;
  background:linear-gradient(180deg,#fff 0%,#f5fcf8 100%);
}

.live-reading-card.warning{
  border-color:#efce96;
  background:linear-gradient(180deg,#fff 0%,#fff9ee 100%);
}

.live-reading-card.critical{
  border-color:#efb3b3;
  background:linear-gradient(180deg,#fff 0%,#fff5f5 100%);
}

.live-reading-card.offline{
  border-color:#dce3e8;
}

.live-reading-disabled{
  opacity:.58;
}

.live-reading-top,
.live-info-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.live-reading-label,
.live-info-label{
  font-size:14px;
  font-weight:800;
  color:var(--bd);
}

.live-reading-state,
.live-info-status{
  font-size:11px;
  font-weight:800;
  color:var(--mu);
  text-align:right;
  white-space:nowrap;
}

.live-reading-card.normal .live-reading-state{
  color:#168348;
}

.live-reading-card.warning .live-reading-state{
  color:#b36a00;
}

.live-reading-card.critical .live-reading-state{
  color:#b32626;
}

.live-reading-value-row,
.live-supply-value-row{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-top:16px;
}

.live-reading-value,
.live-info-value{
  font-size:42px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--bd);
}

.live-reading-unit{
  font-size:14px;
  font-weight:700;
  color:var(--mu);
}

.live-reading-target,
.live-info-detail{
  margin-top:12px;
  font-size:12px;
  line-height:1.4;
  color:var(--mu);
}

/* pH trend */

.live-trend-card{
  min-height:220px;
  border-radius:19px;
  padding:22px;
  margin-bottom:26px;
}

.live-placeholder-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:
    linear-gradient(
      rgba(240,244,248,.72),
      rgba(240,244,248,.72)
    ),
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 79px,
      #dfe6ec 80px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 49px,
      #dfe6ec 50px
    ),
    #fff;
}

.live-placeholder-content{
  display:flex;
  align-items:center;
  gap:14px;
}

.live-placeholder-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid #dce3e8;
  color:var(--bd);
  font-size:28px;
  font-weight:900;
  box-shadow:0 5px 16px rgba(27,39,51,.06);
}

.live-placeholder-title{
  font-size:17px;
  font-weight:800;
  color:var(--bd);
  margin-bottom:4px;
}

.live-placeholder-text{
  max-width:520px;
  font-size:13px;
  line-height:1.45;
  color:var(--mu);
}

.live-coming-soon-badge{
  flex:0 0 auto;
  padding:7px 11px;
  border-radius:999px;
  background:#fff;
  border:1px solid #dce3e8;
  color:var(--mu);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

/* Equipment and chemical supply */

.live-info-card{
  min-height:154px;
  border-radius:19px;
  padding:18px;
}

.live-supply-bar{
  height:8px;
  margin-top:14px;
  overflow:hidden;
  border-radius:999px;
  background:#e3e9ee;
}

.live-supply-fill{
  height:100%;
  border-radius:inherit;
  background:var(--bd);
}

/* Diagnostics */

.live-diagnostics-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:26px;
}

.live-diagnostic-card{
  min-height:118px;
  border-radius:19px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.live-diagnostic-card-wide{
  grid-column:span 4;
  min-height:108px;
}

.live-diagnostic-label{
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mu);
}

.live-diagnostic-value{
  margin-top:12px;
  font-size:16px;
  line-height:1.3;
  color:var(--bd);
}

.live-diagnostic-note{
  margin-top:6px;
  font-size:11px;
  line-height:1.35;
  color:var(--mu);
}

/* Supports the old diagnostics layout if cached HTML briefly loads */

.live-diagnostics-card{
  border-radius:19px;
  padding:2px 18px;
  border:1px solid #dce3e8;
  background:#fff;
  box-shadow:0 8px 22px rgba(27,39,51,.06);
}

.live-diagnostic-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 0;
  font-size:14px;
  color:var(--mu);
}

.live-diagnostic-row + .live-diagnostic-row{
  border-top:1px solid #edf0f2;
}

.live-diagnostic-row strong{
  color:var(--bd);
  text-align:right;
}

/* Tablet */

@media (max-width:900px){
  .live-diagnostics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .live-diagnostic-card-wide{
    grid-column:span 2;
  }
}

/* Mobile */

@media (max-width:760px){
  .live-page{
    padding:18px 0 100px;
  }

  .live-page-heading{
    align-items:center;
    margin-bottom:16px;
  }

  .live-page-heading h1{
    font-size:25px;
  }

  .live-eyebrow{
    font-size:10px;
  }

  .live-connection{
    padding:7px 10px;
    font-size:12px;
  }

  .live-status-card{
    padding:18px;
    margin-bottom:22px;
  }

  .live-status-title{
    font-size:21px;
  }

  .live-status-message{
    font-size:13px;
  }

  .live-chemistry-grid{
    grid-template-columns:1fr;
  }

  .live-equipment-grid,
  .live-supply-grid{
    grid-template-columns:1fr;
  }

  .live-card-grid{
    gap:10px;
    margin-bottom:22px;
  }

  .live-reading-card,
  .live-info-card{
    min-height:138px;
  }

  .live-reading-value,
  .live-info-value{
    font-size:38px;
  }

  .live-trend-card{
    min-height:190px;
    padding:18px;
    margin-bottom:22px;
  }

  .live-placeholder-card{
    align-items:flex-start;
    flex-direction:column;
  }

  .live-coming-soon-badge{
    align-self:flex-start;
  }

  .live-diagnostics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .live-diagnostic-card{
    min-height:108px;
    padding:15px;
  }

  .live-diagnostic-card-wide{
    grid-column:span 2;
  }
}

@media (max-width:420px){
  .live-status-main{
    align-items:flex-start;
  }

  .live-status-icon{
    width:48px;
    height:48px;
    border-radius:15px;
  }

  .live-diagnostic-value{
    font-size:14px;
  }
}