:root{
  --bg:#141a22;--bg1:#1a2330;--bg2:#202c3c;--bg3:#263444;
  --border:#263852;--border2:#2e4460;
  --text1:#eaf0f8;--text2:#7a9ab8;--text3:#4a6480;
  --red:#e05252;--red-bg:rgba(224,82,82,.12);
  --green:#3fbf6e;--green-bg:rgba(63,191,110,.12);
  --gold:#e8b84b;
  --r6:6px;--r10:10px;--r14:14px;--r20:20px;
}
.light{
  --bg:#f0f4f8;--bg1:#ffffff;--bg2:#e8edf3;--bg3:#dde4ed;
  --border:#c8d3de;--border2:#b0bfcc;
  --text1:#1a2533;--text2:#4a6280;--text3:#8099b0;
  --red:#d03030;--red-bg:rgba(208,48,48,.1);
  --green:#1f9e50;--green-bg:rgba(31,158,80,.1);
  --gold:#c07800;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--text1);font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif}

#app{display:flex;flex-direction:column;height:100vh;height:100dvh}
#main{display:flex;flex:1;overflow:hidden;position:relative}
#map{flex:1;position:relative;z-index:0}
.tiles-dark{filter:brightness(1.5) contrast(0.85)}

/* ── TOOLBAR ── */
#toolbar{display:flex;align-items:center;gap:4px;padding:0 12px;height:52px;background:var(--bg1);border-top:1px solid var(--border);border-bottom:none;flex-shrink:0;scrollbar-width:none;order:3}
#toolbar::-webkit-scrollbar{display:none}
.logo{font-size:15px;font-weight:700;color:var(--gold);letter-spacing:2px;white-space:nowrap;margin-right:8px;flex-shrink:0}
.sep{width:1px;height:18px;background:var(--border2);flex-shrink:0;margin:0 4px}
.tb-group{display:flex;gap:2px;flex-shrink:0;background:var(--bg);border:1px solid var(--border);border-radius:var(--r10);padding:3px}
.tb-btn{height:32px;padding:0 12px;border-radius:var(--r6);border:none;background:transparent;color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;flex-shrink:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;letter-spacing:.2px;line-height:32px}
.tb-btn:hover{background:var(--bg3);color:var(--text1)}
.tb-btn:active{opacity:.7}
.tb-btn.active{background:var(--gold);color:#0a0e13;border-radius:var(--r6)}
.tb-btn.danger{color:var(--red)}
.tb-btn.danger:hover{background:var(--red-bg)}
.spacer{flex:1;min-width:4px}

/* ── STATUSBAR ── */

#zone-list::-webkit-scrollbar{width:2px}
#zone-list::-webkit-scrollbar-thumb{background:var(--border)}
.zone-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r6);cursor:pointer;border:1px solid transparent;transition:all .1s}
.zone-item:hover{background:var(--bg2);border-color:var(--border)}
.zone-item.sel{background:var(--bg2);border-color:var(--border2)}
.zone-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.zone-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text1);font-size:12px}
.zone-del{background:none;border:none;color:var(--text3);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;transition:color .1s}
.zone-del:hover{color:var(--red)}
.empty{text-align:center;padding:28px 12px;color:var(--text3);font-size:11px;line-height:2}

