:root{
  --bg:#0f1012; --panel:#17191d; --line:#2c3138;
  --text:#f4f4f4; --muted:#b9bcc2;
  --accent:#ff8a00; --accent2:#ffb347;
}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,sans-serif;}
#map{position:fixed;inset:0;z-index:1;}
.hidden{display:none!important;}

#setup-panel,#route-cards{
  position:fixed; z-index:50;
  background:rgba(23,25,29,.94);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}

#setup-panel{top:14px;left:14px;width:340px;max-width:calc(100vw - 28px);}
#route-cards{left:14px;right:14px;bottom:14px;}

.route-list{display:grid;gap:10px;}
.route-card{padding:14px;border:1px solid var(--line);border-radius:16px;background:#17191d;}
.route-head{display:flex;justify-content:space-between;}
.route-title{font-weight:800;font-size:18px;}
.route-fun{color:var(--accent2);}
.route-meta{margin-top:8px;color:var(--muted);display:flex;gap:10px;}
.use-route-btn{
  width:100%;margin-top:10px;padding:12px;border:none;border-radius:14px;
  background:var(--accent);color:#111;font-weight:800;
}

.kervor-poi-marker{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}

@media(max-width:700px){
  #setup-panel{
    top:auto;left:10px;right:10px;bottom:10px;width:auto;
  }
}