:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #07080a; color: #eef0f3; font: 13px/1.35 "Segoe UI", system-ui, sans-serif; }
button, input, select { font: inherit; }
.top { display: flex; gap: 12px; align-items: center; padding: 6px 10px; background: #101216; border-bottom: 1px solid #22262c; }
.brand { letter-spacing: .12em; font-size: 11px; font-weight: 700; }
nav { display: flex; gap: 4px; }
nav button, .ghost, .transport button, table button { background: #161a20; color: #eef0f3; border: 1px solid #2a3038; padding: 4px 8px; cursor: pointer; }
nav button.on { background: #243044; }
#who { margin-left: auto; color: #8b93a0; font-variant-numeric: tabular-nums; }
main { padding: 8px; }
.panel { background: #12151a; border: 1px solid #22262c; padding: 10px; margin-bottom: 8px; }
h1 { font-size: 16px; margin: 0 0 8px; }
h2 { font-size: 11px; margin: 8px 0 6px; color: #8b93a0; text-transform: uppercase; letter-spacing: .08em; }
.dim { color: #8b93a0; }
.err { color: #e08a8a; }
.warn { color: #e0c56a; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 4px 6px; border-bottom: 1px solid #22262c; font-variant-numeric: tabular-nums; }
.workspace { display: grid; grid-template-columns: 220px minmax(0,1fr) 260px; grid-template-rows: auto 1fr auto; gap: 6px; min-height: calc(100vh - 48px); }
.status { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; padding: 6px 8px; background: #101216; border: 1px solid #22262c; font-variant-numeric: tabular-nums; }
.status .off { color: #e08a8a; }
.status .on { color: #8fca9a; }
.tree, .sheet, .insp { background: #12151a; border: 1px solid #22262c; overflow: auto; min-height: 0; padding: 6px; }
.tree button { display: block; width: 100%; text-align: left; margin-bottom: 2px; }
.tree button.sel { background: #1e3a5f; }
.nosig { height: 88px; background: #000; color: #8b93a0; display: flex; align-items: center; justify-content: center; letter-spacing: .1em; }
.transport { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; padding: 8px; background: #101216; border: 1px solid #22262c; }
.go { background: #1f8a4c !important; font-weight: 700; min-width: 72px; min-height: 36px; }
.panic { background: #8a1f1f !important; }
label { display: block; margin: 6px 0 2px; color: #8b93a0; font-size: 11px; }
input, select { width: 100%; max-width: 360px; background: #0b0c0e; color: #eef0f3; border: 1px solid #2a3038; padding: 6px; }
.primary { background: #243044; color: #e7eef8; border: 0; padding: 6px 12px; cursor: pointer; }
@media (max-width: 1000px) { .workspace { grid-template-columns: 1fr; } }