* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #0c0b09;
  color: #e8e0d0;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  overflow: hidden;
}

#app {
  display: flex;
  height: 100vh;
  gap: 8px;
  padding: 8px;
}

#left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 8px;
  background: #17150f;
  border: 1px solid #2c2820;
  border-radius: 6px;
  font-size: 12px;
}

#controls .ctl { display: inline-flex; align-items: center; gap: 4px; }
#controls .ctl > span { color: #9a9184; }
#controls input[type=number] { width: 80px; }
#controls input, #controls select, #controls button {
  background: #221f18;
  color: #e8e0d0;
  border: 1px solid #3a3428;
  border-radius: 4px;
  padding: 3px 6px;
  font: inherit;
}
#controls button { cursor: pointer; }
#controls button:hover { background: #2e2a20; }
#controls .ts-wrap { display: inline-flex; align-items: center; gap: 4px; }
#controls input[type=range] { width: 110px; }

#canvasWrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid #2c2820;
  border-radius: 6px;
  overflow: hidden;
  min-height: 0;
}

#right {
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

#right section {
  background: #17150f;
  border: 1px solid #2c2820;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#right h2 {
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a9184;
  margin-bottom: 6px;
}

#metersPanel { flex: 0 0 auto; }
#meters { font-size: 13px; line-height: 1.5; white-space: pre; }

#logPanel { flex: 1; }
#log {
  flex: 1;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.45;
}

.log-entry { padding: 1px 4px; color: #8f8778; }
.log-entry.sev-high { color: #d9c48a; }
.log-entry.sev-urgent { color: #ff9a7a; }
.log-entry.officer {
  color: #cfe3ff;
  background: rgba(90, 130, 200, 0.10);
  border-left: 2px solid #5b8dd9;
  margin: 2px 0;
}
.log-entry.officer.sev-urgent { color: #ffd0c0; border-left-color: #ff7a5c; background: rgba(200, 90, 60, 0.12); }
.log-entry.officer-drop { color: #5d574c; font-style: italic; }
.log-entry.system { color: #7fd4a0; }

@media (max-width: 900px) {
  #app { flex-direction: column; overflow-y: auto; }
  html, body { overflow: auto; }
  #right { width: auto; }
  #canvasWrap { min-height: 300px; }
}