:root {
  --sfondo: #0f1115;
  --pannello: #171a21;
  --testo: #e8e8ea;
  --testo-debole: #9aa0aa;
  --bordo: #262b36;
  --vaglio: #e8590c;
  --lorenzo: #2f9e44;
  --vincenzo: #7048e8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--sfondo);
  color: var(--testo);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

#mappa {
  position: absolute;
  inset: 0 340px 0 0;
}

#pannello {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 340px;
  overflow-y: auto;
  background: var(--pannello);
  border-left: 1px solid var(--bordo);
  padding: 18px 18px 28px;
}

#pannello header h1 {
  margin: 0 0 2px;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.sottotitolo {
  margin: 0 0 16px;
  color: var(--testo-debole);
  font-size: 12px;
}

section {
  border-top: 1px solid var(--bordo);
  padding: 14px 0;
}

h2 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--testo-debole);
  font-weight: 600;
}

.livello {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.livello input[type="checkbox"] { margin: 0; }

.pallino {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

.livello .nome { flex: 1; }

.livello .conteggio {
  color: var(--testo-debole);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.azioni {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

button {
  flex: 1;
  background: #21262f;
  color: var(--testo);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 12px;
  cursor: pointer;
}

button:hover { background: #2a3039; }
button:active { transform: translateY(1px); }

.riga {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  color: var(--testo-debole);
  font-size: 12px;
}

input[type="range"] { flex: 1; accent-color: #4c6ef5; }

output { font-variant-numeric: tabular-nums; color: var(--testo); }

.nota {
  color: var(--testo-debole);
  font-size: 11.5px;
  margin: 8px 0 0;
}

#listaCoincidenze {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

#listaCoincidenze li {
  padding: 7px 8px;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 12px;
  background: #1c212a;
}

#listaCoincidenze li:hover { background: #232936; }

#listaCoincidenze .coppia { display: flex; align-items: center; gap: 6px; }
#listaCoincidenze .dist { color: var(--testo-debole); margin-left: auto; }

.legenda { list-style: none; margin: 0; padding: 0; }
.legenda li {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0; font-size: 12px;
}

#stato { color: var(--testo-debole); font-size: 11.5px; }

footer {
  border-top: 1px solid var(--bordo);
  padding-top: 12px;
  margin-top: 8px;
}

.leaflet-popup-content {
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 280px;
}

.leaflet-popup-content b { font-size: 13px; }

.badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #0f1115;
  margin-bottom: 6px;
}

@media (max-width: 820px) {
  #mappa { inset: 0 0 45% 0; }
  #pannello { top: 55%; width: 100%; border-left: 0; border-top: 1px solid var(--bordo); }
}