:root {
  --bg: #fafaf7;
  --fg: #1f1f1f;
  --muted: #6b6b6b;
  --accent: #2f6f4e;
  --accent-fg: #fff;
  --danger: #b3261e;
  --card: #fff;
  --border: #e3e3df;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
a { color: var(--accent); }
a:hover { text-decoration: underline; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.25rem;
  background: var(--card); border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--fg); }
.site-header nav { display: flex; gap: 1rem; align-items: center; }
.site-header .who { color: var(--muted); }
.site-footer { padding: 2rem 1.25rem; text-align: center; color: var(--muted); }

.container { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

h1 { margin: .25rem 0 1rem; }
h2 { margin: 1.5rem 0 .5rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.muted { color: var(--muted); }
.error { color: var(--danger); background: #fde9e7; padding: .6rem .8rem; border-radius: 6px; }
.callout { background: #fff8d6; border: 1px solid #e8d77a; padding: .8rem 1rem; border-radius: 6px; margin: 1rem 0; }
.danger { color: var(--danger); }

.btn, button {
  display: inline-block; padding: .55rem 1rem;
  background: var(--accent); color: var(--accent-fg);
  border: 0; border-radius: 6px; cursor: pointer; font: inherit; text-decoration: none;
}
.btn:hover, button:hover { opacity: .92; text-decoration: none; }
button.link {
  background: transparent; color: var(--accent);
  padding: 0; border: 0; cursor: pointer; text-decoration: underline;
}
button.link.danger, button.danger { color: var(--danger); background: transparent; }
button.danger:not(.link) { background: var(--danger); color: #fff; }

.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1rem 0; }
.narrow { max-width: 460px; margin: 2rem auto; }

form.stack { display: flex; flex-direction: column; gap: .75rem; }
form label { display: flex; flex-direction: column; gap: .25rem; font-size: .95rem; }
form input[type=text], form input[type=email], form input[type=password], form input[type=tel],
form input[type=number], form textarea {
  padding: .5rem .65rem; border: 1px solid var(--border); border-radius: 6px; font: inherit; background: #fff;
}
form fieldset { border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; }
form .row { flex-direction: row; align-items: center; gap: .5rem; }
form small { color: var(--muted); }
form.inline, form.inline-form { display: inline-flex; gap: .5rem; align-items: center; }

.row.spread { display: flex; justify-content: space-between; align-items: center; }

.hero { padding: 2rem 0; }
.hero h1 { font-size: 2rem; }

.dog-list { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.dog-card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dog-card .thumb { aspect-ratio: 4/3; background: #eee; }
.dog-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dog-card .placeholder { display: flex; align-items: center; justify-content: center; color: var(--muted); height: 100%; }
.dog-card .meta { padding: .8rem 1rem; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.gallery img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; }
.gallery.editable .ph { position: relative; }
.gallery.editable .ph form { position: absolute; bottom: .25rem; right: .25rem; background: rgba(255,255,255,.85); border-radius: 4px; padding: .1rem .35rem; }

.profile { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 2rem; }
.profile .gallery { margin: 1rem 0; }

.subnav { display: flex; gap: 1rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }

.stats { list-style: none; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.stats li { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; }
.stats strong { font-size: 1.4rem; display: block; }

table.users { width: 100%; border-collapse: collapse; margin-top: 1rem; }
table.users th, table.users td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
table.users th { background: #f3f3ee; }

.qr-row { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.qr-row .qr { width: 220px; height: 220px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: .5rem; }
.qr-actions { display: flex; flex-direction: column; gap: .5rem; }
.qr-block { margin: 1rem 0 1.5rem; padding-top: .25rem; }
.qr-block h3 { margin: .25rem 0 .25rem; }

.loc-banner { background: #e8f3ec; border-color: #b9d9c4; }
.loc-banner p { margin: .35rem 0; }
.danger { color: var(--danger); }

#last-seen-map { height: 360px; border: 1px solid var(--border); border-radius: 6px; }
#last-seen-map.muted-box {
  display: flex; align-items: center; justify-content: center;
  height: auto; min-height: 80px; padding: 1rem;
  color: var(--muted); text-align: center; background: #f6f6f3;
}