:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c1110; color: #edf6f1; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 260px minmax(0, 1fr); }
.sidebar { padding: 22px; background: #101916; border-right: 1px solid #2d4038; display: flex; flex-direction: column; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #37c993; color: #07110d; font-weight: 900; }
h1, h2, h3, p { margin: 0; }
.brand p, .eyebrow, label, .status { color: #9cafaa; }
label { display: grid; gap: 7px; font-size: 13px; }
select, input, textarea { width: 100%; color: inherit; background: #17231f; border: 1px solid #344a41; border-radius: 8px; padding: 10px; }
.nav-key, button { color: inherit; background: #1a2823; border: 1px solid #344a41; border-radius: 8px; padding: 10px 14px; }
.nav-key.is-active, .primary { background: #37c993; color: #07110d; border-color: #37c993; font-weight: 800; }
main { padding: 26px; }
header, .status { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.actions { display: flex; gap: 10px; }
.status { margin: 18px 0; justify-content: flex-start; padding: 12px 14px; background: #141e1b; border-radius: 8px; }
.status strong { color: #37c993; }
.messages { white-space: pre-wrap; color: #ffb4ad; background: #351d1d; border: 1px solid #6e3533; border-radius: 8px; padding: 12px; margin-bottom: 18px; }
.workspace { display: grid; grid-template-columns: minmax(420px, 1fr) minmax(360px, .8fr); gap: 18px; }
.workspace > div { min-width: 0; background: #121c19; border: 1px solid #2d4038; border-radius: 12px; padding: 18px; }
#filter { margin: 12px 0; }
.group { border: 1px solid #2d4038; border-radius: 9px; margin: 8px 0; overflow: hidden; }
.group summary { cursor: pointer; padding: 11px; background: #192520; font-weight: 700; }
.group-body { padding: 10px; }
.field { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .8fr); gap: 12px; align-items: center; padding: 7px 0; }
.field small { display: block; color: #8ea39a; overflow-wrap: anywhere; }
.array-note { color: #d5b56d; font-size: 12px; padding: 7px 0; }
textarea { min-height: 72vh; resize: vertical; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; line-height: 1.45; }
@media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } .workspace { grid-template-columns: 1fr; } }