/* ── SEARCH ── */
#search-wrap{position:relative;z-index:9100;display:flex;flex-direction:column;gap:4px;width:220px}
#search-toggle{display:none;width:38px;height:38px;border-radius:50%;background:var(--bg1);border:1px solid var(--border2);color:var(--text1);font-size:16px;cursor:pointer;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.4)}
#search-bar{display:flex;flex-direction:column;gap:4px}
#search-input{width:100%;background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r10);color:var(--text1);font-size:13px;padding:9px 12px 9px 34px;outline:none;box-shadow:0 4px 16px rgba(0,0,0,.4);transition:border-color .15s}
#search-input:focus{border-color:var(--gold)}
#search-icon{position:absolute;left:11px;top:10px;color:var(--text3);font-size:13px;pointer-events:none;line-height:1}
#search-results{position:fixed;background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r10);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.5);display:none;z-index:9500;min-width:220px}
.sr-item{padding:9px 13px;font-size:12px;color:var(--text1);cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.sr-item:last-child{border-bottom:none}
.sr-item:hover{background:var(--bg3)}
.sr-item .sr-main{font-weight:500}
.sr-item .sr-sub{font-size:11px;color:var(--text2);margin-top:2px}

/* ── TIP ── */
#tip{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r6);padding:6px 14px;font-size:11px;color:var(--text2);z-index:500;pointer-events:none;white-space:nowrap;display:none;letter-spacing:.2px}

/* ── RADAR POPUP ── */
#radius-popup{display:none}

/* ── MODALS ── */
#label-modal{display:none;position:fixed;inset:0;background:none;z-index:9999;align-items:center;justify-content:center}
#label-modal.show{display:flex}
#label-box{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r14);padding:22px;width:min(320px,92vw);box-shadow:0 16px 48px rgba(0,0,0,.6)}
#label-box h3{font-size:12px;font-weight:500;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
#label-input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r6);color:var(--text1);font-size:16px;padding:10px 12px;outline:none;margin-bottom:12px;transition:border-color .15s}
#label-input:focus{border-color:var(--gold)}
.modal-btns{display:flex;gap:8px;justify-content:flex-end}
.confirm-modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r14);padding:20px;width:min(300px,90vw);box-shadow:0 16px 48px rgba(0,0,0,.6)}

/* ── BOTTOM SHEETS ── */
.bottom-sheet{display:none;position:fixed;inset:0;bottom:var(--toolbar-h,52px);z-index:9000;background:none;align-items:flex-end;justify-content:center;pointer-events:none}
.bottom-sheet.open{display:flex}
.sheet-box{background:var(--bg2);border-radius:var(--r20);width:100%;max-width:540px;max-height:82vh;display:flex;flex-direction:column;padding-bottom:14px;overflow:hidden;touch-action:pan-y;pointer-events:all;border:1px solid var(--border2);margin-bottom:6px}
.sheet-handle{width:36px;height:3px;background:var(--border2);border-radius:2px;margin:12px auto 8px}
.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:4px 18px 12px;border-bottom:1px solid var(--border);flex-shrink:0}
.sheet-header h3{font-size:14px;font-weight:600;color:var(--text1)}
.sheet-close{background:none;border:none;color:var(--text3);font-size:22px;cursor:pointer;padding:0 4px;line-height:1;-webkit-tap-highlight-color:transparent;transition:color .12s}
.sheet-close:hover{color:var(--text1)}
.sheet-body{overflow-y:auto;flex:1;padding:14px 18px;-webkit-overflow-scrolling:touch}
.sheet-body::-webkit-scrollbar{width:2px}
.sheet-body::-webkit-scrollbar-thumb{background:var(--border)}
.sheet-body input,.sheet-body button{pointer-events:all;touch-action:manipulation}

/* Sheet buttons */
.sh-btn{display:block;width:100%;padding:12px;border-radius:var(--r10);border:1px solid var(--border2);background:var(--bg3);color:var(--text1);font-size:14px;font-weight:500;cursor:pointer;transition:all .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;text-align:center}
.sh-btn:active{opacity:.7}
.sh-btn.hit{border-color:var(--green);background:var(--green-bg);color:var(--green)}
.sh-btn.miss{border-color:var(--red);background:var(--red-bg);color:var(--red)}
.sh-btn.ghost{background:transparent;border-color:var(--border);color:var(--text2);font-size:12px;padding:9px}
.sh-btn.sel{border-color:var(--gold);color:var(--gold);background:rgba(232,184,75,.1)}
.sh-input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r6);color:var(--text1);font-size:15px;padding:10px 12px;outline:none;transition:border-color .15s}
.sh-input:focus{border-color:var(--gold)}
.sh-label{font-size:11px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;display:block}
.sh-row{display:flex;gap:8px;margin-bottom:10px}

