:root{color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--zh-bg);color:var(--zh-text);font-family:var(--zh-font-sans);min-height:100dvh}
header{display:flex;justify-content:space-between;align-items:center;gap:var(--zh-space-4);padding:var(--zh-space-6) 6vw;border-bottom:1px solid var(--zh-border)}
.brand{color:inherit;text-decoration:none;font-size:var(--zh-font-title);font-weight:700;display:flex;align-items:baseline;gap:var(--zh-space-4)}
.brand span,.eyebrow{font-size:var(--zh-font-base);color:var(--zh-text-secondary);font-weight:400}
#account{display:flex;align-items:center;gap:var(--zh-space-3);flex-wrap:wrap}
main{max-width:1100px;margin:auto;padding:var(--zh-space-12) var(--zh-space-6)}
#login{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:var(--zh-space-12);min-height:65dvh}
h1{font-size:clamp(2.4rem,5vw,4.4rem);font-weight:500;line-height:1.18;letter-spacing:-.04em;margin:var(--zh-space-4) 0 var(--zh-space-6)}
h2{font-size:var(--zh-font-title);margin:0 0 var(--zh-space-6)}
p{color:var(--zh-text-secondary);line-height:1.7}
.panel,dialog{background:var(--zh-bg-elevated);border:1px solid var(--zh-border);border-radius:var(--zh-radius-lg);padding:var(--zh-space-8)}
label{display:block;font-size:var(--zh-font-base);margin-bottom:var(--zh-space-5)}
input{display:block;width:100%;margin-top:var(--zh-space-2);background:var(--zh-bg);color:inherit;border:1px solid var(--zh-border);border-radius:var(--zh-radius-md);padding:var(--zh-space-3);font:inherit}
button,.open{cursor:pointer;border:1px solid var(--zh-border);border-radius:var(--zh-radius-md);background:transparent;color:inherit;padding:var(--zh-space-3) var(--zh-space-4);font:inherit;text-decoration:none;display:inline-block}
button:hover,.open:hover{background:var(--zh-bg-elevated)}
button:disabled{opacity:.5;cursor:wait}
.primary,.open{background:var(--zh-color-primary);color:var(--zh-on-primary);border-color:var(--zh-color-primary)}
.primary:hover,.open:hover{filter:brightness(1.12);background:var(--zh-color-primary)}
#login-form .primary,#password-form .primary{width:100%}
.heading{display:flex;justify-content:space-between;align-items:center;gap:var(--zh-space-6);margin-bottom:var(--zh-space-10)}
.device{display:flex;align-items:center;justify-content:space-between;gap:var(--zh-space-4);padding:var(--zh-space-6) 0;border-top:1px solid var(--zh-border)}
.device h2{margin:0 0 var(--zh-space-2);font-size:var(--zh-font-base);overflow-wrap:anywhere}
.device p{margin:0;font-size:var(--zh-font-base)}
.device-actions{display:flex;gap:var(--zh-space-3);flex-shrink:0}
.online{color:var(--zh-success)}
.offline{color:var(--zh-text-secondary)}
dialog{color:var(--zh-text);width:min(520px,calc(100vw - 32px));max-height:90dvh;overflow:auto}
dialog::backdrop{background:rgb(0 0 0 / .65)}
.close{float:right;padding:0 var(--zh-space-2);font-size:var(--zh-font-title)}
#bind-code{font-family:var(--zh-font-mono);font-size:var(--zh-font-base)}
#message,#password-message{color:var(--zh-danger);overflow-wrap:anywhere}
@media(max-width:680px){header{padding:var(--zh-space-4)}.brand span{display:none}main{padding:var(--zh-space-8) var(--zh-space-4)}#login{grid-template-columns:1fr;gap:var(--zh-space-6);min-height:auto}.heading{align-items:flex-start;flex-direction:column}.device{align-items:flex-start;flex-direction:column}.device-actions{width:100%}.panel{padding:var(--zh-space-6)}h1{font-size:2.8rem}}