:root{color-scheme:light;--canvas:#f5f5f7;--surface:#fff;--ink:#1d1d1f;--muted:#6e6e76;--quiet:#92929a;--line:#e6e6ea;--green:#397c55;--green-soft:#edf6ef;--blue:#3c95c5;--amber:#ce9651;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-size:14px;line-height:1.5}button,input{font:inherit}button,a{color:inherit}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #1872ce66;outline-offset:3px}.page-shell{max-width:1320px;margin:auto;padding:0 38px 34px}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;width:37px;height:37px;place-items:center;border-radius:12px;background:#e8f3ea;color:var(--green);font-size:23px}.brand strong,.brand small{display:block}.brand strong{font-size:14px;letter-spacing:-.02em}.brand small{color:var(--muted);font-size:10px}.back-link{color:#56565f;font-size:12px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:31px 0 21px}.eyebrow{margin:0 0 5px;color:var(--quiet);font-size:9px;font-weight:700;letter-spacing:.11em}.page-heading h1{margin:0;font-size:clamp(28px,4vw,38px);font-weight:650;letter-spacing:-.055em;line-height:1.12}.subtitle{margin:8px 0 0;color:var(--muted);font-size:12px}.connection-badge,.device-chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.connection-badge{padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:white;color:var(--muted);font-size:11px;font-weight:600}.connection-badge.is-live{border-color:#d6e9dc;background:#f6fbf7;color:#2c744c}.connection-badge.is-error{border-color:#efd5d5;background:#fff8f8;color:#a33d3d}.status-dot,.device-dot{width:7px;height:7px;border-radius:50%;background:#aaa}.is-live .status-dot{background:#2eaa69;box-shadow:0 0 0 4px #ddf1e4}.is-error .status-dot{background:#ce5d5d}.connection-panel,.scene-panel,.status-panel,.schedule-panel{border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 3px 14px #1c1c2206}.connection-panel{display:grid;grid-template-columns:minmax(210px,.72fr) minmax(0,1.8fr);gap:24px;padding:19px 21px;margin-bottom:16px}.connection-copy h2,.panel-heading h2{margin:0;font-size:15px;font-weight:650;letter-spacing:-.025em}.connection-copy p:last-child{max-width:250px;margin:7px 0 0;color:var(--muted);font-size:11px}.connection-form{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:11px;align-content:center}.field{display:grid;gap:5px}.field span{color:#606068;font-size:10px;font-weight:600}.field input{width:100%;height:36px;padding:0 10px;border:1px solid #dcdce1;border-radius:9px;background:#fff;color:var(--ink);font-size:11px}.field input:focus{border-color:#5e9a73}.form-actions{display:flex;align-items:center;gap:8px;grid-column:1/-1}.button{min-height:35px;padding:0 14px;border:1px solid transparent;border-radius:9px;cursor:pointer;font-size:11px;font-weight:650}.button:disabled{cursor:not-allowed;opacity:.5}.button-primary{background:#26754d;color:#fff}.button-primary:hover:not(:disabled){background:#1f6541}.button-secondary{border-color:#e1e1e5;background:#fff;color:#55555d}.form-actions span{margin-left:3px;color:var(--quiet);font-size:10px}.device-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.75fr);gap:16px}.scene-panel{min-width:0;padding:19px 20px 12px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading .eyebrow{margin-bottom:3px}.device-chip{padding:6px 9px;border:1px solid #e7e7ea;border-radius:99px;color:#62626a;font-size:9px}.device-dot{background:#53a676}.scene-wrap{position:relative;overflow:hidden;margin-top:4px;border:1px solid #edf0ed;border-radius:14px;background:radial-gradient(ellipse at 50% 38%,#f8fbf7,#f4f6f5 65%,#eff2f1)}.device-scene{display:block;width:100%;height:auto;max-height:580px}.scene-floor{fill:#e7ece8}.lamp{filter:drop-shadow(0 5px 6px #25252512)}.esp32-module{filter:drop-shadow(0 5px 8px #253a301c)}.light-rays{opacity:.12;transition:opacity .24s ease}.light-on .light-rays{opacity:.75;animation:rayPulse 2.8s ease-in-out infinite}.light-on #light-glow{opacity:.54!important;transition:opacity .2s ease}.leaf{transition:filter .25s ease}.light-on .leaf{filter:brightness(1.1) saturate(1.08)}.veins{pointer-events:none}.reservoir-wave{animation:waveShift 3s ease-in-out infinite}.pump-tube .water-flow{stroke:#58b8dc;stroke-dasharray:10 13;stroke-dashoffset:0;opacity:0}.pump-on .water-flow{opacity:1;animation:waterFlow .42s linear infinite}.flow-drops{opacity:0}.pump-on .flow-drops{opacity:1}.pump-on .drop-one{animation:drop 1s linear infinite}.pump-on .drop-two{animation:drop 1s .28s linear infinite}.pump-on .drop-three{animation:drop 1s .55s linear infinite}.scene-caption{fill:#787d80;font-size:11px;font-weight:700;letter-spacing:.12em}.scene-legend{position:absolute;right:15px;bottom:13px;left:15px;display:flex;justify-content:center;gap:22px;color:#66666e;font-size:10px}.scene-legend>span{display:flex;align-items:center;gap:7px}.scene-legend i{width:8px;height:8px;border-radius:50%;background:#aaa}.legend-light{background:#b6a782!important}.light-on .legend-light{background:var(--live-light,#dfbd64)!important;box-shadow:0 0 9px var(--live-light,#dfbd64)}.pump-on .legend-pump{background:#43a9d5!important;box-shadow:0 0 0 3px #d5eff8}.status-column{display:grid;grid-template-rows:1.1fr 1fr auto;gap:12px}.status-panel{padding:16px 17px}.state-icon{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;font-size:19px}.light-icon{background:#fff5de;color:#bd8a3d}.pump-icon{background:#e7f4f8;color:#438daa}.color-preview{display:flex;align-items:center;gap:10px;margin:18px 0 14px}.color-preview>span{width:37px;height:37px;border:1px solid #dedee2;border-radius:11px;background:#e4e4e7;box-shadow:inset 0 0 0 3px #fff;transition:background .14s ease,box-shadow .14s ease}.color-preview strong,.color-preview small{display:block}.color-preview strong{font-size:12px;font-variant-numeric:tabular-nums}.color-preview small{margin-top:2px;color:var(--quiet);font-size:9px}.rgb-bars{display:grid;gap:7px}.rgb-bars>div{display:grid;grid-template-columns:12px 1fr 27px;align-items:center;gap:8px}.rgb-bars>div>span{color:#77777e;font-size:9px;font-weight:700}.rgb-bars i{height:5px;overflow:hidden;border-radius:99px;background:#ededf0}.rgb-bars b{display:block;width:0;height:100%;border-radius:inherit;transition:width .18s ease}.rgb-bars strong{text-align:right;color:#62626a;font-size:9px;font-variant-numeric:tabular-nums}.rgb-bars>div:nth-child(1) b{background:#e56b67}.rgb-bars>div:nth-child(2) b{background:#65a86e}.rgb-bars>div:nth-child(3) b{background:#628cdb}.pump-status-panel p{margin:14px 0;color:var(--muted);font-size:10px;line-height:1.55}.pump-meta{display:flex;justify-content:space-between;color:var(--quiet);font-size:10px}.pump-meta strong{color:#3a3a40;font-size:11px}.water-meter{height:6px;overflow:hidden;margin-top:7px;border-radius:99px;background:#e9eff1}.water-meter span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#82cbe5,#368eb9);transition:width .3s ease}.last-message-panel{display:grid;gap:3px;padding:12px 15px}.last-message-panel strong{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.last-message-panel small{color:var(--quiet);font-size:9px}.schedule-panel{margin-top:16px;padding:19px 20px 14px}.schedule-source{padding:5px 8px;border-radius:99px;background:#f2f2f4;color:#77777f;font-size:9px}.schedule-source.is-live{background:#edf6ef;color:#34764e}.table-wrap{overflow-x:auto}table{width:100%;margin-top:13px;border-collapse:collapse;min-width:490px}th,td{padding:11px 10px;border-bottom:1px solid #eeeef0;text-align:left;font-size:11px}th{color:#898991;font-size:9px;font-weight:600}td:first-child{font-weight:700;font-variant-numeric:tabular-nums}.empty-row{text-align:center;color:var(--quiet)}.schedule-footnote{margin:10px 1px 0;color:var(--quiet);font-size:9px}.page-footer{display:flex;justify-content:space-between;gap:12px;padding:19px 1px 0;color:#96969d;font-size:9px}@keyframes waterFlow{to{stroke-dashoffset:-23}}@keyframes drop{0%{transform:translateY(-5px);opacity:0}35%{opacity:1}100%{transform:translateY(17px);opacity:0}}@keyframes rayPulse{50%{opacity:.4}}@keyframes waveShift{50%{transform:translateX(8px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media(max-width:920px){.page-shell{padding-right:24px;padding-left:24px}.device-grid{grid-template-columns:minmax(0,1.35fr) minmax(240px,.8fr)}.connection-panel{grid-template-columns:1fr;gap:13px}.connection-copy p:last-child{max-width:none}}@media(max-width:680px){.page-shell{padding:0 15px 25px}.topbar{height:60px}.page-heading{align-items:flex-start;flex-direction:column;padding:23px 0 17px}.connection-badge{align-self:flex-start}.connection-panel{padding:15px}.connection-form{grid-template-columns:1fr 1fr}.field-wide{grid-column:1/-1}.form-actions{flex-wrap:wrap}.form-actions span{width:100%;margin:2px 0 0}.device-grid{grid-template-columns:1fr}.scene-panel{padding:15px 12px 11px}.device-chip{font-size:8px}.status-column{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.light-status-panel{grid-row:span 2}.last-message-panel{grid-column:1/-1}.schedule-panel{padding:15px 12px}.page-footer{font-size:8px}.back-link{font-size:10px}}@media(max-width:390px){.status-column{grid-template-columns:1fr}.light-status-panel{grid-row:auto}.last-message-panel{grid-column:auto}.scene-legend{gap:12px;font-size:9px}}

.scene-wrap{display:flex;flex-direction:column}.scene-legend{position:static;padding:7px 0 2px}.water-low #reservoir-fill{filter:hue-rotate(158deg) saturate(1.35)}.water-low #reservoir-wave{stroke:#ffd1d1}.pump-status-panel .water-warning{min-height:15px;margin:7px 0 0;color:#a33d3d;font-size:10px;font-weight:600}.pump-status-panel .water-warning:empty{display:none}.water-low .pump-meta strong{color:#b42318}.water-low .water-meter{background:#f8e5e5}.water-low .water-meter span{background:linear-gradient(90deg,#f49a91,#cc3434)}

.profile-field{grid-column:1/-1}.field select{width:100%;height:36px;padding:0 10px;border:1px solid #dcdce1;border-radius:9px;background:#fff;color:var(--ink);font-size:11px}.field select:focus{border-color:#5e9a73;outline:3px solid #1872ce33;outline-offset:2px}
.brand-mark{overflow:hidden;background:#eaf5ee}.brand-mark img{display:block;width:25px;height:25px;object-fit:contain}
.history-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:12px;color:var(--muted);font-size:11px}.history-pagination[hidden]{display:none}.history-pagination .button{min-height:32px}

@media(max-width:680px){
  .page-shell{padding-right:14px;padding-left:14px}
  .topbar{height:66px}
  .brand strong{font-size:15px}
  .brand small,.back-link{font-size:11px}
  .page-heading h1{font-size:32px}
  .subtitle{font-size:14px}
  .connection-copy h2,.panel-heading h2{font-size:17px}
  .connection-copy p:last-child,.field span,.form-actions span{font-size:12px}
  .field input,.field select{height:42px;font-size:13px}
  .button{min-height:42px;font-size:12px}
  .device-chip{font-size:10px}
  .scene-panel,.schedule-panel{padding-right:14px;padding-left:14px}
  .scene-caption{font-size:12px}
  .scene-legend{font-size:11px}
  .status-panel{padding:16px}
  .color-preview strong,.pump-meta strong{font-size:13px}
  .color-preview small,.pump-status-panel p,.pump-meta,.last-message-panel small{font-size:11px}
  th,td{padding:12px 10px;font-size:12px}
  th{font-size:11px}
  .schedule-source,.schedule-footnote,.page-footer{font-size:10px}
}