* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; font-size: 14px; }
body { display: flex; }
#panel { width: 360px; padding: 12px; overflow-y: auto; border-right: 1px solid #ccc; background: #fafafa; }
#map { flex: 1; }
h1 { font-size: 18px; margin: 0 0 8px; }
.hint { background: #eef5ff; padding: 6px 8px; border-radius: 4px; }
fieldset { border: 1px solid #ddd; border-radius: 4px; margin: 8px 0; }
fieldset label { display: flex; justify-content: space-between; align-items: center; margin: 4px 0; }
fieldset input, fieldset select { width: 150px; }
.bulk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
button { cursor: pointer; padding: 6px; border: 1px solid #999; border-radius: 4px; background: #fff; }
button:disabled { cursor: default; opacity: .4; }
button.start { border-color: #2e7d32; }
button.pause { border-color: #f9a825; }
button.resume { border-color: #1565c0; }
button.end { border-color: #c62828; }
.message { padding: 6px 8px; border-radius: 4px; background: #fdecea; color: #8a1c1c; white-space: pre-wrap; }
.message.ok { background: #e8f5e9; color: #1b5e20; }
#routes { list-style: none; padding: 0; margin: 0; }
#routes li { border: 1px solid #ddd; border-left: 6px solid var(--c); border-radius: 4px; padding: 6px 8px; margin: 6px 0; background: #fff; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.title { font-weight: 600; cursor: pointer; }
.badge { font-size: 12px; padding: 1px 6px; border-radius: 8px; background: #eee; }
.badge.running { background: #c8e6c9; } .badge.paused { background: #fff3c4; }
.badge.success { background: #bbdefb; } .badge.failed, .badge.lost { background: #ffcdd2; }
.badge.cancelled { background: #e0e0e0; } .badge.starting { background: #ffe0b2; }
.meta { color: #555; font-size: 12px; margin: 4px 0; word-break: break-all; }
.err { color: #b71c1c; font-size: 12px; }
.actions { display: flex; gap: 4px; flex-wrap: wrap; }
.actions button { padding: 2px 6px; font-size: 12px; }
.footer { color: #888; font-size: 11px; }
.marker { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 2px #000; }
.live { font-size: 12px; color: #1b5e20; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.live:empty { display: none; }
.actions button.on { background: #e3f2fd; border-color: #1565c0; }
.live-on { color: #2e7d32; font-weight: 600; }
.live-off { color: #b71c1c; }
.maplibregl-popup-content { font-size: 12px; line-height: 1.5; }