:root{--topbar-height:56px}
*{box-sizing:border-box}
html,body,#map{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
.topbar{height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#2b6cb0;color:#fff}
.topbar .title{font-weight:600}
.controls{display:flex;gap:8px;align-items:center}
.file-label input{display:none}
.file-label{background:#ffffff22;padding:6px 10px;border-radius:6px;cursor:pointer}
#map{height:calc(100vh - var(--topbar-height))}
.status{position:fixed;left:10px;bottom:10px;background:#fff;padding:6px 8px;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.2)}
.leaflet-popup-content img{max-width:100%;height:auto;display:block;margin:0.5rem 0}
.leaflet-popup-content video{max-width:100%;height:auto;display:block;margin:0.5rem 0}
.number-marker{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.number-marker.blue{background:#1e90ff}
.number-marker.red{background:#d9534f}
.gps-marker{width:28px;height:28px;border-radius:50%;background:red;display:flex;align-items:center;justify-content:center}
.gps-marker.pulse{box-shadow:0 0 0 rgba(255,0,0,0.7);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,0,0,0.7);}70%{box-shadow:0 0 0 18px rgba(255,0,0,0);}100%{box-shadow:0 0 0 0 rgba(255,0,0,0);}}


/* responsive popup */
.leaflet-popup-content-wrapper{max-width:90vw}


/* list inside complex popup */
.poi-list{list-style:none;padding:0;margin:0}
.poi-list li{padding:6px 0;border-bottom:1px solid #eee}
.poi-item{display:flex;justify-content:space-between;align-items:center}
.poi-item button{background:#2b6cb0;color:#fff;border:none;padding:6px 10px;border-radius:6px}