:root { color-scheme: dark; font: 16px system-ui, sans-serif; background: #0b1220; color: #eef4ff; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
h1 { font-size: 1.35rem; margin: 0; }
p { margin: .6rem 0; color: #b5c4d8; }
input, button { font: inherit; border-radius: .6rem; min-height: 48px; }
input { padding: .65rem; border: 1px solid #5f7190; background: #101b2d; color: inherit; }
button { border: 1px solid #566988; background: #263754; color: inherit; padding: .65rem 1rem; cursor: pointer; }
.card button { background: #275fba; border-color: #6d9fed; }
button:disabled { opacity: .45; cursor: default; }
input:focus-visible, button:focus-visible { outline: 3px solid #8db9ff; outline-offset: 3px; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.card { width: min(27rem, 100%); padding: 1.5rem; border-radius: 1rem; background: #172339; }
.card form { display: grid; gap: .7rem; margin-top: 1.25rem; }
.error { display: none; color: #ffb7ae; }
.error:target { display: block; }
.portal { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.toolbar, .session-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.toolbar { padding: .7rem; border-bottom: 1px solid #364967; background: #172339; }
.toolbar h1 { margin-right: auto; }
.portal main { padding: 0 .7rem .7rem; display: flex; flex: 1; flex-direction: column; min-height: 0; }
#device-picker { width: min(100%, 58rem); margin: clamp(1.2rem, 8vh, 4.5rem) auto 0; padding: 0 clamp(.4rem, 3vw, 1.8rem); }
#device-heading { margin: 0; font-size: clamp(1.6rem, 4vw, 2.5rem); }
#targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; margin-top: 1.5rem; }
.device { min-height: 9rem; display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: .75rem; padding: 1.35rem; text-align: left; background: #172843; border-color: #5378ab; }
.device:hover { background: #213c60; border-color: #8db9ff; }
.device strong { font-size: clamp(1.25rem, 3vw, 1.7rem); }
.device span { color: #a8cbff; }
#status:empty, #audio-status:empty { display: none; }
#audio-status { color: #ffce9d; }
#session-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#screen { flex: 1; min-height: 0; position: relative; background: #101b2d; overflow: hidden; }
#screen > div { position: absolute; inset: 0; }
#typing { margin-bottom: .5rem; width: min(30rem, 100%); }