:root{
  --bg:#0b1020;
  --panel:#111833;
  --panel2:#0f1730;
  --text:#e9ecf5;
  --muted:#9aa3bb;
  --brand:#3b82f6;
  --border:rgba(255,255,255,.10);
  --header-h:56px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--brand);text-decoration:none}
.btn{border:1px solid var(--border);background:transparent;color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{border-color:rgba(255,255,255,.18)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#081023}
.btn.danger{background:#b00020;border-color:#b00020;color:#fff}
.badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--border);font-size:12px;color:var(--muted)}
.review-text{
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
}

/* Google Maps marker labels (used as "bubbles" when zoomed in) */
.poi-label{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  white-space: nowrap;
}
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  background:linear-gradient(180deg, rgba(17,24,51,.96), rgba(17,24,51,.86));
  border-bottom:1px solid var(--border);
  z-index:10;
}
.brand{font-weight:800;letter-spacing:.2px;white-space:nowrap}
.header-search{display:flex;align-items:center;gap:8px;flex:1;min-width:240px}
.search-wrap{position:relative;flex:1;min-width:160px}
.search-input{
  height:34px; /* shrink to avoid overlap */
  width:100%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  color:var(--text);
  border-radius:12px;
  padding:6px 10px;
  outline:none;
}
.search-input:focus{border-color:rgba(59,130,246,.7)}

/* Map search dropdown (DB results / geocoding fallback) */
.search-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:rgba(17,24,51,.98);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
  max-height:320px;
  display:none;
  z-index:60;
}
.search-dropdown.show{display:block}
.search-dropdown .sd-head{
  padding:10px 12px;
  font-size:12px;
  color:var(--muted);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.03);
}
.search-dropdown .sd-item{
  padding:10px 12px;
  cursor:pointer;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.search-dropdown .sd-item:hover,
.search-dropdown .sd-item.active{
  background:rgba(59,130,246,.18);
}
.search-dropdown .sd-title{font-weight:700;font-size:13px;color:var(--text)}
.search-dropdown .sd-sub{font-size:12px;color:var(--muted)}

/* Geocode result preview (shown when selecting a fallback search result). */
.geocode-preview-pin{
  width:14px;
  height:14px;
  border-radius:999px;
  background:rgba(59,130,246,.95);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}

.geocode-preview-popup{max-width:220px}
.geocode-preview-popup .gpp-title{font-weight:800;font-size:13px;color:#0b1220;margin-bottom:4px}
.geocode-preview-popup .gpp-sub{font-size:12px;color:#1f2a44;opacity:.85}

.nav{display:flex;align-items:center;gap:6px}
.nav .btn{padding:8px 10px}
.nav .btn.active{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.5)}
.header-right{display:flex;align-items:center;gap:8px}

.main{
  position:fixed;
  top:var(--header-h);
  left:0;right:0;bottom:0;
  display:flex;
}
.sidebar{
  width:320px;max-width:40vw;
  background:rgba(15,23,48,.90);
  border-right:1px solid var(--border);
  padding:12px;
  overflow:auto;
}
.sidebar h3{margin:6px 0 10px 0}
.type-list{display:flex;flex-direction:column;gap:8px}
.type-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.04)}
.pill{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pill--badge{padding:2px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-weight:800;letter-spacing:.2px;text-transform:capitalize}
.pill--ok{color:#0f7a2a;background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.35)}
.pill--bad{color:#b42318;background:rgba(239,68,68,.18);border-color:rgba(239,68,68,.35)}
.pill--warn{color:#a16207;background:rgba(234,179,8,.18);border-color:rgba(234,179,8,.35)}
.pill--neutral{color:var(--muted);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.content{flex:1;position:relative}
#map{position:absolute;top:0;left:0;right:0;bottom:0}
.view{display:none;flex:1;overflow:hidden}
.view.active{display:flex}
.panel{
  background:rgba(15,23,48,.90);
  border-right:1px solid var(--border);
  padding:12px;
  width:360px;max-width:45vw;
  overflow:auto;
}
.panel h3{margin:6px 0 10px 0}
.tool-list{display:flex;flex-direction:column;gap:8px}
.tool-item{width:100%;text-align:left;border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--text);font-weight:600;cursor:pointer}
.tool-item:hover{background:rgba(255,255,255,.06)}
.tool-item.active{background:rgba(99,102,241,.22);border-color:rgba(99,102,241,.55)}
.card{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;padding:12px;margin-bottom:12px}
.small{color:var(--muted);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width: 980px){
  .sidebar{width:280px}
  .panel{width:320px}
}
@media (max-width: 760px){
  .sidebar{display:none}
  .panel{width:100%;max-width:none;border-right:0}
}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:30}
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.modal-content{
  width:min(920px,95vw);
  max-height:85vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:18px;
  padding:20px;
}
.icon-option{
  transition: all 0.2s ease;
}
.icon-option:hover{
  background: rgba(59,130,246,.1) !important;
  transform: scale(1.05);
}
label{display:block;margin:8px 0 6px 0;color:var(--muted);font-size:12px}
input,textarea,select{width:100%;border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);border-radius:12px;padding:8px 10px;outline:none}
textarea{min-height:88px;resize:vertical}
/* Preserve user-entered line breaks in place descriptions + review text */
#placeDetails .review-text{
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
  word-break: break-word;
}



select option{background:var(--panel);color:var(--text);}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid rgba(255,255,255,0.18);line-height:18px;}
.badge.official{background:rgba(245,197,66,0.16);border-color:rgba(245,197,66,0.45);color:#f5c542;}
.stars{display:inline-flex;gap:1px;vertical-align:middle;}
.star{font-size:14px;line-height:14px;}
.star.on{color:#f5c542;}
.star.off{color:rgba(255,255,255,0.25);}