*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
  background:#0b1020;
  color:#e9eefc;
}

/* Debug banner */
.debugBanner{
  position:fixed;
  top:72px;
  right:12px;
  z-index:99999;
  max-width:min(520px, 92vw);
  padding:12px 14px;
  border-radius:14px;
  background:rgba(220,38,38,.16);
  border:1px solid rgba(220,38,38,.35);
  color:#ffecec;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  font-size:13px;
  line-height:1.35;
  white-space:pre-wrap;
}

/* Topbar */
.topbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  background:linear-gradient(90deg, rgba(10,15,30,.95), rgba(9,13,25,.95));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{ display:flex; align-items:center; gap:10px; }
.logo{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#0b1020;
  background:linear-gradient(135deg, #ff9a3d, #ff3d8d);
}
.brand-text .title{ font-weight:900; letter-spacing:.5px; }
.brand-text .subtitle{ font-size:12px; color:rgba(233,238,252,.72); }

/* Buttons */
button{
  cursor:pointer;
  border-radius:12px;
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#e9eefc;
}
button:hover{ background:rgba(255,255,255,.10); }
.btn-primary{ background:rgba(59,130,246,.22); border-color:rgba(59,130,246,.35); }
.btn-secondary{ background:rgba(148,163,184,.12); border-color:rgba(148,163,184,.18); }
.btn-ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.hide-mobile{ display:inline; }
@media (max-width:700px){ .hide-mobile{ display:none; } }

/* Layout */
.layout{
  height:calc(100vh - 64px);
  display:flex;
  overflow:hidden;
}

/* Sidebar */
.sidebar{
  width:360px;
  background:rgba(11,16,32,.98);
  border-right:1px solid rgba(255,255,255,.08);
  overflow-y:auto;
  transition:transform .25s ease;
}
.sidebar.is-hidden{ transform:translateX(-100%); }
.panel{ padding:14px; }
.panel h2{ margin:0 0 12px 0; font-size:18px; }

.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
}
.filter-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.filters-container{ display:flex; flex-direction:column; gap:10px; }

.filter-group{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px;
}
.filter-group-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.filter-group-title{ display:flex; align-items:center; gap:10px; font-weight:800; }
.badge-emoji{
  width:34px; height:34px;
  border-radius:14px;
  display:grid; place-items:center;
  background:rgba(15,23,42,.85);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  font-size:20px;
}
.group-toggle{ padding:6px 10px; border-radius:12px; font-size:12px; }
.subfilters{ margin-top:10px; padding-left:6px; display:flex; flex-direction:column; gap:8px; }
.subfilters.is-collapsed{ display:none; }

.checkrow{ display:flex; align-items:center; gap:10px; font-size:14px; line-height:1.2; }
.checkrow input{ transform:scale(1.1); }

.legend-item{ display:flex; align-items:center; gap:10px; margin:6px 0; }
.legend-text{ font-size:14px; color:rgba(233,238,252,.9); }

.muted{ color:rgba(233,238,252,.72); font-size:13px; line-height:1.35; }

/* Map */
.map-wrap{ flex:1; position:relative; background:#0b1020; }
#map{ width:100%; height:100%; }

/* Emoji markers BIG + fixed size */
.mm-emoji{
  width:64px;
  height:64px;
  border-radius:26px;
  display:grid;
  place-items:center;
  font-size:34px;
  background:rgba(15,23,42,.92);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 16px 34px rgba(0,0,0,.40);
}
.mm-emoji.visited{ outline:6px solid rgba(34,197,94,.50); }

/* Popup */
.popup-title{ font-weight:900; margin:0 0 4px 0; }
.popup-meta{ font-size:12px; color:rgba(20,24,35,.65); margin:0 0 8px 0; }
.popup-desc{ font-size:13px; line-height:1.35; margin:0 0 10px 0; }
.popup-img{
  width:100%;
  border-radius:12px;
  margin:6px 0 10px 0;
  display:block;
}

/* Responsive sidebar */
@media (max-width:900px){ .sidebar{ width:330px; } }
@media (max-width:700px){
  .layout{ position:relative; }
  .sidebar{
    position:absolute;
    top:0; left:0;
    height:100%;
    z-index:9999;
    width:min(88vw, 360px);
    box-shadow:0 20px 60px rgba(0,0,0,.55);
  }
}