:root{
  --bg:#f4f5f7; --panel:#ffffff; --line:#eceef1; --txt:#1b1f27; --mut:#737a87;
  --accent:#f0552f; --accent-soft:#fff1ec; --ok:#1aa35a;
  --r:14px; --fs:15px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font:var(--fs)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--txt); overflow:hidden; -webkit-font-smoothing:antialiased;
}
.app{display:grid; grid-template-columns:400px 1fr; height:100vh}
@media(max-width:760px){
  .app{grid-template-columns:1fr; grid-template-rows:42vh 1fr}
  #map{grid-row:1}
  .side{grid-row:2; border-right:none!important; box-shadow:0 -8px 24px rgba(0,0,0,.06)}
}

#map{height:100vh; z-index:1; background:#e8eaed}
@media(max-width:760px){#map{height:auto}}

.side{background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; position:relative}
.head{padding:18px 22px 15px}
.brand{display:flex; align-items:baseline; gap:8px}
.brand b{font-size:21px; letter-spacing:-.4px; color:var(--txt)}
.brand .dot{color:var(--accent)}
.brand span{color:var(--mut); font-size:11px; font-weight:600; background:var(--accent-soft); color:var(--accent); padding:2px 7px; border-radius:6px}
.brand .lang{margin-left:auto; font-size:12px; font-weight:600; color:var(--mut); text-decoration:none; border:1.5px solid var(--line); padding:3px 9px; border-radius:8px}
.brand .lang:hover{border-color:var(--accent); color:var(--accent)}
.brand{align-items:center}
.tag{color:var(--mut); font-size:12.5px; margin-top:5px}

.controls{padding:4px 22px 18px; display:flex; flex-direction:column; gap:14px}
.field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut); margin-bottom:7px; font-weight:600}
.field input[type=text]{width:100%; background:#fff; border:1.5px solid var(--line); color:var(--txt); padding:12px 13px; border-radius:var(--r); font-size:14px}
.field input[type=text]::placeholder{color:#aeb4bf}
.field input[type=text]:focus{outline:none; border-color:var(--accent)}
.row{display:flex; gap:8px}
.btn{min-width:48px; min-height:48px; padding:0 14px; border:1.5px solid var(--line); background:#fff; color:var(--txt); border-radius:var(--r); cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center}
.btn:hover{border-color:var(--accent); color:var(--accent)}

.chips{display:flex; gap:7px; flex-wrap:wrap}
.chip{padding:8px 13px; min-height:38px; border:1.5px solid var(--line); background:#fff; color:var(--mut); border-radius:20px; font-size:13px; font-weight:600; cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip.on{background:var(--accent); border-color:var(--accent); color:#fff}
.slider .val{float:right; color:var(--accent); font-weight:700}
input[type=range]{width:100%; accent-color:var(--accent); height:30px}

.count{padding:13px 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13.5px; color:var(--mut); background:#fafbfc}
.count b{color:var(--txt); font-size:16px; font-weight:700}

.list{overflow-y:auto; flex:1; min-height:0}
.job{padding:16px 22px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s}
.job:hover{background:#fafbfc}
.job .t{font-weight:650; font-size:16px; line-height:1.3; color:var(--txt)}
.job .e{color:var(--mut); font-size:13.5px; margin-top:3px}
.job .mz{font-size:14px; font-weight:600; color:var(--txt); margin-top:6px}
.job .meta{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px}
.job .km{color:var(--accent); font-weight:600}
.job .sep{color:#cfd4dc}
.job .fresh{color:var(--mut)}
.empty{padding:48px 24px; text-align:center; color:var(--mut); font-size:13.5px}

/* detail panel - overlay přes celý postranní panel */
.detail{position:absolute; inset:0; background:var(--panel); z-index:5; display:flex; flex-direction:column; overflow:hidden}
.detail.hidden{display:none}
.dt-load{padding:40px 22px; color:var(--mut)}
.dt-back{flex:0 0 auto; text-align:left; padding:15px 22px; border:none; border-bottom:1px solid var(--line); background:#fafbfc; color:var(--accent); font-size:14px; font-weight:600; cursor:pointer}
.dt-back:hover{background:var(--accent-soft)}
.dt-body{overflow-y:auto; padding:20px 22px 30px}
.dt-body h2{font-size:21px; line-height:1.25; letter-spacing:-.3px}
.dt-emp{color:var(--txt); font-weight:600; margin-top:6px}
.dt-addr{color:var(--mut); font-size:14px; margin-top:2px}
.dt-tags{display:flex; flex-wrap:wrap; gap:7px; margin:14px 0}
.dt-contact{display:flex; gap:9px; margin:4px 0 18px}
.dt-btn{flex:1; text-align:center; padding:11px; border-radius:var(--r); border:1.5px solid var(--line); color:var(--txt); text-decoration:none; font-size:14px; font-weight:600; min-height:44px; display:flex; align-items:center; justify-content:center}
.dt-btn:hover{border-color:var(--accent); color:var(--accent)}
.dt-desc-h{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--mut); font-weight:600; margin-bottom:8px}
.dt-desc{font-size:14px; line-height:1.6; color:#33383f; white-space:pre-line; word-break:break-word}
.dt-link{display:inline-block; margin-top:16px; color:var(--accent); font-size:14px; font-weight:600; text-decoration:none}
.dt-cta{display:block; margin-top:20px; text-align:center; background:var(--accent); color:#fff; padding:14px; border-radius:var(--r); text-decoration:none; font-weight:700; min-height:48px}
.dt-cta:hover{filter:brightness(.95)}
.dt-src{margin-top:18px; color:#9aa0ac; font-size:11px}
.foot{padding:11px 22px; border-top:1px solid var(--line); font-size:11px; color:#9aa0ac; background:#fafbfc}
.foot a{color:var(--mut)}

/* leaflet popup light */
.leaflet-popup-content-wrapper{border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.14)}
.leaflet-popup-content{margin:13px 15px; font-size:13px; line-height:1.55}
.leaflet-popup-content b{font-size:14.5px}
.pp-mz{color:var(--txt); font-weight:600}
.pp-km{color:var(--accent); font-weight:600}