:root { color-scheme: dark; font: 100%/1.5 system-ui, sans-serif; background: #0b1421; color: #e9f1fa; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
main { max-width: 75rem; margin: auto; padding: clamp(1rem, 4vw, 3rem); }
header, #filters { display: flex; gap: .8rem; align-items: end; justify-content: space-between; flex-wrap: wrap; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(1.5rem, 4vw, 2.35rem); }
h2 { font-size: 1.2rem; }
.panel { background: #142236; border: 1px solid #334c67; border-radius: 1rem; padding: 1.1rem; min-width: 0; }
.sign-in { max-width: 28rem; }
.sign-in-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
#workspace { display: grid; grid-template-columns: minmax(16rem, 1fr) minmax(22rem, 1.3fr); gap: 1rem; align-items: start; }
label { display: grid; gap: .3rem; margin-bottom: .8rem; }
input, select, textarea, button { font: inherit; border-radius: .55rem; padding: .55rem .7rem; }
input, select, textarea { width: 100%; background: #0c1929; color: inherit; border: 1px solid #52708a; }
button { cursor: pointer; border: 1px solid #77c9ee; background: #78ccef; color: #091927; font-weight: 650; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid #bff0ff; outline-offset: 3px; }
#queue { padding: 0; list-style: none; }
#queue li + li { margin-top: .55rem; }
#queue button { display: block; text-align: left; width: 100%; background: #0c1929; color: inherit; border-color: #52708a; overflow-wrap: anywhere; }
#queue button[aria-current="true"] { border-color: #78ccef; background: #203752; }
#queue small { display: block; color: #c0d4eb; font-weight: 400; }
#notice, #legacy, #meta { color: #c0d4eb; }
#protocol { color: #a6dff5; font-family: monospace; overflow-wrap: anywhere; }
#summary, #events p { white-space: pre-wrap; overflow-wrap: anywhere; }
#events { padding-left: 1.4rem; }
#diagnostic { max-height: 22rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width: 51rem) { #workspace { grid-template-columns: 1fr; } }

