:root{
  --bg:#0b0c0f; /* near-black */
  --panel:#141720; /* panel bg */
  --muted:#8b93a7; /* labels */
  --text:#e9eef9; /* bright text */
  --accent:#4c8bf5; /* focus ring */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}

#app{display:grid;grid-template-columns:320px 1fr;grid-template-rows:100vh;gap:12px;padding:12px}
#panel{background:var(--panel);border:1px solid #1d2230;border-radius:14px;padding:14px;display:flex;flex-direction:column;min-height:0}
#panel h1{font-size:16px;margin:0 0 8px 0}
#panel .sub{color:var(--muted);font-size:12px;margin-bottom:12px}
#panel .row{margin-bottom:12px}
#panel label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
#panel input[type="file"]{width:100%}

.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.controls .stack{grid-column: span 2;}
.stack{display:flex;flex-direction:column;gap:6px}
input[type="range"]{width:100%}
select, input[type="number"], input[type="text"], input[type="range"], button{
  background:#0f121a;border:1px solid #23283a;color:var(--text);border-radius:10px;padding:8px;outline:none
}
button{cursor:pointer}
button.primary{background:#203054}
button:hover{border-color:#3a4260}
button:focus{box-shadow:0 0 0 3px color-mix(in hsl, var(--accent) 50%, transparent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.hint{color:var(--muted);font-size:11px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #2a3146;border-radius:999px;font-size:12px}

#mapWrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid #1d2230}
#map{height:100%;width:100%;position:relative;z-index: 0}

/* Keep the heat canvas above tiles */
#heatCanvas{
  position:absolute;
  top:0; left:0;
  pointer-events:none;
  z-index:29; /* above tile pane (~200), below markers (~600) */
}

.leaflet-overlay-pane {
  z-index: 400; /* above heatCanvas */
}

.legend{
  position:absolute;bottom:14px;left:14px;background:rgba(14,16,22,.9);
  border:1px solid #252c42;border-radius:10px;padding:10px;backdrop-filter: blur(4px);
  z-index:360;
}
.legend .bar{height:10px;width:220px;border-radius:6px;
  background: linear-gradient(90deg, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000); /* heat */
}
.legend .ticks{display:flex;justify-content:space-between;color:#bcc4d6;font-size:11px;margin-top:6px}

#hover{
  position:absolute;top:14px;left:14px;background:rgba(14,16,22,.9);
  border:1px solid #252c42;border-radius:10px;padding:8px 10px;font-size:12px;display:none;
  z-index:360;
}
.kbd{display:inline-block;border:1px solid #3a4260;border-bottom-width:2px;border-radius:6px;padding:2px 6px;font-size:11px;background:#0b0d14}
.rowhr{height:1px;background:#21283a;margin:8px 0}
a.link{color:#a9c4ff;text-decoration:none}