:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101a20; color: #eef4f5; }
* { box-sizing: border-box; }
body { margin: 0; }
header, main, footer { max-width: 1440px; margin: auto; padding: 1.5rem; }
header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
h1 { margin: .3rem 0; font-size: clamp(1.5rem, 3vw, 2.4rem); }
h2 { font-size: 1.2rem; margin-top: 0; }
h3 { font-size: 1rem; }
h3 span { color: #9acbd0; font-size: .85rem; }
.eyebrow { letter-spacing: .14em; color: #8de7ce; font-size: .75rem; }
section { background: #192830; border: 1px solid #35505b; border-radius: .8rem; padding: 1.2rem; margin: 1rem 0; }
label { display: block; margin: .6rem 0; }
input, select, button { font: inherit; border-radius: .35rem; padding: .6rem; border: 1px solid #63818e; }
input, select { background: #0f1d24; color: #fff; }
input:not([type=checkbox]) { display: block; max-width: 100%; width: 27rem; margin-top: .3rem; }
input[type=number] { width: 6rem; }
button { background: #85e4c7; color: #102a23; cursor: pointer; font-weight: 650; }
button.secondary { background: #263f4a; color: #eef4f5; }
button.danger { background: #ffb8a5; color: #3f170e; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #f7d578; outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: 1rem 0; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
p, footer { color: #bed1d8; line-height: 1.5; }
code { color: #a6e9d8; }
#alert { padding: 1rem; border: 1px solid #f0b16d; background: #382b1d; border-radius: .5rem; white-space: pre-line; }
#alert.ok { border-color: #85e4c7; background: #193b31; }
#mode { padding: .5rem; border: 1px solid #85e4c7; }
dl { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: .4rem; }
dt { color: #aac4ce; } dd { margin: 0; overflow-wrap: anywhere; }
.counts { display: flex; flex-wrap: wrap; gap: .7rem; }
.counts span { background: #0d2028; padding: .8rem; border-radius: .5rem; }
.counts strong { display: block; font-size: 1.7rem; color: #91e3cd; }
#phases { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-left: 1.5rem; color: #aac4ce; }
#phases li.active { color: #a7f7d9; font-weight: bold; text-decoration: underline; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; }
caption { text-align: left; padding: .5rem 0; }
th, td { text-align: left; padding: .7rem; border-bottom: 1px solid #35505b; vertical-align: top; }
td { white-space: pre-line; }
details { border-top: 1px solid #35505b; padding: .8rem 0; margin-top: .8rem; }
summary { cursor: pointer; font-weight: 600; }
#journal { max-height: 22rem; overflow-y: auto; list-style: none; padding: 0; font: .85rem ui-monospace, monospace; }
#journal li { padding: .35rem; overflow-wrap: anywhere; }
#journal li[data-level=error] { color: #ffbba9; }
#journal li[data-level=event] { color: #9feaca; }
#queue-items, #commands { max-height: 16rem; overflow: auto; overflow-wrap: anywhere; }
[hidden] { display: none !important; }
@media (max-width: 600px) { header, main, footer { padding: .8rem; } dl { grid-template-columns: 1fr; } dd { margin-bottom: .5rem; } }