:root{--bg:rgba(24,29,33,.93);--line:rgba(255,255,255,.16);--text:#f4f7f8;--muted:#aeb9c0;--accent:#27d5ff;--good:#35db83;--warn:#f2c84b;--bad:#ef5969}
*{box-sizing:border-box}html,body,#map{width:100%;height:100%;margin:0;overflow:hidden;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--text)}body{background:#111}.glass{background:var(--bg);border:1px solid var(--line);box-shadow:0 5px 20px rgba(0,0,0,.28);backdrop-filter:blur(8px)}.hidden{display:none!important}
#topbar{position:absolute;z-index:20;top:8px;left:8px;height:48px;border-radius:14px;padding:4px 9px 4px 5px;display:flex;align-items:center;gap:7px;max-width:calc(100vw - 70px)}.brand{display:flex;align-items:center;gap:5px;font-weight:800;font-size:13px;white-space:nowrap}.brand img{width:38px;height:38px;object-fit:contain}.accent{color:var(--accent)}
.sensor{height:27px;border:1px solid var(--line);border-radius:999px;padding:0 7px;display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);white-space:nowrap}.sensor i{width:7px;height:7px;border-radius:50%;background:var(--bad)}.sensor.good i{background:var(--good)}.sensor.warn i{background:var(--warn)}.sensor.bad i{background:var(--bad)}.range{font:700 10px ui-monospace,Consolas,monospace;color:var(--muted);white-space:nowrap}.rec-chip{height:25px;border:1px solid rgba(239,89,105,.5);border-radius:999px;padding:0 6px;display:flex;align-items:center;gap:4px;font-size:9px;color:#ff9aa6}.rec-chip i{width:6px;height:6px;border-radius:50%;background:#ff5969}
.tools{position:absolute;z-index:20;top:64px;left:8px;width:42px;border-radius:13px;padding:4px;display:flex;flex-direction:column;gap:4px}.tools button,.mini-controls button{border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);border-radius:10px;height:34px;min-width:34px;font-size:16px;cursor:pointer}.tools button:hover,.tools button.active,.mini-controls button:hover{border-color:var(--accent);background:rgba(39,213,255,.14)}.tools .sep{height:1px;background:var(--line);margin:2px 3px}.tools button.danger,.mini-controls button.danger{color:#ff7b8b}.tools button:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line)!important;background:rgba(255,255,255,.03)!important}
.mini-controls{position:absolute;z-index:20;top:8px;right:8px;height:42px;border-radius:13px;padding:4px;display:flex;gap:4px;align-items:center}.mini-controls button{font-size:10px;font-weight:800;padding:0 9px}
.panel{position:absolute;z-index:25;top:64px;left:58px;width:min(255px,calc(100vw - 74px));border-radius:14px;padding:9px;font-size:11px}.panel header{height:25px;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-size:12px}.panel header .close{border:0;background:transparent;color:var(--muted);font-size:18px;cursor:pointer}.panel label,.startup-card label{display:block;color:var(--muted);margin:5px 0}.panel input,.panel select,.startup-card input,.startup-card select{width:100%;height:31px;border:1px solid var(--line);border-radius:8px;background:#12171a;color:var(--text);padding:4px 7px;font-size:11px}.panel button,.startup-card button{height:31px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.07);color:var(--text);font-size:11px;cursor:pointer}.panel button.primary,.startup-card button.primary{border-color:rgba(39,213,255,.7);background:rgba(39,213,255,.15)}.panel .wide,.startup-card .wide{flex:1;width:100%}.panel .row,.startup-card .row{display:flex;gap:6px;margin:5px 0}.panel small,.hint,.startup-card small{display:block;color:var(--muted);font-size:9.5px;line-height:1.35;margin:4px 0 7px}.panel details{border-top:1px solid var(--line);margin-top:7px;padding-top:6px}.panel summary{color:var(--muted);cursor:pointer;margin-bottom:5px}.measure-value{font-size:20px;font-weight:800;margin:6px 0;color:var(--accent)}kbd{font:700 8px ui-monospace,Consolas,monospace;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 3px;margin-left:3px}
.startup-overlay{position:absolute;z-index:100;inset:0;background:rgba(7,10,12,.64);display:flex;align-items:center;justify-content:center;padding:12px}.startup-card{width:min(310px,calc(100vw - 24px));border-radius:16px;padding:12px}.startup-brand{display:flex;gap:9px;align-items:center;margin-bottom:9px}.startup-brand img{width:48px;height:48px;object-fit:contain}.startup-brand b{font-size:15px}.startup-brand small{margin:3px 0 0}.startup-sep{height:22px;display:flex;align-items:center;gap:7px;color:var(--muted);font-size:9px}.startup-sep:before,.startup-sep:after{content:"";height:1px;background:var(--line);flex:1}
#toast{position:absolute;z-index:120;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(20,24,27,.94);color:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 11px;font-size:11px;opacity:0;pointer-events:none;transition:.18s}#toast.show{opacity:1}.maplibregl-ctrl-bottom-right{right:6px!important;bottom:4px!important}.maplibregl-ctrl-bottom-left{left:6px!important;bottom:5px!important}.maplibregl-ctrl-scale{background:rgba(20,24,27,.75)!important;color:#fff!important;border-color:#fff!important;font-size:9px!important}.maplibregl-ctrl-group{background:rgba(24,29,33,.9)!important;border:1px solid var(--line)!important;box-shadow:0 2px 8px rgba(0,0,0,.3)!important}.maplibregl-ctrl-group button{width:30px!important;height:30px!important}.maplibregl-ctrl-icon{filter:invert(1) brightness(1.7)}
.drone-marker{width:32px;height:32px;position:relative;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}.drone-arrow{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;color:#35db83;font-size:20px;line-height:22px;transform-origin:50% 50%}.drone-dot{position:absolute;width:10px;height:10px;left:11px;top:11px;border-radius:50%;background:#fff;border:2px solid #162126}.drone-marker.stale{opacity:.48}.drone-marker.hidden{display:none}
.edit-handle{width:15px;height:15px;border-radius:50%;background:#f2c84b;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.55);cursor:grab}.edit-handle.point{width:18px;height:18px;background:#ff5969}.edit-handle:active{cursor:grabbing}
.maplibregl-popup-content{background:rgba(24,29,33,.96)!important;color:#fff!important;border:1px solid rgba(255,255,255,.16);border-radius:10px!important;padding:8px!important;font-size:10px!important}.maplibregl-popup-tip{border-top-color:rgba(24,29,33,.96)!important;border-bottom-color:rgba(24,29,33,.96)!important}.maplibregl-popup-close-button{color:#aeb9c0!important;font-size:16px!important}.annotation-popup{display:flex;min-width:175px;max-width:235px;flex-direction:column;gap:5px}.annotation-popup small{color:#aeb9c0;line-height:1.25}.annotation-popup button{height:26px;border:1px solid rgba(239,89,105,.5);background:rgba(239,89,105,.12);color:#fff;border-radius:7px;font-size:10px;cursor:pointer}.annotation-name-input{width:100%;height:28px;border:1px solid rgba(39,213,255,.5);border-radius:7px;background:#12171a;color:#fff;padding:4px 7px;font:600 11px Inter,Segoe UI,Arial,sans-serif;outline:none}.annotation-name-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(39,213,255,.12)}
@media(max-width:520px){#topbar{gap:4px;padding-right:5px}.brand img{width:34px;height:34px}.brand{font-size:12px}.sensor{padding:0 5px}.range{display:none}.panel{top:60px}.rec-chip span{display:none}}

/* ORCA Map Lite v1.4 - track + SonarView-style range grid */
.range-label{pointer-events:none;color:rgba(255,255,255,.9);font:700 9px ui-monospace,Consolas,monospace;text-shadow:0 1px 3px #000,0 0 3px #000;white-space:nowrap;transform:translate(-50%,-50%)}
.gps-track-legend{display:none}

/* ORCA Map Lite v1.4d - compact waypoint names above waypoint dots */
.waypoint-label{pointer-events:none;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;font:700 9px Inter,Segoe UI,Arial,sans-serif;line-height:11px;text-align:center;text-shadow:0 1px 3px #000,0 0 4px #000;user-select:none}

#mapWarning{position:absolute;left:58px;bottom:45px;z-index:30;background:#342b20;color:#f6d591;padding:8px;border-radius:8px;font-size:10px;max-width:80%}.maplibregl-ctrl-attrib{font-size:9px!important;max-width:100%;background:#ffffffcc!important;color:#222!important}#topbar{max-width:calc(100vw - 110px)}
