* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
body { display: flex; }

#sidebar {
  width: 300px;
  min-width: 300px;
  height: 100vh;
  overflow-y: auto;
  background: #1f2933;
  color: #e4e7eb;
  padding: 16px;
}
#sidebar h1 { font-size: 18px; margin: 0 0 16px; }
#sidebar h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #9aa5b1; margin: 20px 0 8px; }
#sidebar section { border-top: 1px solid #323f4b; padding-top: 4px; }

#map { flex: 1; height: 100vh; }

.muted { color: #7b8794; font-size: 12px; }
.footer { margin-top: 24px; }

#device-list { list-style: none; margin: 0; padding: 0; }
#device-list li { padding: 8px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
#device-list li:hover { background: #323f4b; }
.dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
#device-list li.is-offline { opacity: 0.55; }
#device-list li.is-offline .dot { box-shadow: 0 0 0 2px #52606d inset; filter: grayscale(0.6); }
.offline { color: #eb5757; font-weight: 600; }
.dev-name { font-size: 13px; font-weight: 600; }
.dev-meta { font-size: 11px; color: #9aa5b1; }
.dev-place { font-size: 12px; color: #7ca9ff; font-weight: 500; }
.dev-text { display: flex; flex-direction: column; }
.badge { font-size: 10px; background: #c0392b; color: #fff; padding: 1px 5px; border-radius: 4px; margin-left: auto; }

label { display: block; font-size: 12px; color: #9aa5b1; margin: 8px 0; }
select, input { width: 100%; margin-top: 2px; padding: 6px; border-radius: 6px; border: 1px solid #3e4c59; background: #323f4b; color: #e4e7eb; }
.row { display: flex; gap: 8px; margin-top: 10px; }
button { flex: 1; padding: 8px; border: none; border-radius: 6px; background: #2f80ed; color: #fff; font-weight: 600; cursor: pointer; }
button.secondary { background: #52606d; }
button.small { flex: none; width: 100%; margin-top: 10px; padding: 6px; font-size: 12px; }
button:hover { filter: brightness(1.1); }

.hidden { display: none; }
#add-device-form { margin-top: 12px; padding: 10px; background: #16202b; border-radius: 8px; }
.badge2 { font-size: 10px; background: #2f80ed; color: #fff; padding: 1px 6px; border-radius: 4px; margin-left: auto; align-self: center; }
.badge2.gen { background: #52606d; }
.howto { margin-top: 10px; padding: 8px; background: #0f1720; border-radius: 6px; color: #9fb3c8; font-size: 11px; white-space: pre-wrap; word-break: break-all; }