/* ── ZONE PANEL ── */
.zp-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r6);border:1px solid transparent;margin-bottom:4px;transition:all .1s}
.zp-item:hover{background:var(--bg3)}
.zp-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.zp-name{flex:1;font-size:12px;color:var(--text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zp-del{background:none;border:1px solid var(--border);border-radius:var(--r6);color:var(--text3);cursor:pointer;font-size:12px;padding:5px 10px;transition:all .1s;white-space:nowrap}
.zp-del:hover{border-color:var(--red);color:var(--red)}
.zp-empty{text-align:center;padding:36px 16px;color:var(--text3);font-size:12px;line-height:2}

/* Thermo */
.tp-log{max-height:100px;overflow-y:auto;border-top:1px solid var(--border);padding-top:10px;display:none;margin-bottom:10px}
.tp-log-item{font-size:11px;color:var(--text2);padding:3px 0;display:flex;align-items:center;gap:6px}
.tp-log-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* Seeker markers on hider map */
.seeker-tooltip{background:rgba(88,166,255,.9);color:#fff;border:none;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.3)}

.tb-icon{font-size:15px;line-height:1;display:block}
.tb-lbl{font-size:11px;display:block}


.units-ctrl{display:block;width:30px;height:30px;line-height:30px;text-align:center;font-size:11px;font-weight:600;background:var(--bg1) !important;color:var(--text1) !important;border:none !important;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;font-family:inherit}
.units-ctrl:hover{background:var(--bg3) !important}


/* Leaflet */
.leaflet-control-zoom{border:1px solid var(--border2) !important;border-radius:var(--r10) !important;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.4) !important}
.leaflet-control-zoom a{background:var(--bg1) !important;color:var(--text1) !important;border-color:var(--border) !important}
.leaflet-control-zoom a:hover{background:var(--bg3) !important}
.leaflet-bar{border:none !important}

/* ── MOBILE ── */
@media(max-width:700px){
  #app{flex-direction:column}
  #main{order:1;flex:1}

  #toolbar{
    order:4;
    border-top:1px solid var(--border);
    border-bottom:none;
    padding:6px 8px;
    padding-bottom:max(6px,env(safe-area-inset-bottom));
    height:auto;
    background:var(--bg1);
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:4px;
  }
  /* Locate button left of search in top row */
  #btn-locate{grid-column:1;grid-row:1;align-self:center}
  #search-wrap{
    grid-column:2/-1;
    grid-row:1;
    position:relative;
    width:auto;
    border-bottom:1px solid var(--border);
    padding:4px 0 6px;
    z-index:7500;
    display:flex !important;
    flex-direction:column;
    gap:0;
  }
  #search-toggle{display:none !important}
  #search-bar{
    display:flex !important;
    position:relative;
    width:100%;
  }
  #search-results{max-height:200px;overflow-y:auto}
  .logo{display:none}
  .sep{display:none}
  .spacer{display:none}
  .tb-group{display:contents}
  .tb-btn{
    height:auto;
    padding:6px 2px 5px;
    border:none;
    border-radius:var(--r10);
    background:transparent;
    color:var(--text3);
    font-size:10px;
    line-height:1.3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    width:100%;
  }
  .tb-btn::before{font-size:20px;line-height:1}
  .tb-btn.active{background:rgba(232,184,75,.12);color:var(--gold)}
  .tb-btn.danger{color:var(--red)}
  /* Assign icons via before pseudo — hide text content */
  #toolbar .tb-btn span.label{font-size:10px}

  /* All buttons visible on mobile */

  .tb-icon{font-size:22px}
  .tb-lbl{font-size:9px;color:inherit}

  #tip{top:12px}
  .leaflet-control-zoom{margin-bottom:0 !important}
  .sheet-box{max-height:calc(92vh - var(--toolbar-h,120px))}
}
@media(min-width:701px){
  #search-toggle{display:none !important}
  #search-bar{display:flex !important}
}