body { margin:0; font-family: system-ui, Arial, sans-serif; }
.header, .footer { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid #eee; }
.footer { border-top:1px solid #eee; border-bottom:0; font-size:12px; color:#666; }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; }
.logo { display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; background:#5D0198; color:white; border-radius:6px; }
.grid { display:grid; grid-template-columns: 1fr 420px; gap:12px; padding:12px; }
.left { display:flex; flex-direction:column; gap:8px; }
#map { height: calc(100vh - 180px); border:1px solid #eee; border-radius:8px; }
.search { display:flex; gap:8px; }
.right .card { border:1px solid #eee; border-radius:8px; padding:10px; margin-bottom:12px; }
.row { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:8px; }
label { font-size:12px; color:#333; }
input, select, button { width:100%; padding:8px; }
button { cursor:pointer; }
#summary .kpi { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.kpi .box { border:1px solid #eee; border-radius:8px; padding:8px; }
.modal.hidden { display:none; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,0.3); display:flex; align-items:center; justify-content:center; }
.modal-card { background:white; width:560px; border-radius:10px; padding:16px; }
.grid2 { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.actions { display:flex; justify-content:flex-end; gap:8px; }