:root { color-scheme: dark; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #14161b; color: #e6e8ec; font: 15px/1.4 system-ui, sans-serif; }
#login, #desk { min-height: 100vh; display: grid; place-items: center; }
form { width: min(22rem, 90vw); display: grid; gap: .9rem; }
h1 { margin: 0 0 .4rem; font-size: 1.6rem; font-weight: 600; }
label { display: grid; gap: .3rem; color: #aab0bb; }
input { padding: .6rem .7rem; border: 1px solid #343a46; border-radius: .4rem; background: #1d2027; color: #e6e8ec; font: inherit; }
input:focus { outline: 2px solid #6d8cff; border-color: transparent; }
button { padding: .6rem .9rem; border: 0; border-radius: .4rem; background: #4b6bff; color: #fff; font: inherit; cursor: pointer; }
button:disabled { opacity: .6; cursor: default; }
#msg, #deskmsg { min-height: 1.4em; margin: 0; color: #aab0bb; }
#msg.error, #deskmsg.error { color: #ff8f8f; }
#who { margin: 0; color: #aab0bb; }
button.quiet { background: #2c3140; }
#session { position: fixed; inset: 0; display: flex; flex-direction: column; background: #000; }
#bar { display: flex; gap: .5rem; padding: .35rem .6rem; background: #1b1e25; }
#bar button { padding: .3rem .7rem; background: #2c3140; }
#screen { flex: 1; min-height: 0; }
#session:fullscreen #bar { display: none; }
iron-remote-desktop { display: block; width: 100%; height: 100%; }
#screen canvas { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; outline: none; touch-action: none; }