/* Kupkop "linked system" theme. Loaded after style.css and polish.css.
   It re-points the design tokens (so every existing page follows) and restyles the shell:
   64px top bar, 260px sidebar, 20px cards, pill buttons and chips. Delete the <link> in
   includes/header.php to go back to the old look. */

/* ---------- Tokens ---------- */
:root {
  --ink: #3D0E96;
  --ink-soft: #6A3DD6;
  --field: #EDE5FF;
  --control: #B79DFF;
  --brand: #6118EA;
  --brand-dark: #3D0E96;
  --dot: var(--g2);
  --link: #6118EA;
  --wordmark: #3D0E96;
  --focus: #6118EA;
  --hover-tint: #E0D3FF;
  --danger: #D4182A;
  --danger-dark: #B91C1C;

  --glass-bg: rgba(255, 255, 255, .85);
  --glass-strong: rgba(255, 255, 255, .92);
  --glass-border: #E0D3FF;
  --glass-blur: blur(20px) saturate(150%);
  --glass-shadow: 0 8px 30px rgba(97, 24, 234, .08);
  --modal-bg: #FFFFFF;

  --ok-bg: #D1FAE5;   --ok-ink: #046C3C;
  --warn-bg: #FEF3C7; --warn-ink: #B04A00;
  --bad-bg: #FEE2E2;  --bad-ink: #D4182A;
  --info-bg: #E0D3FF; --info-ink: var(--brand);

  --bg-image:
    radial-gradient(40rem 30rem at 100% 0%, rgba(147, 99, 255, .22), transparent 60%),
    radial-gradient(36rem 30rem at 0% 100%, rgba(111, 43, 255, .10), transparent 60%),
    linear-gradient(#EDE5FF, #EDE5FF);

  /* New tokens */
  --grad: linear-gradient(135deg, #6118EA 0%, #6F2BFF 55%, #7C3BFF 100%);
  --line: #E0D3FF;
  --line-strong: #CBB8FF;
  --chip-bg: #E0D3FF;
  --chip-hover: #CBB8FF;
  --chip-ink: var(--brand);
  --input-bg: #EDE5FF;
  --bar-bg: rgba(255, 255, 255, .85);
  --surface-solid: #FFFFFF;
  --card-shadow: 0 8px 30px rgba(97, 24, 234, .08);
  --pop-shadow: 0 6px 16px rgba(111, 43, 255, .28);

  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root[data-theme="dark"] {
  --ink-soft: #B9A9E0;
  --control: #5B4A8A;
  --glass-bg: rgba(34, 22, 58, .72);
  --glass-strong: rgba(15, 8, 30, .5);
  --glass-border: rgba(255, 255, 255, .12);
  --modal-bg: #1E1338;
  --line: rgba(255, 255, 255, .10);
  --line-strong: rgba(255, 255, 255, .18);
  --chip-bg: rgba(147, 99, 255, .18);
  --chip-hover: rgba(147, 99, 255, .30);
  --chip-ink: #CBB8FF;
  --input-bg: rgba(15, 8, 30, .55);
  --bar-bg: rgba(24, 14, 44, .82);
  --surface-solid: #22163A;
  --card-shadow: 0 8px 30px rgba(0, 0, 0, .40);
  --bg-image:
    radial-gradient(40rem 30rem at 100% 0%, rgba(111, 43, 255, .30), transparent 60%),
    radial-gradient(36rem 30rem at 0% 100%, rgba(79, 70, 229, .22), transparent 60%),
    linear-gradient(#140B26, #0E0720);
}

/* ---------- Type ---------- */
body { font-size: .9375rem; line-height: 1.6; }
h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: clamp(1.5rem, 3.6vw, 1.75rem); }
h2 { font-size: 1.15rem; }
h3 { font: 700 1rem/1.25 var(--font-head); }
.lede { font-size: .95rem; }
.hint, .meta { font-size: .8125rem; }
.field label, .field legend { font-size: .8125rem; font-weight: 600; }

/* ---------- Top bar ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  flex-wrap: nowrap; gap: .75rem; height: 64px;
  margin: 0; padding: 0 1rem;
  background: var(--bar-bg); border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
@media (min-width: 48rem) { .site-header { padding: 0 1.5rem; gap: 1rem; } }
.site-header .sidebar-btn { border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink); border-color: transparent; }
.site-header .sidebar-btn:hover { background: var(--chip-hover); transform: none; }

.wordmark { gap: .55rem; font: 800 1.25rem/1 var(--font-head); letter-spacing: -.01em; text-transform: uppercase; }
.brand-badge {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--grad); box-shadow: 0 4px 12px rgba(97, 24, 234, .30);
}
.brand-badge .logo-mark { width: 1.15rem; height: 1.15rem; }
.brand-badge .logo-paw { fill: #fff; }
.brand-badge .logo-heart { fill: var(--g1); opacity: 1; }
.wordmark:hover .logo-mark { transform: rotate(-8deg); }

/* Search pill */
.site-search {
  display: flex; align-items: center; gap: .25rem; padding: .1rem .3rem .1rem 1rem;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 2px 12px rgba(97, 24, 234, .06);
}
.site-search:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.site-search input[type=search] {
  flex: 1 1 auto; min-width: 0; width: auto; padding: .5rem .25rem;
  background: transparent; border: 0; border-radius: 0; font-size: .875rem; color: var(--ink);
}
.site-search input[type=search]:focus-visible { outline: none; }
.site-search .icon-btn { width: 2rem; height: 2rem; background: transparent; border: 0; color: var(--chip-ink); }
.site-search .icon-btn:hover { background: var(--chip-bg); transform: none; }
.site-header .site-search { display: none; }
@media (min-width: 48rem) {
  .site-header .site-search { display: flex; order: 2; flex: 1 1 auto; max-width: 32.5rem; margin: 0 .5rem 0 1rem; width: auto; }
}
.sb-search { margin: 0 0 .75rem; }
@media (min-width: 48rem) { .sb-search { display: none; } }

.header-tools { align-items: center; gap: .5rem; margin-left: auto; }
.icon-btn { border-radius: 50%; background: var(--surface-solid); border-color: var(--line); color: var(--chip-ink); }
.icon-btn:hover { background: var(--chip-bg); }

/* Admin / site switch, a segmented pill like the reference */
.role-switch { display: inline-flex; padding: .2rem; background: var(--chip-bg); border: 1px solid var(--line-strong); border-radius: 999px; }
.role-switch a {
  padding: .3rem .85rem; border-radius: 999px; color: var(--chip-ink); font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.role-switch a[aria-current="page"] { background: var(--grad); color: #fff; box-shadow: 0 2px 8px rgba(97, 24, 234, .30); }
.header-avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--grad); color: #fff; font: 700 .875rem/1 var(--font-head); text-decoration: none; box-shadow: 0 2px 8px rgba(97, 24, 234, .30); }
.header-avatar:hover { filter: brightness(1.08); }

/* ---------- Sidebar ---------- */
.sidebar {
  top: 64px; bottom: 0; left: 0; width: 260px; padding: 1rem; gap: .25rem;
  background: var(--bar-bg); border: 0; border-right: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.sb-link { gap: .75rem; padding: .6rem .75rem; border-radius: 12px; font-size: .875rem; }
.sb-link svg { color: var(--chip-ink); }
.sb-link:hover { background: var(--chip-bg); }
.sb-link[aria-current="page"] { background: var(--grad); color: #fff; box-shadow: 0 6px 16px rgba(111, 43, 255, .25); }
.sb-link[aria-current="page"] svg { color: #fff; }
.sb-group { margin: 1rem .75rem .25rem; font-size: .6875rem; letter-spacing: .12em; color: var(--ink-soft); }
.sb-user:hover { background: var(--chip-bg); }
.sb-user-name { font-size: .875rem; }
.avatar { background: var(--grad); }

.sb-mission {
  padding: 1rem; border: 1px solid var(--line-strong); border-radius: 16px;
  background: linear-gradient(135deg, var(--chip-bg), var(--surface-solid));
}
.sb-mission strong { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; }
.sb-mission strong svg { width: 1rem; height: 1rem; fill: none; stroke: var(--chip-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb-mission p { margin: .3rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--ink-soft); max-width: none; }
.sb-nav { padding-bottom: 1rem; }
.sb-mission { margin-top: auto; }
.sb-foot { margin-top: 1rem; }

@media (min-width: 64rem) { html.sb-open body { padding-left: 260px; } }
@media (max-width: 63.99rem) {
  html.sb-open .sidebar-backdrop { top: 64px; background: rgba(61, 14, 150, .30); }
  .sidebar { box-shadow: 0 20px 60px rgba(61, 14, 150, .25); }
}

/* ---------- Page shell ---------- */
html { scroll-padding-top: 5rem; }
.wrap { padding: 1.5rem 1rem 3rem; }
@media (min-width: 48rem) { .wrap { padding: 1.5rem 2rem 3rem; } }
.site-footer { margin: 1rem 1rem 1rem; }

/* ---------- Cards, notices, badges ---------- */
.card { border-radius: 20px; padding: 1.5rem; box-shadow: var(--card-shadow); }
.notice { border-radius: 16px; font-size: .875rem; }
.badge, .chip { font-size: .6875rem; font-weight: 700; padding: .2rem .65rem; border-color: color-mix(in srgb, currentColor 22%, transparent); }
.chip { background: var(--chip-bg); color: var(--chip-ink); border: 1px solid var(--line-strong); font-weight: 600; }
.animal-status.badge { border-color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  background: var(--grad); border: 1px solid transparent; border-radius: 999px;
  padding: .65rem 1.25rem; font-size: .875rem; font-weight: 700; box-shadow: var(--pop-shadow);
}
.btn:hover { background: var(--grad); filter: brightness(1.06); transform: translateY(-1px) scale(1.01); box-shadow: 0 8px 20px rgba(111, 43, 255, .36); }
.btn:active { transform: none; }
.btn-small { padding: .4rem .95rem; font-size: .8125rem; }
.btn-lg { padding: .8rem 1.6rem; font-size: .95rem; }
.btn-ghost { background: var(--chip-bg); color: var(--chip-ink); border-color: transparent; box-shadow: none; --spin: var(--chip-ink); }
.btn-ghost:hover { background: var(--chip-hover); filter: none; box-shadow: none; transform: none; }
.btn-danger { background: var(--danger); box-shadow: none; }
.btn-danger:hover { background: var(--danger-dark); filter: none; box-shadow: none; transform: none; }
.fab { background: var(--grad); }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=search], input[type=date], select, input[type=file], textarea {
  background: var(--input-bg); border: 1px solid var(--control); border-radius: 12px; font-size: .875rem;
}
select option { background: var(--surface-solid); }
.pw-toggle { border-radius: 999px; }
.auth-card { border-radius: 24px; }
.auth-icon { background: var(--grad); }
.auth-icon .auth-glyph .logo-paw { fill: #fff; }
.auth-icon .auth-glyph .logo-heart { fill: var(--g1); opacity: 1; }
.auth-icon-ok { background: var(--ok-bg); }
.auth-icon-warn { background: var(--warn-bg); }

/* ---------- Filter chips and admin tabs ---------- */
.admin-tabs, .filter-tabs {
  gap: .5rem; width: auto; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.admin-tabs a, .filter-tabs a {
  padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-solid); color: var(--chip-ink); font-size: .8125rem; font-weight: 500;
}
.admin-tabs a:hover, .filter-tabs a:hover { background: var(--chip-bg); }
.admin-tabs a[aria-current="page"], .filter-tabs a[aria-current="page"] {
  background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(97, 24, 234, .25);
}
.admin-tabs + .admin-tabs { margin-top: -.75rem; }
.count { background: #D4182A; }

/* ---------- Tables ---------- */
.table-wrap { border-radius: 20px; box-shadow: var(--card-shadow); background: var(--glass-strong); }
.data th {
  padding-top: .8rem; padding-bottom: .8rem; background: color-mix(in srgb, var(--chip-bg) 55%, transparent);
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.data td { font-size: .8125rem; border-color: var(--line); }
.data tbody tr:hover { background: color-mix(in srgb, var(--chip-bg) 45%, transparent); }

/* ---------- Stats ---------- */
.stat { border-radius: 20px; padding: 1.25rem; box-shadow: var(--card-shadow); }
.stat-num { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.stat-label { font-size: .75rem; font-weight: 600; color: var(--ink-soft); }
.stat-hot { border-color: var(--line-strong); }

/* ---------- Hero ---------- */
.hero {
  max-width: none; margin-bottom: 1.5rem; padding: 2rem 1.5rem; color: #fff;
  background: var(--grad); border-radius: 24px; box-shadow: 0 12px 36px rgba(97, 24, 234, .28);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -4rem; top: -4rem; width: 16rem; height: 16rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); pointer-events: none;
}
@media (min-width: 48rem) { .hero { padding: 2.75rem 2.5rem; } }
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; color: #fff; }
.hero .lede { color: rgba(255, 255, 255, .88); }
.hero-pill { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .35); }
.hero-pill .logo-paw { fill: #fff; }
.hero-pill .logo-heart { fill: var(--g1); opacity: 1; }
.hero .btn { background: #fff; color: #3D0E96; box-shadow: 0 6px 18px rgba(20, 10, 40, .22); filter: none; }
.hero .btn:hover { background: #EDE5FF; }
.hero .btn-ghost { background: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; border-color: rgba(255, 255, 255, .45); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .28); }
.hero a:not(.btn) { color: #fff; }

.section { margin-top: 2rem; }
.guide-icon { background: var(--chip-bg); }
.cta-band { border-radius: 24px; }

/* ---------- Animals ---------- */
.animal-grid { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.animal-card { border-radius: 20px; box-shadow: var(--card-shadow); background: var(--glass-strong); }
.animal-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(97, 24, 234, .16); }
.animal-photo { background: linear-gradient(135deg, var(--chip-bg), var(--chip-hover)); aspect-ratio: 5 / 4; }
.animal-photo-empty .logo-paw, .gallery-empty .logo-paw { fill: var(--dot); }
.animal-status { top: .75rem; left: .75rem; }
.animal-name { font-size: 1.05rem; font-weight: 800; }
.animal-meta { font-size: .8125rem; }
.gallery-main { border-radius: 20px; }
.profile-info h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); }
.health-item { border-radius: 16px; }
.back-link { border-radius: 999px; background: var(--chip-bg); color: var(--chip-ink); border-color: transparent; font-size: .8125rem; }
.back-link:hover { background: var(--chip-hover); }

/* ---------- Overlays ---------- */
dialog.modal { border-radius: 24px; box-shadow: 0 20px 60px rgba(61, 14, 150, .25); }
dialog.modal::backdrop { background: rgba(61, 14, 150, .30); }
.cookie { border-radius: 18px; }
.contact-panel { border-radius: 20px; }
.contact-icon { background: var(--grad); }
.avatar, .photo-main { background: var(--grad); }
.faq-item { border-radius: 16px; }
.result-link { border-radius: 16px; }
.empty-state, .empty-cute { border-radius: 20px; }

/* ---------- Home feed ---------- */
.feed { max-width: 51.25rem; margin: 0 auto; }
.feed .hero { margin-top: 0; }
.composer { padding: 1rem; margin-bottom: 1.25rem; }
.composer-row { display: flex; gap: .75rem; align-items: center; }
.composer-avatar {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--chip-bg); color: var(--chip-ink); font-weight: 800;
}
.composer-input {
  flex: 1; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--input-bg); color: var(--ink-soft); font-size: .875rem; text-decoration: none;
}
.composer-input:hover { background: var(--chip-bg); }
.composer-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.composer-actions .btn { flex: 1 1 auto; text-align: center; }
.feed .stat-strip { margin-bottom: 1.25rem; }
.chips { display: flex; gap: .5rem; margin: 0 0 1.25rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-solid); color: var(--chip-ink); font-size: .8125rem; font-weight: 500; text-decoration: none;
}
.chips a:hover { background: var(--chip-bg); }
.chips a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(97, 24, 234, .25); }
.feed-more { margin: 1.5rem 0 0; text-align: center; max-width: none; }

.post-list { display: grid; gap: 1.25rem; }
.post {
  overflow: hidden; background: var(--glass-strong); border: 1px solid var(--glass-border);
  border-radius: 20px; box-shadow: var(--card-shadow);
}
.post-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem; }
.post-avatar {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--grad); color: #fff; font-size: .75rem; font-weight: 800;
}
.post-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.post-name { font-size: .875rem; font-weight: 600; }
.post-when { font-size: .6875rem; color: var(--ink-soft); }
.post-photo {
  position: relative; display: block; height: 20rem; background: var(--grad); color: #fff; text-decoration: none;
}
.post-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .30), transparent 55%); pointer-events: none; }
.post-photo-empty { display: grid; place-items: center; width: 100%; height: 100%; }
.post-photo-empty .animal-empty-glyph { width: 6rem; height: 6rem; opacity: .9; }
.post-photo-empty .logo-paw { fill: #fff; }
.post-photo-empty .logo-heart { fill: var(--g1); opacity: 1; }
.post-pill {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1; max-width: calc(100% - 2rem);
  padding: .4rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .92);
  color: #3D0E96; font-size: .8125rem; font-weight: 700; box-shadow: 0 2px 8px rgba(20, 10, 40, .2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-body { padding: 1rem 1.25rem 1.1rem; }
.post-story { margin: 0; font-size: .875rem; line-height: 1.7; max-width: none; }
.post-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; }
.post-foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }

