:root{--bg:#14181f;--panel:#1d232ecc;--panel2:#232a37;--line:#323b4a;--txt:#dbe2ee;--dim:#8b97a9;--acc:#4da3ff;--ok:#3ddc84;--warn:#ffb347;--err:#ff5d5d}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;height:100%;color:var(--txt);font-family:Segoe UI,system-ui,sans-serif;font-size:13px;overflow:hidden}#app{position:fixed;inset:0}canvas{display:block}#panel{background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);z-index:10;border-radius:10px;width:300px;padding:12px;position:fixed;top:10px;bottom:10px;left:10px;overflow-y:auto}#panel::-webkit-scrollbar{width:8px}#panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}h1{letter-spacing:.4px;margin-bottom:2px;font-size:15px}.sub{color:var(--dim);align-items:center;gap:7px;margin-bottom:10px;font-size:11px;display:flex}.version-badge{border:1px solid var(--line);color:#a9d8ff;letter-spacing:.3px;border-radius:10px;padding:0 6px;font-size:9.5px;text-decoration:none}.sec{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}.sec h2{text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin-bottom:8px;font-size:11px}button{background:var(--panel2);color:var(--txt);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:6px 10px;font-size:12.5px;transition:background .12s,border-color .12s}button:hover{background:#2c3543}button.active{border-color:var(--acc);background:#1d4a7a}button.play{border-color:var(--ok);background:#1c5c38}button.stop{border-color:var(--err);background:#6b2727}button:disabled{opacity:.4;cursor:default}.row{align-items:center;gap:6px;margin-bottom:6px;display:flex}.row.wrap{flex-wrap:wrap}.grow{flex:1}select{background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:6px;flex:1;padding:6px;font-size:12.5px}label.sl{margin-bottom:7px;display:block}label.sl .lt{color:var(--dim);justify-content:space-between;margin-bottom:2px;font-size:11.5px;display:flex}label.sl .lt b{color:var(--txt);font-weight:600}input[type=range]{width:100%;accent-color:var(--acc);height:20px}input[type=checkbox]{accent-color:var(--acc);width:15px;height:15px}.chk{cursor:pointer;align-items:center;gap:7px;margin-bottom:6px;display:flex}#devPanel{background:var(--panel2);border:1px solid var(--line);border-radius:8px;margin-top:6px;padding:9px}#devPanel .dname{justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:600;display:flex}#devPanel .size-editor{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}#devPanel .size-title{color:var(--dim);text-transform:uppercase;letter-spacing:.7px;justify-content:space-between;align-items:center;margin-bottom:5px;font-size:11px;display:flex}#devPanel .size-title button{text-transform:none;letter-spacing:0;padding:3px 7px;font-size:10.5px}.onoff{text-align:center;min-width:52px;font-weight:700}.onoff.on{border-color:var(--ok);color:#c9ffdf;background:#1c5c38}.onoff.off{border-color:var(--err);color:#ffc9c9;background:#4a2626}#info{z-index:10;background:var(--panel);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:10px;min-width:170px;padding:10px 14px;font-size:12px;line-height:1.65;position:fixed;top:10px;right:10px}#info .big{font-size:19px;font-weight:700}#info .st{color:var(--dim);font-size:11px}.badge{letter-spacing:.5px;border-radius:10px;padding:1px 8px;font-size:10.5px;font-weight:700;display:inline-block}.badge.edit{color:#cfe6ff;background:#1d4a7a}.badge.playing{color:#c9ffdf;background:#1c5c38}.badge.paused{color:#ffedb0;background:#6b5a1e}#legend{z-index:10;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 10px;position:fixed;bottom:34px;right:10px}#legend .bar{background:linear-gradient(90deg,#23f,#00c8ff,#39d353,#ffe600,#ff8c00,#f22);border-radius:6px;width:170px;height:12px}#legend .lbl{color:var(--dim);justify-content:space-between;margin-top:3px;font-size:10.5px;display:flex}#hint{z-index:10;color:var(--dim);background:var(--panel);border:1px solid var(--line);white-space:nowrap;border-radius:8px;padding:5px 12px;font-size:11.5px;position:fixed;bottom:8px;left:50%;transform:translate(-50%)}#errbox{z-index:99;border:1px solid var(--err);color:#ffd9d9;background:#5c1d1d;border-radius:8px;max-width:70vw;padding:8px 14px;font-size:12px;display:none;position:fixed;top:12px;left:50%;transform:translate(-50%)}.mini{color:var(--dim);margin-top:4px;font-size:11px;line-height:1.45}#iClima{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;font-size:11px}#iClima .cl-row{color:var(--dim);justify-content:space-between;gap:8px;display:flex}#iClima .cl-row b{color:var(--txt);font-weight:600}#iClima .cl-name{color:var(--txt);justify-content:space-between;align-items:center;margin-bottom:3px;font-size:11.5px;font-weight:600;display:flex}#iClima .cl-mode{letter-spacing:.4px;border-radius:8px;padding:1px 6px;font-size:9.5px;font-weight:700}#iClima .cl-mode.cool{color:#a9d8ff;background:#12395c}#iClima .cl-mode.heat{color:#ffd7a0;background:#5c3812}#iClima .cl-mode.off{color:var(--dim);background:#3a3f47}#iClima .eff{background:#2a3140;border-radius:4px;height:8px;margin:4px 0 2px;overflow:hidden}#iClima .eff>i{background:linear-gradient(90deg,#39d353,#ffe600,#ff8c00,#f22);border-radius:4px;height:100%;transition:width .2s;display:block}#costCard{background:var(--panel2);border:1px solid var(--line);border-radius:8px;margin-top:4px;padding:9px 10px}#costCard .cost-row{color:var(--dim);justify-content:space-between;align-items:center;margin-bottom:4px;font-size:11.5px;display:flex}#costCard .cost-row b{color:var(--txt);font-weight:600}#costCard .cost-big{border-top:1px solid var(--line);color:var(--dim);justify-content:space-between;align-items:baseline;margin-top:6px;padding-top:6px;font-size:12px;display:flex}#costCard .cost-big b{color:#7fe0a6;font-size:19px;font-weight:700}[hidden]{display:none!important}#settingsButton{z-index:30;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1d232eee;width:38px;height:38px;padding:0;font-size:18px;position:fixed;top:10px;right:10px}#info{top:58px}#settingsDialog{border:1px solid var(--line);color:var(--txt);background:#1d232e;border-radius:12px;width:min(360px,100vw - 24px);margin:auto;padding:16px;box-shadow:0 20px 80px #000a}#settingsDialog::backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#080b10aa}#settingsDialog form{gap:12px;display:grid}#settingsDialog label{color:var(--dim);grid-template-columns:1fr 1.4fr;align-items:center;gap:10px;display:grid}.dialog-title{justify-content:space-between;align-items:center;display:flex}.dialog-title h2{font-size:16px}.dialog-title button{padding:4px 8px}#forecast{border-top:1px solid var(--line);gap:2px;margin-top:7px;padding-top:6px;font-size:11px;display:grid}#forecast strong{color:var(--txt)}#forecast span{color:var(--dim)}#toast{opacity:0;z-index:50;border:1px solid var(--ok);pointer-events:none;background:#1c5c38;border-radius:8px;padding:8px 14px;transition:all .2s;position:fixed;bottom:48px;left:50%;transform:translate(-50%,20px)}#toast.show{opacity:1;transform:translate(-50%)}#mobilePanelBar{display:none}html,body{height:100%;overscroll-behavior:none;height:100dvh}#app canvas{touch-action:none;display:block}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}#panel,#info,#settingsButton{-webkit-backdrop-filter:blur(8px)}@media (max-width:760px),(pointer:coarse) and (max-width:1024px),(max-height:500px) and (orientation:landscape) and (max-width:1024px){:root{--mobile-bar:60px}body{overflow:hidden}#panel{width:100%;height:calc(var(--mobile-bar) + env(safe-area-inset-bottom));padding:0 12px calc(10px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);z-index:25;border-radius:16px 16px 0 0;transition:height .24s;inset:auto 0 0;overflow:hidden;box-shadow:0 -8px 32px #0008}#panel.mobile-open{height:76vh;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;height:76dvh;max-height:720px;overflow:hidden auto}#mobilePanelBar{z-index:3;border-bottom:1px solid var(--line);background:#1d232ef5;margin:0 -12px 8px;padding:5px 12px 4px;display:block;position:sticky;top:0}#panelToggle{text-align:left;background:0 0;border:0;grid-template-columns:24px auto 1fr;align-items:center;gap:8px;width:100%;min-height:50px;padding:4px 2px;display:grid}#panelToggle:hover{background:0 0}#panelToggleIcon{color:var(--acc);text-align:center;font-size:20px}#panelToggleLabel{font-size:14px;font-weight:700}#panelToggle small{color:var(--dim);text-align:right;justify-self:end;font-size:10px;line-height:1.2}#panel>h1{margin-top:8px}#panel button,#panel select,#settingsDialog button,#settingsDialog select{min-height:44px;font-size:16px}#panel input[type=range]{touch-action:pan-x;height:34px}#panel input[type=checkbox]{width:22px;height:22px}#panel .chk{min-height:38px}.row{flex-wrap:wrap}.row>*{min-width:0}.row select{flex-basis:140px}.row button.grow{flex-basis:calc(33.333% - 6px)}#devPanel .size-title button{min-height:38px;font-size:13px}#settingsButton{top:calc(8px + env(safe-area-inset-top));right:calc(8px + env(safe-area-inset-right));width:44px;height:44px;font-size:20px}#info{top:calc(8px + env(safe-area-inset-top));left:calc(8px + env(safe-area-inset-left));right:calc(60px + env(safe-area-inset-right));overscroll-behavior:contain;border-radius:9px;width:auto;min-width:0;max-height:32vh;padding:7px 10px;font-size:10.5px;line-height:1.45;overflow:auto}#info .big{font-size:16px}#info .st,#iClima{font-size:10px}#legend{right:calc(8px + env(safe-area-inset-right));bottom:calc(var(--mobile-bar) + 8px + env(safe-area-inset-bottom));padding:6px 8px;transition:opacity .15s}#legend .bar{width:120px;height:9px}#legend .lbl{font-size:9px}body.mobile-panel-open #legend{opacity:0;pointer-events:none}#hint{display:none}#toast{bottom:calc(var(--mobile-bar) + 12px + env(safe-area-inset-bottom));text-align:center;max-width:calc(100vw - 24px)}#errbox{top:calc(60px + env(safe-area-inset-top));max-width:calc(100vw - 16px)}#settingsDialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:14px;overflow:auto}#settingsDialog label{grid-template-columns:minmax(90px,1fr) minmax(130px,1.4fr)}}@media (max-width:380px){#panel{padding-left:10px;padding-right:10px}#mobilePanelBar{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}#panelToggle small{font-size:9px}#panel h1{font-size:14px}#info{max-height:28vh;padding:6px 8px}#settingsDialog label{grid-template-columns:1fr;gap:5px}}@media (max-height:500px) and (orientation:landscape) and (max-width:1024px){#panel.mobile-open{border-radius:14px;width:min(440px,64vw);height:calc(100dvh - 8px);max-height:none;bottom:4px;left:4px;right:auto}#info{max-height:52vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}