:root {
  --bg: #0f1419;
  --panel: #171d25;
  --panel2: #1e2631;
  --line: #2a3440;
  --text: #e6edf3;
  --muted: #8b98a5;
  --accent: #3da9fc;
  --ok: #43a047;
  --lost: #e53935;
  --idle: #78909c;
  --stop: #5c6bc0;
  --warn: #f9a825;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
[hidden] { display: none !important; }
button, input, select, textarea {
  font: inherit; color: var(--text); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #04121f; border-color: var(--accent); font-weight: 600; }
button.ghost { background: transparent; }
button.danger { color: #ff8a80; }
input, select, textarea { min-width: 0; }
textarea { width: 100%; resize: vertical; }
code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; }
a { color: #8ecbff; text-decoration: none; }
a:hover { text-decoration: underline; }
h4 { margin: 14px 0 6px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.warn { color: var(--warn); }
.error { color: #ff8a80; }
.row { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.row > input, .row > select { flex: 1; }
.stack > * { margin-bottom: 4px; }

/* login */
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 3000; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 26px; width: min(360px, 92vw); display: grid; gap: 12px; }
.card h1 { margin: 0; font-size: 20px; }
.card label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.card input { font-size: 15px; }

/* layout */
#app { display: grid; grid-template-columns: 380px 1fr; height: 100%; }
#side { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#map-wrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: #0b0f14; }
.top { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.brand { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.conn { font-size: 11px; padding: 2px 8px; border-radius: 99px; }
.conn.on { background: #1b3a22; color: #81c784; }
.conn.off { background: #3b1c1c; color: #ef9a9a; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; border-radius: 0; background: transparent; padding: 10px; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button.active { color: var(--text); border-bottom-color: var(--accent); }
.tab { overflow-y: auto; padding: 10px 12px 24px; flex: 1; min-height: 0; }

/* monitor */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.counter { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; text-align: center; cursor: pointer; }
.counter b { display: block; font-size: 20px; }
.counter span { font-size: 11px; color: var(--muted); }
.counter.active b { color: #81c784; }
.counter.lost b { color: #ef5350; }
.counter.lost.alert { border-color: var(--lost); animation: pulse 1.2s infinite; }
.counter.low b { color: var(--warn); }
@keyframes pulse { 50% { background: #3b1c1c; } }
.filters input { flex: 1.4; }
.people { list-style: none; margin: 8px 0 0; padding: 0; }
.people li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 6px; }
.people li:hover, .people li.sel { background: var(--panel2); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--idle); }
.st-active .dot { background: var(--ok); }
.st-lost .dot { background: var(--lost); box-shadow: 0 0 0 3px #e5393533; }
.st-stopped .dot { background: var(--stop); }
.people .nm { font-weight: 600; }
.people .sub { color: var(--muted); font-size: 12px; }
.people .meta { text-align: right; font-size: 12px; color: var(--muted); white-space: nowrap; }
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); margin-left: 4px; }
.badge.bat { color: var(--warn); border-color: var(--warn); }
.badge.off { color: #ff8a80; border-color: #ff8a80; }
.badge.ok { color: #81c784; border-color: #2e7d32; }

/* admin */
details { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; background: var(--bg); }
summary { padding: 9px 12px; cursor: pointer; font-weight: 600; }
details > :not(summary) { margin-left: 12px; margin-right: 12px; }
details[open] { padding-bottom: 10px; }
.list { list-style: none; padding: 0; margin: 6px 12px; }
.list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.list li .grow { flex: 1; min-width: 0; }
.sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.tbl { width: calc(100% - 24px); border-collapse: collapse; font-size: 12px; }
.tbl th, .tbl td { text-align: left; padding: 4px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl th { color: var(--muted); font-weight: 500; }
.tbl input { width: 58px; padding: 3px 5px; }
.tbl select { max-width: 120px; padding: 3px 5px; }
.tbl .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* map extras */
.legend { position: absolute; left: 10px; bottom: 22px; z-index: 900; background: #171d25ee; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; display: grid; gap: 4px; max-width: 220px; }
.legend label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.legend input { padding: 0; }
.pick-hint { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 900; background: var(--accent); color: #04121f; padding: 8px 14px; border-radius: 99px; font-weight: 600; }
.leaflet-container.picking { cursor: crosshair; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #263341; border: 1px solid var(--line); padding: 9px 16px; border-radius: 8px; z-index: 4000; max-width: 90vw; }
.toast.err { border-color: var(--lost); }

.mk { position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: #263341; border: 3px solid var(--idle); box-shadow: 0 1px 4px #0008; }
.mk b { position: absolute; top: 33px; left: 50%; transform: translateX(-50%); font-size: 10px; background: #0f1419dd; color: #e6edf3; padding: 0 4px; border-radius: 4px; white-space: nowrap; font-weight: 600; }
.vids { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vids li { background: #1b2530; border: 1px solid #2a3948; border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.vids video { width: 100%; max-height: 320px; background: #000; border-radius: 8px; }
.vids .vp { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vids a.btn { padding: 6px 10px; border: 1px solid #2a3948; border-radius: 8px; color: inherit; text-decoration: none; font-size: 13px; }
.badge.bib { background: #3da9fc33; color: #8fd0ff; }
.mk span { display: grid; place-items: center; color: #e6edf3; }
.bk { display: inline-block; vertical-align: middle; flex: none; }
.mk.st-active { border-color: var(--ok); }
.mk.st-lost { border-color: var(--lost); animation: pulse2 1.2s infinite; }
.mk.st-stopped { border-color: var(--stop); opacity: .75; }
.mk.sel { outline: 3px solid var(--accent); outline-offset: 2px; }
@keyframes pulse2 { 50% { box-shadow: 0 0 0 8px #e5393555; } }
.pm { font-size: 18px; text-shadow: 0 1px 3px #000; text-align: center; line-height: 22px; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--panel); color: var(--text); }
.leaflet-popup-content { margin: 10px 12px; font-size: 13px; }
.pop h3 { margin: 0 0 4px; font-size: 15px; }
.pop table td { padding: 1px 8px 1px 0; }
.pop td:first-child { color: var(--muted); }

@media (max-width: 820px) {
  #app { grid-template-columns: 1fr; grid-template-rows: 1fr 46vh; }
  #map-wrap { order: -1; }
  #side { border-right: 0; border-top: 1px solid var(--line); }
  .legend { bottom: 8px; }
}
@media print {
  body > * { display: none !important; }
}