:root{
  --bg0:#0b0f14;           /* deep charcoal */
  --bg1:#121820;           /* panel bg */
  --bg2:#151c26;           /* alt panel */
  --text:#e6e9ef;          /* light text */
  --muted:#a1a9b6;         /* muted text */
  --red:#ef4444;           /* accent red */
  --accent:#7c3aed;        /* subtle violet accent */
  --ring:#ffffff40;        /* marker outer ring */
  --border:#223043;        /* panel border */
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body,#map{ height:100%; }
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1000px 700px at 8% 15%, #1b1b1b 0%, transparent 60%),
    radial-gradient(1000px 800px at 90% 0%, #1a0f16 0%, transparent 60%),
    linear-gradient(180deg, #0a0a0a 0%, #0b0f14 100%);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Leaflet container sits underneath the panel */
#map{ position:relative; z-index:0; }

/* Frosted glass panel */
#panel{
  position: absolute;
  top: 14px; left: 14px;
  width: 280px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #121820cc 0%, #151c26cc 100%);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  z-index: 1000;
}

.custom-marker .pin{
  display:inline-block;
  width:12px;height:12px;border-radius:50%;
  background:#e11d48; /* red */
  border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.25);
}


.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: radial-gradient(600px 200px at -60% -40%, #ef44441a, transparent 65%),
              radial-gradient(600px 200px at 160% -40%, #ffffff10, transparent 65%);
  pointer-events:none;
}

.panel-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.label{ font-size:12px; color:var(--muted); }

.select{
  appearance:none; outline:none; border:none;
  background:#0f141c; color:var(--text);
  padding:10px 12px; border-radius:10px;
  border:1px solid #1f2b3b;
  box-shadow: inset 0 0 0 1px #00000020;
}
.select:focus{
  border-color:#334a68; box-shadow:0 0 0 2px #1d2a3d;
}

.btn{
  appearance:none; border:none; outline:none; cursor:pointer;
  padding:10px 14px; width:100%;
  border-radius:12px; font-weight:700; letter-spacing:.2px;
  color:#fff; background:
    linear-gradient(180deg, #ef4444, #b91c1c);
  box-shadow: 0 8px 18px rgba(239,68,68,.35), inset 0 0 0 1px #ffffff20;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.btn:active{ transform: translateY(0); filter: brightness(.98); }
.btn-apply{ margin-top:4px; }

/* Status line under the button */
.status{ margin-top:10px; min-height:18px; color:var(--muted); font-size:12px }

/* Custom marker — glowing dot with subtle pulse */
.custom-marker, .custom-marker *{ pointer-events:none; }
.custom-marker .pin{
  display:block; width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #ff9f9f 30%, #ef4444 60%);
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 6px var(--ring),
    0 6px 14px rgba(0,0,0,.45),
    0 0 18px rgba(239,68,68,.45);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 6px var(--ring),
    0 6px 14px rgba(0,0,0,.45),
    0 0 18px rgba(239,68,68,.35);}
  50%{ box-shadow:
    0 0 0 2px #ffffff,
    0 0 0 9px var(--ring),
    0 10px 22px rgba(0,0,0,.5),
    0 0 26px rgba(239,68,68,.55);}
}

/* Leaflet control positions look nicer with our panel */
.leaflet-top.leaflet-left{ top: 240px; } /* move default controls below panel */
.leaflet-bottom.leaflet-right{ margin-right: 8px; margin-bottom:8px; }
.leaflet-control-zoom{ border:none!important; }
.leaflet-control-zoom a{
  background:#0f141c!important; color:#fff!important; border:1px solid #1f2b3b!important;
}
.leaflet-bar a:hover{ background:#121a24!important; }

/* Mobile tweaks */
@media (max-width: 560px){
  #panel{ width: calc(100% - 20px); left:10px; right:10px; }
  .leaflet-top.leaflet-left{ top: 290px; }
}