:root {
  --navy:#0B1F4B; --navy2:#132966; --navy3:#1E3A8A;
  --orange:#F97316; --orange2:#FB923C;
  --o-pale:#FFF7ED; --o-border:rgba(249,115,22,.2);
  --white:#fff; --off:#F8FAFF;
  --gray:#64748B; --gray2:#94a3b8; --border:#E2E8F0;
  --green:#22c55e; --green-pale:#f0fdf4; --green-border:#86efac;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}
body{font-family:'DM Sans',sans-serif;color:var(--navy);display:flex;flex-direction:column;}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);height:64px;
  display:flex;align-items:center;padding:0 24px;
}
.nav-inner{width:100%;display:flex;align-items:center;justify-content:space-between;}
.logo-img{height:48px;object-fit:contain;}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:9px;
  background:var(--off);border:1.5px solid var(--border);
  font-size:13px;font-weight:600;color:var(--navy);text-decoration:none;transition:all .2s;
}
.back-btn:hover{border-color:var(--navy);background:var(--white);}
.back-btn svg{width:14px;height:14px;fill:var(--navy);}

/* ── APP WRAPPER ── */
#app{
  margin-top:64px;
  height:calc(100vh - 64px);
  display:flex;flex-direction:column;overflow:hidden;
}

/* ── STATUS BAR ── */
.status-bar{
  display:flex;align-items:center;gap:12px;
  padding:11px 20px;border-bottom:1px solid var(--border);
  flex-shrink:0;transition:background .3s;
}
.s-detecting{background:#f0f9ff;}
.s-detected {background:var(--green-pale);}
.s-error    {background:#fef2f2;}
.s-title{font-size:13px;font-weight:700;}
.s-detecting .s-title{color:#0369a1;}
.s-detected  .s-title{color:#16a34a;}
.s-error     .s-title{color:#dc2626;}
.s-sub{font-size:11px;margin-top:1px;}
.s-detecting .s-sub{color:#0284c7;}
.s-detected  .s-sub{color:#166534;}
.s-error     .s-sub{color:#b91c1c;}

/* ── ANIMATIONS ── */
@keyframes spin   {to{transform:rotate(360deg);}}
@keyframes pulse  {0%,100%{opacity:1;}50%{opacity:.3;}}
@keyframes fadeUp {from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.spin{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  border:3px solid #bae6fd;border-top-color:#0ea5e9;
  animation:spin .7s linear infinite;
}
.tick{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:var(--green);display:flex;align-items:center;justify-content:center;
}
.tick svg{width:12px;height:12px;fill:#fff;}
.err-icon{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:#dc2626;color:#fff;font-weight:700;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}

/* ── LAYOUT ── */
.main-layout{display:flex;flex:1;overflow:hidden;}

/* ── SIDEBAR ── */
.sidebar{
  width:360px;min-width:280px;flex-shrink:0;
  display:flex;flex-direction:column;
  border-right:1px solid var(--border);background:var(--white);overflow:hidden;
}
.sidebar-header{
  padding:14px 16px 10px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sidebar-title{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;color:var(--navy);
}
.sidebar-meta{
  font-size:11px;color:var(--gray);margin-top:3px;
  display:flex;align-items:center;gap:7px;
}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite;flex-shrink:0;}

.wh-list{
  flex:1;overflow-y:auto;padding:11px;
  display:flex;flex-direction:column;gap:9px;
}
.wh-list::-webkit-scrollbar{width:4px;}
.wh-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* ── CARD ── */
.wh-card{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:14px;cursor:pointer;transition:all .22s;
  animation:fadeUp .35s ease both;overflow:hidden;
}
.wh-card:hover{border-color:var(--orange2);box-shadow:0 4px 18px rgba(249,115,22,.1);}
.wh-card.selected{border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.12);}
.wh-card.nearest{border-color:var(--orange);}

.card-head{display:flex;align-items:flex-start;gap:11px;padding:12px 12px 8px;}
.card-icon{
  width:38px;height:38px;border-radius:10px;background:var(--off);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.card-info{flex:1;min-width:0;}
.badges{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px;}
.b-nearest{
  background:var(--orange);color:#fff;
  font-size:9px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;padding:2px 7px;border-radius:100px;
}
.b-gen{
  background:var(--off);color:var(--gray);border:1px solid var(--border);
  font-size:9px;font-weight:600;padding:2px 7px;border-radius:100px;
}
.card-name{font-size:13px;font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:2px;}
.card-addr{font-size:11px;color:var(--gray);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.card-foot{
  display:flex;align-items:center;
  padding:9px 12px;border-top:1px solid var(--border);background:var(--off);
}
.metric{flex:1;}
.metric-val{
  font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;
  color:var(--navy);line-height:1;
}
.wh-card.nearest .metric-val,
.wh-card.selected .metric-val{color:var(--orange);}
.metric-lbl{font-size:10px;color:var(--gray2);margin-top:1px;text-transform:uppercase;letter-spacing:.4px;}
.mdivider{width:1px;height:26px;background:var(--border);margin:0 8px;}
.nav-btn{
  margin-left:auto;font-size:11px;font-weight:700;
  color:var(--orange);background:var(--o-pale);
  border:1px solid var(--o-border);padding:5px 11px;
  border-radius:7px;cursor:pointer;transition:all .2s;
  white-space:nowrap;font-family:'DM Sans',sans-serif;
}
.nav-btn:hover{background:var(--orange);color:#fff;border-color:var(--orange);}

/* ── MAP AREA ── */
.map-area{flex:1;position:relative;background:#e8edf5;}
#map{width:100%;height:100%;}

/* ── LOADING ── */
#loading{
  position:absolute;inset:0;background:rgba(248,250,255,.88);
  display:none;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;z-index:500;backdrop-filter:blur(3px);
}
#loading .spin{width:36px;height:36px;border-width:4px;}
.loading-txt{font-size:13px;font-weight:600;color:var(--navy);}

/* ── LEGEND ── */
.legend{
  position:absolute;bottom:20px;right:14px;z-index:400;
  background:rgba(255,255,255,.96);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;font-size:11px;
  box-shadow:0 2px 10px rgba(11,31,75,.08);
}
.l-row{display:flex;align-items:center;gap:7px;color:var(--gray);margin-bottom:5px;}
.l-row:last-child{margin-bottom:0;}
.l-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* ── EMPTY STATE ── */
.empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;height:100%;padding:40px 20px;text-align:center;
}
.empty svg{width:48px;height:48px;fill:var(--border);margin-bottom:12px;}
.empty h3{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:18px;color:var(--navy);margin-bottom:6px;}
.empty p{font-size:13px;color:var(--gray);line-height:1.6;max-width:230px;}

/* ── LEAFLET POPUP OVERRIDES ── */
.leaflet-popup-content-wrapper{
  border-radius:12px !important;padding:0 !important;
  box-shadow:0 8px 28px rgba(11,31,75,.14) !important;
  border:1.5px solid var(--border) !important;
}
.leaflet-popup-content{margin:0 !important;font-family:'DM Sans',sans-serif;}
.leaflet-popup-tip-container{display:none;}
.popup-inner{padding:14px 16px;}
.popup-name{font-weight:700;font-size:14px;color:var(--navy);line-height:1.3;margin-bottom:3px;}
.popup-addr{font-size:11px;color:var(--gray);margin-bottom:10px;line-height:1.4;}
.popup-metrics{display:flex;gap:16px;margin-bottom:10px;}
.popup-metric-val{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:20px;color:var(--orange);line-height:1;}
.popup-metric-val.dark{color:var(--navy);}
.popup-metric-lbl{font-size:10px;color:var(--gray2);text-transform:uppercase;letter-spacing:.4px;}
.popup-nav{
  width:100%;padding:8px;background:var(--orange);color:#fff;
  border:none;border-radius:8px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:'DM Sans',sans-serif;transition:background .2s;
}
.popup-nav:hover{background:#e86209;}
.popup-gen-note{font-size:10px;color:var(--gray2);font-style:italic;margin-bottom:8px;}

/* ── USER LOCATION DOT ── */
.user-dot{
  width:18px;height:18px;background:#1E3A8A;border-radius:50%;
  border:3px solid white;box-shadow:0 0 0 5px rgba(30,58,138,.2);
}

/* ── CUSTOM PIN ── */
.map-pin{filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}

/* ── SEARCH BAR ── */
.search-section{
  padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--white);
}
.search-row{display:flex;gap:7px;align-items:center;}
.search-wrap{position:relative;flex:1;}
.search-wrap svg{
  position:absolute;left:10px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;fill:var(--gray2);pointer-events:none;
}
.search-input{
  width:100%;border:1.5px solid var(--border);border-radius:9px;
  padding:9px 10px 9px 30px;font-family:'DM Sans',sans-serif;
  font-size:13px;color:var(--navy);outline:none;
  background:var(--off);transition:border .2s;
}
.search-input:focus{border-color:var(--navy3);background:var(--white);}
.search-input::placeholder{color:var(--gray2);}
.btn-search{
  padding:9px 14px;border-radius:9px;border:none;cursor:pointer;
  background:var(--orange);color:#fff;font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:700;transition:background .2s;white-space:nowrap;
  box-shadow:0 2px 8px rgba(249,115,22,.25);
}
.btn-search:hover{background:#e86209;}
.btn-search:disabled{background:var(--gray2);box-shadow:none;cursor:not-allowed;}
.btn-gps{
  width:36px;height:36px;border-radius:9px;border:1.5px solid var(--border);
  background:var(--off);cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;transition:all .2s;
}
.btn-gps:hover{border-color:var(--navy);background:var(--white);}
.btn-gps svg{width:15px;height:15px;fill:var(--navy3);}

/* ── MOBILE ── */
@media(max-width:768px){
  .main-layout{flex-direction:column;}
  .sidebar{width:100%;min-width:0;max-height:50vh;}
  .map-area{flex:1;}
  nav{padding:0 12px;height:56px;}
  .logo-img{height:36px;}
  #app{margin-top:56px;height:calc(100vh - 56px);}
  .back-btn{padding:6px 10px;font-size:12px;gap:4px;}
  .back-txt{display:none;}
}