/* Stile "State of Leonida": sfondo viola/rosa, pannelli di vetro, pulsanti rosa, cerchi colorati per quantità.
   File aggiunto a mano sopra il CSS dell'app: per tornare allo stile vecchio basta togliere il <link> da index.html. */
:root {
  --surface: rgba(14, 10, 26, 0.62);
  --surface-raised: rgba(255, 255, 255, 0.07);
  --accent: #ff50c5;
  --muted: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.14);
  --glass-bg: rgba(0, 0, 0, 0.3);
  --glass-blur: blur(28px) saturate(110%);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), 0 2px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  background: #0a0a10;
  font-family: Montserrat, Inter, system-ui, sans-serif;
}
body { background: #0a0a10; }

/* Sfondo della mappa: sfumatura notte -> tramonto con vignettatura e griglia leggera */
.map-workspace,
.atlas-map-canvas {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 135%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(180deg, #1d1440 0%, #5a2a73 45%, #b8447f 78%, #ff7a8a 100%);
}

/* Pannelli e barre di vetro */
.sidebar,
.detail-panel {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--glass-shadow);
}
.sidebar { border-right: 1px solid rgba(255, 255, 255, 0.14); }
.brand-header h1 { font-family: Montserrat, Oswald, sans-serif; font-weight: 800; letter-spacing: -0.5px; }
.brand-header p { color: var(--accent); }
.sidebar-tabs button.active { color: var(--accent); border-bottom-color: var(--accent); }
.search-field,
input, select, textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
.search-field { border-radius: 12px; }
.search-field input { background: transparent; border: 0; }
.place-results { border-top-color: rgba(255, 255, 255, 0.08); }
.place-result { border-bottom-color: rgba(255, 255, 255, 0.08); border-radius: 0; }
.place-result:hover { background: rgba(255, 255, 255, 0.07); }
.place-result.active { background: rgba(255, 80, 197, 0.16); outline-color: var(--accent); }
.place-result > svg:first-child { color: var(--accent); }
.text-button, a { color: var(--accent); }
.load-more { border-color: rgba(255, 255, 255, 0.14); border-radius: 10px; }
.sidebar-footer { border-top-color: rgba(255, 255, 255, 0.1); }
.save-status { color: var(--accent); }
.detail-panel h2, .detail-scroll h2 { font-family: Montserrat, Oswald, sans-serif; font-weight: 700; }
.evidence-label { color: var(--accent); }

/* Pulsanti: vetro scuro arrotondato; quelli principali rosa */
.button, .icon-button {
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.button:hover, .icon-button:hover { background: rgba(255, 80, 197, 0.22); border-color: rgba(255, 126, 234, 0.5); }
.button.primary {
  background: #ff50c5;
  border-color: #ff50c5;
  color: #fff;
  box-shadow: 0 6px 22px rgba(255, 80, 197, 0.35);
}
.button.primary:hover { background: #ff88d7; border-color: #ff88d7; }
.button.selected { color: #fff; background: rgba(255, 80, 197, 0.3); border-color: var(--accent); }
.button:focus-visible, .icon-button:focus-visible, button:focus-visible, a:focus-visible { outline-color: var(--accent); }
.map-topbar .button, .map-topbar .icon-button { border-radius: 12px; min-height: 44px; }

/* Zoom a sinistra come State of Leonida */
.atlas-map-navigation {
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  gap: 0;
}
.atlas-map-navigation button { background: transparent; color: #fff; }
.atlas-map-navigation button:hover { background: rgba(255, 80, 197, 0.25); color: #fff; }
.atlas-map-caption {
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
}

/* Cerchi dei gruppi: blu (pochi), verde (medio), rosso (tanti), bordo bianco, come State of Leonida */
.atlas-cluster-face {
  background: #5c6bc0;
  color: #fff;
  border: 2px solid #fff;
  font: 600 14px/1 Montserrat, Inter, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.atlas-map-marker.is-cluster.q-medio .atlas-cluster-face { background: #66bb6a; }
.atlas-map-marker.is-cluster.q-alto .atlas-cluster-face { background: #ef5350; }
.atlas-map-marker.is-cluster.q-molto .atlas-cluster-face { background: #ef5350; font-size: 16px; }
.atlas-map-marker.is-cluster.q-alto, .atlas-map-marker.is-cluster.q-molto { width: 52px !important; height: 52px !important; margin-left: -26px !important; margin-top: -26px !important; }

/* Singoli luoghi: segnaposto con bordo bianco */
.atlas-pin-face { border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); color: #fff; }
.atlas-map-marker.is-selected .atlas-pin-face { outline-color: #fff; box-shadow: 0 0 0 8px rgba(255, 80, 197, 0.4); }
.atlas-map-canvas .atlas-place-label {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 8px;
  color: #fff;
}
.atlas-map-canvas .leaflet-popup-content-wrapper,
.atlas-map-canvas .leaflet-popup-tip { background: rgba(14, 10, 26, 0.85); color: #fff; }

/* Finestre (guida, foto) */
.guida-dialog {
  background: rgba(20, 12, 36, 0.82) !important;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  border-radius: 18px !important;
}
.guida-body h3 { color: var(--accent) !important; }
.guida-body .guida-tip { border-left-color: var(--accent) !important; }
.scheda-righe svg { color: var(--accent) !important; }
.scheda-categoria { border-radius: 999px; background: rgba(255, 255, 255, 0.08) !important; }
.scheda-foto figure { border-radius: 12px !important; }
.scheda-pulsanti .button.copiato { color: var(--accent) !important; border-color: var(--accent) !important; }