*{box-sizing:border-box}
body{margin:0;font-family:system-ui;background:#f2f7f8}
h1{margin:0;padding:16px;background:#0b6e99;color:#fff}

/* DESKTOP */
.app{
  display:grid;
  grid-template-columns:360px 1fr;
  grid-template-areas:
    "sidebar detail"
    "sidebar list";
  gap:16px;
  padding:16px;
}

.sidebar{grid-area:sidebar}
.detail{grid-area:detail}
.list-wrap{grid-area:list}

.sidebar,.detail,.list-wrap{
  background:#fff;
  border:2px solid #cfdde2;
  border-radius:10px;
  padding:12px;
}

.sidebar h2,.detail h2{margin-top:0;color:#0b6e99}

.sidebar input,.sidebar select{
  width:100%;
  padding:8px;
  margin-bottom:10px;
}

.reset-btn{
  width:100%;
  padding:8px;
  margin-top:6px;
  background:#f2f2f2;
  border:1px solid #ccc;
  border-radius:8px;
  font-size:14px;
}

.mobile-only{display:none}

.list{overflow-y:auto;max-height:50vh}

.card{
  border:2px solid #cfdde2;
  border-radius:8px;
  padding:10px;
  margin-bottom:8px;
  cursor:pointer;
}

.card.active{
  border-color:#0b6e99;
  background:#eaf6fb;
}

.counter{font-size:14px;margin-bottom:8px;color:#345}

.detail-block{
  border:1px solid #cfdde2;
  border-radius:8px;
  padding:10px;
  margin-bottom:10px;
}

.detail-placeholder{
  border:2px dashed #cfdde2;
  border-radius:10px;
  padding:20px;
  color:#6b8792;
  text-align:center;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}

.maps-btn,.route-btn{
  padding:14px;
  font-size:16px;
  font-weight:700;
  text-align:center;
  border-radius:12px;
  text-decoration:none;
  color:#fff;
}

.maps-btn{background:#0b6e99}
.route-btn{background:#3ba55d}

.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}

.toggle input{display:none}
.slider{
  width:42px;
  height:22px;
  background:#cfdde2;
  border-radius:22px;
  position:relative;
}

.slider:before{
  content:'';
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  position:absolute;
  top:2px;
  left:2px;
}

.toggle input:checked + .slider{
  background:#0b6e99;
}

.toggle input:checked + .slider:before{
  transform:translateX(20px);
}

/* MOBILE */
@media(max-width:900px){
  .app{
    grid-template-columns:1fr;
    grid-template-areas:
      "sidebar"
      "detail"
      "list";
  }
  .list{
    max-height:none;
  }
  .mobile-only{
    display:block;
  }
}