/* ---------- Admin dashboard ---------- */
.dash-stats { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: 1rem; }
.dash-stat { position: relative; }
.dash-icon {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: 12px; color: #fff;
}
.dash-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dash-icon.g1 { background: linear-gradient(135deg, var(--g1), var(--g2)); }
.dash-icon.g2 { background: linear-gradient(135deg, var(--brand), var(--g1)); }
.dash-icon.g3 { background: linear-gradient(135deg, #7C3BFF, #B79DFF); }
.dash-icon.g4 { background: linear-gradient(135deg, #3D0E96, var(--g1)); }
.dash-grid { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 64rem) { .dash-grid { grid-template-columns: 2fr 1fr; } }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dash-head h2 { margin: 0; font-size: .95rem; }
.bars { display: flex; align-items: flex-end; gap: .75rem; height: 11rem; }
.bar-col { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: .35rem; height: 100%; }
.bar-col .bar { display: block; width: 100%; min-height: 4px; border-radius: 10px 10px 0 0; background: linear-gradient(to top, var(--brand), var(--g2)); }
.bar-num { font-size: .6875rem; font-weight: 700; color: var(--chip-ink); }
.bar-day { font-size: .6875rem; color: var(--ink-soft); }
.urgent-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.urgent-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--info-bg);
}
.urgent-item strong { font-size: .8125rem; }
.urgent-urgent { background: var(--bad-bg); border-color: color-mix(in srgb, var(--bad-ink) 25%, transparent); }
.urgent-medium { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn-ink) 25%, transparent); }

