:root { color-scheme: dark; }
body { font: 15px/1.5 system-ui, sans-serif; background: #12141a; color: #e6e8ee; max-width: 860px; margin: 0 auto; padding: 1rem 1.5rem 4rem; }
header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #2a2e3a; margin-bottom: 1.5rem; }
h1 { font-size: 1.3rem; } h2 { font-size: 1.1rem; margin-top: 1.5rem; } h3 { font-size: 0.95rem; margin-top: 1.25rem; color: #9aa3b5; }
input, textarea, button { font: inherit; padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid #2a2e3a; background: #1a1e28; color: inherit; }
button { cursor: pointer; background: #2b5cd9; border-color: #2b5cd9; } button:hover { background: #3a6ae8; }
button:active { background: #2450bd; transform: translateY(1px); }
button.link { background: none; border: none; color: #7ea0f0; padding: 0; }
form { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.5rem 0; }
ul { list-style: none; padding: 0; } li { padding: 0.3rem 0; border-bottom: 1px solid #1e222d; }
a { color: #7ea0f0; text-decoration: none; } a:hover { text-decoration: underline; }
.error { color: #ff7a7a; min-height: 1.2em; }
.roomCard { display: flex; gap: 0.5rem; align-items: center; padding: 0.6rem; border: 1px solid #2b5cd9; border-radius: 8px; margin: 0.5rem 0; }
.badge { display: inline-block; min-width: 5.2em; text-align: center; padding: 0 0.4em; border-radius: 4px; font-size: 0.78em; background: #2a2e3a; margin-right: 0.4em; }
.badge.built { background: #1d7a3d; } .badge.building { background: #8a6d1a; } .badge.detected { background: #2b5cd9; }
.badge.reverted, .badge.error { background: #a03030; } .badge.queued { background: #6a4fa0; }
#whoBar { display: flex; align-items: baseline; gap: 0.5rem; }
#who { color: #9aa3b5; font-size: 0.9rem; }
#signOutBtn { font-size: 0.82rem; }
.muted { color: #9aa3b5; }
.hint { color: #9aa3b5; font-size: 0.82rem; margin: 0.6rem 0 0.15rem; }
.hint.italic { font-style: italic; }
.hint.italic.error { color: #ff7a7a; }
.sysbar { position: fixed; bottom: 0; left: 0; right: 0; background: #14171f; border-top: 1px solid #1e222d;
  color: #9aa3b5; font-family: ui-monospace, monospace; font-size: 0.78rem; padding: 0.35rem 0.8rem; }
.sysbar.warn { color: #f0b73f; }
.sysbar .dot { display: inline-block; width: 0.62em; height: 0.62em; border-radius: 50%; margin-right: 0.3em; vertical-align: baseline; }
.sysbar .dot.up { background: #3fb950; } .sysbar .dot.down { background: #f04747; }
.sysbar code { background: #2a2e3a; padding: 0 0.35em; border-radius: 3px; color: #f0b73f; }
body { padding-bottom: 2.2rem; }
.ok { color: #57c98a; }
#reportStatus { margin: 0.3rem 0; }
.roomCard { flex-direction: column; align-items: stretch; }
.sayForm { margin: 0.4rem 0 0; }
.sayForm input, .sayForm textarea { flex: 1; }
.sayForm textarea { resize: vertical; min-height: 2.6em; font-family: inherit; }
button.danger { background: #a03030; border-color: #a03030; }
button.danger:hover { background: #b84040; }
button.danger:active { background: #8c2828; }
.join { font-family: ui-monospace, monospace; font-size: 0.85rem; color: #cdd3df; word-break: break-all; margin: 0.2rem 0; }
.feedHead { margin-top: 0.6rem; }
.feed { margin-top: 0.3rem; max-height: 15rem; overflow-y: auto; }
.feed li { border-bottom: 1px solid #1e222d; font-size: 0.9rem; }
.formMsg { align-self: center; font-size: 0.9rem; min-height: 1.2em; }
.formMsg.ok { color: #57c98a; } .formMsg.error { color: #ff7a7a; }
#prepInfo { font-size: 0.92rem; margin: 0.4rem 0; }
#prepInfo div { padding: 0.15rem 0; }
#prepInfo strong { color: #9aa3b5; font-weight: 600; }
#prepLog { background: #0f1217; border: 1px solid #2a2e3a; border-radius: 6px; padding: 0.5rem;
  font-size: 0.8rem; max-height: 10rem; overflow-y: auto; white-space: pre-wrap; }
button:disabled { opacity: 0.5; cursor: wait; }