: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}
.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}
.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)}

.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}

.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}