:root{
  --bg:#07111d;--panel:#0b1724;--panel2:#0f2133;--line:#203247;--text:#f5f7fb;--muted:#9ca8b8;
  --green:#36ff83;--yellow:#ffe766;--red:#ff5e73;--blue:#2769f1;--cyan:#11c8e8;
}
*{box-sizing:border-box}
body{margin:0;background:
  radial-gradient(circle at 20% 10%,rgba(20,130,255,.22),transparent 32%),
  radial-gradient(circle at 80% 0%,rgba(12,255,140,.12),transparent 30%),
  var(--bg);color:var(--text);font-family:Arial,'Noto Sans Thai',sans-serif}
button,input,select{font:inherit}
.loginPage{min-height:100vh;display:grid;place-items:center;padding:22px}
.loginCard{width:min(420px,100%);background:rgba(8,18,31,.88);border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:0 20px 80px rgba(0,0,0,.45)}
.loginCard input{width:100%;margin:10px 0;padding:15px;border-radius:16px;border:1px solid #29415a;background:#0a1522;color:white}
.primary,.blue{border:0;border-radius:16px;padding:14px 18px;font-weight:900;cursor:pointer;background:linear-gradient(135deg,#3a7bff,#1052e9);color:white}
.primary{width:100%;margin-top:12px}
.err{color:var(--red);margin:8px 0}.hint,.muted{color:var(--muted)}
.appShell{max-width:1180px;margin:auto;padding:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:20px 8px}
.brand{display:flex;align-items:baseline;gap:0;font-weight:900;font-size:clamp(30px,6vw,54px);letter-spacing:-2px}
.brand b{font-size:clamp(20px,3vw,34px);letter-spacing:-1px;margin-left:18px}
.w{color:var(--green)}.t{color:#ff4e72}.r{color:#59a7ff}.T{color:#ffe766}
.topActions{display:flex;gap:10px;align-items:center}.pill{display:flex;gap:8px;align-items:center;border-radius:999px;padding:10px 16px;border:1px solid var(--line);font-weight:900}
.ok{color:var(--green);background:rgba(31,255,124,.08)}.bad{color:var(--red);background:rgba(255,92,114,.08)}
.iconBtn{background:#111e2d;color:white;border:1px solid var(--line);border-radius:14px;padding:11px}
.glass,.card{background:linear-gradient(180deg,rgba(13,28,43,.94),rgba(7,15,25,.96));border:1px solid var(--line);box-shadow:0 16px 50px rgba(0,0,0,.28)}
.stationPanel{border-radius:28px;padding:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.stationPanel select{padding:13px 16px;border-radius:16px;background:#102033;color:white;border:1px solid var(--line);min-width:180px}
.toggle{color:var(--muted);display:flex;align-items:center;gap:6px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{border-radius:28px;padding:24px;min-height:190px}
.cardTitle{display:flex;gap:10px;align-items:center;font-size:26px;font-weight:900;margin-bottom:18px}
.levelCard{grid-row:span 2}.bigLevel{text-align:center;font-size:clamp(58px,12vw,116px);font-weight:900;text-shadow:0 0 28px rgba(42,255,140,.35)}
.bigLevel span{font-size:.45em}.green{color:var(--green)}.yellow{color:var(--yellow)}.red{color:var(--red)}.white{color:#fff}
.bar{height:22px;background:#1a2635;border:1px solid #324456;border-radius:999px;overflow:hidden}.barFill{height:100%;border-radius:999px}.barFill.green{background:var(--green)}.barFill.yellow{background:var(--yellow)}.barFill.red{background:var(--red)}
.stateBadge{display:inline-block;margin-top:18px;padding:10px 16px;border-radius:16px;background:rgba(255,255,255,.06);font-weight:900}
.statusRow{display:flex;justify-content:space-between;gap:14px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:22px}
.statusRow strong{font-size:28px}
.setRow{display:grid;grid-template-columns:1fr 74px 100px 74px;gap:12px;align-items:center;margin:16px 0;font-size:21px}
.setRow button{height:58px;border-radius:20px;border:1px solid #1b6b82;background:#113f52;color:white;font-weight:900}.setRow svg{width:22px;height:22px}.setRow b{text-align:center;background:#121b2a;border:1px solid #2b394b;border-radius:20px;padding:15px;font-size:28px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.seg button{border:1px solid var(--line);background:#111c2b;color:white;border-radius:16px;padding:14px;font-weight:900}.seg .active{background:linear-gradient(135deg,#39ff86,#0b9b58);color:#06140c}
.pumpBtn{width:100%;border:0;border-radius:22px;padding:24px;font-size:30px;font-weight:900;color:white}.pumpBtn.off{background:#3b4656}.pumpBtn.on{background:linear-gradient(135deg,#38ff82,#119856)}.pumpBtn:disabled{opacity:.45}
.chartCard{grid-column:span 2}
.alarm{display:flex;gap:12px;align-items:center;font-size:22px;font-weight:900;padding:18px;border-radius:20px;border:1px solid var(--line)}.alarm.ok{color:var(--green);background:rgba(54,255,131,.08)}.alarm.warn{color:var(--yellow);background:rgba(255,231,102,.08)}.alarm.bad{color:var(--red);background:rgba(255,94,115,.08)}
.mini{display:grid;gap:12px;margin-top:18px;color:var(--muted)}
@media(max-width:780px){
  .appShell{padding:14px}.topbar{align-items:flex-start}.grid{grid-template-columns:1fr}.chartCard{grid-column:span 1}
  .stationPanel{display:grid}.statusRow{font-size:18px}.statusRow strong{font-size:23px}.setRow{grid-template-columns:1fr 58px 86px 58px}
  .brand b{margin-left:10px}.pill{padding:8px 10px}
}