:root {
  color-scheme: light;
  --page: #f4f8ec;
  --surface: #ffffff;
  --surface-soft: #eaf3da;
  --surface-tint: #f3f8e7;
  --line: #e2ead4;
  --ink: #26331c;
  --muted: #71855b;
  --brand: #5f9433;
  --brand-strong: #3e6b22;
  --brand-soft: #eaf3da;
  --brand-mid: #cde3ac;
  --accent: #e8873a;
  --accent-soft: #fdf1e4;
  --info: #5b8aa6;
  --info-soft: #e8f1f5;
  --warn: #c97f2e;
  --warn-soft: #faeedb;
  --danger: #c2544a;
  --danger-soft: #f9e9e7;
  --shadow-1: 0 2px 6px rgba(62, 86, 38, .06);
  --shadow-2: 0 6px 18px rgba(62, 86, 38, .10);
  --shadow-3: 0 14px 34px -12px rgba(62, 86, 38, .22);
  --radius-card: 20px;
  --radius-control: 16px;
  --transparency-hero: #234a34;
  --transparency-paper: #f5f1df;
  --transparency-copy: #d3dec9;
  --transparency-badge-line: rgba(245, 241, 223, .25);
  --transparency-orbit: rgba(230, 208, 142, .25);
  --tnr-hero-bg: #dce9c7;
  --tnr-hero-ink: #263c26;
  --tnr-hero-copy: #5c7353;
  --tnr-hero-kicker: #557744;
  --tnr-hero-ring: rgba(52, 92, 54, .2);
}

.theme-rose {
  color-scheme: light;
  --page: #fbf1f4;
  --surface: #fffdfd;
  --surface-soft: #f8e8ee;
  --surface-tint: #fbedf2;
  --line: #efd8e1;
  --ink: #512b3b;
  --muted: #896879;
  --brand: #a94269;
  --brand-strong: #702b47;
  --brand-soft: #f3dce5;
  --brand-mid: #e9b9cc;
  --accent: #c28a35;
  --accent-soft: #f7eedc;
  --info: #657dad;
  --info-soft: #edf0f8;
  --warn: #b8801f;
  --warn-soft: #f8eed9;
  --danger: #b65358;
  --danger-soft: #f8e8e9;
  --shadow-1: 0 2px 6px rgba(81, 43, 59, .06);
  --shadow-2: 0 6px 18px rgba(81, 43, 59, .10);
  --shadow-3: 0 14px 34px -12px rgba(81, 43, 59, .22);
  --transparency-hero: #4f293e;
  --transparency-paper: #fbf0df;
  --transparency-copy: #ead4dc;
  --transparency-badge-line: rgba(251, 240, 223, .28);
  --transparency-orbit: rgba(239, 190, 157, .26);
  --tnr-hero-bg: #f4dfe8;
  --tnr-hero-ink: #512b3b;
  --tnr-hero-copy: #896879;
  --tnr-hero-kicker: #8a3c5d;
  --tnr-hero-ring: rgba(112, 43, 71, .2);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--page); overflow-x: clip; }

body {
  margin: 0;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--page);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

@supports not (overflow: clip) {
  html { overflow-x: hidden; }
}

button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.app-root {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 0 calc(84px + env(safe-area-inset-bottom));
  background: var(--page);
  color: var(--ink);
}

/* ---------- app header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  background: var(--page);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 800;
  font-size: 18px;
  box-shadow: var(--shadow-1);
}
.brand strong { display: block; font-size: 16px; line-height: 1.2; letter-spacing: -.01em; }
.brand small { display: block; margin-top: 1px; color: var(--muted); font-size: 11px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  box-shadow: var(--shadow-1);
}
.theme-toggle-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }

/* ---------- page shell ---------- */
.page-content {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 14px 16px 24px;
}

/* ---------- route transition ----------
   Every route renders its own <main class="page-content">, so switching pages
   mounts a fresh node and this animation replays on each navigation — the same
   thing a native app does when pushing a screen. */
/* The direction comes from <html data-page-dir>, written by RouteTransition:
   "forward" (a deeper screen, e.g. a list → its detail) enters from the right
   like a pushed screen, "back" (returning to a shallower screen) enters from the
   left, and "swap"/"initial" (tab switches, cold start) only fades.

   A back slide starts to the left on purpose: in a left-to-right document,
   overflow past the left edge is not scrollable, so it can never produce a
   transient scrollbar. A forward slide comes from the right, where
   `overflow-x: clip` on <html> keeps that transient overflow unscrollable. */
/* A forward push brings the new screen in from one full viewport width, so it
   travels exactly as far as the outgoing snapshot travels in the other
   direction; the pair reads as one motion instead of a slide-away. `backwards`
   fill means the page is already parked at its start offset on the first
   painted frame, so it never flashes at the final position first. */
