* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, sans-serif;
  background: #0f1720;
  color: #e5e9ef;
}
.screen { min-height: 100vh; }
.hidden { display: none !important; }

#auth-screen { display: flex; align-items: center; justify-content: center; }
.card {
  background: #182430;
  border: 1px solid #26374a;
  border-radius: 10px;
  padding: 24px;
  width: 320px;
}
.card h1 { font-size: 1.3rem; margin-top: 0; }
.card input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #2f4356;
  background: #0f1720;
  color: #e5e9ef;
}
.card .row { display: flex; gap: 8px; }
.card button {
  flex: 1;
  padding: 10px;
  border-radius: 6px;
  border: none;
  background: #2563eb;
  color: white;
  cursor: pointer;
  font-weight: 600;
}
.card button:hover { background: #1d4ed8; }
.error { color: #f87171; font-size: 0.85rem; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #26374a;
}
header h1 { font-size: 1.1rem; margin: 0; }
header button { background: transparent; border: 1px solid #2f4356; color: #e5e9ef; padding: 6px 12px; border-radius: 6px; cursor: pointer; }

.layout { display: flex; height: calc(100vh - 56px - 140px); }
#device-list { width: 280px; overflow-y: auto; border-right: 1px solid #26374a; padding: 12px; }
#map { flex: 1; }

.device-item {
  background: #182430;
  border: 1px solid #26374a;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
.device-item.selected { border-color: #2563eb; }
.device-item h4 { margin: 0 0 4px; }
.device-item .meta { font-size: 0.75rem; color: #9aa8b8; }
.device-item .actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.device-item .actions button {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid #2f4356;
  background: #0f1720;
  color: #e5e9ef;
  cursor: pointer;
}
.device-item .actions button.danger { border-color: #7f1d1d; color: #f87171; }

.badge-stolen {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fca5a5;
  background: #3f1414;
  border: 1px solid #7f1d1d;
  border-radius: 4px;
  padding: 2px 6px;
  vertical-align: middle;
}

#add-device {
  margin: 16px;
  width: auto;
}
#add-device input, #add-device select {
  display: inline-block;
  width: 240px;
  margin-right: 8px;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #2f4356;
  background: #0f1720;
  color: #e5e9ef;
}
#add-device select { width: 110px; }
#add-device button { width: auto; padding: 8px 16px; }
#new-device-result { font-size: 0.85rem; word-break: break-all; }