*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f1f3f4;--white:#fff;--surface:#fff;--border:#e0e0e0;
  --text:#202124;--muted:#5f6368;--accent:#1a73e8;--accent-dark:#1557b0;
  --green:#188038;--radius:8px;--header:56px;
  --cat-bar:#e37400;--cat-food:#d93025;--cat-edu:#1e8e3e;
  --cat-transport:#1a73e8;--cat-finance:#9334e6;--cat-health:#d93025;
  --cat-culture:#e37400;--cat-public:#5f6368;--cat-facility:#0097a7;
  --cat-waste:#5d4037;--cat-other:#455a64;
}
html,body{height:100%;width:100%;overflow:hidden;font-family:'Inter',sans-serif;background:var(--bg)}
header{
  height:var(--header);background:var(--white);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;padding:0 12px;
  position:relative;z-index:1000;flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.logo{font-size:20px;font-weight:700;color:var(--accent);white-space:nowrap;letter-spacing:-.3px}
.logo em{color:var(--text);font-style:normal}
.search-bar{
  flex:1;display:flex;align-items:center;
  background:#f1f3f4;border:1px solid transparent;border-radius:24px;
  padding:0 4px 0 14px;transition:all .2s;max-width:560px;
}
.search-bar:focus-within{background:var(--white);border-color:transparent;box-shadow:0 1px 6px rgba(32,33,36,.28)}
#search-input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:inherit;font-size:15px;color:var(--text);padding:8px 0;
}
#search-input::placeholder{color:var(--muted)}
#search-btn{
  background:var(--accent);border:none;border-radius:20px;
  padding:7px 16px;color:#fff;font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer;white-space:nowrap;transition:background .15s;display:flex;align-items:center;gap:5px;
}
#search-btn:hover{background:var(--accent-dark)}
#search-btn:disabled{opacity:.6;cursor:not-allowed}
.main{display:flex;flex:1;height:calc(100vh - var(--header));overflow:hidden}
#map{flex:1;z-index:0}
#panel{
  width:360px;background:var(--white);border-left:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;
}
#cat-section{
  border-bottom:1px solid var(--border);overflow:hidden;
  transition:max-height .3s ease;max-height:400px;
}
#cat-section.collapsed{max-height:0}
.cat-header{
  padding:8px 12px 6px;display:flex;align-items:center;justify-content:space-between;
}
.cat-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.cat-toggle{
  background:none;border:none;cursor:pointer;font-size:11px;color:var(--accent);
  font-family:inherit;padding:2px 6px;border-radius:4px;
}
.cat-toggle:hover{background:#e8f0fe}
.cat-scroll{overflow-x:auto;padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.cat-scroll::-webkit-scrollbar{display:none}
.cat-row{display:flex;gap:5px;flex-wrap:nowrap}
.cat-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 10px;border-radius:16px;border:1.5px solid;
  font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;
  transition:all .15s;user-select:none;background:var(--white);
}
.cat-badge:hover{opacity:.85;transform:translateY(-1px)}
.cat-badge.active{color:#fff!important;border-color:transparent!important}
.c-sustenance{color:var(--cat-food);border-color:var(--cat-food)}
.c-sustenance.active{background:var(--cat-food)}
.c-education{color:var(--cat-edu);border-color:var(--cat-edu)}
.c-education.active{background:var(--cat-edu)}
.c-transport{color:var(--cat-transport);border-color:var(--cat-transport)}
.c-transport.active{background:var(--cat-transport)}
.c-financial{color:var(--cat-finance);border-color:var(--cat-finance)}
.c-financial.active{background:var(--cat-finance)}
.c-healthcare{color:var(--cat-health);border-color:var(--cat-health)}
.c-healthcare.active{background:var(--cat-health)}
.c-culture{color:var(--cat-culture);border-color:var(--cat-culture)}
.c-culture.active{background:var(--cat-culture)}
.c-public{color:var(--cat-public);border-color:var(--cat-public)}
.c-public.active{background:var(--cat-public)}
.c-facility{color:var(--cat-facility);border-color:var(--cat-facility)}
.c-facility.active{background:var(--cat-facility)}
.c-waste{color:var(--cat-waste);border-color:var(--cat-waste)}
.c-waste.active{background:var(--cat-waste)}
.c-other{color:var(--cat-other);border-color:var(--cat-other)}
.c-other.active{background:var(--cat-other)}
.panel-results-header{
  padding:8px 12px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.panel-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.result-count{font-size:12px;font-weight:600;color:var(--green)}
#query-text{
  background:#f8f9fa;padding:8px 12px;
  font-family:'SFMono-Regular',Consolas,monospace;font-size:10px;
  color:#5f6368;white-space:pre-wrap;word-break:break-all;
  max-height:80px;overflow-y:auto;line-height:1.5;display:none;
  border-top:1px solid var(--border);
}
#results-section{display:none;flex-direction:column;min-height:0;overflow:hidden}
#results-section.visible{display:flex;flex:1}
#results-section.collapsed #result-list{display:none}
.results-toggle{background:none;border:none;cursor:pointer;font-size:11px;color:var(--accent);font-family:inherit;padding:2px 6px;border-radius:4px;margin-left:auto}
.results-toggle:hover{background:#e8f0fe}
#result-list{flex:1;overflow-y:auto;min-height:0}
#result-list::-webkit-scrollbar{width:4px}
#result-list::-webkit-scrollbar-track{background:transparent}
#result-list::-webkit-scrollbar-thumb{background:#dadce0;border-radius:2px}
.result-item{
  padding:10px 12px;border-bottom:1px solid #f1f3f4;
  cursor:pointer;display:flex;align-items:flex-start;gap:10px;
  transition:background .1s;
}
.result-item:hover{background:#f8f9fa}
.result-item:last-child{border-bottom:none}
.ri-icon{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;font-size:18px;flex-shrink:0;background:#f1f3f4;
}
.ri-info{flex:1;min-width:0}
.ri-name{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-sub{font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-type{font-size:10px;background:#f1f3f4;border-radius:4px;padding:2px 5px;color:var(--muted);flex-shrink:0;margin-top:2px}
.state-msg{padding:32px 20px;text-align:center;color:var(--muted)}
.state-msg .ico{font-size:36px;margin-bottom:10px}
.state-msg strong{display:block;color:var(--text);font-size:14px;margin-bottom:4px}
.state-msg p{font-size:13px;line-height:1.5}
#toast{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(60px);
  background:#323232;color:#fff;border-radius:8px;padding:10px 18px;
  font-size:13px;z-index:9999;transition:transform .25s ease;max-width:320px;text-align:center;
  pointer-events:none;
}
#toast.show{transform:translateX(-50%) translateY(0)}
.spin{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:rot .6s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.locate-btn{display:flex!important;align-items:center;justify-content:center;width:34px;height:34px;color:#5f6368}
.locate-btn:hover{background:#e8f0fe;color:#1a73e8}
.leaflet-popup-content-wrapper{border-radius:10px!important;box-shadow:0 4px 16px rgba(0,0,0,.18)!important;padding:0!important;overflow:hidden}
.leaflet-popup-content{margin:0!important}
.popup-inner{padding:12px 14px}
.popup-title{font-weight:600;font-size:13px;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.popup-tags{font-size:11px;color:var(--muted);line-height:1.7}
.popup-tag-row{display:flex;gap:4px}
.popup-key{color:#80868b}
.micon{
  width:34px;height:34px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.3);border:2px solid rgba(255,255,255,.8);
}
.micon span{transform:rotate(45deg);font-size:15px;line-height:1}
.micon img{transform:rotate(45deg);filter:brightness(0) invert(1);width:16px;height:16px}
.ri-icon img{width:18px;height:18px;filter:brightness(0) invert(.4)}
.popup-title img{width:14px;height:14px;vertical-align:middle;filter:brightness(0) invert(.4);margin-right:4px}
@media(max-width:700px){
  :root{--header:52px}
  .logo{display:none}
  .main{flex-direction:column}
  #map{height:52vh;min-height:180px}
  #panel{width:100%;border-left:none;border-top:1px solid var(--border);height:48vh}
  #cat-section{max-height:120px}
  .cat-scroll{padding:0 6px 6px}
  .cat-badge{font-size:11px;padding:4px 8px}
}