html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }
body.login { display: grid; place-items: center; background: #f4f6f8; }
body.login .card { background: #fff; padding: 24px 28px; border-radius: 10px; box-shadow: 0 1px 6px #0002; min-width: 260px; }
body.login h1 { margin: 0 0 12px; font-size: 20px; }
body.login label { display: block; font-size: 13px; margin-bottom: 4px; }
body.login input { width: 100%; box-sizing: border-box; padding: 8px; font-size: 16px; }
body.login button { margin-top: 10px; padding: 8px 14px; }
body.login .err { color: #c00; font-size: 14px; }
body.app #wrap { display: flex; height: 100%; }
#side { width: 340px; flex: none; display: flex; flex-direction: column; border-right: 1px solid #ddd; background: #fafafa; }
#side h3 { margin: 0; padding: 10px 12px; background: #123; color: #fff; font-size: 16px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#side h3 small { font-weight: normal; opacity: .8; }
#side h3 form { margin: 0; }
.logout { background: transparent; color: #fff; border: 1px solid #ffffff55; border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 12px; }
#list { overflow: auto; flex: 1; }
.row { display: grid; grid-template-columns: 12px 1fr auto; gap: 2px 8px; padding: 8px 12px; border-bottom: 1px solid #eee; cursor: pointer; font-size: 13px; }
.row:hover, .row.sel { background: #e8f0fe; }
.dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; }
.ok { background: #1a9e3a; }
.alert { background: #d32f2f; }
.stale { background: #9e9e9e; }
.uid { font-weight: bold; font-size: 15px; }
.sub { grid-column: 2 / 4; color: #555; }
.al { grid-column: 2 / 4; color: #c00; font-size: 12px; }
.ago { color: #666; font-size: 12px; }
.pen { border: none; background: none; cursor: pointer; font-size: 13px; padding: 0 2px; }
.src { font-size: 11px; padding: 0 4px; border-radius: 3px; background: #e3f2fd; color: #0d47a1; }
.src.manual { background: #fff3e0; color: #e65100; }
#mapbox { flex: 1; position: relative; }
#map { height: 100%; }
#bar { position: absolute; z-index: 1000; top: 10px; left: 50px; background: #fff; padding: 6px 10px; border-radius: 6px; box-shadow: 0 1px 4px #0004; font-size: 13px; }
#toggle { display: none; }
.lbl { background: #123; color: #fff; border: none; font-weight: bold; padding: 1px 5px; box-shadow: none; }
.lbl:before { display: none; }
.alertt { color: #c00; font-weight: bold; }
.popup-actions { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.popup-actions button, #hist button { font-size: 13px; }
#hist { position: absolute; z-index: 1001; bottom: 10px; left: 10px; right: 10px; height: 280px; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px #0005; padding: 8px 12px; display: none; }
#hist .hd { display: flex; gap: 8px; align-items: center; font-size: 14px; }
#hist .hd b { flex: 1; }
#hist button.on { background: #123; color: #fff; }
#hist .cv { height: 230px; }
@media (max-width: 760px) {
  #side { position: absolute; z-index: 1002; top: 0; bottom: 0; left: 0; width: 85%; max-width: 340px; transform: translateX(-100%); transition: .2s; }
  #side.open { transform: none; box-shadow: 2px 0 10px #0005; }
  #toggle { display: block; position: absolute; z-index: 1003; top: 10px; right: 10px; padding: 8px 12px; font-size: 15px; }
  #bar { left: 50px; right: 90px; }
  #hist { height: 240px; }
  #hist .cv { height: 190px; }
}