header{

  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:8px;

}

header h1{
  margin:0;
  font-size:1.4rem;
  color:var(--primary);
}

.card{

  background:var(--card);

  border-radius:var(--radius);

  padding:18px;

  box-shadow:var(--shadow);

  border:1px solid var(--border);

}

button{

  border:0;

  border-radius:14px;

  padding:12px 16px;

  font-weight:700;

  cursor:pointer;

  transition:.2s;

}

button:hover{
  transform:translateY(-1px);
}

button:not(.ghost){

  background:
    linear-gradient(
      135deg,
      var(--primary),
      var(--primary-light)
    );

  color:#fff;

}

button.ghost{

  background:#fff;

  color:var(--primary);

  border:1px solid var(--border);

}

.list,
.route-list{

  display:flex;
  flex-direction:column;

  gap:12px;

}

.item,
.route-item{

  background:#fff;

  border-radius:16px;

  border:1px solid var(--border);

  padding:14px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:12px;

}

.info{
  flex:1;
}

.name{

  font-size:1rem;

  font-weight:800;

  color:var(--primary);

}

.addr{

  margin-top:4px;

  color:var(--muted);

  font-size:.88rem;

  line-height:1.4;

}

.right{

  display:flex;

  align-items:center;

  gap:10px;

}

.big-button{

  width:100%;

  padding:16px;

  font-size:1rem;

  border-radius:16px;

}

/* SWITCH */

.switch{
  position:relative;
  width:54px;
  height:30px;
}

.switch input{
  display:none;
}

.slider{

  position:absolute;
  inset:0;

  background:#dbeeff;

  border-radius:999px;

  transition:.2s;

}

.slider:before{

  content:"";

  position:absolute;

  width:24px;
  height:24px;

  left:3px;
  top:3px;

  border-radius:50%;

  background:#fff;

  transition:.2s;

}

.switch input:checked + .slider{
  background:var(--primary);
}

.switch input:checked + .slider:before{
  transform:translateX(24px);
}

/* MODAL */

.modal{

  position:fixed;
  inset:0;

  background:rgba(0,0,0,.45);

  display:none;

  align-items:center;
  justify-content:center;

  padding:20px;

  z-index:999;

}

.modal.active{
  display:flex;
}

.modal-content{

  width:100%;
  max-width:420px;

  background:#fff;

  border-radius:20px;

  padding:20px;

  display:flex;
  flex-direction:column;

  gap:12px;

}