:root { 
    --danger: #ff4757; 
    --primary: #2f3542; 
    --success: #2ed573; 
    --bg-light: #f1f2f6;
}

body { 
    margin: 0; 
    font-family: 'Inter', -apple-system, sans-serif; 
    background: var(--bg-light); 
}

#map { height: 60vh; width: 100%; }

.panel { 
    padding: 15px; 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; 
}

.card { 
    background: white; 
    padding: 15px; 
    border-radius: 10px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}

.alert-box { 
    grid-column: span 2; 
    padding: 12px; 
    border-radius: 8px; 
    text-align: center;
    font-weight: bold; 
    display: none; 
    transition: all 0.3s ease;
}

.outside { background: var(--danger); color: white; display: block; animation: shake 0.5s; }
.inside { background: var(--success); color: white; display: block; }

@keyframes shake { 
    0% { transform: translateX(0) } 
    25% { transform: translateX(5px) } 
    50% { transform: translateX(-5px) } 
    100% { transform: translateX(0) } 
}

.btn-reset { 
    background: #747d8c; 
    color: white; 
    border: none; 
    padding: 8px 12px; 
    border-radius: 5px; 
    cursor: pointer; 
    margin-top: 10px; 
    font-size: 12px;
}

.btn-reset:hover { background: #57606f; }

small { color: #747d8c; font-weight: 600; text-transform: uppercase; font-size: 10px; }