:root{
  --bg:#0b0d10; --panel:#171a1f; --muted:#9aa4b2; --text:#e9eef4; --accent:#61dafb;
  --era15:#9b5de5; --era17:#f15bb5; --era19:#fee440; --era20:#00bbf9; --era21:#00f5d4;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}
.wm-topbar{
  position:fixed; inset:0 0 auto 0; display:flex; gap:.75rem; align-items:center;
  background:linear-gradient(180deg, rgba(11,13,16,.95), rgba(11,13,16,.70));
  padding:.75rem 1rem; z-index:1000; backdrop-filter: blur(6px); border-bottom:1px solid #22272f;
}
.wm-title{font-weight:700; letter-spacing:.2px}
.wm-sub{color:var(--muted); font-weight:500; margin-left:.5rem}
.wm-controls{margin-left:auto; display:flex; gap:.5rem; align-items:center}
#searchInput, #centuryFilter{
  background:#0f1318; color:var(--text); border:1px solid #2a2f38; border-radius:.5rem; padding:.5rem .6rem;
}
#searchInput{width:min(42vw, 340px)}
.wm-btn{
  background:#0f1318; color:var(--text); border:1px solid #2a2f38; border-radius:.5rem; padding:.5rem .7rem; cursor:pointer
}
.wm-btn:hover{border-color:#3a4250}
#map{position:absolute; inset:56px 0 0 0}

.leaflet-popup-content-wrapper{background:#0f1318; color:var(--text); border-radius:12px}
.leaflet-popup-tip{background:#0f1318}
.popup h3{margin:.2rem 0 .35rem 0; font-size:1.05rem}
.popup .meta{color:var(--muted); font-size:.9rem}
.popup .bio{margin:.45rem 0}
.popup .src a{color:var(--accent); text-decoration:none}
.popup .src a:hover{text-decoration:underline}

/* Legend panel */
.wm-panel{
  position:fixed; right:1rem; top:60px; width:min(320px, 80vw); background:var(--panel); color:var(--text);
  border:1px solid #263140; border-radius:12px; z-index:900; box-shadow:0 10px 24px rgba(0,0,0,.35)
}
.wm-panel-head{display:flex; align-items:center; justify-content:space-between; padding:.7rem .9rem; border-bottom:1px solid #263140}
.wm-panel-body{padding:.8rem .9rem}
.wm-x{background:none; border:none; color:var(--muted); font-size:1.25rem; cursor:pointer}
.wm-legend{list-style:none; padding:0; margin:.3rem 0; display:grid; grid-template-columns:1fr 1fr; gap:.35rem .75rem}
.dot{display:inline-block; width:.9rem; height:.9rem; border-radius:50%; margin-right:.45rem; vertical-align:middle; border:1px solid rgba(255,255,255,.25)}
.era-15{background:var(--era15)} .era-17{background:var(--era17)} .era-19{background:var(--era19)}
.era-20{background:var(--era20)} .era-21{background:var(--era21)}

/* Dialog */
.wm-dialog{border:none; border-radius:12px; background:var(--panel); color:var(--text); width:min(640px, 92vw)}
.wm-dialog::backdrop{background:rgba(0,0,0,.5)}
.wm-dialog-head{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid #263140}
.wm-dialog-body{padding:1rem}

/* Brand button */
.wm-brand{
  position:fixed; left:.75rem; bottom:.75rem; width:38px; height:38px; display:grid; place-items:center;
  background:#0f1318; border:1px solid #2a2f38; border-radius:10px; z-index:800; opacity:.9
}
.wm-brand:hover{opacity:1}
.wm-brand svg{width:22px; height:22px}
.wm-brand circle{fill:#3a4250}

@media (max-width:720px){
  #searchInput{width:38vw}
  #map{inset:96px 0 0 0}
  .wm-topbar{flex-wrap:wrap}
}