:root{color-scheme:light dark;--bg:#f5f5f7;--panel:#fff;--panel2:#f5f5f7;--line:#e5e5ea;--text:#1d1d1f;--muted:#606068;--green:#237542;--orange:#925000;--red:#a52632;--blue:#0066cc;--accent:#0066cc;--nav-bg:#f8f8f9;--glass:#f8f8f9dc;--selected:#e4effc;--track:#767680;--shadow:0 2px 8px #00000008}
@media(prefers-color-scheme:dark){:root{--bg:#161617;--panel:#1c1c1e;--panel2:#2c2c2e;--line:#37373b;--text:#f5f5f7;--muted:#b3b3bb;--green:#77db92;--orange:#ffc17b;--red:#ff969e;--blue:#8cc5ff;--accent:#8cc5ff;--nav-bg:#222224;--glass:#222224db;--selected:#273c55;--track:#666670;--shadow:0 2px 8px #00000016}}
body{font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
aside{background:var(--nav-bg);overflow-y:auto;padding:24px 16px}
@supports(backdrop-filter:blur(18px)){aside{background:var(--glass);backdrop-filter:blur(18px) saturate(145%)}}
.brand{padding:0 12px 24px;letter-spacing:-.04em}.brand small{letter-spacing:.12em}
.nav{gap:4px}.nav button{color:var(--muted);min-height:44px;padding:8px 12px;font-weight:550}
.nav button:hover{background:var(--panel2);color:var(--text)}
.nav button.active{background:var(--selected);color:var(--accent);font-weight:650}
.nav .ico{width:20px;display:grid;place-items:center}.ico svg,.iconbtn svg{width:19px;height:19px;flex:none}
.top{gap:16px;margin-bottom:24px}.title{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.04em;line-height:1.13;margin:4px 0 8px}.eyebrow{color:var(--muted);letter-spacing:.09em}
.grid{gap:16px}.section{margin-top:24px}.card{border-radius:20px;padding:clamp(16px,2vw,24px);box-shadow:var(--shadow)}
.card h3{font-size:17px;line-height:1.25}.cardhead{flex-wrap:wrap;margin-bottom:16px}
.metric{font-size:clamp(24px,2.65vw,38px);font-weight:650;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:-.04em;overflow-wrap:anywhere}.metric.orange{color:var(--orange)}.metric.red{color:var(--red)}
.metric-label,.metric-sub{font-size:13px}.unit{font-size:.45em;white-space:nowrap}
.greenhouse{background:radial-gradient(ellipse,var(--selected),var(--panel2) 72%);border-color:var(--line)}
.zone{background:var(--panel);border-color:var(--line)}.zone strong{color:var(--green)}
.flowgrid{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}.flowbox{padding:12px 4px}.flowbox .big{font-size:clamp(15px,1.75vw,24px);margin:4px 0;overflow-wrap:anywhere}
.btn,.iconbtn,select,.tabs button{min-height:44px;border-radius:12px}.iconbtn{display:flex;align-items:center;gap:8px}
.btn{background:var(--accent);color:var(--panel);font-weight:650}.btn.secondary{background:var(--panel2);color:var(--accent)}.btn.danger{background:var(--panel2);color:var(--red)}
input,select{background:var(--panel2);border-color:var(--line)}input[type=range]{accent-color:var(--accent)}
.tabs{padding:3px;gap:2px;background:var(--panel2);border-radius:14px}.tabs button{border:0;background:transparent;color:var(--muted);min-width:44px}.tabs button.active{background:var(--panel);color:var(--accent);box-shadow:var(--shadow)}
.switch{position:relative;flex:none;background:var(--track)}.switch.on{background:var(--green)}.switch::after{content:"";position:absolute;inset:-9px 0}.switch:before{box-shadow:0 1px 3px #0003}
.rangebar,.progress{background:var(--line)}.tag,.tag.warning,.tag.critical{background:var(--panel2);border:1px solid var(--line);border-radius:999px}
.footer{color:var(--muted)}.toast{background:var(--panel);border-color:var(--line);color:var(--text);box-shadow:var(--shadow)}
button,select{transition:background-color .18s ease,color .18s ease,box-shadow .18s ease}button:enabled:active{filter:brightness(.9)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){aside{overflow:visible}.nav{padding:3px 4px 5px}.nav button{font-size:13px}.top{gap:8px}.brand{padding:0 8px 8px}}
@media(prefers-reduced-transparency:reduce){aside{background:var(--nav-bg);backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.sidebar-bottom.nav{padding:12px 0 0}
@media(max-width:700px){aside{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}.brand{grid-column:1/-1}.sidebar-bottom.nav{display:flex;padding:3px 0 5px 4px;border-top:0;border-left:1px solid var(--line);margin:0}}
.greenhouse-overview{align-self:start}
.greenhouse-scene{position:relative;isolation:isolate;overflow:hidden;border-radius:16px;background:#121519;color:#f8fafc;aspect-ratio:16/10}
.greenhouse-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.greenhouse-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(#0b111955,transparent 49%,#090b10bb);pointer-events:none}
.scene-readings{margin:0;position:absolute;inset:0;z-index:1;font-variant-numeric:tabular-nums}
.scene-reading{position:absolute;left:var(--x);top:var(--y);transform:translateX(-50%);width:max-content;max-width:30%;text-align:center;text-shadow:0 1px 5px #000,0 0 9px #000}
.scene-reading dt{font-size:clamp(10px,1vw,14px);line-height:1.2;color:#e0e5eb}
.scene-reading dd{margin:1px 0 0;font-size:clamp(14px,1.5vw,23px);font-weight:650;line-height:1.15}
.scene-reading::after{content:"";display:block;width:1px;height:var(--leader);margin:5px auto 0;background:linear-gradient(#f1f5f9b3,#f1f5f933)}
.scene-reading.inside{--x:26%;--y:23%;--leader:clamp(22px,5vw,76px)}
.scene-reading.light{--x:50%;--y:12%;--leader:clamp(18px,5vw,80px)}
.scene-reading.air{--x:75%;--y:24%;--leader:clamp(20px,5vw,78px)}
.scene-reading.soil{--x:37%;--y:81%;--leader:18px}
.scene-reading.outside{--x:72%;--y:81%;--leader:18px}
.scene-reading.soil::after,.scene-reading.outside::after{position:absolute;bottom:calc(100% + 5px);left:50%;margin:0;background:linear-gradient(#f1f5f933,#f1f5f9b3)}
@media(max-width:480px){.greenhouse-scene{aspect-ratio:1.25}.scene-reading dt{font-size:10px}.scene-reading.soil,.scene-reading.outside{--y:78%}}
:root{--motion-feedback:200ms;--motion-spring:cubic-bezier(.22,1.32,.48,1);--ambient:#23754209}
body{background:radial-gradient(ellipse at top right,var(--ambient),transparent 68%),var(--bg)}
@media(prefers-color-scheme:dark){:root{--ambient:#77db920d}}
#content .stats .card:has(.sensor-button){transition:transform var(--motion-feedback) ease-out,border-color var(--motion-feedback),box-shadow var(--motion-feedback)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){#content .stats .card:has(.sensor-button):hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 7px 20px #00000015}}
.sensor-button{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;min-height:44px}
.sensor-ring{width:24px;height:24px;border-radius:50%;background:radial-gradient(closest-side,var(--panel) 72%,transparent 75%),conic-gradient(var(--green) var(--reading,0%),var(--line) 0)}
.switch:before{transition:transform 250ms var(--motion-spring)}
.nav button.active{animation:nav-selection 230ms ease-out}
@keyframes nav-selection{from{background-color:transparent}to{background-color:var(--selected)}}
#sensorDetail{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:20px;width:min(420px,calc(100% - 32px));padding:24px;box-shadow:0 16px 70px #0004}
#sensorDetail::backdrop{background:#1118}#sensorDetail[open]{animation:sensor-panel 360ms var(--motion-spring)}#sensorDetail form{float:right}#sensorValue{font-size:36px;font-weight:650;font-variant-numeric:tabular-nums}
@keyframes sensor-panel{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.greenhouse-scene.ventilating .scene-reading.air::after{animation:air-flow 1.8s ease-in-out infinite}
@keyframes air-flow{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.nav button.active,#sensorDetail[open],.greenhouse-scene.ventilating .scene-reading.air::after{animation:none}}

.irrigation-trace{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.watering .irrigation-trace{display:block}
.trace-line,.trace-pulse{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.trace-line{stroke:#438ee4;stroke-width:1.5;opacity:.75}
.trace-pulse{stroke:#9ed6ff;stroke-width:2;stroke-dasharray:7 105;stroke-dashoffset:7;animation:irrigation-trace 3.6s linear infinite;animation-delay:var(--delay)}
@keyframes irrigation-trace{to{stroke-dashoffset:-105}}
@media(prefers-reduced-motion:reduce){.trace-pulse{display:none}}