html,body{height:100%;margin:0;background:#faf9f7;color:#242424;font:14px system-ui,sans-serif}
body{display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid #dedbd5}
header strong{font-size:18px;margin-right:auto}
label{display:flex;align-items:center;gap:8px}
select{font:inherit;border:1px solid #d5d1cb;border-radius:6px;padding:6px;background:white;color:inherit}
#status{color:#65615b;font-size:12px}
.map-shell{position:relative;flex:1;min-height:200px}
#map{position:absolute;inset:0}
.map-approval{position:absolute;left:6px;bottom:4px;z-index:2;padding:1px 5px;background:rgba(255,255,255,.88);border-radius:3px;color:#333;font:11px/18px system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.map-approval:hover{text-decoration:underline}
.map-approval:focus-visible{outline:2px solid #4355b9;outline-offset:2px}
.map-shell .maplibregl-ctrl-bottom-right{max-width:100%}
.map-shell .maplibregl-ctrl-attrib{box-sizing:border-box;max-width:calc(100% - 20px);font-size:11px}
.map-shell .maplibregl-ctrl-attrib.maplibregl-compact-show{margin-bottom:30px}
.map-loading{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(250,249,247,.72);pointer-events:none;padding:20px}
.map-loading[hidden]{display:none}
.map-loading-card{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:16px 22px;border:1px solid #e5e2dc;border-radius:14px;background:#fff;box-shadow:0 6px 24px rgba(36,36,36,.08);text-align:center}
.map-loading-spinner{width:20px;height:20px;flex:none;border:2px solid #e4e6f4;border-top-color:#4355b9;border-radius:50%;animation:map-loading-spin .8s linear infinite}
.map-loading.is-error .map-loading-spinner{display:none}
#map-retry{pointer-events:auto;font:inherit;color:#4355b9;background:#f1f2fa;border:0;border-radius:6px;padding:6px 12px;cursor:pointer}
#map-retry:focus-visible{outline:2px solid #4355b9;outline-offset:3px}
@keyframes map-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.map-loading-spinner{animation:none}}
@media(max-width:650px){header{gap:10px;padding:12px}header strong{width:100%}#status{width:100%}}