:root{
  --bg:#0b0f14;
  --panel:#111827;
  --panel2:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.10);
  --accent:#fbbf24;
  --accent2:#60a5fa;
  --btn:#1f2937;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
}

.topbar{
  height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  background:rgba(17,24,39,.85);
  backdrop-filter: blur(8px);
  position:sticky;
  top:0;
  z-index:1000;
}

.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(251,191,36,.25), rgba(96,165,250,.25));
  border:1px solid var(--line);
  font-weight:800;
}
.brand-text .title{font-weight:800;letter-spacing:.5px}
.brand-text .subtitle{font-size:12px;color:var(--muted);margin-top:2px}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.btn-ghost:hover{border-color:rgba(251,191,36,.45)}

.layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  min-height: calc(100vh - 58px);
}

.sidebar{
  border-right:1px solid var(--line);
  background:rgba(15,23,42,.9);
  backdrop-filter: blur(8px);
  overflow:auto;
}

.panel{padding:14px}
.panel h2{margin:0 0 12px 0}
.sep{border:0;border-top:1px solid var(--line);margin:14px 0}

.filters{display:flex;flex-direction:column;gap:12px}
.filter-actions{display:flex;gap:10px}

.btn-primary,.btn-secondary{
  border-radius:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  cursor:pointer;
  font-weight:700;
}
.btn-primary{background:rgba(251,191,36,.16); color:var(--text)}
.btn-primary:hover{border-color:rgba(251,191,36,.55)}
.btn-secondary{background:rgba(31,41,55,.7); color:var(--text)}
.btn-secondary:hover{border-color:rgba(96,165,250,.55)}

.field label{display:block;margin-bottom:6px}
.field select,.field input{
  width:100%;
  border:1px solid var(--line);
  background:rgba(17,24,39,.55);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
}
.field select{padding:10px}
.field input::placeholder{color:rgba(229,231,235,.45)}
.hint{font-size:12px;color:var(--muted);margin-top:6px}

.mini-actions{display:flex;gap:8px;margin-top:8px}
.btn-mini{
  padding:7px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(31,41,55,.55);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.btn-mini:hover{border-color:rgba(96,165,250,.55)}

.filter-group{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:rgba(17,24,39,.35);
}
.filter-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.filter-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  text-transform:capitalize;
}
.badge-emoji{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background:rgba(251,191,36,.12);
  border:1px solid var(--line);
}

.group-toggle{
  background:rgba(31,41,55,.55);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  cursor:pointer;
  padding:6px 10px;
  font-weight:700;
  font-size:12px;
}
.group-toggle:hover{border-color:rgba(251,191,36,.45)}

.subfilters{padding:10px 12px; display:flex; flex-direction:column; gap:8px}
.subfilters.is-collapsed{display:none}

.checkrow{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  line-height:1.2;
}
.checkrow input{margin-top:2px; transform:scale(1.15)}

.legend-title{margin:0 0 10px 0}
.legend{display:flex;flex-direction:column;gap:8px}
.legend-item{display:flex;align-items:center;gap:10px}
.legend-text{color:var(--text)}

.map-wrap{position:relative}
#map{
  width:100%;
  height: calc(100vh - 58px);
}

.visited-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.visited-label{color:var(--text);font-weight:800}

.footer-note{
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
  opacity:.9;
}

.debug-banner{
  white-space:pre-wrap;
  background:rgba(239,68,68,.14);
  border-bottom:1px solid rgba(239,68,68,.35);
  padding:10px 14px;
  color:var(--text);
  font-weight:700;
}

/* ==== Emoji markers ==== */
.mm-emoji{
  width:64px;height:64px;
  display:grid;place-items:center;
  font-size:34px;            /* emoji grande */
  line-height:1;
  border-radius:20px;
  background:rgba(17,24,39,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.mm-emoji.visited{
  border-color: rgba(251,191,36,.75);
  box-shadow: 0 10px 22px rgba(251,191,36,.15);
}

/* Popup */
.popup-title{font-weight:900;margin-bottom:4px}
.popup-meta{color:var(--muted);font-size:12px;margin-bottom:8px}
.popup-desc{margin-top:8px}
.popup-img{
  width:100%;
  max-width:320px;
  border-radius:12px;
  border:1px solid var(--line);
}

/* Responsive */
@media (max-width: 980px){
  .layout{grid-template-columns: 1fr}
  .sidebar{
    position:fixed;
    top:58px;
    left:0;
    width:min(92vw, 420px);
    height:calc(100vh - 58px);
    z-index:1200;
    transform:translateX(0);
  }
  #map{height: calc(100vh - 58px)}
  .hide-mobile{display:none}
}