html, body { height: 100%; margin: 0; }
#app { height: 100%; display: flex; flex-direction: column; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#topbar { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,.1); }
#map { flex: 1 1 auto; min-height: 300px; }
.title { font-weight: 600; }
.spacer { flex: 1 1 auto; }
.ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ctl span { opacity: .8; }
#error { padding: 8px 10px; color: #b00020; white-space: pre-wrap; }

.sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 65%; background: #fff; border-top: 1px solid rgba(0,0,0,.12); box-shadow: 0 -8px 24px rgba(0,0,0,.12); transform: translateY(110%); transition: transform .2s ease; }
.sheet.open { transform: translateY(0); }
.sheet-header { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid rgba(0,0,0,.08); }
.sheet-title { font-weight: 600; }
.sheet-close { margin-left: auto; }
.sheet-body { padding: 10px; overflow: auto; }

.viewer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; }
.viewer-shell { width: min(1200px, 100%); height: min(720px, 100%); background: #111; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.viewer-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(0,0,0,.65); color: #fff; }
.viewer-title { font-weight: 600; }
.viewer-close { margin-left: auto; }
.viewer { flex: 1 1 auto; }