:root{--bg:#A2CD5A;--text:#55502F;--muted:#404040;--border:#6E8B3D;--card-bg:#BCEE68;--table-row:#BCEE68;--table-alt:#CAFF70;--table-header:#A2CD5A;--btn-bg:#CAFF70;--btn-text:#55502F;--btn-border:#6E8B3D;--input-bg:#CAFF70;--select-bg:#CAFF70;--input-border:#6E8B3D;--ok:#00CD00;--warn:#FF7F00;--grid:#6E8B3D33}:root.dark{--bg:#0f1115;--text:#e7eaf0;--muted:#9aa4b2;--border:#2a2f39;--card-bg:#171a21;--table-row:#1b1f27;--table-alt:#15181f;--table-header:#1b1f27;--btn-bg:#1c2130;--btn-text:#e7eaf0;--btn-border:#2a2f39;--input-bg:#171a21;--select-bg:#1c2130;--input-border:#2a2f39;--ok:#3bd67f;--warn:#ff6b6b;--grid:#2a2f3933}html,body{height:100%}html{overflow-x:hidden}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;padding:60px 16px 16px;color:var(--text);background:var(--bg);overflow-x:hidden;width:100%;max-width:100vw;box-sizing:border-box}h1{margin:0 0 16px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.card{border:1px solid var(--border);border-radius:8px;padding:16px;background:var(--card-bg);max-width:100%;box-sizing:border-box}.card h2{margin-top:0;font-size:18px}.muted{color:var(--muted);font-style:italic}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--border);padding:6px 8px;text-align:left;font-size:14px}th:nth-child(4),td:nth-child(4),th:nth-child(5),td:nth-child(5),th:nth-child(6),td:nth-child(6){text-align:center}th{background:var(--table-header)}tbody tr:nth-child(odd){background:var(--table-alt)}tbody tr:nth-child(2n){background:var(--table-row)}.actions{display:flex;gap:6px;align-items:center}.pagination{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px}.btn{padding:6px 10px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);border-radius:6px;cursor:pointer}.btn:disabled{opacity:.5;cursor:not-allowed}input,select{padding:6px 8px;border:1px solid var(--input-border);border-radius:6px;color:var(--text);background:var(--input-bg)}select{background:var(--select-bg)}@media (max-width: 900px){.grid{grid-template-columns:1fr}}footer{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.toggle{display:inline-flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;font-size:14px}.switch{position:relative;width:46px;height:26px;background:var(--border);border-radius:999px;cursor:pointer}.switch input{display:none}.knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--btn-bg);border:1px solid var(--btn-border);border-radius:50%;transition:transform .18s ease}.switch input:checked+.knob{transform:translate(20px)}#chartWrap{position:relative;width:100%;height:clamp(260px,50vh,560px);max-width:100%;overflow-x:auto}#chartWrap canvas{width:100%!important;height:100%!important;min-width:300px}.edit-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);cursor:pointer}@media (max-width: 768px){body{padding:100px 8px 8px}.grid{grid-template-columns:1fr;gap:12px}body{font-size:14px}h1{font-size:20px;margin-bottom:12px}h2{font-size:16px}.card{padding:12px;border-radius:6px}.row{gap:6px}.actions{gap:4px}.btn{padding:8px 12px;font-size:13px}.card>div[style*=overflow]{overflow-x:auto;-webkit-overflow-scrolling:touch}th,td{padding:8px 6px;font-size:12px;white-space:nowrap}th:first-child,td:first-child{position:sticky;left:0;background:var(--table-header);z-index:1}td:first-child{background:inherit}.pagination{flex-direction:column;gap:8px;align-items:stretch}.pagination .actions{width:100%;justify-content:center}.row label{flex:0 0 auto;font-size:13px}.row input[type=date]{flex:1 1 120px;min-width:120px}#chartWrap{height:clamp(200px,40vh,400px)}}@media (max-width: 480px){body{padding:6px;font-size:13px}h1{font-size:18px}h2{font-size:15px}.card{padding:10px}.btn{padding:6px 10px;font-size:12px}th,td{padding:6px 4px;font-size:11px}#chartWrap{height:clamp(180px,35vh,300px)}select,input{font-size:13px;padding:6px}}.chart-toolbar{display:flex;flex-direction:column;gap:12px;width:100%}.chart-toolbar h2{margin-bottom:4px}.chart-toolbar-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.chart-toolbar-date-controls{padding-bottom:8px;border-bottom:1px solid var(--border)}.chart-toolbar-date-controls label{display:flex;align-items:center;gap:4px;font-size:.9em}.chart-toolbar-date-controls input[type=date]{min-width:130px}.chart-toolbar-file-controls input[type=file]{max-width:280px;flex-shrink:1}@media (max-width: 768px){.chart-toolbar h2{font-size:15px}.chart-toolbar-row{gap:6px}.chart-toolbar-date-controls label{font-size:12px}.chart-toolbar-date-controls input[type=date]{font-size:12px;padding:6px;min-width:120px;max-width:130px}.chart-toolbar-file-controls input[type=file]{max-width:100%;width:100%;flex:1 1 100%}.chart-toolbar-file-controls .btn{flex:1 1 calc(50% - 4px);text-align:center}}@media (max-width: 480px){.chart-toolbar-date-controls{flex-direction:column;align-items:stretch}.chart-toolbar-date-controls>*{width:100%}.chart-toolbar-date-controls label{flex:1 1 100%}.chart-toolbar-date-controls .btn{flex:1 1 calc(33% - 6px);text-align:center;min-width:70px}.chart-toolbar-file-controls .btn{flex:1 1 calc(50% - 4px);text-align:center;min-width:80px}}.vpd-cell{position:relative;cursor:help}.vpd-value{display:inline-block;padding:2px 6px;border-radius:4px;font-weight:500}.vpd-danger{background:#ff6b6b4d;color:var(--warn)}.vpd-propagation{background:#64c8ff4d;color:#64c8ff}.vpd-veg{background:#3bd67f4d;color:var(--ok)}.vpd-flower{background:#ffc1074d;color:#ffc107}.vpd-tooltip{visibility:hidden;opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:12px;min-width:280px;z-index:1000;box-shadow:0 4px 12px #0000004d;font-size:12px;line-height:1.5;text-align:left;transition:opacity .2s ease,visibility .2s ease;pointer-events:none}.vpd-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:8px solid transparent;border-top-color:var(--border)}.vpd-cell:hover .vpd-tooltip,.vpd-cell:focus .vpd-tooltip{visibility:visible;opacity:1}.vpd-cell.tooltip-active .vpd-tooltip{visibility:visible;opacity:1}.vpd-tooltip-title{font-weight:600;margin-bottom:8px;color:var(--text)}.vpd-tooltip-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border)}.vpd-tooltip-row:last-child{border-bottom:none}.vpd-tooltip-phase{font-weight:500}.vpd-tooltip-range{color:var(--muted)}@media (max-width: 768px){.vpd-tooltip{min-width:240px;padding:10px;font-size:11px}}@media (max-width: 480px){.vpd-tooltip{min-width:200px;left:auto;right:0;transform:none}.vpd-tooltip:after{left:auto;right:20px;transform:none}}.phase-selector{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.phase-radio{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-size:.85em;padding:4px 8px;border-radius:4px;border:1px solid var(--border);background:var(--btn-bg);transition:background .2s,border-color .2s}.phase-radio:hover{background:var(--table-alt)}.phase-radio input[type=radio]{width:14px;height:14px;margin:0}.phase-radio input[type=radio]:checked+span{font-weight:600}.phase-radio:has(input:checked){border-color:var(--ok);background:#3bd67f1a}.humidity-rec{font-size:.9em;color:var(--muted)}.humidity-rec.in-range{color:var(--ok);font-weight:500}.humidity-rec.out-of-range{color:var(--warn)}@media (max-width: 768px){.phase-selector{flex-direction:column;align-items:flex-start}.phase-radio{font-size:.8em;padding:6px}}@media (max-width: 480px){.phase-radio span{font-size:.75em}}.vpd-tolerance-label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:.85em;padding:4px 8px;border-radius:4px;border:1px solid var(--border);background:var(--btn-bg);transition:background .2s,border-color .2s;margin-left:8px}.vpd-tolerance-label:hover{background:var(--table-alt)}.vpd-tolerance-label input[type=checkbox]{width:16px;height:16px;margin:0;cursor:pointer}.vpd-tolerance-label:has(input:checked){border-color:var(--ok);background:#3bd67f1a}.vpd-tolerance-label:has(input:checked) span{font-weight:600}@media (max-width: 768px){.vpd-tolerance-label{font-size:.8em;padding:6px;margin-left:0}}@media (max-width: 480px){.vpd-tolerance-label span{font-size:.75em}}.card:has(#chartWrap){overflow:hidden}#alertRulesTableContainer{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}#alertRulesTableContainer table{min-width:500px}.card>div[style*="overflow:auto"]{max-width:100%;-webkit-overflow-scrolling:touch}#liveCard{overflow:hidden}#cameraView{max-width:100%;box-sizing:border-box}#cameraView img{max-width:100%;height:auto;display:block}#readingsCard{overflow:hidden}#readingsCard>div[style*=overflow]{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.card:has(#tbl){overflow:hidden}#tbl{min-width:600px}@media (max-width: 480px) and (orientation: portrait){.card{overflow-x:hidden;max-width:calc(100vw - 12px)}#liveValues{word-break:break-word}.header-bar{max-width:100vw;overflow-x:hidden}.header-bar-center select{max-width:120px;text-overflow:ellipsis}.phase-selector{gap:4px}.phase-radio{padding:4px 6px;font-size:.7em}#tbl th:first-child,#tbl td:first-child{min-width:40px}#tbl th:nth-child(2),#tbl td:nth-child(2){min-width:70px}#tbl th:nth-child(3),#tbl td:nth-child(3){min-width:50px}}@media (max-width: 360px){body{padding:100px 4px 4px}.card{padding:8px;max-width:calc(100vw - 8px)}#cameraView{min-height:200px}.header-item{padding:4px 6px;font-size:.7em}}.phase-radio[data-phase=propagation] span{color:#64c8ff}.phase-radio[data-phase=veg] span{color:var(--ok)}.phase-radio[data-phase=flower] span{color:#ffc107}.phase-radio:has(input:checked)[data-phase=propagation]{border-color:#64c8ff;background:#64c8ff26}.phase-radio:has(input:checked)[data-phase=veg]{border-color:var(--ok);background:#3bd67f26}.phase-radio:has(input:checked)[data-phase=flower]{border-color:#ffc107;background:#ffc10726}.header-bar{position:fixed;top:0;left:0;right:0;z-index:1100;background:var(--card-bg);border-bottom:1px solid var(--border);padding:8px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 2px 8px #00000026}.header-bar-left,.header-bar-center,.header-bar-right{display:flex;align-items:center;gap:8px}.header-bar-center{flex:1;justify-content:center}.header-item{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;font-size:.85em;background:var(--bg);border:1px solid var(--border);color:var(--text)!important;cursor:pointer;transition:background .2s;white-space:nowrap}button.header-item{font-family:inherit;font-size:.85em;color:var(--text)!important}.header-item:hover{background:var(--table-alt)}.header-item.clickable:active{transform:scale(.98)}.header-item select{background:transparent;border:none;color:var(--text);font-size:inherit;cursor:pointer;padding-right:4px}.header-item select:focus{outline:none}.status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.online{background:#2ecc71;box-shadow:0 0 6px #2ecc71}.status-dot.offline{background:#e74c3c}.status-dot.connecting{background:#f39c12;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 768px){.header-bar{flex-wrap:wrap;padding:6px 10px;gap:8px}.header-bar-center{order:-1;flex-basis:100%;justify-content:center}.header-bar-left,.header-bar-right{flex:1}.header-bar-left{justify-content:flex-start}.header-bar-right{justify-content:flex-end}.header-item{padding:8px 10px;font-size:.8em}.header-item{min-height:36px}}@media (max-width: 480px){.header-bar-center select{max-width:150px}.header-item{padding:6px 8px;font-size:.75em}.header-bar{overflow-x:hidden}.header-bar-left,.header-bar-right{flex-shrink:1;min-width:0}}