* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #07070b; color: #d8d2d8;
  font: 13px/1.35 "Segoe UI", Roboto, sans-serif; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

aside { position: fixed; top: 0; bottom: 0; padding: 12px; overflow-y: auto;
  background: rgba(14, 10, 16, 0.86); backdrop-filter: blur(6px); border: 0 solid #2a1a26; }
#palette { left: 0; width: 262px; border-right-width: 1px; }
#telemetry { right: 0; width: 290px; border-left-width: 1px; }

h1 { margin: 0 0 8px; font-size: 18px; letter-spacing: 3px; color: #e8dce0; }
h1 span { color: #c0243a; }
h2 { margin: 0 0 8px; font-size: 14px; letter-spacing: 3px; color: #c0243a; }
.group-title { margin: 12px 0 5px; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #8a6a7a; }
.small { font-size: 11px; color: #7a6a74; margin: 2px 0; }
.row { display: flex; flex-direction: column; gap: 3px; margin: 3px 0; cursor: pointer; }
.row input { accent-color: #c0243a; }

.btn { display: block; width: 100%; text-align: left; margin: 0 0 5px; padding: 7px 9px;
  background: #1a1219; border: 1px solid #33222e; color: #d8d2d8; border-radius: 4px; cursor: pointer;
  transition: background .12s, border-color .12s; }
.btn:hover { background: #26171f; border-color: #6a2a3c; }
.btn.active { background: #3a1220; border-color: #e0304f; box-shadow: 0 0 8px rgba(224, 48, 79, .4); }
.btn .t { font-weight: 600; }
.btn .d { display: block; font-size: 11px; color: #8f7f89; }
.btn .sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }

button.action { display: block; width: 100%; margin: 0 0 6px; padding: 9px; border-radius: 4px; cursor: pointer;
  background: #7d1b2d; border: 1px solid #c0243a; color: #fff; font-weight: 600; }
button.action:hover { background: #9a2238; }
button.action.secondary { background: #1f2a33; border-color: #3a566a; }
button.action.danger { background: #2a1a1a; border-color: #6a3030; }
button.action.on { background: #1c6b3a; border-color: #34d27a; }

.stat { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #231820; }
.stat span { color: #9a8a94; }
.stat b { font-variant-numeric: tabular-nums; color: #f0e6ea; }
.stat b.bad { color: #ff4a5e; }
.stat b.warn { color: #ffb347; }

.list { font-size: 12px; font-family: Consolas, monospace; min-height: 18px; }
.list div { padding: 2px 0; }
.list .w { color: #ff5a6e; }
.list .o { color: #ffb347; }
.list .g { color: #5fe08f; }
.list .m { color: #8a7a84; }

#hint { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 6px 14px;
  background: rgba(14, 10, 16, .8); border: 1px solid #2a1a26; border-radius: 14px; color: #a8989f; font-size: 12px;
  pointer-events: none; }