*{box-sizing:border-box}
body{font-family:system-ui,Segoe UI,Arial,sans-serif;margin:0;background:#f3f4f6;color:#111}
header{background:#1f2937;color:#fff;padding:10px 16px;display:flex;justify-content:space-between;align-items:center}
header a{color:#93c5fd;text-decoration:none}
.card{background:#fff;border-radius:10px;padding:16px;margin:16px auto;max-width:420px;box-shadow:0 1px 4px #0002}
input,button,select{width:100%;padding:12px;margin:6px 0;font-size:16px;border-radius:8px;border:1px solid #ccc}
button{background:#2563eb;color:#fff;border:0;cursor:pointer}
button.stop{background:#dc2626}
.err{color:#b91c1c}.ok{color:#15803d}
.layout{display:flex;height:calc(100vh - 46px)}
.side{width:320px;overflow:auto;padding:12px;background:#fff}
#map{flex:1;background:#aad3df}
.drv{padding:8px;border-bottom:1px solid #eee;cursor:pointer}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.on{background:#16a34a}.off{background:#9ca3af}
.small{font-size:13px;color:#555}
details.add{background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;padding:8px;margin-bottom:10px}
details.add summary{font-weight:600;color:#1d4ed8;cursor:pointer}
.hist{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:8px;margin:10px 0}
@media(max-width:700px){.layout{flex-direction:column-reverse}.side{width:100%;max-height:40vh}}

.credit{position:fixed;bottom:2px;left:8px;font-size:11px;color:#6b7280;z-index:1000;pointer-events:none}