:root{color-scheme:light;--bg:#f7f7f2;--ink:#20312c;--muted:#7a857e;--accent:#23765b;--line:#e8ebe4;--pale:#eaf3ec;--danger:#a54534;font-family:"Segoe UI","Malgun Gothic",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}
button,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled,select:disabled{cursor:default;opacity:.43}
button:focus-visible,select:focus-visible{outline:3px solid #a4c9b4;outline-offset:3px}
[hidden]{display:none!important}
.remote{width:min(100%,480px);margin:0 auto;padding:28px 22px 20px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}
.header{display:flex;align-items:center;justify-content:space-between;gap:14px}
.eyebrow{margin:0 0 5px;font-size:10px;letter-spacing:.14em;font-weight:700;color:var(--muted)}
h1{margin:0;font-size:27px;font-weight:650;letter-spacing:-1.2px;line-height:1.2}
.title-dot{color:var(--accent);margin-left:3px}
.tools{display:flex;gap:3px}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:0;border-radius:12px;background:transparent;color:var(--muted)}
.icon-button:hover{background:var(--line);color:var(--ink)}
svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.connection-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 1px 17px;color:var(--muted);font-size:11px}
.connection{display:flex;gap:7px;align-items:center}
.connection-dot{display:block;width:6px;height:6px;border-radius:50%;background:#b7bdb7}
.connection-dot.online{background:var(--accent);box-shadow:0 0 0 3px #e7eee6}
.connection-dot.offline{background:#ba7765}
.text-button{padding:5px 0;border:0;background:transparent;color:var(--muted);font-size:11px}
.text-button:hover{color:var(--ink)}
.notice{border-radius:12px;padding:12px 14px;font-size:11px;line-height:1.6;margin:0 0 12px}
.demo-notice{color:#82652d;background:#f0eadd}
.mode-notice{background:var(--pale);display:flex;align-items:center;justify-content:space-between;gap:14px}
.mode-notice p{margin:0;flex:1}
.mode-notice button{flex-shrink:0;border:0;border-bottom:1px solid #8bad99;background:transparent;padding:3px 0;font-size:11px;font-weight:650;color:var(--accent)}
.devices{display:grid;gap:11px}
.device{padding:18px;border:1px solid var(--line);background:#fff;border-radius:20px}
.device-top{display:flex;align-items:center;gap:12px;min-height:39px}
.device-icon{width:39px;height:39px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:13px;background:#f4f5ef;color:#78867a;transition:background .2s,color .2s}
.device.is-on .device-icon{background:var(--pale);color:var(--accent)}
.device-icon svg{width:23px;height:23px}
.device-info{flex:1;min-width:0}
.device h2{font-size:15px;line-height:1.25;letter-spacing:-.4px;margin:0 0 5px;font-weight:650}
.device-status{font-size:11px;color:var(--muted);margin:0;line-height:1.3}
.device-status.on{color:var(--accent)}
.device-error{font-size:11px;line-height:1.5;color:var(--danger);margin:10px 0 0;overflow-wrap:anywhere}
.device-command{font-size:10px;color:var(--muted);margin:8px 0 0;line-height:1.4}
.power-buttons{display:flex;gap:5px;flex-shrink:0}
.power-button{height:36px;min-width:50px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:#fff;font-size:11px;font-weight:600;transition:background .15s}
.power-button:hover:not(:disabled){background:#f5f8f2}
.power-button.on-button.selected{background:var(--accent);color:#fff;border-color:var(--accent)}
.power-button.off-button.selected{background:#f0f1ec;border-color:#e0e4db;color:#5b675e}
.device-ac .device-top{margin-bottom:15px}
.ac-controls{display:flex;gap:10px;align-items:center;padding-top:13px;border-top:1px solid #f1f2ed}
.mode-buttons{display:flex;flex:1;padding:3px;background:#f3f4ef;border-radius:11px;gap:2px;min-width:0}
.mode-button{flex:1;border:0;border-radius:8px;background:transparent;font-size:11px;height:31px;white-space:nowrap;padding:0 10px;color:var(--muted)}
.mode-button.selected{background:#fff;box-shadow:0 1px 3px #20312c0a;color:var(--ink);font-weight:650}
.temperature{display:flex;align-items:center;gap:5px;position:relative;color:var(--ink)}
.temperature-label{font-size:10px;color:var(--muted)}
.temperature select{border:1px solid var(--line);border-radius:11px;height:37px;padding:0 10px;background:#fff;max-width:100px;font-size:15px;font-weight:600;color:var(--accent)}
.ac-power{display:flex;gap:7px;margin-top:11px}
.ac-power .power-button{flex:1;height:38px}
.ac-power .on-button{border-color:#dce8df;background:#edf4ed;color:var(--accent)}
.ac-power .on-button:hover:not(:disabled){background:#e0eddf}
.ac-empty{font-size:11px;color:var(--muted);margin:9px 0 0}
.feedback{font-size:11px;line-height:1.6;min-height:18px;margin:15px 2px 0;color:var(--muted);overflow-wrap:anywhere}
.feedback.error{color:var(--danger)}
footer{display:flex;flex-wrap:wrap;gap:5px 10px;justify-content:space-between;margin:14px 2px 0;padding-top:13px;border-top:1px solid var(--line);font-size:9px;line-height:1.6;color:#929b93}
dialog{width:min(calc(100% - 36px),410px);border:1px solid var(--line);padding:22px;border-radius:20px;color:var(--ink);background:#fff;box-shadow:0 16px 80px #20312c20}
dialog::backdrop{background:#20312c44;backdrop-filter:blur(3px)}
.dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dialog-top h2{margin:0;font-size:18px;letter-spacing:-.5px}
.dialog-top button{font-size:26px;font-weight:300}
dialog p{font-size:12px;color:#6d7970;line-height:1.9;margin:17px 0}
dialog strong{color:var(--ink)}
dialog b{font-weight:600}
dialog .dialog-note{font-size:10px;padding-top:13px;border-top:1px solid var(--line);margin-bottom:0}
@media(min-width:700px){.remote{margin:28px auto;padding:29px;width:460px;background:var(--bg);border:1px solid #e8ebe4;border-radius:30px;box-shadow:0 18px 60px #20312c06}body{background:#eeefe9}}
@media(max-width:359px){.remote{padding-left:14px;padding-right:14px}.device{padding:15px}.device-top{gap:9px}.power-button{min-width:43px;padding:0 8px}.device h2{font-size:14px}h1{font-size:25px}.temperature-label{display:none}}
@media(max-width:699px){.remote{padding:20px 18px 16px}.connection-row{margin:14px 1px 13px}.devices{gap:9px}.device{padding:14px}.device-top{min-height:37px}.device-ac .device-top{margin-bottom:11px}.ac-controls{padding-top:10px}.ac-power{margin-top:8px}.ac-power .power-button{height:35px}.feedback{margin-top:12px}footer{margin-top:10px;padding-top:10px}}
@media(display-mode:standalone){body{background:var(--bg)}.remote{border:0;box-shadow:none;margin:0 auto;border-radius:0}#window-button{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.login-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-card{width:min(100%,340px);padding:30px 0}
.login-icon{display:block;border-radius:15px;margin-bottom:25px}
.login-card h1{font-size:26px;letter-spacing:-1.2px}
.login-description{margin:14px 0 27px;font-size:12px;line-height:1.9;color:var(--muted);word-break:keep-all}
.login-form{display:flex;flex-direction:column}
.login-form label{font-size:11px;font-weight:600;margin:0 0 8px;color:#617267}
.login-form input{width:100%;height:44px;border:1px solid #dde3d8;border-radius:11px;background:#fff;padding:0 13px;font:inherit;color:var(--ink);outline:none;margin-bottom:18px}
.login-form input:focus{border-color:#89af9a;box-shadow:0 0 0 3px #dceadd}
.login-form input:disabled{background:#f0f1eb;color:var(--muted)}
.confirm-field{display:flex;flex-direction:column}
.login-hint{font-size:10px;color:var(--muted);margin:-4px 0 18px;line-height:1.6}
.login-submit{height:44px;background:var(--accent);color:#fff;border:0;border-radius:11px;font-size:12px;font-weight:650;margin-top:5px}
.login-submit:hover:not(:disabled){background:#1d654d}
.login-feedback{min-height:18px;font-size:11px;color:var(--muted);line-height:1.7;margin:14px 0 0}
.login-feedback.error{color:var(--danger)}
.login-footer{font-size:10px;color:#929b93;line-height:1.7;border-top:1px solid var(--line);margin:28px 0 0;padding-top:17px}
@media(max-width:399px){.tools{gap:0}.tools .icon-button{width:31px;height:34px;padding:7px}.header{gap:7px}}