html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; }
#map { position: absolute; inset: 0; }
#panel { position: absolute; top: 10px; left: 10px; z-index: 1; background: #fff;
         padding: 12px; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.3); max-width: 260px; }
#panel h1 { font-size: 16px; margin: 0 0 8px; }
#panel label { display: block; margin-top: 8px; font-size: 13px; }
select { width: 100%; padding: 6px; }
.badge { display: inline-block; font-size: 11px; background: #eee; border-radius: 4px;
         padding: 1px 5px; margin-left: 4px; color: #444; }
.badge.manual { background: #d9f2e3; color: #1c6b3c; }
footer { position: absolute; bottom: 4px; right: 6px; z-index: 1; font-size: 11px;
         background: rgba(255,255,255,.85); padding: 2px 6px; border-radius: 4px; }
.addbeer { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.addbeer input[name="brand"] { flex: 1 1 100%; padding: 4px; }
.addbeer .hp { position: absolute; left: -9999px; }
.addbeer .msg { font-size: 11px; color: #1c6b3c; }