* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; background: #1a1a2e; color: #e0e0e0; height: 100vh; display: flex; flex-direction: column; }

#landing {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh; gap: 20px;
}
#landing h1 { font-size: 2.5rem; color: #e94560; }
#landing p { color: #888; max-width: 400px; text-align: center; line-height: 1.5; }
#landing input {
  padding: 12px 20px; border-radius: 8px; border: 2px solid #333;
  background: #16213e; color: #e0e0e0; font-size: 1rem; width: 280px;
  outline: none; transition: border-color 0.2s;
}
#landing input:focus { border-color: #e94560; }
#landing button {
  padding: 12px 32px; border-radius: 8px; border: none;
  background: #e94560; color: white; font-size: 1rem; cursor: pointer;
  font-weight: 600; transition: background 0.2s; margin-top: 8px;
}
#landing button:hover { background: #c73750; }
#landing-room-step, #landing-name-step {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

#app { display: none; flex-direction: column; height: 100vh; }

#toolbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: #16213e; border-bottom: 1px solid #333; flex-shrink: 0;
  flex-wrap: wrap;
}
#toolbar .room-info { font-size: 0.85rem; color: #888; }
#toolbar .room-info strong { color: #e94560; }

.tool-btn {
  padding: 8px 16px; border-radius: 6px; border: 2px solid #333;
  background: #1a1a2e; color: #e0e0e0; cursor: pointer; font-size: 0.85rem;
  font-weight: 600; transition: all 0.2s;
}
.tool-btn:hover { border-color: #555; }
.tool-btn.active-for { border-color: #4ade80; background: #064e3b; color: #4ade80; }
.tool-btn.active-against { border-color: #f87171; background: #450a0a; color: #f87171; }
.tool-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.submit-btn {
  padding: 8px 20px; border-radius: 6px; border: none;
  background: #e94560; color: white; cursor: pointer; font-size: 0.85rem;
  font-weight: 600; margin-left: auto; transition: background 0.2s;
}
.submit-btn:hover { background: #c73750; }
.back-btn {
  padding: 8px 20px; border-radius: 6px; border: 2px solid #e94560;
  background: transparent; color: #e94560; cursor: pointer; font-size: 0.85rem;
  font-weight: 600; transition: all 0.2s;
}
.back-btn:hover { background: #e9456022; }

#map { flex: 1; background: #e8e0d8; }

#results-panel {
  display: none; position: absolute; top: 70px; left: 16px; z-index: 1000;
  background: #16213eee; padding: 16px; border-radius: 8px;
  border: 1px solid #333; max-width: 260px; max-height: 50vh; overflow-y: auto;
}
#results-panel h3 { margin-bottom: 8px; color: #e94560; font-size: 0.95rem; }
.user-entry { margin: 6px 0; font-size: 0.85rem; }
.user-entry .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

.match-zone { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.65; } }

.user-label { font-size: 0.75rem; font-weight: 600; padding: 2px 6px; background: #16213ecc; border-radius: 4px; border: none !important; }

.blob-selected { opacity: 1 !important; }
.delete-popup {
  background: #1a1a2eee; border: 1px solid #555; border-radius: 6px;
  padding: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.delete-popup .leaflet-popup-content-wrapper { background: transparent; box-shadow: none; border-radius: 6px; padding: 0; }
.delete-popup .leaflet-popup-content { margin: 0; }
.delete-popup .leaflet-popup-tip { border-top-color: #1a1a2eee; }
.delete-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: #450a0a; color: #f87171; border: none; border-radius: 6px;
  cursor: pointer; font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  transition: background 0.15s;
}
.delete-btn:hover { background: #7f1d1d; }