body{

margin:0;
font-family:Arial;
background:#f3f4f6;

}

.header{

background:#111827;
color:white;
padding:10px;
display:flex;
justify-content:space-between;

}

.title{

font-size:18px;

}

.container{

display:flex;
flex-wrap:wrap;

}

#map{

height:60vh;
width:100%;

}

.panel{

display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding:10px;

}

.card{

background:white;
padding:12px;
border-radius:8px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);

}

.card h3{

margin:0;
font-size:13px;
color:#555;

}

.card span{

font-size:16px;
font-weight:bold;

}

.history{

padding:10px;

}

table{

width:100%;
background:white;
border-collapse:collapse;

}

th,td{

padding:8px;
border-bottom:1px solid #ddd;
font-size:12px;

}

@media(min-width:900px){

.container{

flex-wrap:nowrap;

}

#map{

width:70%;
height:85vh;

}

.panel{

width:30%;
grid-template-columns:1fr;

}

}