@keyframes page-slide-in-forward {
  from { opacity: 1; transform: translate3d(100%, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes page-slide-in-back {
  from { opacity: 1; transform: translate3d(-100%, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.996); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes page-block-rise {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* `backwards` (not `both`) is deliberate: after the animation the page returns
   to its normal, untransformed state, so no leftover transform keeps a
   stacking context alive or extends the scrollable overflow of the document. */
.page-content {
  animation: page-fade-in .22s cubic-bezier(.22, .61, .36, 1) backwards;
}
html[data-page-dir="forward"] main.page-content {
  animation-name: page-slide-in-forward;
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
html[data-page-dir="back"] main.page-content {
  animation-name: page-slide-in-back;
  animation-duration: .28s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* A short stagger on the first blocks gives the cascade an app uses. Only the
   first six children animate: a list with 200 cards must not put 200 elements
   into an opacity/transform animation on a phone. */
.page-content > *:nth-child(-n + 6) {
  animation: page-block-rise .24s cubic-bezier(.22, .61, .36, 1) backwards;
}
.page-content > *:nth-child(1) { animation-delay: .02s; }
.page-content > *:nth-child(2) { animation-delay: .04s; }
.page-content > *:nth-child(3) { animation-delay: .06s; }
.page-content > *:nth-child(4) { animation-delay: .08s; }
.page-content > *:nth-child(5) { animation-delay: .1s; }
.page-content > *:nth-child(6) { animation-delay: .12s; }

/* The snapshot of the screen being left. It is a static clone, so it only has to
   slide out; the new screen slides in underneath it, which is what makes the
   transition read as a push instead of a flicker. It sits below the header
   (z-index 10) so the branding stays put while the content moves. */
.page-snapshot {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 5;
  background: var(--page);
  pointer-events: none;
  will-change: transform;
}
.page-snapshot[data-exit="forward"] {
  animation: snapshot-out-left .28s cubic-bezier(.4, 0, .2, 1) forwards;
}
.page-snapshot[data-exit="back"] {
  animation: snapshot-out-right .28s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes snapshot-out-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}
@keyframes snapshot-out-right {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(100%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  /* `html[data-page-dir] main.page-content` is more specific than a bare
     `.page-content`, so the direction rules are cancelled here too. */
  .page-content,
  .page-content > *,
  html[data-page-dir] main.page-content,
  .page-snapshot {
    animation: none !important;
  }
  .page-snapshot {
    display: none !important;
  }
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  box-shadow: var(--shadow-1);
}
.search-ic { font-size: 15px; color: var(--brand); }
.search-ph { flex: 1; }
.search-note { flex-shrink: 0; color: var(--muted); font-size: 11px; }
.search-bar.pending { color: var(--muted); }

/* ---------- hero ---------- */
.hero-card {
  position: relative;
  overflow: hidden;
  padding: 18px 16px;
  border-radius: 24px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-2);
}
.home-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-right: 96px;
  font-size: clamp(22px, 6vw, 26px);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -.02em;
}
.hero-underline {
  display: inline-block;
  width: 64px;
  height: 8px;
  margin-top: 6px;
  border-radius: 99px;
  background: var(--brand-mid);
}
.home-hero p {
  position: relative;
  z-index: 1;
  margin: 10px 0 14px;
  padding-right: 96px;
  color: var(--muted);
  font-size: 12.5px;
}
.hero-paw {
  position: absolute;
  right: 10px;
  bottom: 2px;
  font-size: 64px;
  opacity: .35;
  transform: rotate(-12deg);
  pointer-events: none;
}
.hero-cta { position: relative; z-index: 1; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
}
.button.primary {
  border-color: transparent;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(78, 124, 34, .7);
}
.button.quiet { color: var(--brand-strong); background: transparent; border-color: var(--line); }

/* ---------- persona cards ---------- */
.persona-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 4px;
}
.persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.persona-icon {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  margin-bottom: 4px;
  border-radius: 11px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 800;
  font-size: 13px;
}
.persona strong { font-size: 13px; color: var(--ink); }
.persona small { font-size: 10.5px; }
.persona.active {
  border-color: var(--brand);
  background: var(--surface);
  color: var(--brand-strong);
  box-shadow: 0 10px 26px -12px rgba(95, 148, 51, .55);
}
.persona.active small { color: var(--brand-strong); }

/* ---------- section head ---------- */
.home-section { margin-top: 22px; }
.section-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.section-chip {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 11px;
  font-weight: 800;
}
.section-copy { min-width: 0; flex: 1; }
.section-copy h2 { margin: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -.01em; }
.section-copy p { margin: 1px 0 0; color: var(--muted); font-size: 11.5px; }
.section-more { color: var(--muted); font-size: 12px; }
/* The section head link is a real route, so make it look and read like one. */
a.section-more { white-space: nowrap; }
a.section-more:hover,
a.section-more:focus-visible { color: var(--brand); }

/* used by other pages */
.section-title { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
.section-mark { width: 4px; height: 20px; flex: 0 0 4px; border-radius: 99px; background: var(--brand); }
.section-title h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.section-title p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }

/* ---------- action grid ---------- */
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.action-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.action-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 12px;
  background: var(--brand-soft);
}
.action-link.tone-warn .action-icon { background: var(--warn-soft); }
.action-link.tone-danger .action-icon { background: var(--danger-soft); }
.action-link.tone-info .action-icon { background: var(--info-soft); }
.action-copy { min-width: 0; flex: 1; }
.action-copy strong { display: block; font-size: 14px; font-weight: 700; }
.action-copy small {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
}
.action-arrow { flex-shrink: 0; color: var(--muted); font-size: 20px; }
/* A pending task's "即将上线" used to sit beside the title and squeezed the CJK
   text down to one character per line on narrow phones. It now takes its own
   line under the copy, so the title and subtitle get the full card width. */
.action-link.pending { flex-wrap: wrap; }
.action-link.pending .action-arrow {
  flex-basis: 100%;
  padding-top: 3px;
  text-align: right;
  color: var(--muted);
  font-size: 10.5px;
}
.button.disabled {
  opacity: .7;
  cursor: default;
  pointer-events: none;
}

/* ---------- hospital cards ---------- */
.hospital-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.hospital-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  color: inherit;
}
.hospital-thumb {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  border-radius: 16px;
  background: var(--info-soft);
  color: var(--info);
  font-weight: 800;
}
.hospital-info { min-width: 0; flex: 1; }
.hospital-info strong { display: block; font-size: 14px; font-weight: 700; }
.hospital-region { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.tag {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 11px;
}
.tag-plain { background: var(--surface-tint); color: var(--muted); }

/* ---------- adoption cards ---------- */
.adopt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adopt-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.adopt-photo {
  display: grid;
  /* Tall enough that a 4:3 photo shows fully rather than being letterboxed to
     a sliver, while still keeping the two-column card compact. */
  aspect-ratio: 4 / 3;
  place-items: center;
  background: var(--surface-tint);
  color: var(--brand-strong);
  font-size: 26px;
  font-weight: 800;
}
.adopt-body { padding: 11px 12px 13px; }
.adopt-body strong { display: block; font-size: 14px; font-weight: 750; }
.adopt-meta { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.adopt-remark {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  color: var(--ink);
  font-size: 11.5px;
  opacity: .85;
}
/* Card data of the legacy list module qURZbi: the cityZone badge sits on the
   photo, and the submitter + adoption-request count close the card. */
.adopt-photo-wrap { position: relative; }
.adopt-city {
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  max-width: calc(100% - 14px);
  overflow: hidden;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 10px;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adopt-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.adopt-title-row strong {
  /* Full names stay readable: wrap to two lines instead of ellipsising. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 750;
  word-break: break-word;
}
.adopt-title-row .adopt-meta { flex-shrink: 0; margin-top: 0; }
.adopt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.adopt-submitter {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}
.adopt-submitter > :last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.adopt-avatar { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.adopt-requests { display: flex; align-items: center; flex-shrink: 0; gap: 3px; color: var(--danger); font-size: 11.5px; font-weight: 700; }
.adopt-heart { font-size: 12px; line-height: 1; }
/* An adopted cat keeps its card, but the request count is replaced by the
   module's 已领养 label so it cannot be mistaken for an available cat. */
.adopt-adopted { flex-shrink: 0; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.adopt-card.adopted .adopt-photo { filter: saturate(.75); }
/* Detail-page people card: sender identity plus every current applicant's
   avatar. The strip scrolls horizontally on a phone and wraps on desktop, so
   "all" applicants stay reachable without stretching the page. */
.adoption-people { display: grid; gap: 16px; }
.fosterer-row { display: flex; min-width: 0; align-items: center; gap: 12px; }
.people-avatar {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 19px;
  font-weight: 700;
}
.people-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fosterer-copy { display: grid; min-width: 0; gap: 3px; }
.people-role { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.fosterer-copy strong { overflow-wrap: anywhere; font-size: 16px; }
.people-history { color: var(--muted); font-size: 11px; }
.applicant-block { display: grid; gap: 8px; padding-top: 13px; border-top: 1px solid var(--line); }
.applicant-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.applicant-head strong { font-size: 15px; }
.applicant-count { color: var(--brand-strong); font-size: 12px; font-weight: 700; }
.applicant-strip {
  display: flex;
  gap: 8px;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.applicant-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  overflow: hidden;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--line);
}
.applicant-avatar img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) {
  .applicant-strip { flex-wrap: wrap; overflow: visible; }
}
.adopt-sorts { margin-top: 10px; }
.chip-label { align-self: center; color: var(--muted); font-size: 11px; }
/* ---------- hospital card (legacy list module YzuE3a layout) ---------- */
.hospital-card { display: block; }
.chip-plain { background: var(--surface-tint); color: var(--muted); }
.hospital-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.hospital-wechat { color: var(--muted); font-size: 11.5px; word-break: break-all; }
.hospital-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px dashed var(--line);
}
.hospital-facts .fact { min-width: 0; }
.hospital-facts dt { color: var(--muted); font-size: 10.5px; }
.hospital-facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 12.5px;
  word-break: break-word;
}
.hospital-facts dd.fact-price { color: var(--warn); font-weight: 700; }
.hospital-facts dd .fact-warn { color: var(--danger); font-style: normal; font-size: 11.5px; }
.hospital-contact { margin-top: 9px; display: flex; flex-direction: column; gap: 2px; }
.contact-line { color: var(--muted); font-size: 11.5px; word-break: break-word; }
.contact-phone { color: var(--brand); font-weight: 700; }
.hospital-benefit {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 11.5px;
  line-height: 1.6;
  opacity: .9;
}
.hospital-benefit b { color: var(--ink); }
/* ---------- hospital map (legacy 医院地图 module jaiMzi) ---------- */
.map-entry { margin-bottom: 12px; }
.map-entry-card { display: flex; align-items: center; gap: 12px; color: inherit; }
.map-entry-card strong { font-size: 14px; }
.map-entry-card p { margin: 3px 0 0; color: var(--muted); font-size: 11.5px; }
.map-entry-arrow { margin-left: auto; color: var(--muted); font-size: 20px; }
.map-page-hero { margin-top: 14px; }
.map-page-hero p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.map-regions { margin: 12px 0; }
.map-key-note { margin: 10px 0; }
.map-canvas-card { padding: 8px; overflow: hidden; }
.hospital-map-canvas { width: 100%; height: min(62vh, 560px); min-height: 320px; border-radius: 12px; overflow: hidden; background: #e9f0e5; }
.hospital-distance { color: var(--brand-strong); font-variant-numeric: tabular-nums; }
.home-location-button { margin: -4px 0 10px; }
.location-note { margin: 4px 0 10px; }
.hospital-distance { align-self: flex-start; white-space: nowrap; }
.map-error { margin: 8px 8px 2px; color: var(--warn); font-size: 12px; }
/* The marker info window content is an HTML string built by tencent-map.js
   (the legacy marker content, petHospital module vuqQri). It carries its own
   box because the window uses enableCustom, so it must undo the map's default
   nowrap/centering and keep long operator text wrapped and scrollable. */
.map-info-window { position: relative; max-width: 250px; padding: 10px 12px; background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); color: #263424; font: 13px/1.6 sans-serif; text-align: left; white-space: normal; }
.map-info-close { position: absolute; top: 2px; right: 4px; padding: 2px 6px; border: 0; background: none; color: #888; font-size: 18px; line-height: 1; cursor: pointer; }
.map-info-body { max-height: 240px; overflow-y: auto; padding-right: 14px; }
.map-info-window a { color: #397522; font-weight: 700; }
.map-info-window .map-info-package { color: #b3341f; font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hospital-detail-map { width: 100%; height: 220px; margin: 10px 0; border-radius: 10px; overflow: hidden; background: #e9f0e5; }
@media (max-width: 359px) { .hospital-map-canvas { min-height: 280px; height: 48vh; } }
.map-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* ---------- narrow phones ----------
   Two action columns leave each card ~145px at 320px; with the icon and the
   label the copy collapses to one character per line, so the quick tasks go
   single-column on the smallest screens. The adoption card grid deliberately
   stays at two columns — that is the phone layout the design uses and the cards
   stay readable. */
@media (max-width: 359px) {
  .page-content { padding-right: 12px; padding-left: 12px; }
  .action-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card { min-width: 0; padding-right: 7px; padding-left: 7px; }
  .metric-value { overflow-wrap: anywhere; font-size: clamp(16px, 5.5vw, 19px); }
}
/* Filters are collapsed by default (like the legacy panel button) and the
   active ones stay visible as removable chips. */
.filter-toggle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.filter-toggle-row > .button { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.filter-badge {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}
.active-filters { margin-bottom: 0; }
.chip-active-filter { border: 1px solid var(--brand); background: var(--brand-soft); color: var(--ink); }

/* ---------- metrics ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metric-card {
  padding: 13px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.metric-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
}
.metric-label { display: block; margin-top: 2px; font-size: 12px; font-weight: 650; }
.metric-note { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; }

.data-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

/* ---------- skeleton ---------- */
.skeleton { pointer-events: none; }
.sk-line {
  display: block;
  height: 12px;
  margin: 8px 0;
  border-radius: 99px;
  background: var(--brand-soft);
  opacity: .7;
}
.sk-line.w40 { width: 40%; }
.sk-line.w60 { width: 60%; }
.sk-line.w70 { width: 70%; }
.sk-line.w85 { width: 85%; }

/* ---------- shared components (other pages) ---------- */
.surface-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.surface-card p { margin: 0 0 10px; font-size: 13px; }
.surface-note { color: var(--muted); font-size: 11px !important; }
.entity-row { display: flex; align-items: center; gap: 11px; }
.entity-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 800;
}
.entity-copy { min-width: 0; flex: 1; }
.entity-copy strong, .entity-copy span { display: block; }
.entity-copy strong { font-size: 13px; }
.entity-copy span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.hospital-avatar { background: var(--info-soft); color: var(--info); }
.cat-avatar { background: var(--accent-soft); color: var(--accent); }
.cats-overview-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 14px 2px 8px; }
.cats-overview-head h2 { margin: 2px 0 0; font-size: 20px; }
.cats-count { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cats-source-note { margin: 0 2px 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.cats-list { display: grid; gap: 10px; }
.cat-card { padding: 12px; }
.cat-card-main { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cat-avatar {
  display: grid;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 24px;
  font-weight: 800;
}
.cat-avatar img { width: 100%; height: 100%; object-fit: contain; }
.cat-card-copy { min-width: 0; flex: 1; }
.cat-card-copy > strong { display: block; overflow-wrap: anywhere; font-size: 16px; }
.cat-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.cat-tags .tag { margin: 0; }
.tag-age { background: var(--info-soft); color: var(--info); }
.tag-status { background: var(--brand-soft); color: var(--brand-strong); }
.cat-facts { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 9px; }
.cat-facts span { color: var(--muted); font-size: 11px; }
.cat-facts b { margin-right: 4px; color: var(--ink); }
.cats-empty { display: grid; justify-items: center; gap: 8px; padding: 18px 8px; text-align: center; }
.cats-empty > strong { font-size: 15px; }
.cats-empty > span:not(.cats-empty-mark) { max-width: 300px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.cats-empty-mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 18px; background: var(--brand-soft); color: var(--brand-strong); font-size: 25px; font-weight: 800; }
.cats-actions { display: grid; gap: 8px; margin-top: 12px; }
.cat-loading { display: grid; gap: 10px; }
.cat-loading .skeleton { display: grid; gap: 9px; min-height: 108px; }
.rating { color: var(--accent); font-size: 13px; font-weight: 800; }
.text-link { display: inline-block; margin-top: 10px; color: var(--brand); font-size: 12px; font-weight: 700; }
.api-state { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.api-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.timeline-item {
  position: relative;
  margin-left: 5px;
  padding: 4px 0 14px 17px;
  border-left: 1px solid var(--line);
}
.timeline-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline-item:before {
  position: absolute;
  top: 7px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  content: "";
}
.timeline-item b, .timeline-item span { display: block; font-size: 12px; }
.timeline-item span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.rating-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rating-list span { padding: 5px 8px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 10px; }
.public-metrics { margin-top: 20px; }
.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.metric-row div { padding: 13px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.metric-row b, .metric-row span { display: block; }
.metric-row b { overflow-wrap: anywhere; font-size: 13px; }
.metric-row span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.eyebrow { color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.empty-state { padding: 28px 18px; text-align: center; }
.empty-state h1 { font-size: 22px; }
.empty-state p { color: var(--muted); }
.home-grid { display: grid; gap: 18px; }
.home-main, .home-side { min-width: 0; }

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: space-around;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.nav-item { display: flex; min-width: 54px; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); }
.nav-glyph { font-size: 17px; font-weight: 700; }
.nav-label { font-size: 9px; }
.nav-item.active { color: var(--brand); }

@media (min-width: 760px) {
  .bottom-nav { bottom: 20px; }
  .action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hospital-scroll { grid-auto-columns: 46%; }
  .adopt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-grid { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); }
}

/* ---------- list surfaces (medical / rescue) ---------- */
.search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.search-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  box-shadow: var(--shadow-1);
}
.search-input::placeholder { color: var(--muted); }
.button.compact { min-height: 44px; padding: 10px 16px; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}
.chip.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; }

.list-count { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.list-stack { display: grid; gap: 12px; }
.list-card { display: block; }
.list-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.list-card-head strong { font-size: 15px; font-weight: 750; }
.list-card-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.rating.muted { color: var(--muted); font-weight: 600; font-size: 11.5px; }

/* ---------- detail pages ---------- */
.detail-hero { margin-bottom: 14px; }
.detail-hero h1 { margin: 4px 0 8px; font-size: clamp(21px, 5.5vw, 26px); font-weight: 800; letter-spacing: -.02em; }
.detail-hero .tag-row { margin-top: 4px; }

.rating-row { display: flex; align-items: center; gap: 14px; }
.rating-big {
  min-width: 72px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rating-meta { min-width: 0; flex: 1; }
.rating-meta strong { display: block; font-size: 13.5px; }
.rating-meta span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }

.kv-list { display: grid; gap: 10px; margin-bottom: 12px; }
.kv { display: flex; gap: 10px; align-items: flex-start; }
.kv span { flex: 0 0 48px; color: var(--muted); font-size: 12px; }
.kv b { min-width: 0; flex: 1; font-size: 13px; font-weight: 650; }

.card-title { margin: 0 0 10px; font-size: 15px; font-weight: 750; }

.action-link.pending { opacity: .62; cursor: default; }
.action-link.pending .action-arrow { font-size: 11px; }

.load-more-wrap { margin-top: 14px; display: grid; gap: 8px; }
.load-more-status { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }

/* ---------- real hospital neutering terms ---------- */
.offer-chip {
  display: inline-block;
  margin-top: 9px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.offer-prices { display: flex; gap: 10px; margin-bottom: 10px; }
.offer-price {
  flex: 1;
  padding: 11px 12px;
  border-radius: 16px;
  background: var(--brand-soft);
}
.offer-price span { display: block; color: var(--muted); font-size: 11px; }
.offer-price b {
  display: block;
  margin-top: 3px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
}
.offer-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; }

/* ---------- real recommended vets ---------- */
.vet-item { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.vet-item:first-of-type { border-top: 0; }
.vet-photo {
  position: relative;
  flex: 0 0 66px;
  display: grid;
  height: 66px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--brand-strong);
  font-size: 17px;
  font-weight: 800;
}
.vet-copy { min-width: 0; flex: 1; }
.vet-copy .review-head strong { font-size: 14px; font-weight: 750; }
.vet-copy .surface-note { display: block; margin-top: 2px; }
.vet-intro {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-line;
}

/* ---------- recent service review list ---------- */
.review-item {
  margin-top: 10px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.review-item:first-of-type { margin-top: 0; }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.reviewer-profile { display: flex; align-items: center; gap: 9px; min-width: 0; }
.reviewer-avatar {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 750;
}
.reviewer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.reviewer-meta { display: grid; gap: 2px; min-width: 0; }
.reviewer-name {
  overflow: hidden;
  max-width: 150px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-date {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.review-score-badge {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 1px;
  padding: 4px 9px 5px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
}
.review-score-badge b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.review-score-badge small { font-size: 10px; font-weight: 600; }

.review-comment {
  margin: 9px 0 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.review-cost {
  display: inline-block;
  margin-top: 9px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--surface-tint);
  color: var(--muted);
  font-size: 11.5px;
}
.button.wide { width: 100%; }

.adopt-card { display: block; }
/* ---------- adoption profile archive, grouped by type ---------- */
.profile-groups { display: grid; gap: 12px; }
.profile-group {
  --profile-accent: var(--brand);
  padding: 12px 13px 13px;
  border-radius: 16px;
  background: var(--brand-soft);
}
.profile-group.basic { --profile-accent: var(--brand); }
.profile-group.location { --profile-accent: var(--info); background: var(--info-soft); }
.profile-group.health { --profile-accent: var(--warn); background: var(--warn-soft); }
.profile-group.listing { --profile-accent: var(--muted); background: var(--surface-tint); }

.profile-group-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .01em;
}
.profile-group-label::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--profile-accent);
}

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 12px; }
.profile-item { min-width: 0; }
.profile-item span { display: block; color: var(--muted); font-size: 10.5px; line-height: 1.3; }
.profile-item b {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 750;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ---------- extra legacy photos on the adoption detail ---------- */
.adopt-gallery { display: block; margin-bottom: 12px; }
.gallery-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.gallery-main { width: 100%; margin-bottom: 0; }
.gallery-cell {
  position: relative;
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-tint);
  color: var(--brand-strong);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.gallery-cell .photo-img { position: absolute; inset: 0; }

/* ---------- photo boxes (legacy-origin backed, full image, graceful fallback) ----------
   object-fit: contain so the whole photo is visible. cover cropped faces and
   bodies out of frame, which is unacceptable for adoption/medical records. */
.adopt-photo { position: relative; overflow: hidden; }
.photo-glyph { display: block; }
.photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.detail-photo {
  position: relative;
  display: grid;
  height: auto;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 20px;
  background: var(--surface-tint);
  color: var(--brand-strong);
  font-size: 34px;
  font-weight: 800;
}

/* ---------- public love-card / reimbursement disclosure ---------- */
.support-split { display: flex; gap: 10px; margin-bottom: 10px; }
.support-block {
  flex: 1;
  min-width: 0;
  padding: 12px 13px;
  border-radius: 16px;
  background: var(--surface-tint);
}
.support-block .eyebrow { display: block; }
.support-amount {
  display: block;
  margin-top: 5px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--brand-strong);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.support-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }

.support-years { margin-top: 12px; }
.support-year-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.support-year-row:first-of-type { border-top: 0; }
.support-year-row > span:nth-child(1) { flex: 0 0 56px; }
.support-year-row > span:nth-child(2) { flex: 0 0 56px; color: var(--muted); }
.support-year-row > span:nth-child(3) { flex: 1; text-align: right; font-weight: 700; }
.support-year { font-weight: 700; }
.support-year-amount { color: var(--brand-strong); }
.support-year-head {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.support-year-head > span:nth-child(3) { font-weight: 600; }

/* Ranking rows carry a hospital name, so the first column must grow instead of
   using the fixed width the year tables need. */
.rank-row { align-items: baseline; text-decoration: none; color: inherit; }
.rank-row > span:nth-child(1) { flex: 1 1 auto; min-width: 0; font-weight: 650; }
.rank-row > span:nth-child(2) { flex: 0 0 52px; text-align: right; }
.rank-row > span:nth-child(3) { flex: 0 0 56px; text-align: right; }
.rank-head > span:nth-child(1) { flex: 1 1 auto; }
.rank-head > span:nth-child(2) { flex: 0 0 52px; text-align: right; }
.rank-head > span:nth-child(3) { flex: 0 0 56px; text-align: right; }

/* ---------- public transparency ---------- */
.transparency-hero {
  position: relative;
  overflow: hidden;
  min-height: 236px;
  padding: 25px 22px 22px;
  border-radius: 28px 28px 28px 10px;
  background: var(--transparency-hero);
  color: var(--transparency-paper);
  box-shadow: var(--shadow-3);
}
.transparency-hero::after {
  position: absolute;
  right: -46px;
  bottom: -92px;
  width: 240px;
  height: 240px;
  border: 1px solid var(--transparency-orbit);
  border-radius: 50%;
  content: "";
}
.transparency-orbit {
  position: absolute;
  right: -13px;
  bottom: -62px;
  width: 178px;
  height: 178px;
  border: 1px solid var(--transparency-orbit);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-two { right: 20px; bottom: -34px; width: 122px; height: 122px; }
.transparency-kicker { color: var(--brand-mid); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.transparency-hero h1 { position: relative; z-index: 1; margin: 13px 0 8px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(25px, 7vw, 31px); line-height: 1.3; letter-spacing: .02em; }
.transparency-hero p { position: relative; z-index: 1; max-width: 295px; margin: 0; color: var(--transparency-copy); font-size: 11.5px; line-height: 1.7; }
.environment-badge { position: absolute; top: 19px; right: 18px; z-index: 1; padding: 5px 9px; border: 1px solid var(--transparency-badge-line); border-radius: 999px; color: var(--transparency-paper); font-size: 10px; }
.transparency-total { position: relative; z-index: 2; margin: -14px 10px 0; padding: 17px; border-radius: 21px 21px 21px 7px; }
.transparency-total-head, .transparency-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.transparency-total-head h2, .transparency-section-head h2 { margin: 2px 0 0; font-size: 15px; font-weight: 750; }
.verified-mark { padding: 5px 9px; border-radius: 7px 7px 7px 2px; background: var(--brand-soft); color: var(--brand-strong); font-size: 10px; font-weight: 750; }
.transparency-primary-number { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; }
.transparency-primary-number strong { color: var(--brand-strong); font-size: 43px; font-weight: 850; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.transparency-primary-number span { color: var(--muted); font-size: 13px; }
.transparency-primary-caption { margin-top: 5px; color: var(--muted); font-size: 11px; }
.transparency-split { display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; gap: 14px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.transparency-split div { display: flex; align-items: baseline; gap: 6px; }
.transparency-split strong { font-size: 19px; font-variant-numeric: tabular-nums; }
.transparency-split span { color: var(--muted); font-size: 10px; }
.transparency-split i { height: 24px; background: var(--line); }
.transparency-other { display: flex; align-items: baseline; gap: 5px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.transparency-other strong { color: var(--ink); font-size: 12px; }
.transparency-section { margin-top: 25px; }
.transparency-section-head { margin-bottom: 10px; }
.transparency-section-head h2 { font-size: 17px; }
.record-count { color: var(--muted); font-size: 11px; }
.transparency-records { display: grid; gap: 9px; }
.transparency-record { padding: 13px 14px; border-radius: 16px 16px 16px 5px; }
.record-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.record-type { padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 750; }
.record-type.free { background: #eaf3da; color: #3e6b22; }
.record-type.paid { background: #f9eedc; color: #9a6822; }
.record-status { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; }
.record-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.record-card-id { margin-top: 9px; color: var(--ink); font-size: 12px; font-weight: 750; letter-spacing: .025em; font-variant-numeric: tabular-nums; }
.record-card-bottom { display: flex; align-items: center; gap: 9px; margin-top: 7px; color: var(--muted); font-size: 10px; }
.record-card-bottom strong { margin-left: auto; color: var(--ink); font-size: 11px; }
.transparency-definition, .transparency-limits { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 14px; }
.definition-icon { display: grid; width: 21px; height: 21px; flex: 0 0 21px; place-items: center; border-radius: 50%; background: var(--info-soft); color: var(--info); font-family: Georgia, serif; font-size: 13px; font-weight: 800; }
.transparency-definition h3, .transparency-limits h3 { margin: 0; font-size: 12px; }
.transparency-definition p, .transparency-limits p { margin: 4px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.7; }
.transparency-limits { display: block; border-style: dashed; box-shadow: none; }
.transparency-limits h3 { margin-top: 4px; }
.transparency-footer { display: grid; gap: 3px; margin: 13px 2px 0; color: var(--muted); font-size: 9.5px; }
.transparency-skeleton { display: grid; gap: 7px; margin-bottom: 12px; }
.transparency-empty { margin-top: 8px; }

/* ---------- TNR community directory ---------- */
.tnr-hero {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  padding: 23px 20px;
  border-radius: 9px 28px 9px 28px;
  background: var(--tnr-hero-bg);
  color: var(--tnr-hero-ink);
}
.tnr-hero::before {
  position: absolute;
  right: -56px;
  bottom: -116px;
  width: 260px;
  height: 260px;
  border: 1px solid var(--tnr-hero-ring);
  border-radius: 50%;
  content: "";
}
.tnr-kicker { color: var(--tnr-hero-kicker); font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.tnr-hero h1 { position: relative; z-index: 1; margin: 12px 0 8px; font-family: "Noto Serif SC", "Songti SC", serif; font-size: clamp(22px, 6.4vw, 28px); line-height: 1.4; letter-spacing: .015em; }
.tnr-hero p { position: relative; z-index: 1; margin: 0; color: var(--tnr-hero-copy); font-size: 11px; line-height: 1.65; }
.tnr-seal { position: absolute; right: 22px; top: 25px; display: grid; width: 54px; height: 54px; place-content: center; border: 1px solid var(--tnr-hero-ring); border-radius: 50%; color: var(--tnr-hero-kicker); font-family: "Noto Serif SC", "Songti SC", serif; font-size: 11px; line-height: 1.25; text-align: center; transform: rotate(9deg); }
@media (max-width: 479px) {
  .tnr-hero h1 { max-width: calc(100% - 68px); }
}
.tnr-filter-row { display: flex; gap: 7px; overflow-x: auto; margin: 1px 0 10px; padding: 2px 1px 5px; scrollbar-width: none; }
.tnr-filter-row::-webkit-scrollbar { display: none; }
.tnr-filter-row .chip { flex: 0 0 auto; }
.tnr-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 1px 10px; color: var(--muted); font-size: 10px; }
.tnr-list-heading strong { color: var(--brand-strong); font-size: 19px; font-variant-numeric: tabular-nums; }
.tnr-list-heading span:last-child { text-align: right; }
.tnr-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 359px) {
  .tnr-card-grid { grid-template-columns: minmax(0, 1fr); }
}
.tnr-community-card { position: relative; display: flex; min-width: 0; min-height: 148px; flex-direction: column; padding: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; background: var(--surface); box-shadow: var(--shadow-1); }
.tnr-community-card::after { position: absolute; right: -26px; bottom: -40px; width: 90px; height: 90px; border: 1px solid var(--line); border-radius: 50%; content: ""; pointer-events: none; }
.tnr-card-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.tnr-card-symbol { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px 8px 8px 2px; background: var(--brand-soft); color: var(--brand-strong); font-family: "Noto Serif SC", "Songti SC", serif; font-size: 13px; font-weight: 800; }
.tnr-public-status { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.tnr-public-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.tnr-community-card h3 { position: relative; z-index: 1; margin: 10px 0 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.45; }
.tnr-card-bottom { position: relative; z-index: 1; display: grid; gap: 3px; margin-top: auto; padding-top: 9px; color: var(--muted); font-size: 9px; }
.tnr-public-id { position: relative; z-index: 1; margin-top: 6px; color: var(--muted); font-size: 8px; letter-spacing: .035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tnr-howto { margin-top: 20px; padding: 16px 14px; }
.tnr-howto h2 { margin: 3px 0 13px; font-size: 15px; }
.tnr-steps { display: grid; grid-template-columns: 1fr 12px 1fr 12px 1fr; align-items: center; gap: 3px; text-align: center; }
.tnr-steps div { display: grid; justify-items: center; gap: 2px; }
.tnr-steps b { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--brand-soft); color: var(--brand-strong); font-family: Georgia, serif; font-size: 14px; }
.tnr-steps strong { font-size: 9px; }
.tnr-steps span { color: var(--muted); font-size: 8px; }
.tnr-steps i { height: 1px; background: var(--line); }
.tnr-privacy, .tnr-query-time { margin: 9px 2px 0; color: var(--muted); font-size: 9.5px; line-height: 1.6; }
.tnr-data-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; padding: 13px; }
.tnr-note-mark { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 50%; background: var(--info-soft); color: var(--info); font-family: Georgia, serif; font-weight: 800; }
.tnr-data-note strong { font-size: 11px; }
.tnr-data-note p { margin: 3px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.65; }
.tnr-skeleton-card { min-height: 142px; padding: 12px; }

@media (min-width: 600px) {
  .tnr-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- WeChat login (/login, /me) ---------- */
.hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.hint:last-child { margin-bottom: 0; }
.button-link {
  display: inline-block;
  margin-top: 8px;
  padding: 9px 16px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.qr-block { display: grid; gap: 10px; justify-items: center; }

/* --- 我的猫: edit form, per-card actions and delete confirmation --------- */
.cat-form { display: grid; gap: 12px; }
.cat-field { display: grid; gap: 5px; }
.cat-label { color: var(--muted); font-size: 11px; font-weight: 700; }
.cat-field textarea, .cat-field input, .cat-field select {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-tint);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.cat-field input:focus, .cat-field select:focus, .cat-field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.cat-field input.invalid, .cat-field select.invalid, .cat-field textarea.invalid { border-color: var(--danger); background: var(--danger-soft); }
.cat-hint { color: var(--muted); font-size: 10px; }
.cat-error { color: var(--danger); font-size: 11px; font-weight: 600; }
.cat-form-error {
  margin: 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
}
.cat-form-actions { display: flex; gap: 10px; align-items: center; }
.cat-form-actions .button-link { margin-top: 0; border: 0; font: inherit; font-size: 13px; cursor: pointer; }
.cat-form-actions .button-link.solid { background: var(--brand); color: #fff; }
.cat-form-actions .button-link:not(.solid) { background: var(--surface-tint); color: var(--muted); }
.cat-form-actions .button-link[disabled] { opacity: .55; cursor: default; }
.cat-card-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.cat-action {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-tint);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.cat-action:active { background: var(--brand-soft); }
.cats-actions .action-link.primary-action { cursor: pointer; }
.cats-actions .action-link.primary-action .action-arrow { color: var(--brand); font-size: 16px; }
.cat-confirm {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 11px;
  background: var(--danger-soft);
}
.cat-confirm > span { color: var(--ink); font-size: 11px; line-height: 1.55; }
.cat-confirm-actions { display: flex; gap: 8px; }
.cat-confirm-actions .button-link {
  margin-top: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.cat-confirm-actions .button-link.danger { background: var(--danger); color: #fff; }
.cat-confirm-actions .button-link[disabled] { opacity: .55; cursor: default; }
/* The QR must stay square and crisp: a stretched or blurry code will not scan. */
.qr-image {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--line, rgba(0, 0, 0, .08));
}
.entity-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  object-fit: cover;
}
/* ---------- 近期完成记录 (legacy 公示 card: hospital + two photos) ---------- */
.record-card-hospital {
  display: block;
  margin-top: 8px;
  color: var(--text, inherit);
  font-weight: 600;
  text-decoration: none;
}
a.record-card-hospital { color: var(--brand-strong); }
.record-card-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.record-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--brand-soft);
}
/* contain, not cover: these are surgical records, and cropping a cat out of
   frame is not acceptable. */
.record-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.record-photo figcaption {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 10px;
}
/* The confirmation button on the phone's scan-result page. */
.scan-confirm {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.scan-confirm:disabled {
  opacity: .6;
}
/* ---------- header: brand on the left, the visitor on the right ---------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.header-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 800;
  text-decoration: none;
}
.header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.header-avatar-initial { font-size: 15px; }
/* Placeholder keeps the layout from jumping while the session loads. */
.header-avatar-placeholder { opacity: .35; }
.header-login {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
/* The official logo is a square white-background JPEG, so the tile keeps its
   rounded shape and turns white to match it, and the artwork is contained
   rather than cropped. */
img.brand-mark {
  object-fit: contain;
  background: #fff;
  padding: 2px;
}
/* ---------- adoption detail: one gallery, thumbnails swap the big frame ----------
   The two keyframes are identical on purpose: switching the animation *name* by
   parity is what makes the browser replay it on every swap, where re-applying
   the same name would not restart anything. */
.gallery-main { margin-bottom: 8px; }
.gallery-thumbs { display: flex; gap: 8px; margin-bottom: 12px; }
button.gallery-cell {
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
button.gallery-cell:hover { transform: translateY(-2px); }
button.gallery-cell.active {
  box-shadow: 0 0 0 2px var(--brand), 0 6px 16px -8px rgba(95, 148, 51, .8);
}
button.gallery-cell:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.detail-photo-img.swap-a { animation: photo-swap-a .32s cubic-bezier(.22, .61, .36, 1); }
.detail-photo-img.swap-b { animation: photo-swap-b .32s cubic-bezier(.22, .61, .36, 1); }
@keyframes photo-swap-a {
  from { opacity: .25; transform: scale(1.03); }
  to   { opacity: 1;   transform: none; }
}
@keyframes photo-swap-b {
  from { opacity: .25; transform: scale(1.03); }
  to   { opacity: 1;   transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-photo-img.swap-a,
  .detail-photo-img.swap-b { animation: none; }
  button.gallery-cell { transition: none; }
}

/* ---- 领养写侧：我要送养 / 我的送养 / 领养意向 ---------------------------- */
/* The publish form reuses .cat-form, so only the new pieces are styled here. */
.rescue-entries { display: flex; gap: 10px; margin: 4px 0 12px; }
.rescue-entries .button { flex: 1; }

.adoption-section {
  display: grid;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
  padding: 14px 0 0;
  margin: 0;
}
.adoption-section:first-of-type { border-top: 0; padding-top: 0; }
.adoption-section legend {
  font-size: 13px;
  font-weight: 700;
  padding: 0;
  margin-bottom: 2px;
}

.cat-choice { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cat-choice input { accent-color: var(--brand); width: 16px; height: 16px; }

.cat-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  padding: 8px 14px;
  border: 1px dashed var(--brand);
  border-radius: 10px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.cat-file input { display: none; }

.adoption-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}
/* contain, not cover: a cropped face makes an adoption photo useless. */
.adoption-photo {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-tint);
}
.adoption-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.intent-cat-photo, .my-adoption-photo {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
  background: var(--surface-tint);
}

.adoption-intent-card { display: grid; gap: 10px; }
.adoption-intent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.adoption-intent-head strong { font-size: 15px; }
.adoption-intent-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
/* A pressed heart is filled; an idle one is a light outline. */
.adoption-intent-count .adopt-heart { opacity: .35; }

/* The questionnaire sheet: a bottom overlay, drawn from the same tokens as the
   rest of the forms. The backdrop closes it; the sheet scrolls internally so a
   long set of questions never pushes the page. */
.intent-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 32, 22, .45);
}
.intent-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  max-height: 84vh;
  overflow-y: auto;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: var(--surface);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .18);
}
.intent-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.intent-sheet-head strong { font-size: 16px; }
.intent-sheet-close {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-tint);
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.intent-form { margin-top: 8px; }
.cat-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.cat-check input { flex: none; margin-top: 3px; }

.my-adoption-list { display: grid; gap: 10px; margin-bottom: 12px; }
.my-adoption {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border-left: 3px solid var(--line, rgba(0, 0, 0, .08));
  background: var(--surface-tint);
}
.my-adoption-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.my-adoption-status { font-size: 11px; font-weight: 700; }
.my-adoption.pending { border-left-color: var(--warn); }
.my-adoption.pending .my-adoption-status { color: var(--warn); }
.my-adoption.live { border-left-color: var(--brand); }
.my-adoption.live .my-adoption-status { color: var(--brand); }
.my-adoption.done { border-left-color: var(--info); }
.my-adoption.done .my-adoption-status { color: var(--info); }
.my-adoption.rejected { border-left-color: var(--danger); }
.my-adoption.rejected .my-adoption-status { color: var(--danger); }
/* The reject reason is the one thing the submitter must act on, so it is the
   only element on the card that is given colour and weight of its own. */
.my-adoption-reason {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--danger);
}

/* The applications panel on one's own listing: answers only, no identity. */
.intent-applications {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line, rgba(0, 0, 0, .12));
}
.intent-application-list { display: grid; gap: 10px; }
.applicant-history {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 11px;
}
.applicant-history strong { color: var(--brand-strong); font-size: 12px; }
.intent-application {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line, rgba(0, 0, 0, .08));
}
.intent-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px 10px;
  margin: 0;
}
.intent-answers dt { color: var(--muted); font-size: 10px; font-weight: 700; }
.intent-answers dd { margin: 2px 0 0; font-size: 13px; }
.intent-answer-text {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.intent-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.intent-tag {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-soft, var(--surface-tint));
  color: var(--brand);
  font-size: 11px;
  font-weight: 600;
}

.section-title.small h3 { margin: 0; font-size: 15px; }

@media (max-width: 359px) {
  .rescue-entries { flex-direction: column; }
}

.dev-test-login {
  width: 100%;
  max-width: 360px;
  margin: 8px auto 0;
  padding: 14px;
  border: 1px dashed var(--warn);
  border-radius: 12px;
  background: var(--warn-soft);
}

/* --- 站内沟通（领养双方聊天） ---------------------------------------------- */
.chat-list { display: grid; gap: 10px; }
.chat-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}
.chat-avatar {
  display: grid;
  flex: none;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 17px;
  font-weight: 800;
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-item-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.chat-item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.chat-item-head strong { font-size: 14px; }
.chat-item-time { flex: none; color: var(--muted); font-size: 10px; }
.chat-item-preview {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-item-tags { display: flex; gap: 6px; align-items: center; }
.chat-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10px;
  font-weight: 700;
}
.chat-unread {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.chat-thread-page { display: grid; gap: 10px; }
.chat-back { display: inline-block; color: var(--muted); font-size: 13px; text-decoration: none; }
.chat-thread-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.chat-thread-head strong { display: block; font-size: 15px; }
.chat-thread-state { color: var(--muted); font-size: 11px; }
.chat-bubbles { display: grid; gap: 10px; margin: 12px 0; }
.chat-bubble-row { display: flex; justify-content: flex-start; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble {
  display: grid;
  gap: 4px;
  max-width: 78%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-tint);
}
.chat-bubble.mine { background: var(--brand-soft); border-color: var(--brand-mid); }
.chat-bubble-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat-bubble-image {
  width: 100%;
  max-width: 220px;
  border-radius: 10px;
  background: var(--surface);
  object-fit: contain;
}
.chat-bubble-time { justify-self: end; color: var(--muted); font-size: 10px; }
.chat-sealed {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.chat-composer {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.chat-composer textarea {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-tint);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.chat-composer textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.chat-composer-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.chat-composer-actions .button-link { margin-top: 0; border: 0; font: inherit; font-size: 13px; cursor: pointer; }
.chat-composer-actions label.button-link { display: inline-block; }
.chat-composer-actions .button-link:not(.solid) { background: var(--surface-tint); color: var(--muted); }
.chat-composer-actions .button-link[disabled] { opacity: .55; cursor: default; }
.chat-file { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.chat-attachment {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface-tint);
}
.chat-attachment img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--surface);
  object-fit: contain;
}
.chat-attachment .button-link { margin-top: 0; background: var(--surface); color: var(--danger); font-size: 12px; }

/* WeChat-like private inbox and conversation. Keep the visual language quiet:
   warm-white list, soft neutral message canvas, and familiar green sent bubbles. */
.wx-inbox-screen {
  width: min(100%, 760px);
  min-height: calc(100dvh - 64px - 84px - env(safe-area-inset-bottom));
  margin: 0 auto;
  background: var(--surface);
}
.page-content.wx-inbox-screen { padding: 0 0 24px; }
.wx-inbox-header {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  gap: 9px;
  padding: 10px 16px 9px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}
.wx-inbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wx-inbox-heading h1 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.wx-inbox-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.wx-inbox-add {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-tint);
  color: var(--ink);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  text-decoration: none;
}
.wx-inbox-search {
  display: flex;
  min-height: 36px;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f1f1f1;
  color: #9a9a9a;
}
.wx-inbox-search:focus-within { outline: 2px solid var(--brand); outline-offset: 1px; }
.wx-search-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.wx-inbox-search input { min-width: 0; flex: 1; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; }
.wx-inbox-search input:focus { outline: 0; }
.wx-inbox-search input::placeholder { color: #9a9a9a; }
.wx-search-clear {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #c9c9c9;
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.wx-inbox-no-match { padding: 46px 16px; color: var(--muted); font-size: 13px; text-align: center; }
.wx-inbox-list { background: var(--surface); }
.wx-inbox-loading { display: grid; grid-template-columns: 56px 1fr; gap: 7px 12px; padding: 18px; }
.wx-inbox-loading .sk-line { height: 12px; align-self: center; }
.wx-inbox-loading .sk-line:nth-child(odd) { grid-row: span 2; width: 56px; height: 56px; border-radius: 8px; }
.wx-inbox-loading .sk-line:nth-child(3) { grid-column: 2; }
.chat-item {
  position: relative;
  min-height: 78px;
  gap: 12px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 64%, transparent);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  transition: background .14s ease;
}
.chat-thread-head { min-height: 58px; padding-bottom: 4px; border-bottom: 0; }
.chat-item:hover, .chat-item:active { background: var(--surface-tint); }
.chat-avatar.inbox-avatar { width: 52px; height: 52px; border-radius: 8px; }
.chat-item-copy { align-self: stretch; align-content: center; gap: 5px; padding-right: 42px; }
.chat-item-head { align-items: center; }
.chat-item-head strong { overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.chat-item-time { color: var(--muted); font-size: 10px; }
.chat-item-preview { color: color-mix(in srgb, var(--ink) 56%, var(--muted)); font-size: 12px; }
.chat-item-tags { position: absolute; right: 16px; bottom: 19px; min-width: 18px; justify-content: flex-end; }
.chat-tag { padding: 2px 6px; background: var(--surface-tint); color: var(--muted); font-weight: 500; }
.chat-unread { min-width: 19px; height: 19px; padding: 0 5px; background: #fa5151; font-size: 10px; }
.wx-inbox-state { display: grid; min-height: 54vh; place-content: center; gap: 12px; padding: 24px; }
.wx-inbox-state .cats-empty { max-width: 340px; margin: 0; }
.wx-empty-mark {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  justify-self: center;
  border-radius: 22px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 28px;
  font-weight: 700;
}

.wx-chat-shell { display: contents; }
.wx-chat-screen {
  position: fixed;
  top: 0;
  bottom: calc(72px + env(safe-area-inset-bottom));
  z-index: 11;
  display: flex;
  width: min(100%, 760px);
  height: auto;
  flex-direction: column;
  margin: 0 auto;
  padding-top: calc(58px + env(safe-area-inset-top));
  padding-bottom: 0;
  overflow: hidden;
  background: #ededed;
  color: #191919;
}
.wx-chat-screen.page-content { width: min(100%, 760px); padding-right: 0; padding-left: 0; }
.wx-chat-screen.page-snapshot {
  position: fixed;
  top: 0 !important;
  right: auto;
  bottom: calc(72px + env(safe-area-inset-bottom));
  left: 50%;
  width: min(100%, 760px);
  height: auto;
  padding: calc(58px + env(safe-area-inset-top)) 0 0;
  overflow: hidden;
  transform: translateX(-50%);
}
.page-snapshot.chat-snapshot {
  position: fixed;
  right: auto;
  left: attr(data-chat-left px, 0px);
  width: attr(data-chat-width px, 100%);
  overflow: hidden;
}
.page-snapshot.chat-snapshot .wx-chat-log { overflow: hidden; }
.page-snapshot.chat-snapshot .wx-chat-composer,
.page-snapshot.chat-snapshot .wx-chat-archive,
.page-snapshot.chat-snapshot .bottom-nav { visibility: hidden; }
.wx-chat-screen.page-snapshot .wx-chat-log { overflow: hidden; }
.wx-chat-screen.page-snapshot::after { display: none; }
.wx-chat-screen.page-snapshot .bottom-nav { display: none; }
.wx-chat-screen.page-snapshot .wx-chat-composer,
.wx-chat-screen.page-snapshot .wx-chat-archive { visibility: hidden; }
.wx-chat-header {
  position: absolute;
  top: env(safe-area-inset-top);
  right: 0;
  left: 0;
  z-index: 2;
  display: grid;
  min-height: 58px;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  align-items: center;
  padding: 4px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  background: rgba(247, 247, 247, .96);
  backdrop-filter: blur(12px);
}
.wx-chat-back { display: inline-flex; min-width: 0; align-items: center; gap: 2px; color: #161616; text-decoration: none; }
.wx-back-chevron { font-family: Arial, sans-serif; font-size: 32px; line-height: 1; }
.wx-back-label { overflow: hidden; color: #576b95; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.wx-chat-title { display: grid; min-width: 0; justify-items: center; gap: 1px; }
.wx-chat-title strong { max-width: 100%; overflow: hidden; font-size: 15px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.wx-chat-title span { color: #999; font-size: 10px; }
.wx-chat-more {
  display: flex;
  width: 40px;
  height: 34px;
  justify-self: end;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 8px;
  background: none;
}
.wx-chat-more span { width: 5px; height: 5px; border-radius: 50%; background: #4a4a4a; }
.wx-chat-more:disabled { opacity: .35; }
.wx-chat-more:active { background: rgba(0, 0, 0, .06); }
.wx-chat-conversation { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; }
.wx-chat-body { position: relative; display: flex; min-height: 0; flex: 1; }
.wx-new-message-pill {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #576b95;
  font-size: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.wx-pill-arrow { font-size: 13px; line-height: 1; }
.wx-chat-log {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-anchor: none;
  padding: 16px 13px 22px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.wx-history-button {
  display: block;
  margin: 0 auto 18px;
  padding: 7px 13px;
  border: 1px solid rgba(0, 0, 0, .07);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  color: #8a8a8a;
  font-size: 11px;
}
.wx-history-button:disabled { opacity: .55; }
.wx-message-list { display: grid; min-height: 100%; align-content: end; gap: 15px; margin: 0; }
.wx-message-entry { display: grid; gap: 7px; }
.wx-time-divider {
  justify-self: center;
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .045);
  color: #a2a2a2;
  font-size: 11px;
  line-height: 1.3;
}
.wx-message-image-button { position: relative; z-index: 1; display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.wx-message-row { display: flex; min-width: 0; align-items: flex-start; justify-content: flex-start; gap: 8px; }
.wx-message-row.mine { flex-direction: row-reverse; justify-content: flex-start; }
.wx-message-avatar { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; overflow: hidden; border-radius: 6px; background: #d8d8d8; color: #727272; font-size: 16px; font-weight: 650; }
.wx-message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wx-message-bubble {
  position: relative;
  display: grid;
  min-width: 28px;
  max-width: min(74%, 470px);
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px 9px 9px 9px;
  background: #fff;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .035);
}
.wx-message-bubble::before { position: absolute; top: 12px; left: -5px; width: 9px; height: 9px; transform: rotate(45deg); background: #fff; content: ""; }
.wx-message-bubble.mine { border-radius: 9px 4px 9px 9px; background: #95ec69; }
.wx-message-bubble.mine::before { right: -5px; left: auto; background: #95ec69; }
.wx-message-bubble p { position: relative; z-index: 1; margin: 0; color: #171717; font-size: 15px; line-height: 1.48; white-space: pre-wrap; }
.wx-message-image { position: relative; z-index: 1; display: block; width: auto; max-width: min(56vw, 240px); max-height: 320px; border-radius: 6px; object-fit: contain; }
.wx-message-bubble.image-only { padding: 0; background: transparent; box-shadow: none; }
.wx-message-bubble.image-only::before { display: none; }
.wx-chat-empty { display: grid; min-height: 40vh; align-content: center; justify-items: center; gap: 5px; color: #898989; text-align: center; }
.wx-chat-empty span { font-size: 14px; }
.wx-chat-empty small { font-size: 11px; }
.wx-chat-composer {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 60px;
  flex: 0 0 auto;
  gap: 7px;
  margin: 0;
  padding: 8px 10px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background: #f7f7f7;
}
.wx-composer-bar { display: flex; min-height: 44px; align-items: flex-end; gap: 8px; }
.wx-attach-button { position: relative; display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid #b8b8b8; border-radius: 50%; color: #333; }
.wx-attach-button:focus-within { outline: 3px solid #07c160; outline-offset: 2px; }
.wx-attach-button label { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.wx-attach-button:has(input:focus-visible) { outline: 3px solid #07c160; outline-offset: 2px; }
.wx-attach-button span { font-size: 27px; font-weight: 300; line-height: 1; }
.wx-chat-composer textarea { min-width: 0; min-height: 38px; max-height: 112px; flex: 1; padding: 8px 10px; border: 0; border-radius: 5px; background: #fff; color: #1a1a1a; font: inherit; font-size: 15px; line-height: 1.4; resize: none; overflow-y: hidden; }
.wx-chat-composer textarea:focus { outline: 0; }
.wx-send-button { min-height: 36px; flex: 0 0 auto; padding: 0 13px; border-radius: 5px; background: #07c160; color: #fff; font-size: 13px; font-weight: 600; }
.wx-send-button:disabled { background: #a5d9bb; color: rgba(255, 255, 255, .9); cursor: default; }
.wx-chat-error { padding: 6px 9px; border-radius: 5px; background: #fff2f0; color: #c33; font-size: 11px; }
.wx-pending-photo { position: relative; justify-self: start; display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .1); }
.wx-pending-photo img { width: 54px; height: 54px; border-radius: 5px; object-fit: cover; }
.wx-pending-label { color: #7b7b7b; font-size: 11px; }
.wx-pending-photo button { display: grid; width: 21px; height: 21px; place-items: center; border: 0; border-radius: 50%; background: #555; color: #fff; font-size: 16px; line-height: 1; }
.wx-chat-archive { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 13px 18px calc(15px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0, 0, 0, .06); border-radius: 0; background: #f7f7f7; color: #7b7b7b; text-align: center; }
.wx-lock-mark { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; background: #e1e1e1; color: #858585; font-size: 12px; }
.wx-chat-archive p { margin: 0; font-size: 12px; }
.wx-chat-archive small { font-size: 10px; }
.wx-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .38);
}
.wx-chat-sheet {
  display: grid;
  width: min(100%, 760px);
  gap: 13px;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0;
  background: #fff;
  color: #191919;
}
.wx-sheet-handle { justify-self: center; width: 38px; height: 4px; margin-bottom: 2px; border-radius: 999px; background: #d4d4d4; }
.wx-sheet-profile { display: flex; align-items: center; gap: 12px; }
.wx-sheet-avatar { width: 46px; height: 46px; flex: 0 0 46px; }
.wx-sheet-copy { display: grid; min-width: 0; gap: 2px; }
.wx-sheet-copy strong { font-size: 15px; }
.wx-sheet-copy small { color: #999; font-size: 11px; }
.wx-sheet-note { margin: 0; color: #7b7b7b; font-size: 12px; line-height: 1.5; }
.wx-sheet-action { display: block; padding: 12px; border-radius: 8px; background: #f1f1f1; color: #191919; font-size: 14px; text-align: center; text-decoration: none; }
.wx-sheet-close { padding: 10px; border: 0; border-radius: 8px; background: #f1f1f1; color: #576b95; font-size: 14px; }
.wx-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .92);
}
.wx-image-viewer img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.wx-image-viewer-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.wx-chat-state { display: grid; min-height: 0; flex: 1; place-content: center; padding: 24px; background: #ededed; }
.wx-chat-state .cats-empty { max-width: 340px; }
.wx-chat-skeleton { align-content: start; gap: 12px; padding-top: 36px; }
@media (min-width: 760px) {
  .wx-chat-shell { display: block; }
  .wx-chat-shell > .bottom-nav { bottom: 20px; }
  .wx-inbox-screen { min-height: calc(100dvh - 64px - 84px); border-right: 1px solid var(--line); border-left: 1px solid var(--line); }
  .wx-chat-screen { top: 20px; bottom: 80px; height: auto; padding-top: 58px; padding-bottom: 0; border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; box-shadow: 0 12px 48px rgba(0, 0, 0, .12); }
  .wx-chat-screen.page-snapshot,
  .page-snapshot.chat-snapshot { top: 0 !important; bottom: 0; left: max(0px, calc((100% - 760px) / 2)); width: min(100%, 760px); padding-top: 58px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; }
  .wx-chat-header { top: 0; border-radius: 10px 10px 0 0; }
  .wx-chat-log { padding-right: 30px; padding-left: 30px; }
  .wx-chat-composer { padding-right: 18px; padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-chat-log { scroll-behavior: auto; }
}

/* Standard friend graph: exact-code discovery and explicit consent. */
.friends-page { display: grid; gap: 12px; }
.friend-code-card { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px; border:1px solid var(--brand-mid); border-radius:18px 18px 18px 5px; background:linear-gradient(120deg,var(--brand-soft),var(--surface)); }
.friend-code-copy { display:grid; min-width:0; gap:4px; }
.friend-code-copy strong { color:var(--brand-strong); font-size:23px; letter-spacing:.1em; user-select:all; }
.friend-code-copy small { max-width:420px; color:var(--muted); font-size:11px; }
.friend-code-mark { display:grid; width:42px; height:42px; flex:none; place-items:center; border-radius:14px; background:var(--brand); color:#fff; font-size:25px; }
.friend-section { display:grid; gap:12px; }
.friend-search-form { display:flex; align-items:center; gap:8px; }
.friend-search-form .search-input { min-width:0; font-family:ui-monospace,Consolas,monospace; letter-spacing:.08em; }
.friend-lookup-result,.friend-request-row,.friend-contact-row { display:flex; min-width:0; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.friend-avatar { display:grid; width:42px; height:42px; flex:none; place-items:center; overflow:hidden; border-radius:10px; background:var(--brand-soft); color:var(--brand-strong); font-size:16px; font-weight:700; }
.friend-avatar img { width:100%; height:100%; object-fit:cover; }
.friend-request-row .entity-copy,.friend-contact-row .entity-copy,.friend-lookup-result .entity-copy { flex:1; min-width:0; }
.friend-request-action { display:flex; flex:1 1 100%; flex-wrap:wrap; gap:7px; }
.friend-verification { width:100%; min-width:0; min-height:38px; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); font:inherit; font-size:12px; }
.friend-text-button { padding:7px 4px; color:var(--muted); font-size:12px; white-space:nowrap; }
.friend-text-button:hover { color:var(--danger); }
.friend-confirm { display:flex; align-items:center; gap:4px; }
.friend-notice { margin:0; color:var(--brand-strong); font-size:12px; }
@media (max-width:479px) {
  .friend-request-row,.friend-contact-row { flex-wrap:wrap; }
  .friend-request-row .entity-copy,.friend-contact-row .entity-copy { flex:1 1 calc(100% - 58px); }
  .friend-request-action { margin-left:52px; }
  .friend-contact-row > .button.compact { margin-left:52px; }
}