*{box-sizing:border-box}html,body{width:720px;height:570px;margin:0;overflow:hidden;font:13px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253e38;background:#fff}[hidden]{display:none!important}button,input,select{font:inherit}button{border:1px solid #dce5e1;background:#fff;border-radius:8px;padding:8px 13px;color:#31564a;cursor:pointer}button:hover{background:#eef5f1}button:disabled{opacity:.45;cursor:default}.primary{background:#28624f;color:#fff;border-color:#28624f}.primary:hover{background:#1e5140}.icon{border:0;padding:6px 9px;font-size:20px;background:transparent}header{height:64px;display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid #edf1ef}.brand{border-radius:12px;background:#235849;color:#fff;font-size:30px;line-height:40px;text-align:center;width:40px;height:40px}.device{flex:1;min-width:0}.device strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16px}.device small{display:block;margin-top:5px;color:#7c8d85}.device small.running{color:#28714f}.controls{height:53px;display:flex;align-items:center;gap:8px;padding:8px 20px;background:#f8faf9}.controls>span{flex:1;color:#7c8d85}.map-header{height:39px;display:flex;align-items:center;padding:0 16px;gap:12px}.map-header input{border:0;color:#33584a;padding:5px;background:transparent}.map-header span{margin-left:auto;color:#84968d;font-size:12px}.map-wrap{height:307px;position:relative;background:#edf2ec}#map{width:100%;height:100%}.map-message{position:absolute;z-index:600;left:50%;top:42%;transform:translate(-50%,-50%);background:#fffffff2;border-radius:10px;padding:13px 20px;white-space:nowrap;color:#61796a;pointer-events:none}#map-error{top:auto;bottom:0;transform:translate(-50%,0);font-size:11px;padding:7px 12px}.player{height:51px;display:flex;align-items:center;gap:12px;padding:8px 20px;border-bottom:1px solid #edf1ef}.play{background:#e7f1eb;color:#246047;width:34px;height:34px;padding:4px;font-size:16px}.player input{flex:1;accent-color:#28624f}.player time{font-variant-numeric:tabular-nums;font-size:12px;color:#5d7467}footer{height:56px;padding:9px 20px;line-height:18px}#address{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}footer small{color:#85938a;font-size:11px}#error{position:absolute;z-index:2000;bottom:60px;left:16px;right:16px;padding:10px 12px;background:#fff2e8;border:1px solid #eed2bc;border-radius:8px;color:#895132}#settings-panel{position:absolute;z-index:2100;top:60px;right:16px;width:340px;background:#fff;border:1px solid #dfe6e1;border-radius:14px;box-shadow:0 8px 40px #18332d2a;padding:15px 20px}.settings-heading{display:flex;align-items:center;justify-content:space-between}#settings-panel p,#settings-panel small{color:#7e8f84;font-size:12px}#settings-panel label{display:block;margin:15px 0 8px}#settings-panel input,#settings-panel select{display:block;width:100%;border:1px solid #dce5df;border-radius:6px;padding:8px;margin-top:6px}#save{display:block;margin-top:17px;width:100%}.trace-dot{width:8px;height:8px;border-radius:50%;background:#24634a;border:1px solid white}.moving-dot{width:18px;height:18px;border-radius:50%;background:#24634a;border:3px solid white;box-shadow:0 1px 8px #183d3e80}.leaflet-control-attribution{font-size:9px!important;background:#fffc!important}.leaflet-container{font:inherit;background:#e8eee5}

/* Compact map-first popup: controls live inside settings. */
.top-date input{width:140px;border:1px solid #e0e8e3;border-radius:7px;padding:7px 5px;background:#fafcfb;color:#3c5e51;font-size:12px}.map-wrap{height:455px}.map-location{position:absolute;z-index:700;top:14px;right:14px;width:310px;padding:11px 13px;background:#fffffff0;border:1px solid #e2e9e2;border-radius:10px;box-shadow:0 2px 12px #1d382a16;pointer-events:none;line-height:19px}.map-location #address{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px}.map-location small{display:block;font-size:11px;color:#7d8d82}.map-location #count{color:#49735c;margin-top:3px}.map-fit{position:absolute;z-index:700;bottom:14px;left:14px;background:#fffffff2;border:1px solid #dae4dc;border-radius:8px}.settings-collection{display:flex;gap:10px;margin:10px 0}.settings-collection button{flex:1}#error{bottom:58px}.player{border-bottom:0}

.position-tooltip{white-space:normal;width:290px;padding:10px 12px;border:1px solid #e2e9e2;border-radius:10px;background:#fffffff2;box-shadow:0 2px 12px #1d382a16;color:#253e38;line-height:19px}.position-tooltip #address{white-space:normal;font-size:12px}.position-tooltip #coords{display:block;font-size:11px;color:#7d8d82;margin-top:4px}
/* Thin playback bar; give the recovered space to the map. */
.map-wrap{height:472px}.player{height:34px;padding:3px 14px;gap:10px}.player .play{width:26px;height:26px;font-size:13px;border-radius:7px}.player time{font-size:11px}.player input{margin:0}#error{bottom:40px}

/* Keep both collection actions directly accessible in the header. */
header{gap:10px;padding:12px 14px}.brand{flex-shrink:0}.top-date input{width:128px}.top-actions{display:flex;gap:6px;flex-shrink:0}.top-actions button{padding:7px 9px;font-size:12px;white-space:nowrap}

.player #speed{height:25px;min-width:62px;flex-shrink:0;border:1px solid #dce5df;border-radius:6px;padding:2px 4px;color:#31564a;background:#f8faf9;font-size:11px}

/* Slim toolbar and icon-only collection controls. */
header{height:48px;padding:6px 14px;gap:10px}.brand{width:32px;height:32px;line-height:32px;border-radius:9px;font-size:24px}.device strong{font-size:14px}.device small{font-size:11px;margin-top:3px}.top-date input{height:29px;padding:4px 5px}.top-actions .action-icon{width:30px;height:30px;padding:5px;display:flex;align-items:center;justify-content:center}.action-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.map-wrap{height:488px}

.brand{display:flex;align-items:center;justify-content:center}.brand svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Stack the map positioning button above the zoom controls. */
.map-fit{left:auto;right:10px;bottom:94px;width:32px;height:32px;padding:0;display:flex;align-items:center;justify-content:center;border:2px solid #0003;border-radius:4px;background:#fff;font-size:23px}

/* A cyclist replaces the location dot during playback. */
.moving-dot{position:absolute;left:15px;top:15px}.cyclist{display:none;width:48px;height:48px;overflow:visible;fill:none;stroke:#235849;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 1px 2px #fff)}
.replaying .cyclist{display:block}.replaying .moving-dot{display:none}.cyclist .rider-head{fill:#235849;stroke:#fff;stroke-width:1.5}.cyclist .rider-body,.cyclist .rider-leg{stroke-width:3.5}.bike-wheel{transform-box:fill-box;transform-origin:center}.riding .bike-wheel{animation:wheel-spin .7s linear infinite}.rider-leg{transform-origin:17px 23px}.riding .rider-leg{animation:pedal .35s ease-in-out infinite alternate}
@keyframes wheel-spin{to{transform:rotate(360deg)}}@keyframes pedal{to{transform:rotate(-22deg)}}
@media(prefers-reduced-motion:reduce){.riding .bike-wheel,.riding .rider-leg{animation:none}}

/* A smaller cartoon rider with a helmet, face and colorful clothes. */
.moving-dot{left:9px;top:9px}.cyclist{width:36px;height:36px;stroke-width:1.8;filter:drop-shadow(0 0 1px #fff) drop-shadow(0 1px 1px #fff)}
.cyclist .bike-wheel{stroke:#33534d;stroke-width:1.6;fill:#ffffffa0}.cyclist .bike-frame{stroke:#f1a946;stroke-width:2.3}.cyclist .rider-head{fill:#ffd5aa;stroke:#b77e56;stroke-width:.8}.cyclist .rider-helmet{fill:#48a991;stroke:#235849;stroke-width:.8}.cyclist .helmet-brim{stroke:#235849;stroke-width:1.2}.cyclist .rider-shirt{fill:#ef8165;stroke:#c75c47;stroke-width:1}.cyclist .rider-arm{stroke:#ffd5aa;stroke-width:3}.cyclist .rider-leg,.cyclist .rider-back-leg{stroke:#426c99;stroke-width:3.5}.cyclist .rider-back-leg{opacity:.8}.cyclist .rider-shoe{stroke:#fff;stroke-width:2.6}.cyclist .rider-eye{fill:#3a453e;stroke:none}.cyclist .rider-smile{stroke:#af6b48;stroke-width:.8}.riding .rider-back-leg{animation:pedal .35s ease-in-out infinite alternate-reverse;transform-origin:19px 23px}
@media(prefers-reduced-motion:reduce){.riding .rider-back-leg{animation:none}}

.activity-tooltip{border:1px solid #e3c38d;border-radius:7px;background:#fff9edf2;color:#84602c;padding:5px 8px;box-shadow:0 1px 6px #4d351c20}.activity-label strong{display:block;font-size:11px}.activity-label small{display:block;font-size:10px;margin-top:2px;color:#96794f}

.map-options{position:absolute;z-index:800;right:10px;bottom:134px}.map-options summary{list-style:none;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #0003;border-radius:4px;color:#31564a}.map-options summary::-webkit-details-marker{display:none}.map-options summary svg{width:19px;height:19px;fill:#fff;stroke:currentColor;stroke-width:1.8}.map-options summary:focus-visible{outline:2px solid #28624f;outline-offset:2px}.map-options-panel{position:absolute;right:40px;bottom:0;width:210px;padding:12px;background:#fffffff5;border:1px solid #dae4dc;border-radius:9px;box-shadow:0 3px 18px #18332d25}.map-options-panel label{display:flex;align-items:center;gap:7px;font-size:12px;margin:0 0 12px}.map-options-panel label:last-child{margin:0}.map-options-panel input[type=checkbox]{accent-color:#28624f;margin:0;width:14px;height:14px}.radius-label{justify-content:space-between}.radius-label span{white-space:nowrap}.radius-label input{width:65px;padding:4px;border:1px solid #dce5df;border-radius:5px;color:#31564a}

.trace-hit .trace-dot{position:absolute;left:6px;top:6px}.trace-hit{cursor:pointer}.position-popup .leaflet-popup-content{margin:13px 16px;font:12px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253e38}.position-details>strong{display:block;line-height:19px;margin-bottom:10px;padding-right:10px;font-size:13px}.position-details>div{display:flex;gap:12px;line-height:20px}.position-details>div>span:first-child{color:#829087;flex:0 0 52px}.position-details>div>span:last-child{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.latest-view .map-wrap{height:522px}.view-mode{height:29px;padding:4px 8px;font-size:12px;flex-shrink:0}.fence-options{border-top:1px solid #e2e9e2;margin-top:12px;padding-top:10px}.fence-options button{font-size:11px;padding:5px 7px;margin:0 0 9px}.fence-options small{display:block;font-size:10px;color:#7c8d85;line-height:15px}.fence-options label{margin-bottom:9px}#fence-draw-bar{position:absolute;z-index:1000;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;white-space:nowrap;background:#fffffff2;padding:8px 10px;border:1px solid #dedbeb;border-radius:8px;font-size:12px}#fence-draw-bar button{padding:4px 8px}.drawing-fence #map{cursor:crosshair}

#connection-dialog{width:350px;padding:20px;border:1px solid #dce5df;border-radius:12px;color:#253e38}#connection-dialog::backdrop{background:#18332d45}#connection-dialog form{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dialog-close{border:0;padding:0 5px;font-size:20px}#connection-dialog label{display:block;font-size:12px;margin:10px 0}#connection-dialog input{width:100%;padding:8px;border:1px solid #dce5df;border-radius:7px;margin-top:5px}#connection-dialog>button{margin:5px 3px 5px 0;font-size:12px}#connection-dialog small{display:block;line-height:18px;margin-top:8px;color:#7c8d85}