:root{
  --bg:#0f172a;
  --panel:#111a2ef2;
  --line:#28344b;
  --text:#e6edf7;
  --dim:#93a2bd;
  --accent:#38bdf8;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{height:100%;height:100dvh;margin:0;background:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);
  overscroll-behavior:none;}
#map{position:fixed;inset:0;width:100vw;height:100dvh;background:var(--bg);}

/* Leaflet controls/attribution tuned for the dark shell */
.leaflet-control-attribution{background:#0b1220cc!important;color:var(--dim)!important;font-size:10px;}
.leaflet-control-attribution a{color:var(--accent)!important;}
.leaflet-bar a{background:#111a2e;color:var(--text);border-bottom-color:var(--line);}
.leaflet-bar a:hover{background:#1b2740;}
/* Recenter-to-Kuopio button: solid, high-contrast, clearly a control. */
.kk-home{font-size:19px;line-height:34px;width:34px;height:34px;text-align:center;
  font-weight:800;color:#08121f;background:var(--accent);}
.kk-home:hover{background:#7dd3fc;}

/* ---------- Panel (desktop card) ---------- */
.panel{
  position:fixed;z-index:800;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(8px);box-shadow:0 8px 30px #0009;
}
#panel{
  top:calc(12px + var(--sat));left:12px;width:250px;
  max-height:calc(100dvh - 24px - var(--sat));display:flex;flex-direction:column;
}
#panelHead{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:12px 12px 8px;flex:none;}
#panelHead h1{margin:0;font-size:16px;font-weight:650;letter-spacing:.02em;}
#panelToggle{width:30px;height:30px;flex:none;background:#1b2740;color:var(--text);
  border:1px solid var(--line);border-radius:8px;font-size:14px;line-height:1;
  cursor:pointer;padding:0;transition:transform .2s;}
#panel.collapsed #panelToggle{transform:rotate(-90deg);}
#panelBody{padding:0 12px 14px;overflow-y:auto;}
#panel.collapsed #panelBody{display:none;}
#panel .sub{font-size:11px;color:var(--dim);margin:0 0 12px;}
#panel section{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;}
#panel section:first-of-type{border-top:none;padding-top:2px;margin-top:0;}
#panel h2{margin:0 0 7px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.07em;color:var(--dim);}
.opt{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;cursor:pointer;}
.opt input{accent-color:var(--accent);width:16px;height:16px;flex:none;}
select{width:100%;background:#0d1626;color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:8px;font-size:13px;}
input[type=range]{width:100%;accent-color:var(--accent);margin:6px 0 2px;height:22px;}
.opacity{display:block;font-size:11px;color:var(--dim);margin-top:8px;}
.note{margin-top:12px;font-size:11px;line-height:1.4;color:#fbbf24;
  background:#3b2f0e88;border:1px solid #6b551a;border-radius:8px;padding:8px 10px;}

/* ---------- Panel (mobile bottom sheet) ---------- */
@media (max-width:640px){
  #panel{
    top:auto;left:0;right:0;bottom:0;width:100%;max-height:58dvh;
    border-radius:16px 16px 0 0;border-bottom:none;
    padding-bottom:var(--sab);
  }
  #panelHead{position:relative;padding:16px 16px 10px;cursor:pointer;}
  #panelHead::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:44px;height:5px;border-radius:3px;background:#41506e;}
  #panelBody{padding:0 16px 16px;max-height:48dvh;}
  .opt{padding:7px 0;font-size:14px;}
}

/* ---------- Swipe divider ---------- */
#divider{
  position:fixed;top:0;bottom:0;width:4px;margin-left:-2px;z-index:600;
  background:#f8fafcbb;cursor:ew-resize;box-shadow:0 0 0 1px #0007;
}
#divider .grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#f8fafc;color:#0f172a;font-size:13px;font-weight:700;
  border-radius:20px;padding:4px 7px;white-space:nowrap;box-shadow:0 2px 8px #0007;
  user-select:none;
}

/* ---------- Update button (version-driven, forces a clean reload) ---------- */
#updateBtn{position:fixed;z-index:850;left:50%;top:calc(10px + var(--sat));
  transform:translateX(-50%);background:var(--accent);color:#08121f;border:none;
  border-radius:10px;padding:10px 16px;font-weight:700;font-size:13px;cursor:pointer;
  box-shadow:0 6px 20px #0009;max-width:calc(100vw - 24px);}
#updateBtn:disabled{opacity:.7;cursor:default;}