/* ---------- My activity cards ---------- */
.page-activity { max-width: 40rem; margin: 0 auto; }
.page-activity .section { margin-top: 1.75rem; }
.page-activity .section > h2 { margin-bottom: .75rem; font-size: 1rem; }
.act-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.act-item {
  display: flex; align-items: center; gap: .85rem; padding: 1rem;
  background: var(--glass-strong); border: 1px solid var(--line); border-radius: 16px;
}
.act-icon {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
  border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink);
}
.act-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act-main { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.act-title { font-size: .875rem; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
a.act-title { color: var(--link); text-decoration: none; }
a.act-title:hover { text-decoration: underline; }
.act-sub { font-size: .75rem; color: var(--ink-soft); }
.act-side { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
@media (max-width: 30rem) {
  .act-item { flex-wrap: wrap; }
  .act-side { flex-basis: 100%; justify-content: space-between; }
}

/* ---------- Short forms (report a stray, surrender) ---------- */
.page-form { max-width: 40rem; margin: 0 auto; }
.form-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.form-head h1 { margin-bottom: .25rem; }
.form-head .lede { margin: 0; }
.form-icon {
  display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 14px;
  background: var(--grad); color: #fff; box-shadow: var(--pop-shadow);
}
.form-icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-form .section { margin-top: 2rem; }
.page-form .section > h2 { font-size: 1rem; }

.fieldset-plain { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.fieldset-plain legend { display: block; margin-bottom: .4rem; padding: 0; font-size: .8125rem; font-weight: 600; }
.chip-group { display: flex; flex-wrap: wrap; gap: .5rem; }
/* The radio stays in the page for keyboards and screen readers; the label is what people see and tap. */
.chip-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; opacity: 0; }
.chip-label {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .4rem 1.25rem;
  border: 1px solid var(--control); border-radius: 999px; background: var(--input-bg); color: var(--chip-ink);
  font-size: .875rem; font-weight: 600; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chip-label:hover { background: var(--chip-bg); }
.chip-input:checked + .chip-label {
  background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 4px 12px rgba(97, 24, 234, .25);
}
.chip-input:checked + .chip-label.tone-urgent { background: var(--danger); border-color: var(--danger); box-shadow: 0 4px 12px rgba(220, 38, 38, .25); }
.chip-input:checked + .chip-label.tone-medium { background: #C96A00; border-color: #C96A00; box-shadow: 0 4px 12px rgba(217, 119, 6, .25); }
.chip-input:focus-visible + .chip-label { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Donate tiles and amount chips ---------- */
.tile-group { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 30rem) { .tile-group { grid-template-columns: 1fr; } }
.tile-label {
  display: grid; gap: .15rem; justify-items: start; padding: 1rem; min-height: 2.75rem; cursor: pointer;
  border: 1px solid var(--control); border-radius: 16px; background: var(--input-bg); color: var(--ink);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.tile-label svg { width: 1.4rem; height: 1.4rem; margin-bottom: .35rem; fill: none; stroke: var(--chip-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-title { font-size: .9rem; font-weight: 700; }
.tile-sub { font-size: .75rem; color: var(--ink-soft); }
.tile-label:hover { background: var(--chip-bg); }
.chip-input:checked + .tile-label { border-color: var(--brand); background: var(--chip-bg); box-shadow: 0 0 0 2px var(--brand); }
.chip-input:focus-visible + .tile-label { outline: 3px solid var(--focus); outline-offset: 2px; }
.preset-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.chip-btn {
  min-height: 2.75rem; padding: .4rem 1.1rem; border: 1px solid var(--control); border-radius: 999px;
  background: var(--input-bg); color: var(--chip-ink); font: 600 .875rem var(--font-body); cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.chip-btn:hover { background: var(--chip-bg); border-color: var(--brand); }
.chip-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Animals grid extras ---------- */
.filter-form { max-width: 40rem; margin-bottom: 1rem; }
.filter-form input[type=search] { border-radius: 999px; padding-left: 1.1rem; }
.animal-kind {
  position: absolute; top: .75rem; right: .75rem; padding: .2rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: #3D0E96; font-size: .6875rem; font-weight: 700; box-shadow: 0 2px 8px rgba(20, 10, 40, .2);
}
.animal-cta {
  display: block; margin-top: .6rem; padding: .5rem; border-radius: 999px; text-align: center;
  background: var(--chip-bg); color: var(--chip-ink); font-size: .8125rem; font-weight: 700; transition: background-color .15s, color .15s;
}
.animal-card:hover .animal-cta { background: var(--grad); color: #fff; }

/* =====================================================================
   Exact match to Kupkop-Linked-System.html (appended last, so it wins)
   ===================================================================== */
:root {
  --grad: linear-gradient(90deg, #6F2BFF, #9363FF);
  --grad-br: linear-gradient(135deg, #6F2BFF, #9363FF);
  --bg-image: linear-gradient(#EDE5FF, #EDE5FF);
  --card-border: rgba(255, 255, 255, .7);
  --field-border: #E0D3FF;
  --bar-line: rgba(147, 99, 255, .20);
  --side-line: rgba(147, 99, 255, .18);
  --muted: rgba(97, 24, 234, .78);
}
:root[data-theme="dark"] {
  --bg-image: linear-gradient(#140B26, #0E0720);
  --card-border: rgba(255, 255, 255, .12);
  --field-border: #5B4A8A;
  --bar-line: rgba(255, 255, 255, .10);
  --side-line: rgba(255, 255, 255, .10);
  --muted: rgba(201, 187, 230, .75);
}
body { font-size: 1rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--bar-line); background: var(--bar-bg); }
.brand-badge { background: linear-gradient(135deg, var(--g1), var(--g2)); }
.wordmark { font-size: 1.25rem; }
.site-header .icon-btn, .site-header .header-avatar { width: 2.25rem; height: 2.25rem; }
.header-tools { gap: .5rem; }
@media (min-width: 48rem) { .header-tools { gap: .75rem; } }
.header-avatar { background: linear-gradient(135deg, var(--brand), var(--g2)); }
.site-search { gap: .5rem; padding: .625rem 1rem; background: rgba(255, 255, 255, .9); border: 1px solid #E0D3FF; }
:root[data-theme="dark"] .site-search { background: var(--input-bg); border-color: var(--line); }
.site-search .search-ico { width: 1rem; height: 1rem; flex: none; fill: none; stroke: var(--g2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-search input[type=search] { padding: 0; font-size: .875rem; }
.site-search input[type=search]::placeholder { color: rgba(147, 99, 255, .7); opacity: 1; }
@media (min-width: 48rem) { .site-header .site-search { max-width: 32.5rem; margin: 0 1.5rem; } .site-header .sidebar-btn { display: none; } }
.sb-search { margin: 0 0 .5rem; }

/* Sidebar: always visible from 768px, like the mockup */
.sidebar { gap: .75rem; background: rgba(255, 255, 255, .8); border-right: 1px solid var(--side-line); }
:root[data-theme="dark"] .sidebar { background: var(--bar-bg); }
.sb-nav { gap: .25rem; }
.sb-link { padding: .625rem .75rem; font-size: .875rem; }
.sb-link span:not(.count) { flex: 1; }
.sb-link[aria-current="page"] { background: var(--grad); }
.sb-link .count { margin-left: auto; }
.sb-group { margin: 1rem 0 .25rem; padding: 0 .75rem; font-size: .6875rem; letter-spacing: .1em; color: var(--g2); }
.sb-mission {
  margin-top: auto; padding: 1rem; border-radius: 16px; border: 1px solid #CBB8FF;
  background: linear-gradient(135deg, #E0D3FF, #fff);
}
:root[data-theme="dark"] .sb-mission { background: linear-gradient(135deg, var(--chip-bg), var(--surface-solid)); border-color: var(--line-strong); }
.sb-mission strong { gap: .5rem; font-size: .8125rem; }
.sb-mission strong svg { width: 1rem; height: 1rem; stroke: var(--brand); }
.sb-mission p { margin: .25rem 0 0; font-size: .75rem; line-height: 1.25rem; color: var(--muted); }
.sb-bar { height: .5rem; margin-top: .75rem; overflow: hidden; border-radius: 999px; background: #fff; }
.sb-bar span { display: block; height: 100%; background: var(--grad); }
.sb-mission small { display: block; margin-top: .25rem; font-size: .6875rem; color: var(--muted); }
.sb-foot { margin-top: 0; padding-top: 0; border-top: 0; }
@media (min-width: 48rem) {
  .sidebar { transform: none; visibility: visible; transition: none; }
  html.js body { padding-left: 260px; }
  html.sb-open .sidebar-backdrop { display: none; }
}
@media (max-width: 47.99rem) { html.sb-open .sidebar-backdrop { display: block; } }
nav.admin-tabs[aria-label="Admin sections"] { display: none; }

/* Surfaces */
.card, .post, .animal-card, .stat, .act-item { border-color: var(--card-border); }
.card, .stat { background: rgba(255, 255, 255, .8); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] .stat { background: var(--glass-bg); }
.wrap { padding: 1.5rem 1rem; }
@media (min-width: 48rem) { .wrap { padding: 1.5rem 2rem; } }
.btn { font-size: .8125rem; background: var(--grad); }
.btn:hover { background: var(--grad); }
.btn-lg { font-size: .875rem; }
.fab, .form-icon, .contact-icon, .auth-icon, .photo-main, .avatar { background: var(--grad-br); }
.btn-block { padding: .75rem 1.25rem; font-size: .875rem; font-weight: 700; margin-top: .5rem; }

/* Page titles and forms */
.page-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: 0; }
.page-title svg { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .page-title svg { stroke: var(--chip-ink); }
.page-sub { margin: .25rem 0 0; font-size: .8125rem; color: var(--muted); max-width: none; }
h1 { font-size: 1.375rem; font-weight: 800; letter-spacing: 0; }
.page-title + .page-sub + form, .page-title + .page-sub + .card { margin-top: 1.25rem; }
.page-form form.card, .page-donate form.card { margin-top: 1.25rem; padding: 1.5rem; }
.page-donate { max-width: 45rem; margin: 0 auto; }
.field { margin-bottom: 1rem; }
.field label, .field legend, .fieldset-plain legend { font-size: .75rem; font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=search], input[type=date], select, textarea { border-color: var(--field-border); border-radius: 12px; padding: .625rem .75rem; font-size: .875rem; background: var(--input-bg); }
input[type=file] {
  padding: 2rem 1rem; border: 2px dashed #CBB8FF; border-radius: 16px; background: var(--input-bg);
  color: var(--g2); font-size: .8125rem; font-weight: 500; text-align: center;
}
input[type=file]::file-selector-button {
  margin-right: .75rem; padding: .4rem 1rem; border: 0; border-radius: 999px; background: #E0D3FF; color: var(--brand); font: 600 .8125rem var(--font-body); cursor: pointer;
}
.chip-label { min-height: 2.75rem; padding: .25rem 1rem; border-color: var(--field-border); background: #fff; font-size: .75rem; font-weight: 500; }
:root[data-theme="dark"] .chip-label { background: var(--input-bg); }
.chip-input:checked + .chip-label { background: var(--brand); border-color: var(--brand); box-shadow: none; }

/* Feed */
.feed { display: flex; flex-direction: column; gap: 1.25rem; }
.feed > * { margin: 0; }
.composer { padding: 1rem; }
.composer-row { gap: .75rem; }
.composer-avatar { width: 2.5rem; height: 2.5rem; background: #E0D3FF; color: var(--brand); font-size: .8125rem; font-weight: 700; }
.composer-input { padding: .625rem 1rem; background: #EDE5FF; border: 1px solid #E0D3FF; color: var(--g2); }
.composer-actions { gap: .5rem; margin-top: .75rem; flex-wrap: nowrap; }
.composer-btn {
  display: flex; flex: 1; align-items: center; justify-content: center; gap: .5rem; padding: .625rem .25rem;
  border-radius: 999px; background: #E0D3FF; color: var(--brand); font-size: .8125rem; font-weight: 600; text-decoration: none;
  transition: background-color .15s;
}
.composer-btn:hover { background: #CBB8FF; }
.composer-btn svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.composer-btn.is-primary { background: var(--grad); color: #fff; box-shadow: 0 1px 3px rgba(20, 10, 40, .2); }
.composer-btn.is-primary:hover { filter: brightness(1.06); }
.chips { margin: 0; gap: .5rem; }
.chips a { padding: .375rem 1rem; font-size: .8125rem; }
.post-list { gap: 1.25rem; }
.post { background: rgba(255, 255, 255, .85); }
:root[data-theme="dark"] .post { background: var(--glass-bg); }
.post-head { justify-content: space-between; padding: .75rem 1.25rem; }
.post-avatar { background: linear-gradient(135deg, var(--brand), var(--g2)); }
.post-name { font-size: .875rem; font-weight: 600; line-height: 1.25; }
.post-when { display: flex; align-items: center; gap: .375rem; font-size: .6875rem; color: var(--muted); }
.post-when svg { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-photo { background: linear-gradient(135deg, var(--brand), var(--g1), var(--g2)); }
.post-badges { position: absolute; left: 1rem; bottom: 1rem; z-index: 1; display: flex; align-items: center; gap: .5rem; max-width: calc(100% - 2rem); }
.post-pill { position: static; backdrop-filter: blur(4px); font-size: .8125rem; }
.post-urgent {
  padding: .25rem .625rem; border-radius: 999px; background: #E0182D; color: #fff; font-size: .6875rem; font-weight: 700;
  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
@keyframes pulse { 50% { opacity: .5; } }
.post-body { padding: 1rem 1.25rem; }
.post-story { font-size: .875rem; line-height: 1.5rem; color: rgba(61, 14, 150, .9); }
:root[data-theme="dark"] .post-story { color: var(--ink); }
.post-tags { gap: .5rem; margin-top: .75rem; }
.post .chip { padding: .25rem .625rem; font-size: .6875rem; font-weight: 500; }
.chip-status { font-weight: 700; }
.chip-ok { background: #D1FAE5; color: #046C3C; border-color: #A7F3D0; }
:root[data-theme="dark"] .chip-ok { background: rgba(16, 185, 129, .2); color: #A7F3D0; border-color: rgba(167, 243, 208, .3); }
.post-foot { justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid #EDE5FF; }
:root[data-theme="dark"] .post-foot { border-color: var(--line); }
.post-foot .btn-small { padding: .5rem 1.25rem; font-size: .8125rem; font-weight: 700; box-shadow: 0 6px 16px rgba(111, 43, 255, .3); }
.post-foot .btn-ghost { background: #EDE5FF; box-shadow: none; font-weight: 500; }

/* Browse pets */
.page-wide { max-width: 68.75rem; margin: 0 auto; }
.animal-grid { margin-top: 1.25rem; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .animal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .animal-grid { grid-template-columns: repeat(3, 1fr); } }
.animal-card { background: rgba(255, 255, 255, .8); box-shadow: 0 1px 3px rgba(20, 10, 40, .12); }
:root[data-theme="dark"] .animal-card { background: var(--glass-bg); }
.animal-card:hover { transform: none; box-shadow: 0 10px 15px rgba(20, 10, 40, .12); }
a.animal-photo { display: block; height: 12.5rem; aspect-ratio: auto; background: linear-gradient(135deg, #E0D3FF, #CBB8FF); text-decoration: none; }
.animal-kind { left: .75rem; right: auto; background: #fff; padding: .25rem .625rem; }
.animal-urgent { position: absolute; top: .75rem; right: .75rem; padding: .25rem .5rem; border-radius: 999px; background: #E0182D; color: #fff; font-size: .625rem; font-weight: 700; }
.animal-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.animal-body { padding: 1rem; gap: 0; }
.animal-name { font: 700 1rem/1.5 var(--font-body); }
.animal-age { font-size: .75rem; color: var(--muted); }
.animal-meta { font-size: .75rem; color: var(--muted); }
.animal-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.animal-actions .act-main-btn {
  flex: 1; padding: .5rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: .8125rem; font-weight: 600; text-align: center; text-decoration: none;
}
.animal-actions .act-main-btn:hover { background: #4E10C4; }
.animal-actions .act-main-btn.is-state { background: #E0D3FF; color: var(--brand); }
.animal-actions .act-side-btn { padding: .5rem 1rem; border-radius: 999px; background: #E0D3FF; color: var(--brand); font-size: .8125rem; text-decoration: none; }
.animal-actions .act-side-btn:hover { background: #CBB8FF; }

/* My adoptions and reports */
.act-icon { display: none; }
.act-item { padding: 1rem; background: #fff; border-color: #E0D3FF; border-radius: 16px; }
:root[data-theme="dark"] .act-item { background: var(--glass-bg); border-color: var(--line); }
.act-title { font-size: .875rem; font-weight: 700; }
.act-sub { font-size: .75rem; color: var(--muted); }
.act-desc { margin: .5rem 0 0; font-size: .8125rem; }
.page-activity .page-title { margin-bottom: 1.25rem; }

/* Donate */
.total-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; padding: 1rem;
  background: #fff; border: 1px solid #E0D3FF; border-radius: 16px;
}
:root[data-theme="dark"] .total-card { background: var(--glass-bg); border-color: var(--line); }
.total-card small { display: block; font-size: .75rem; color: var(--muted); }
.total-card strong { font-size: 1.25rem; font-weight: 800; }
.tile-group { margin-top: 1.25rem; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.tile-label { padding: 1rem; border: 1px solid #E0D3FF; border-radius: 16px; background: rgba(255, 255, 255, .8); }
:root[data-theme="dark"] .tile-label { background: var(--input-bg); border-color: var(--line); }
.tile-title { margin-top: .25rem; font-size: .875rem; font-weight: 700; }
.tile-sub { margin-top: .25rem; font-size: .6875rem; color: var(--muted); }
.chip-input:checked + .tile-label { background: var(--brand); border-color: var(--brand); box-shadow: 0 10px 15px rgba(20, 10, 40, .2); color: #fff; }
.chip-input:checked + .tile-label .tile-sub { color: rgba(255, 255, 255, .7); }
.preset-row { margin: 0 0 1rem; gap: .5rem; }
.chip-btn { min-height: 2.75rem; padding: .5rem 1rem; border-color: #E0D3FF; background: #EDE5FF; font-size: .8125rem; }
.chip-btn.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Admin dashboard */
.dash-icon { border-radius: 12px; }
.dash-icon.g1 { background: linear-gradient(135deg, var(--g1), var(--g2)); }
.dash-icon.g2 { background: linear-gradient(135deg, var(--brand), var(--g1)); }
.dash-icon.g3 { background: linear-gradient(135deg, var(--g2), #CBB8FF); }
.dash-icon.g4 { background: linear-gradient(135deg, #3D0E96, var(--g1)); }
.stat { padding: 1.25rem; }
.stat-num { margin-top: .25rem; font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.stat-label { font-size: .75rem; color: var(--muted); font-weight: 500; }
.dash-head h2, .dash-head h3 { margin: 0; font-size: .9375rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
.dash-head h2 svg { width: 1rem; height: 1rem; fill: none; stroke: #E0182D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.urgent-item { padding: .625rem .75rem; border-radius: 12px; }
.urgent-urgent { background: #FEE2E2; border-color: #FECACA; }
.urgent-medium { background: #FEF3C7; border-color: #FDE68A; }
.urgent-item .btn { padding: .25rem .75rem; font-size: .6875rem; background: #E0182D; box-shadow: none; }
.urgent-medium .btn { background: #E08A00; }
.recent-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.recent-item { display: flex; gap: .75rem; }
.recent-ico { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: #E0D3FF; color: var(--brand); }
.recent-ico svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recent-text { font-size: .8125rem; }
.recent-time { display: block; font-size: .6875rem; color: var(--muted); }
.act-block { display: block; }
.act-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .25rem; }
.act-block .act-side { flex-wrap: nowrap; }

/* ---------- Form layout pieces used by Report, Surrender and Donate ---------- */
.browse { display: block; }
.form-card { padding: 1.5rem; }
.form-card-flat { margin-top: 1.25rem; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } }
.form-grid .span-2, .span-2 { grid-column: 1 / -1; }
.mt-label { display: block; margin-top: .25rem; }
.page-form form.card { margin-top: 1.25rem; }

/* Photo drop zone: the real file input stays in the page for keyboards and screen readers */
.field-photo { position: relative; }
.field-photo input[type=file] {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0; opacity: 0;
}
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 9.375rem; padding: 1rem; border: 2px dashed #CBB8FF; border-radius: 16px; background: #EDE5FF;
  color: var(--g2); text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s;
}
:root[data-theme="dark"] .dropzone { background: var(--input-bg); border-color: var(--line-strong); }
.dropzone:hover { background: #E0D3FF; border-color: var(--g2); }
.dropzone svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dz-title { font-size: .8125rem; font-weight: 500; }
.dz-sub { font-size: .6875rem; }
.field-photo:focus-within .dropzone { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-photo.has-file .dropzone { border-style: solid; border-color: var(--g1); color: var(--brand); }

/* Donate: total raised */
.raised {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .5rem; padding: 1rem;
  background: #fff; border: 1px solid #E0D3FF; border-radius: 16px;
}
:root[data-theme="dark"] .raised { background: var(--glass-bg); border-color: var(--line); }
.raised-label { font-size: .75rem; color: var(--muted); }
.raised-num { font-size: 1.25rem; font-weight: 800; }
.raised-side { display: grid; gap: .25rem; justify-items: end; }
.raised-bar { width: 12.5rem; max-width: 40vw; height: .5rem; overflow: hidden; border-radius: 999px; background: #E0D3FF; }
.raised-bar span { display: block; height: 100%; background: var(--grad); }
.raised-note { font-size: .6875rem; color: var(--muted); }

/* Like button on feed posts */
.post-headline { display: flex; align-items: center; gap: .75rem; }
.post-foot-left { display: flex; flex-wrap: wrap; gap: .25rem; }
.like-form { display: inline; margin: 0; }
.like-btn {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.25rem; padding: .375rem .75rem; border: 0; border-radius: 999px;
  background: #EDE5FF; color: var(--brand); font: 500 .8125rem var(--font-body); cursor: pointer; transition: background-color .15s;
}
.like-btn:hover { background: #E0D3FF; }
.like-btn svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.like-btn.is-liked { background: var(--brand); color: #fff; }
.like-btn.is-liked svg { fill: currentColor; }
:root[data-theme="dark"] .like-btn { background: var(--chip-bg); color: var(--chip-ink); }
:root[data-theme="dark"] .like-btn.is-liked { background: var(--g1); color: #fff; }
.dash-wrap { max-width: 75rem; }
.dash-wrap .dash-stats { margin-top: 1.25rem; }

/* ---------- Admin lists (animals, adoptions, rescue reports, surrenders, donations, ID verifications) ---------- */
.table-wrap {
  margin-top: 1.25rem; border: 1px solid #fff; border-radius: 20px; background: rgba(255, 255, 255, .9);
  box-shadow: 0 1px 3px rgba(20, 10, 40, .12);
}
:root[data-theme="dark"] .table-wrap { border-color: var(--line); background: var(--glass-bg); }
.data th {
  padding: .75rem 1.5rem; background: #EDE5FF; color: var(--muted);
  font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-bottom: 0;
}
:root[data-theme="dark"] .data th { background: color-mix(in srgb, var(--chip-bg) 55%, transparent); color: var(--ink-soft); }
.data td { padding: 1rem 1.5rem; border-top: 1px solid #EDE5FF; border-bottom: 0; vertical-align: middle; font-size: .8125rem; }
:root[data-theme="dark"] .data td { border-top-color: var(--line); }
.data tbody tr:first-child td { border-top: 0; }
.data td a { font-weight: 600; text-decoration: none; }
.data td a:hover { text-decoration: underline; }
.data .sub { margin-top: .125rem; font-size: .6875rem; color: var(--muted); }
.data .badge { border-color: transparent; font-size: .6875rem; font-weight: 700; padding: .25rem .625rem; }
.data tbody tr:hover { background: rgba(245, 243, 255, .6); }
:root[data-theme="dark"] .data tbody tr:hover { background: color-mix(in srgb, var(--chip-bg) 45%, transparent); }
.thumb { border-radius: 12px; }
.pager { margin-top: 1.25rem; }
.admin-tabs { margin-top: 1rem; }
@media (max-width: 40rem) { .data th, .data td { padding: .75rem 1rem; } }

/* ---------- Auth pages (login, register, forgot and reset password, unsubscribe) ---------- */
.auth-page { min-height: calc(100vh - 14rem); padding: 1rem 0; }
.auth-card {
  max-width: 26rem; padding: 2rem; border: 1px solid var(--card-border); border-radius: 24px;
  background: rgba(255, 255, 255, .9); box-shadow: 0 8px 30px rgba(97, 24, 234, .10);
}
:root[data-theme="dark"] .auth-card { background: var(--glass-bg); }
.auth-card-wide { max-width: 34rem; }
.auth-head { margin-bottom: 1.5rem; }
.auth-head h1 { margin: 0 0 .25rem; font-size: 1.375rem; font-weight: 800; letter-spacing: 0; }
.auth-head .lede { font-size: .8125rem; color: var(--muted); }
.auth-icon {
  width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 16px;
  background: var(--grad-br); box-shadow: 0 6px 16px rgba(111, 43, 255, .30);
}
.auth-glyph { width: 1.5rem; height: 1.5rem; }
.auth-icon .logo-paw { fill: #fff; }
.auth-icon .logo-heart { fill: var(--g1); opacity: 1; }
.auth-icon-ok { background: #D1FAE5; color: #046C3C; box-shadow: none; }
.auth-icon-warn { background: #FEF3C7; color: #B04A00; box-shadow: none; }
:root[data-theme="dark"] .auth-icon-ok { background: rgba(16, 185, 129, .2); color: #A7F3D0; }
:root[data-theme="dark"] .auth-icon-warn { background: rgba(245, 158, 11, .2); color: #FDE68A; }
.auth-alt { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #EDE5FF; font-size: .8125rem; color: var(--muted); }
:root[data-theme="dark"] .auth-alt { border-top-color: var(--line); }
.forgot-link { font-size: .75rem; font-weight: 600; }
.auth-card .btn-block { margin-top: .5rem; }
.pw-toggle { color: var(--brand); font-size: .75rem; }
:root[data-theme="dark"] .pw-toggle { color: var(--chip-ink); }
.auth-card .field-error { font-size: .75rem; }

/* ---------- Admin detail pages (one report, adoption, surrender, donation, ID check, animal editor) ---------- */
.manage { max-width: 50rem; }
.manage > .card, main.wrap > .card { margin-top: 1.25rem; padding: 1.5rem; border-radius: 20px; background: rgba(255, 255, 255, .9); border-color: #fff; box-shadow: 0 1px 3px rgba(20, 10, 40, .12); }
:root[data-theme="dark"] .manage > .card, :root[data-theme="dark"] main.wrap > .card { background: var(--glass-bg); border-color: var(--line); }
.manage > .card:first-child { margin-top: 0; }
.manage h2 { margin-bottom: 1rem; font-size: .9375rem; font-weight: 700; }
.manage h3 { margin: 1.25rem 0 .5rem; font-size: .8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.manage p { font-size: .875rem; }

.detail-grid { gap: .125rem 1.5rem; margin-bottom: 1.25rem; }
.detail-grid dt { font-size: .75rem; font-weight: 600; color: var(--muted); }
.detail-grid dd { margin-bottom: .75rem; font-size: .875rem; }
.detail-grid .sub { margin-top: .125rem; font-size: .75rem; color: var(--muted); }
@media (min-width: 40rem) { .detail-grid { grid-template-columns: 9rem 1fr; } .detail-grid dt { padding-top: .1rem; } .detail-grid dd { margin-bottom: .6rem; } }

.id-shot img { border: 1px solid #E0D3FF; border-radius: 16px; }
.id-shot figcaption { font-size: .75rem; color: var(--muted); }

.review-form { background: #EDE5FF !important; border-color: #E0D3FF !important; }
:root[data-theme="dark"] .review-form { background: var(--glass-bg) !important; border-color: var(--line) !important; }
.review-actions { gap: .5rem; margin-top: .5rem; }
.review-actions .btn { padding: .5rem 1.25rem; font-size: .8125rem; font-weight: 700; }
.review-actions .btn-danger { background: #fff; border: 1px solid #FECACA; color: #D4182A; }
.review-actions .btn-danger:hover { background: #FEE2E2; }
:root[data-theme="dark"] .review-actions .btn-danger { background: transparent; border-color: rgba(248, 113, 113, .5); color: #FCA5A5; }

.health-item { padding: 1rem; border: 1px solid #E0D3FF; border-radius: 16px; background: #fff; }
:root[data-theme="dark"] .health-item { background: var(--input-bg); border-color: var(--line); }
.health-date { font-size: .8125rem; }
.photo-card img { border-radius: 16px; border-color: #E0D3FF; }
.photo-actions .btn-small { padding: .3rem .75rem; font-size: .6875rem; font-weight: 700; }
.photo-actions .btn-danger { background: #FEE2E2; color: #D4182A; }
.photo-actions .btn-danger:hover { background: #FECACA; }
.danger-zone { border-color: #FECACA !important; }
:root[data-theme="dark"] .danger-zone { border-color: rgba(248, 113, 113, .4) !important; }
.danger-zone h2 { color: #D4182A; }
:root[data-theme="dark"] .danger-zone h2 { color: #FCA5A5; }
.btn-danger { background: #E0182D; }
.btn-danger:hover { background: #D4182A; }

/* ---------- Drop zone: drag, chosen file, preview ---------- */
.dropzone.is-drag { background: #E0D3FF; border-color: var(--g1); border-style: solid; }
.dz-thumb { width: 4rem; height: 4rem; object-fit: cover; border: 1px solid #CBB8FF; border-radius: 12px; }
.field-photo.has-file .dropzone > svg { display: none; }
.field-photo.has-file .dz-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--brand); font-weight: 700; }
:root[data-theme="dark"] .field-photo.has-file .dz-title { color: var(--chip-ink); }
.dz-sub.is-warn { color: #D4182A; font-weight: 600; }
:root[data-theme="dark"] .dz-sub.is-warn { color: #FCA5A5; }

/* ---------- Animal profile (animal.php) and the adopt form header ---------- */
.profile { gap: 1.5rem; margin-top: 1rem; }
@media (min-width: 52rem) { .profile { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; } }
.gallery-main {
  border: 1px solid #fff; border-radius: 24px; background: linear-gradient(135deg, var(--brand), var(--g1), var(--g2));
  box-shadow: 0 8px 30px rgba(97, 24, 234, .12);
}
:root[data-theme="dark"] .gallery-main { border-color: var(--line); }
.gallery-main img { aspect-ratio: 5 / 4; }
.gallery-empty .logo-paw { fill: #fff; }
.gallery-empty .logo-heart { fill: var(--g1); opacity: 1; }
.gallery-thumbs { gap: .625rem; margin-top: .75rem; }
.gallery-thumbs a { width: 4.5rem; height: 4.5rem; border-radius: 14px; border-width: 2px; }
.gallery-thumbs a[aria-current="true"] { border-color: var(--brand); box-shadow: 0 4px 12px rgba(97, 24, 234, .25); }

.profile-info h1 { margin-bottom: .5rem; font-size: clamp(1.5rem, 4vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; }
.profile-badges { gap: .5rem; margin-bottom: 1rem; }
.profile-info .badge { font-size: .6875rem; font-weight: 700; border-color: transparent; }
.profile-info .chip { font-size: .6875rem; font-weight: 500; }

/* Facts become small tiles: muted label above, value below */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin: 1rem 0 1.5rem; }
.facts > div, .facts dt, .facts dd { min-width: 0; }
.facts dt { grid-column: auto; padding: .75rem .875rem 0; margin: 0; border-radius: 14px 14px 0 0; background: #EDE5FF; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.facts dd { padding: .125rem .875rem .75rem; margin: 0; border-radius: 0 0 14px 14px; background: #EDE5FF; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
:root[data-theme="dark"] .facts dt, :root[data-theme="dark"] .facts dd { background: var(--chip-bg); }
:root[data-theme="dark"] .facts dt { color: var(--ink-soft); }
.profile-cta { gap: .75rem; }
.profile-cta .btn-lg { padding: .75rem 1.5rem; font-size: .875rem; }

.prose { max-width: none; }
.prose p { font-size: .9375rem; line-height: 1.7; color: rgba(61, 14, 150, .9); }
:root[data-theme="dark"] .prose p { color: var(--ink); }
.section .section-head h2, .section > h2 { font-size: 1.0625rem; font-weight: 800; }
.section-head a { font-size: .8125rem; font-weight: 600; text-decoration: none; }
.section-head a:hover { text-decoration: underline; }
.apply-thumb { border-radius: 16px; border-color: #E0D3FF; }
.apply-head h1 { font-size: 1.375rem; }

/* ---------- FAQ, Search and 404 ---------- */
.faq { gap: .625rem; max-width: 48rem; margin: 1rem 0 2rem; }
.faq-controls { max-width: 48rem; margin: 1rem 0 .5rem; }
.faq-item { border: 1px solid #fff; border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 3px rgba(20, 10, 40, .12); }
:root[data-theme="dark"] .faq-item { border-color: var(--line); background: var(--glass-bg); }
.faq-item summary { padding: .875rem 1.25rem; font-size: .875rem; font-weight: 700; border-radius: 16px; }
.faq-item summary:hover { background: rgba(245, 243, 255, .8); }
:root[data-theme="dark"] .faq-item summary:hover { background: var(--hover-tint); }
.faq-item .chev { color: var(--g2); }
.faq-item[open] { border-color: #CBB8FF; }
.faq-item[open] summary { color: var(--brand); }
:root[data-theme="dark"] .faq-item[open] summary { color: var(--chip-ink); }
.faq-body { padding: 0 1.25rem 1.125rem; font-size: .875rem; line-height: 1.7; }
.faq-body p { max-width: 42rem; }
.faq-links { gap: .5rem; }

.page-search { max-width: 40rem; margin-bottom: 1.25rem; }
.page-search input { border-radius: 999px; padding-left: 1.1rem; }
.results { gap: .625rem; max-width: 48rem; }
.result-link { padding: .875rem 1.25rem; border: 1px solid #fff; border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 1px 3px rgba(20, 10, 40, .12); }
:root[data-theme="dark"] .result-link { border-color: var(--line); background: var(--glass-bg); }
.result-link:hover { background: #EDE5FF; border-color: var(--g2); }
:root[data-theme="dark"] .result-link:hover { background: var(--hover-tint); }
.result-type { padding: .125rem .625rem; background: #E0D3FF; color: var(--brand); font-size: .6875rem; font-weight: 700; }
.result-title { font-size: .875rem; font-weight: 700; }
.result-snippet { font-size: .8125rem; color: var(--muted); }

.notfound { border-radius: 24px; }
.notfound-digit { -webkit-text-stroke-color: var(--g1); }
.notfound .lede { font-size: .875rem; color: var(--muted); }

/* ---------- Row buttons on admin queues ---------- */
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .inline-form { display: inline; }
.row-btn {
  display: inline-flex; align-items: center; min-height: 2rem; margin-left: .375rem; padding: .25rem .875rem; border: 0; border-radius: 999px;
  font: 700 .75rem var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .15s;
}
.row-btn.ok { background: #D1FAE5; color: #046C3C; }
.row-btn.ok:hover { background: #A7F3D0; }
.row-btn.no { background: #FEE2E2; color: #D4182A; }
.row-btn.no:hover { background: #FECACA; }
.row-btn.view { background: #E0D3FF; color: var(--brand); }
.row-btn.view:hover { background: #CBB8FF; }
.row-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:root[data-theme="dark"] .row-btn.ok { background: rgba(16, 185, 129, .2); color: #A7F3D0; }
:root[data-theme="dark"] .row-btn.no { background: rgba(239, 68, 68, .2); color: #FECACA; }
:root[data-theme="dark"] .row-btn.view { background: var(--chip-bg); color: var(--chip-ink); }

/* ---------- Share button and comments ---------- */
.share-btn { display: none; }
.js .share-btn { display: inline-flex; }
a.like-btn { text-decoration: none; }
.post-foot-left { gap: .5rem; }
.comment-list { display: grid; gap: 1rem; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #EDE5FF; list-style: none; }
:root[data-theme="dark"] .comment-list { border-top-color: var(--line); }
.comment { display: flex; align-items: flex-start; gap: .75rem; }
.comment-avatar {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--g2)); color: #fff; font-size: .75rem; font-weight: 700;
}
.comment-main { flex: 1; min-width: 0; }
.comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; font-size: .8125rem; }
.comment-time { font-size: .6875rem; color: var(--muted); }
.comment-body { margin: .125rem 0 0; font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; max-width: none; }
.comment .row-btn { margin-left: 0; }

/* ---------- Donation breakdown (admin Donations) ---------- */
.split-grid { display: grid; gap: 1.25rem; margin: 1.25rem 0; }
@media (min-width: 52rem) { .split-grid { grid-template-columns: 1fr 1fr; } }
.split-card .dash-head { margin-bottom: 1rem; }
.split-list { display: grid; gap: .875rem; margin: 0; padding: 0; list-style: none; }
.split-row { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; font-size: .8125rem; }
.split-name { font-weight: 600; overflow-wrap: anywhere; }
.split-amt { font-weight: 700; }
.split-bar { grid-column: 1 / -1; height: .5rem; overflow: hidden; border-radius: 999px; background: #E0D3FF; }
.split-bar span { display: block; height: 100%; background: var(--grad); }
:root[data-theme="dark"] .split-bar { background: var(--chip-bg); }
.split-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin: 0; padding: 0; list-style: none; }
.split-tile { display: grid; gap: .125rem; padding: .875rem; border: 1px solid #E0D3FF; border-radius: 16px; background: #EDE5FF; }
:root[data-theme="dark"] .split-tile { background: var(--chip-bg); border-color: var(--line); }
.split-emoji { font-size: 1.375rem; line-height: 1.3; }
.split-tile .split-name { font-size: .75rem; color: var(--muted); font-weight: 600; }
.split-tile .split-amt { font-size: 1rem; }
.split-foot { margin: 1rem 0 0; }
.alloc-chip { margin-left: .25rem; }

/* ---------- Donation breakdown (admin Donations) ---------- */
.donate-total { margin: 1.25rem 0; }
.split-grid { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (min-width: 52rem) { .split-grid { grid-template-columns: 1fr 1fr; } }
.split-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.split-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .375rem; font-size: .8125rem; }
.split-row strong { font-size: .875rem; }
.split-count { display: inline-block; min-width: 1.25rem; margin-left: .25rem; padding: 0 .4rem; border-radius: 999px; background: #E0D3FF; color: var(--brand); font-size: .6875rem; font-weight: 700; text-align: center; }
:root[data-theme="dark"] .split-count { background: var(--chip-bg); color: var(--chip-ink); }
.split-bar { height: .5rem; overflow: hidden; border-radius: 999px; background: #E0D3FF; }
:root[data-theme="dark"] .split-bar { background: var(--chip-bg); }
.split-bar span { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.split-bar.is-muted span { background: #CBB8FF; }

/* ---------- Transparency page ---------- */
.mini-title { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.page-wide > h2 { margin: 1.5rem 0 .75rem; font-size: 1.0625rem; font-weight: 800; }

/* ---------- Icons instead of emojis (donate tiles, donation categories) ---------- */
.tile-label { display: flex; align-items: center; gap: .75rem; }
.tile-icon {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px;
  background: #E0D3FF; color: var(--brand); transition: background-color .15s, color .15s;
}
.tile-icon svg { width: 1.25rem; height: 1.25rem; margin: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-text { display: grid; gap: .125rem; min-width: 0; }
.tile-title { margin: 0; }
.tile-sub { margin: 0; }
.chip-input:checked + .tile-label .tile-icon { background: rgba(255, 255, 255, .2); color: #fff; }
:root[data-theme="dark"] .tile-icon { background: var(--chip-bg); color: var(--chip-ink); }
:root[data-theme="dark"] .chip-input:checked + .tile-label .tile-icon { background: rgba(255, 255, 255, .2); color: #fff; }
.cat-ico { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; }
.split-label { display: inline-flex; align-items: center; gap: .5rem; }
.split-label .cat-ico { color: var(--brand); }
:root[data-theme="dark"] .split-label .cat-ico { color: var(--chip-ink); }
.chip-icon { display: inline-flex; align-items: center; gap: .3rem; }
.chip-icon .cat-ico { width: .8125rem; height: .8125rem; }

/* Amount chips were unreadable in dark mode (pale text on a pale chip) */
:root[data-theme="dark"] .chip-btn { background: var(--chip-bg); border-color: var(--line-strong); color: var(--chip-ink); }
:root[data-theme="dark"] .chip-btn:hover { background: var(--chip-hover); }
:root[data-theme="dark"] .chip-btn.is-active { background: var(--g1); border-color: var(--g1); color: #fff; }

/* ---------- Fix: style.css has ".field label { display: block; padding: 0; margin-bottom: .3rem }", which
   beat the single-class rules for tiles, chips and the drop zone. These selectors are more specific. ---------- */
.tile-group .tile-label {
  display: flex; align-items: center; gap: .75rem; margin: 0; padding: 1rem; font-size: inherit; font-weight: 400;
}
.chip-group .chip-label {
  display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: .25rem 1rem; font-size: .75rem; font-weight: 500;
}
.field-photo .dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  margin: 0; padding: 1rem; font-size: inherit; font-weight: inherit;
}

/* ---------- Placeholders: readable, but clearly lighter than typed text ---------- */
input::placeholder, textarea::placeholder { color: #6A4BC4; opacity: 1; }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #A998D6; opacity: 1; }
.site-search input[type=search]::placeholder { color: rgba(147, 99, 255, .7); }
:root[data-theme="dark"] .site-search input[type=search]::placeholder { color: rgba(201, 187, 230, .7); }
select:required:invalid { color: #6A4BC4; }

/* ---------- Drop zone: bigger preview and Remove button ---------- */
.dz-thumb {
  width: auto; height: auto; max-width: 100%; max-height: 12rem; object-fit: contain;
  background: #fff; border: 1px solid #CBB8FF; border-radius: 12px;
}
:root[data-theme="dark"] .dz-thumb { background: var(--input-bg); border-color: var(--line-strong); }
.field-photo.has-file .dropzone { min-height: 0; padding: 1rem; }
.dz-remove {
  display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .5rem; padding: .375rem 1.25rem; border: 0; border-radius: 999px;
  background: #FEE2E2; color: #D4182A; font: 700 .8125rem var(--font-body); cursor: pointer; transition: background-color .15s;
}
.dz-remove[hidden] { display: none; }
.dz-remove:hover { background: #FECACA; }
.dz-remove:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
:root[data-theme="dark"] .dz-remove { background: rgba(239, 68, 68, .2); color: #FECACA; }
:root[data-theme="dark"] .dz-remove:hover { background: rgba(239, 68, 68, .3); }

/* =====================================================================
   Mobile polish (phones, up to 40rem). Fixes from a real phone screenshot:
   header overflowed, composer and button labels wrapped, filter chips were cut off,
   the chat button covered content.
   ===================================================================== */
body { overflow-x: clip; }
.site-header, .wordmark, .header-tools { min-width: 0; }
.header-tools .btn { white-space: nowrap; }

@media (max-width: 39.99rem) {
  /* Header: menu, logo, theme toggle, profile or Log in. Bell and chat are in the sidebar and the contact button. */
  .site-header { gap: .5rem; padding: 0 .75rem; }
  .header-tools { gap: .5rem; }
  .header-tools a.icon-btn { display: none; }
  .header-tools .btn { padding: .4rem .9rem; font-size: .8125rem; }
  .wordmark { gap: .4rem; font-size: 1.125rem; }

  /* Home composer: one line of text, three buttons that fit */
  .composer-input { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .composer-actions { gap: .375rem; }
  .composer-btn { padding: .625rem .25rem; font-size: .75rem; white-space: nowrap; }
  .composer-btn svg { display: none; }

  /* Filter chips: scroll edge to edge, snap, no hard cut */
  .chips { margin-inline: -1rem; padding-inline: 1rem; scroll-snap-type: x proximity; }
  .chips a { scroll-snap-align: start; }

  /* Feed posts */
  .post-photo { height: 14rem; }
  .post-head, .post-body { padding-left: 1rem; padding-right: 1rem; }
  .post-foot { flex-wrap: wrap; gap: .5rem; }
  .post-foot-left { flex: 1 1 auto; }
  .like-btn { padding: .375rem .625rem; }

  /* Keep the last card clear of the floating chat button */
  .wrap { padding-bottom: 6rem; }
  .page-title, h1 { font-size: 1.25rem; }
  .card { padding: 1.25rem; }
  .page-form form.card, .page-donate form.card { padding: 1.25rem; }
  .stat-num { font-size: 1.5rem; }
  .dash-stats { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .raised { flex-direction: column; align-items: flex-start; }
  .raised-side { justify-items: start; }
  .tile-group .tile-label { padding: .875rem; }
}

/* ---------- Profile overview card ---------- */
.page-narrow { max-width: 40rem; margin: 0 auto; }
.profile-card { margin-top: 1.25rem; }
.profile-card-top { display: flex; align-items: center; gap: 1rem; }
.profile-avatar {
  display: grid; place-items: center; flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand), var(--g2)); color: #fff; font-size: 1.75rem; font-weight: 800;
  box-shadow: 0 6px 16px rgba(111, 43, 255, .3);
}
.profile-card-who { min-width: 0; }
.profile-card-who h2 { margin: 0; font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }
.profile-card-meta { margin: .125rem 0 0; font-size: .8125rem; color: var(--muted); max-width: none; }
.profile-card-badges { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 0; }
.profile-card-note { margin: 1rem 0 0; padding: .625rem .875rem; border-radius: 12px; background: var(--warn-bg); color: var(--warn-ink); font-size: .8125rem; max-width: none; }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .625rem; margin: 1.25rem 0 .75rem; }
.pstat { display: flex; flex-direction: column-reverse; padding: .75rem .875rem; border-radius: 14px; background: #EDE5FF; }
:root[data-theme="dark"] .pstat { background: var(--chip-bg); }
.pstat dd { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pstat dt { font-size: .6875rem; font-weight: 600; color: var(--muted); }
@media (max-width: 39.99rem) { .profile-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.375rem; } .pstats { grid-template-columns: 1fr 1fr; } }

/* ---------- Fix: the "Exact match" rule `.btn { background: var(--grad) }` came after the ghost and danger
   styles and overrode them, so light buttons became a purple gradient with dark text (unreadable) and
   delete buttons turned violet. Two-class selectors win over it. ---------- */
.btn.btn-ghost { background: var(--chip-bg); color: var(--chip-ink); border-color: transparent; box-shadow: none; }
.btn.btn-ghost:hover { background: var(--chip-hover); filter: none; transform: none; box-shadow: none; }
.btn.btn-danger { background: var(--danger); color: #fff; box-shadow: none; }
.btn.btn-danger:hover { background: var(--danger-dark); filter: none; transform: none; box-shadow: none; }
.post-foot .btn.btn-ghost { background: #EDE5FF; }
:root[data-theme="dark"] .post-foot .btn.btn-ghost { background: var(--chip-bg); }
.review-actions .btn.btn-danger { background: #fff; border: 1px solid #FECACA; color: #D4182A; }
.review-actions .btn.btn-danger:hover { background: #FEE2E2; }
:root[data-theme="dark"] .review-actions .btn.btn-danger { background: transparent; border-color: rgba(248, 113, 113, .5); color: #FCA5A5; }
.photo-actions .btn.btn-danger { background: #FEE2E2; color: #D4182A; border-color: transparent; }
.photo-actions .btn.btn-danger:hover { background: #FECACA; }

/* ---------- Skeleton loading (assets/js/skeleton.js) ---------- */
/* Sits exactly where the page content will be: same padding as .wrap */
.page-skeleton { top: 1.5rem; left: 1rem; right: 1rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 48rem) { .page-skeleton { left: 2rem; right: 2rem; } }
.sk2-group { min-width: 0; }
.sk2-box {
  display: flex; flex-direction: column; gap: .75rem; padding: 1rem; min-width: 0;
  border: 1px solid var(--card-border); border-radius: 20px; background: rgba(255, 255, 255, .8);
  box-shadow: 0 1px 3px rgba(20, 10, 40, .08);
}
:root[data-theme="dark"] .sk2-box { background: var(--glass-bg); border-color: var(--line); }
.sk2-box.auth-card { width: 100%; max-width: 26rem; padding: 2rem; }
.sk2-cards { display: grid; gap: 1.25rem; }
.sk2-chips { display: flex; gap: .5rem; overflow: hidden; }
.sk2-pill { border-radius: 999px; }
.sk2-round { border-radius: 50%; flex: none; }
.sk2-field { border-radius: 12px; }
.sk2-row { display: flex; align-items: center; gap: .75rem; }
.sk2-col { display: grid; flex: 1; gap: .5rem; min-width: 0; }
.sk2-table { padding: 0; overflow: hidden; gap: 0; }
.sk2-trow { display: grid; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem; border-top: 1px solid #EDE5FF; }
:root[data-theme="dark"] .sk2-trow { border-top-color: var(--line); }
.sk2-thead { padding: .75rem 1.5rem; border-top: 0; background: #EDE5FF; }
:root[data-theme="dark"] .sk2-thead { background: color-mix(in srgb, var(--chip-bg) 55%, transparent); }
@media (max-width: 39.99rem) {
  .page-skeleton .sk2-cards[style*="repeat(3"], .page-skeleton .sk2-cards[style*="repeat(4"],
  .page-skeleton .sk2-cards[style*="repeat(5"], .page-skeleton .sk2-cards[style*="repeat(6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sk2-trow { gap: .75rem; padding: .75rem 1rem; }
}

/* ---------- Skeleton: thicker and easier to see ---------- */
.page-skeleton { gap: 1.25rem; }
.page-skeleton .skeleton {
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(111, 43, 255, .14) 25%, rgba(111, 43, 255, .30) 50%, rgba(111, 43, 255, .14) 75%);
  background-size: 200% 100%;
}
:root[data-theme="dark"] .page-skeleton .skeleton {
  background: linear-gradient(90deg, rgba(147, 99, 255, .16) 25%, rgba(147, 99, 255, .34) 50%, rgba(147, 99, 255, .16) 75%);
  background-size: 200% 100%;
}
.page-skeleton .sk2-pill { border-radius: 999px; }
.page-skeleton .sk2-round { border-radius: 50%; }
.page-skeleton .sk2-field { border-radius: 12px; }
.sk2-box { gap: 1rem; padding: 1.25rem; }
.sk2-trow { min-height: 3.75rem; padding-top: 1.125rem; padding-bottom: 1.125rem; }
.sk2-thead { min-height: 2.75rem; padding-top: .75rem; padding-bottom: .75rem; }
@media (prefers-reduced-motion: reduce) { .page-skeleton .skeleton { animation: none; } }

/* ---------- Clickable stat cards: arrow in the corner, clear hover and focus ---------- */
.stat { position: relative; }
.stat-go {
  position: absolute; top: 1.125rem; right: 1.125rem; width: 1.125rem; height: 1.125rem; opacity: .45;
  fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s, transform .15s;
}
:root[data-theme="dark"] .stat-go { stroke: var(--chip-ink); }
a.stat { cursor: pointer; text-decoration: none; }
a.stat:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(97, 24, 234, .16); }
a.stat:hover .stat-go { opacity: 1; transform: translate(2px, -2px); }
a.stat:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- Transparency stats: three across, two rows (two across on phones) ---------- */
.trans-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .trans-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Skeleton fix: wrappers must fill the width. Page classes such as .page-form use margin: 0 auto,
   which makes a flex-column child shrink to its content and left only thin slivers on screen. ---------- */
.page-skeleton > *, .page-skeleton .sk2-group, .page-skeleton .sk2-cards, .page-skeleton .sk2-chips { width: 100%; }
.page-skeleton .sk2-group { box-sizing: border-box; }
.page-skeleton > .sk2-box.auth-card { align-self: center; }
.page-skeleton .sk2-group > .sk2-box.auth-card { align-self: center; margin: 0 auto; }

/* =====================================================================
   Accent colours by mode. Dark mode keeps lighter, softer accents; light mode gets deeper,
   more saturated versions of the same hues, because a pale accent looks washed out on a light page.
   ===================================================================== */
:root {
  --brand: #5A0FE0;
  --link: #5A0FE0;
  --focus: #5A0FE0;
  --g1: #5A12F0;
  --g2: #8447FF;
  --grad: linear-gradient(90deg, var(--g1), var(--g2));
  --grad-br: linear-gradient(135deg, var(--g1), var(--g2));
  --danger: #D4182A;
  --danger-dark: #A8101F;
  --ok-ink: #046C3C;
  --warn-ink: #B04A00;
  --bad-ink: #C8102E;
}
:root[data-theme="dark"] {
  --brand: #7C3AED;
  --link: #C4B5FD;
  --focus: #C4B5FD;
  --g1: #7C3AED;
  --g2: #A78BFA;
  --danger: #EF4444;
  --danger-dark: #DC2626;
  --ok-ink: #A7F3D0;
  --warn-ink: #FDE68A;
  --bad-ink: #FECACA;
}

/* ---------- Home composer: the bar opens a two-choice menu (Report a stray / Surrender a pet) ---------- */
.composer-pick { position: relative; flex: 1; min-width: 0; }
.composer-pick > summary { display: block; list-style: none; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-pick > summary::-webkit-details-marker { display: none; }
.composer-pick > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.composer-pick[open] > summary { background: var(--chip-bg); border-color: var(--brand); }
.composer-menu {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + .5rem); display: grid; gap: .25rem; padding: .5rem;
  background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 14px 36px rgba(97, 24, 234, .18);
}
.composer-choice {
  display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: 12px;
  color: var(--ink); text-decoration: none; transition: background-color .15s;
}
.composer-choice:hover, .composer-choice:focus-visible { background: var(--chip-bg); }
.composer-choice strong { display: block; font-size: .875rem; }
.composer-choice small { display: block; font-size: .75rem; color: var(--muted); }
.composer-choice-icon {
  display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 12px;
  background: var(--chip-bg); color: var(--brand);
}
:root[data-theme="dark"] .composer-choice-icon { color: var(--chip-ink); }
.composer-choice-icon svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Cookie banner: Decline and Accept ---------- */
.cookie-actions { display: flex; flex: none; gap: .5rem; }
.cookie p a { font-weight: 600; }
@media (max-width: 30rem) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }

/* ---------- Profile photo and the Details Edit button ---------- */
img.profile-avatar { display: block; object-fit: cover; background: var(--chip-bg); }
.avatar-edit { position: relative; flex: none; }
.avatar-form { margin: 0; }
.avatar-pen {
  position: absolute; right: -.125rem; bottom: -.125rem; display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 2px solid var(--surface-solid); border-radius: 50%; background: var(--grad-br); color: #fff; cursor: pointer;
  box-shadow: 0 2px 8px rgba(97, 24, 234, .35); transition: filter .15s, transform .15s;
}
.avatar-pen:hover { filter: brightness(1.1); transform: scale(1.06); }
.avatar-pen svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.avatar-form:focus-within .avatar-pen { outline: 3px solid var(--focus); outline-offset: 2px; }
.avatar-hint { margin: .5rem 0 0; }
.avatar-hint.is-warn { color: var(--bad-ink); font-weight: 600; }
.avatar-remove { margin-top: .25rem; font-size: .8125rem; }
.header-avatar { overflow: hidden; }
.header-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }

.edit-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.edit-head h2 { margin: 0; }
.edit-btn { display: none; align-items: center; gap: .4rem; }
.js .edit-btn { display: inline-flex; }
.edit-btn svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
fieldset.edit-fields { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.edit-fields:disabled input,
fieldset.edit-fields:disabled select,
fieldset.edit-fields:disabled textarea {
  background: transparent; border-color: var(--line); color: var(--ink); opacity: 1; cursor: default;
  -webkit-text-fill-color: var(--ink); -webkit-appearance: none; appearance: none;
}
.edit-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }