/* Gallery styles. Works standalone; if css/bootstrap.min.css is present it is loaded first and these only fine-tune. */
:root { --mk-bg: #f6f5f1; --mk-ink: #1d1d1b; --mk-muted: #6b6b66; --mk-accent: #1f5f8b; }
body { margin: 0; background: var(--mk-bg); color: var(--mk-ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--mk-accent); }
.mk-header { display: flex; align-items: baseline; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #ddd; background: #fff; }
.mk-header h1 { margin: 0; font-size: 20px; font-weight: 600; }
.mk-header .muted { color: var(--mk-muted); font-size: 13px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; padding: 24px; }
.mk-card { background: #fff; border: 1px solid #e3e1da; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.mk-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); }
.mk-card .thumb { aspect-ratio: 4/3; background: #e8e4dc center/cover no-repeat; }
.mk-card .thumb.empty { display: grid; place-items: center; color: var(--mk-muted); font-size: 13px; }
.mk-card .body { padding: 12px 14px 14px; }
.mk-card h2 { margin: 0 0 4px; font-size: 16px; }
.mk-card p { margin: 0; color: var(--mk-muted); font-size: 13px; }
.mk-card .meta { margin-top: 8px; font-size: 12px; color: var(--mk-muted); }
.mk-empty { padding: 48px 24px; color: var(--mk-muted); text-align: center; }

/* map page */
.mk-page { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.mk-page #map { width: 100%; height: 100%; }
.mk-toolbar { display: flex; gap: 12px; align-items: center; }
.mk-toolbar select { font: inherit; padding: 4px 8px; }
.mk-footer { padding: 16px 24px 32px; color: var(--mk-muted); font-size: 13px; }