:root{--bg:#f4f6fb;--bg-accent:radial-gradient(ellipse 80% 60% at 50% -10%, rgba(37,99,235,.08), transparent 60%), #f4f6fb;--surface:#fff;--surface-alt:#f8fafc;--border:#e5e9f0;--border-strong:#d1d9e6;--text:#0f172a;--text-muted:#64748b;--text-subtle:#94a3b8;--accent:#2563eb;--accent-soft:rgba(37,99,235,.12);--accent-softer:rgba(37,99,235,.05);--water:#2980b9;--air:#e67e22;--solar:#f1c40f;--solar-dark:#b8a100;--heater:#e74c3c;--success:#059669;--danger:#dc2626;--radius:12px;--radius-sm:8px;--radius-xs:6px;--shadow-sm:0 1px 2px rgba(15,23,42,.04);--shadow:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);--shadow-lg:0 8px 24px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04)}*{box-sizing:border-box}body{background:var(--bg-accent);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,system-ui,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5;overflow-x:hidden}main{flex-direction:column;gap:.65rem;max-width:1080px;margin:0 auto;padding:1.25rem 1.25rem 2rem;display:flex}h1{letter-spacing:-.02em;color:var(--text);align-items:center;gap:.55rem;margin:0;font-size:1.4rem;font-weight:700;display:flex}h1:before{content:"";background:linear-gradient(180deg, var(--water), var(--accent));border-radius:2px;width:.25rem;height:1.25rem;display:inline-block}.page-header{border-bottom:1px solid var(--border);flex-direction:column;gap:.2rem;margin-bottom:.15rem;padding-bottom:.75rem;display:flex}.page-header p{color:var(--text-muted);margin:0;padding-left:.8rem;font-size:.82rem}h2{color:var(--text);margin:0 0 .75rem;font-size:1rem;font-weight:600}.weather{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1rem;padding:.6rem .85rem;display:flex}.weather-status{align-items:baseline;gap:.6rem;min-width:0;margin:0;display:inline-flex}.weather-ok{color:var(--success);align-items:center;gap:.4rem;font-size:.85rem;font-weight:500;display:inline-flex}.weather-ok:before{content:"";background:var(--success);border-radius:50%;width:.5rem;height:.5rem;box-shadow:0 0 0 3px rgba(5,150,105,.15)}.weather-timestamp{color:var(--text-subtle);font-variant-numeric:tabular-nums;font-size:.75rem;font-weight:500}.coord-inputs{flex-wrap:wrap;gap:.5rem;margin:0;display:flex}.coord-inputs label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;align-items:center;gap:.4rem;font-size:.8rem;font-weight:500;display:inline-flex}.coord-inputs input{width:6rem}input[type=number]{border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface);color:var(--text);font-variant-numeric:tabular-nums;padding:.3rem .55rem;font-family:inherit;font-size:.82rem;transition:border-color .15s,box-shadow .15s}input[type=text]{border:1px solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface);color:var(--text);font-variant-numeric:tabular-nums;padding:.3rem .55rem;font-family:inherit;font-size:.82rem;transition:border-color .15s,box-shadow .15s}input[type=number]:hover{border-color:#b8c2d1}input[type=text]:hover{border-color:#b8c2d1}input[type=number]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:1rem;height:1rem;margin:0}input[type=radio]{accent-color:var(--accent);cursor:pointer;width:1rem;height:1rem;margin:0}.config-panel{flex-direction:column;gap:.65rem;display:flex}.config-summary{cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);align-items:center;gap:.75rem;padding:.65rem .9rem;list-style:none;transition:background .15s,border-color .15s;display:flex}.config-summary::-webkit-details-marker{display:none}.config-summary:hover{background:var(--accent-softer);border-color:var(--accent-soft)}.config-summary-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);flex-shrink:0;font-size:.72rem;font-weight:600}.config-summary-details{min-width:0;color:var(--text);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.85rem;font-weight:500;overflow:hidden}.config-summary-toggle{color:var(--accent);background:var(--accent-softer);border-radius:var(--radius-xs);flex-shrink:0;align-items:center;gap:.3rem;padding:.2rem .55rem;font-size:.78rem;font-weight:600;display:inline-flex}.config-summary-toggle:after{content:"▾";font-size:.7rem;transition:transform .2s}.config-panel[open] .config-summary-toggle:after{transform:rotate(180deg)}.config-panel[open] .config-summary-toggle{color:var(--text-muted);background:var(--surface-alt)}.pool-config{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin:0;padding:.6rem .85rem .7rem}.pool-config legend{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.15rem;padding:0 .4rem 0 0;font-size:.68rem;font-weight:600}.config-row{flex-wrap:wrap;align-items:flex-end;gap:.4rem .85rem;display:flex}.config-row label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex-direction:column;gap:.2rem;font-size:.7rem;font-weight:500;display:flex}.config-row input[type=number]{width:5.25rem;padding:.28rem .5rem}.config-row .checkbox-label,.config-row .shape-toggle{color:var(--text);text-transform:none;letter-spacing:0;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;flex-direction:row;align-items:center;gap:.4rem;padding:.25rem .55rem;font-size:.82rem;font-weight:500;transition:background .15s,border-color .15s}.config-row .shape-toggle:hover,.config-row .checkbox-label:hover{background:var(--accent-softer);border-color:var(--accent-soft)}.config-computed{color:var(--text-muted);border-top:1px dashed var(--border);font-variant-numeric:tabular-nums;margin-top:.5rem;padding-top:.5rem;font-size:.76rem}.config-row .config-computed{color:var(--accent);background:var(--accent-softer);border-radius:var(--radius-xs);border:none;margin-top:0;padding:.25rem .5rem;font-size:.75rem;font-weight:600}.kpi-row{grid-template-columns:repeat(4,1fr);gap:.65rem;margin-bottom:.15rem;display:grid}@media (width<=760px){.kpi-row{grid-template-columns:1fr}}.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);flex-direction:column;gap:.15rem;min-width:0;padding:.7rem .9rem;display:flex}.kpi-value-edit{border-radius:var(--radius-xs);cursor:text;font-variant-numeric:tabular-nums;border:1px solid transparent;align-items:baseline;gap:.15rem;padding:.15rem .5rem;line-height:1.1;transition:background .15s,border-color .15s;display:inline-flex}.kpi-value-edit:hover{background:rgba(255,255,255,.08)}.kpi-value-edit:focus-within{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}.kpi-input{text-align:center;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;background:0 0;border:none;width:3.25rem;margin:0;padding:0;font-family:inherit;font-size:1.9rem;font-weight:700;line-height:1.1}.kpi-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.kpi-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.kpi-input{-moz-appearance:textfield}.kpi-input:focus{outline:none}.kpi-unit{color:rgba(255,255,255,.78);letter-spacing:-.01em;font-size:1rem;font-weight:600}.kpi-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.68rem;font-weight:600}.kpi-value{letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:700;line-height:1.1}.kpi-sub{color:var(--text-subtle);font-size:.72rem;font-weight:500}.kpi--hero{background:linear-gradient(135deg, var(--water) 0%, var(--accent) 100%);color:#fff;border-color:transparent;position:relative;overflow:hidden;box-shadow:0 6px 16px rgba(37,99,235,.25),0 2px 4px rgba(37,99,235,.15)}.kpi--hero:after{content:"";pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.22) 0%,transparent 60%);width:60%;height:140%;position:absolute;top:-20%;right:-10%}.kpi--hero .kpi-label{color:rgba(255,255,255,.82)}.kpi--hero .kpi-value{color:#fff;font-size:2rem}.kpi--hero .kpi-sub{color:rgba(255,255,255,.78)}.pool-config--dimensions{border-left:3px solid var(--water)}.pool-config--dimensions legend{color:var(--water)}.pool-config--conditions{border-left:3px solid #0891b2}.pool-config--conditions legend{color:#0891b2}.pool-config--heater{border-left:3px solid var(--heater)}.pool-config--heater legend{color:var(--heater)}.pool-config--schedule{border-left:3px solid var(--air)}.pool-config--schedule legend{color:var(--air)}.pool-config--cover{border-left:3px solid var(--success)}.pool-config--cover legend{color:var(--success)}.chart-section{flex-direction:column;gap:.4rem;margin-top:.25rem;display:flex}.chart-legend{flex-wrap:wrap;gap:.4rem 1rem;margin:0;padding:0 .25rem;font-size:.78rem;display:flex}.chart-legend span{align-items:center;gap:.4rem;font-weight:500;display:inline-flex}.legend-water{color:var(--water)}.legend-air{color:var(--air)}.legend-solar{color:var(--solar-dark)}.legend-heater{color:var(--heater)}.legend-heater-max{color:var(--heater);opacity:.6}.chart-with-axes{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);max-width:100%;box-shadow:var(--shadow);display:flex;overflow:hidden}.y-axis{background:var(--surface-alt);flex-shrink:0}.y-axis-left{border-right:1px solid var(--border)}.y-axis-right{border-left:1px solid var(--border)}.axis-label{fill:var(--text-subtle);font-family:inherit;font-size:10px;font-weight:500}.chart-scroll{-webkit-overflow-scrolling:touch;flex:1;overflow-x:auto}.chart-container{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);-webkit-overflow-scrolling:touch;box-shadow:var(--shadow);overflow-x:auto}.weather-chart{display:block}.water-line{fill:none;stroke:var(--water);stroke-width:2px;stroke-linejoin:round}.water-area{fill:var(--water);opacity:.08}.water-dot{fill:var(--water)}.water-value{text-anchor:middle;fill:var(--water);font-size:11px;font-weight:600}.air-line{fill:none;stroke:var(--air);stroke-width:1.5px;stroke-linejoin:round;stroke-dasharray:4 2}.temp-line{fill:none;stroke:var(--air);stroke-width:2px;stroke-linejoin:round}.temp-area{fill:var(--air);opacity:.1}.temp-dot{fill:var(--air)}.temp-value{text-anchor:middle;fill:var(--air);font-size:11px;font-weight:600}.solar-bar{fill:var(--solar);opacity:.25}.heater-bar{fill:var(--heater);opacity:.18}.heater-max-bar{fill:none;stroke:var(--heater);stroke-width:1px;stroke-dasharray:2 2;opacity:.45}.hover-zone{fill:transparent;cursor:crosshair}.hover-zone:hover{fill:rgba(37,99,235,.05)}.heater-dot{fill:var(--heater)}.heater-value{text-anchor:middle;fill:var(--heater);font-size:11px;font-weight:600}.solar-value{text-anchor:middle;fill:var(--solar-dark);font-size:11px;font-weight:600}.target-line{stroke:var(--success);stroke-width:1.5px;stroke-dasharray:6 3}.target-label{fill:var(--success);text-anchor:end;font-size:11px;font-weight:600}.target-axis-label{fill:var(--success);font-size:10px;font-weight:600}.grid-line{stroke:var(--border);stroke-width:1px}.date-line{stroke:var(--border-strong);stroke-width:1px;stroke-dasharray:4 2}.label{fill:var(--text-subtle);font-family:inherit}.hour-label,.date-label{text-anchor:middle;font-size:11px}.date-label{fill:var(--text-muted);font-weight:600}.grid-label{font-size:10px}.crosshair-line{stroke:var(--text-muted);stroke-width:1px;stroke-dasharray:3 2}.crosshair-time{text-anchor:middle;fill:var(--text-muted);font-size:10px;font-weight:600}.chart-detail{background:var(--surface);border:1px solid var(--border);border-radius:0 0 var(--radius) var(--radius);border-top:none;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:-.75rem;padding:.6rem .9rem;font-size:.85rem;display:flex}.detail-time{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.energy-summary{color:var(--text-muted);margin:.5rem 0 .3rem;padding:0 .25rem;font-size:.82rem}.energy-summary strong{color:var(--text);font-weight:600}.energy-table-wrapper{-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);margin-bottom:1rem;overflow-x:auto}.energy-table{border-collapse:collapse;background:var(--surface);white-space:nowrap;width:100%;font-size:.85rem}.energy-table th,.energy-table td{text-align:left;border-bottom:1px solid var(--border);padding:.4rem .75rem}.energy-table th{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;background:var(--surface-alt);font-size:.72rem;font-weight:600}.energy-table tr:last-child td{border-bottom:none}.energy-table .value{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.energy-table .formula{color:var(--text-subtle);font-size:.78rem}.energy-table .gain .value{color:var(--success)}.energy-table .loss .value{color:var(--danger)}.energy-table .net{border-top:2px solid var(--border-strong);background:var(--surface-alt);font-weight:700}.energy-table .net .value{color:var(--text)}.error{color:var(--danger);font-weight:500}@media (width<=640px){main{gap:.75rem;padding:1rem .75rem 2rem}.kpi-row{grid-template-columns:1fr;gap:.5rem}.kpi{padding:.55rem .75rem}.kpi-value{font-size:1.4rem}.kpi-input{font-size:1.7rem}h1{font-size:1.35rem}h1:before{height:1.25rem}.page-header{padding-bottom:.75rem}.page-header p{font-size:.85rem}.pool-config,.weather{padding:.85rem 1rem}.chart-with-axes,.energy-table-wrapper,.chart-detail{max-width:none;box-shadow:none;border-left:none;border-right:none;border-radius:0;margin-left:-.75rem;margin-right:-.75rem}.config-row{gap:.6rem .85rem}.config-row input[type=number]{width:5rem}}