body{
background:#0f172a;
color:white;
font-family:system-ui;
margin:0;
padding:40px;
}

.container{
max-width:1200px;
margin:auto;
}

.toolbar{
display:flex;
gap:10px;
margin-bottom:20px;
}

input{
flex:1;
padding:12px;
border-radius:8px;
border:none;
}

button{
padding:12px 16px;
background:#3b82f6;
border:none;
border-radius:8px;
color:white;
cursor:pointer;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:20px;
}

.card{
background:#1e293b;
padding:20px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,0.4);
}

table{
width:100%;
border-collapse:collapse;
}

td,th{
padding:6px;
border-bottom:1px solid #333;
}

.spinner{
border:4px solid #333;
border-top:4px solid #3b82f6;
border-radius:50%;
width:40px;
height:40px;
animation:spin 1s linear infinite;
display:none;
margin:auto;
}

@keyframes spin{
0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}

#map{
height:300px;
margin:20px 0;
}