:root { color-scheme: light dark; --accent: #2563eb; --error: #b91c1c; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, sans-serif; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid #8884; }
.brand { font-weight: 600; }
.account { display: flex; align-items: center; gap: .75rem; }
main { max-width: 48rem; margin: 0 auto; padding: 1rem; }
.card { max-width: 24rem; margin: 3rem auto; }
form[data-step] { display: grid; gap: .75rem; }
form[hidden], [hidden] { display: none; }
label { display: grid; gap: .25rem; }
input { font: inherit; padding: .5rem; }
button { font: inherit; padding: .5rem 1rem; cursor: pointer; }
.error { color: var(--error); }
.empty { color: #888; }
.notice { padding: .5rem .75rem; border-left: 3px solid var(--accent); }
.warning { padding: .5rem .75rem; border-left: 3px solid var(--error); }
.links { font-size: .9rem; }
.qr svg { width: 12rem; height: 12rem; background: #fff; padding: .5rem; }
.secret { word-break: break-all; }
.bases { list-style: none; padding: 0; display: grid; gap: .5rem; }
.bases > li { display: grid; gap: .25rem; padding: .5rem .75rem; border: 1px solid #8884; border-radius: .375rem; }
.bases .base-head { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.bases .name { font-weight: 600; }
.bases .seen, .bases .facts { color: #888; }
.bases .state { font-weight: 600; }
.bases .state-online { color: #15803d; }
.bases .state-offline, .bases .state-never-seen { color: #888; }
.bases .state-needs-upgrade { color: var(--error); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .125rem .75rem; margin: 0; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts .lan { list-style: none; margin: 0; padding: 0; }
.bases .info { color: var(--accent); }
.pending { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.pending dd { margin: 0; }
.session-bar { display: grid; gap: .5rem; }
.session-bar .bar-head { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.session-bar .name { font-weight: 600; }
.session-bar .remote { font-size: .8rem; padding: 0 .375rem; border: 1px solid var(--accent); border-radius: .25rem; color: var(--accent); }
.session-bar .status { font-weight: 600; }
.session-bar[data-state=connected] .status { color: #15803d; }
.session-bar progress { width: 100%; }
.session-bar .hint { color: #888; margin: 0; }
main:has(.session-bar) { max-width: none; }
.base-frame { display: grid; gap: .25rem; }
.base-frame[hidden] { display: none; }
.base-frame .frame-label { margin: 0; font-size: .8rem; color: #888; }
.base-frame iframe { width: 100%; height: calc(100vh - 9rem); min-height: 24rem; border: 1px solid #8884; }
.session-bar [hidden] { display: none !important; }
.session-bar .trouble, .session-bar .still-there, .session-bar .paused { padding: .5rem .75rem; border-left: 3px solid; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.session-bar .trouble p, .session-bar .still-there p, .session-bar .paused p { margin: 0; }
.session-bar .didnt-wake { border-color: #d97706; background: #d977061a; }
.session-bar .offline { border-color: #888; background: #8881; }
.session-bar .still-there { border-color: var(--accent); background: #2563eb1a; }
.session-bar .paused { border-color: #888; }
.session-bar[data-state=didnt_wake] .status { color: #d97706; }
.session-bar[data-state=offline] .status { color: #888; }
.session-bar .presence { margin: 0; font-size: .9rem; }
.session-bar .fullscreen { margin-left: auto; padding: .25rem .75rem; }
.session-bar[data-fullscreen] > :not(.base-frame):not(.exit-fullscreen) { display: none; }
.session-bar[data-fullscreen] .base-frame { position: fixed; inset: 0; z-index: 1; background: Canvas; }
.session-bar[data-fullscreen] .frame-label { display: none; }
.session-bar[data-fullscreen] .base-frame iframe { height: 100vh; min-height: 0; border: 0; }
.session-bar .exit-fullscreen { position: fixed; right: .5rem; bottom: .5rem; z-index: 2; padding: .25rem .75rem; opacity: .85; }
body:has(.session-bar[data-fullscreen]) .topbar { display: none; }
.bases .open { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.bases .open[hidden] { display: none; }
.bases .open form { margin: 0; }
a.button { display: inline-block; padding: .5rem 1rem; border: 1px solid var(--accent); border-radius: .25rem; background: var(--accent); color: #fff; text-decoration: none; }
.bases .local-here { color: #15803d; font-weight: 600; }
.detect .hint { color: #888; font-size: .9rem; }
table.audit { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.audit th, table.audit td { text-align: left; padding: .3rem .4rem; border-bottom: 1px solid #ddd; vertical-align: top; }
table.audit td:first-child { white-space: nowrap; }
.pages a { margin-right: 1rem; }