:root {
  color-scheme: light;
  --background: #fafafa;
  --background-deep: #f1f2f4;
  --background-soft: rgba(255, 200, 0, 0.16);
  --background-faint: #ffffff;
  --brand: #ffc800;
  --brand-soft: #ffe889;
  --brand-ink: #211a00;
  --surface: #ffffff;
  --surface-soft: #f7f7f7;
  --surface-muted: #f3f4f6;
  --surface-row: rgba(255, 255, 255, 0.74);
  --foreground: #172033;
  --muted-foreground: #64748b;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --accent: #0b69b7;
  --accent-strong: #1b65c6;
  --accent-care: #56cfae;
  --danger: #ff7a66;
  --border: #e5e7eb;
  --border-soft: rgba(229, 231, 235, 0.82);
  --border-strong: #d1d5db;
  --shadow: 0 20px 48px rgba(33, 33, 33, 0.1);
  --shadow-soft: 0 12px 30px rgba(33, 33, 33, 0.07);
  --shadow-card: 0 10px 24px rgba(33, 33, 33, 0.06);
  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --sidebar-width: clamp(248px, 20vw, 272px);
  --sidebar-rail-width: 74px;
  --content-max: 1180px;
  --body-font: var(--font-sans), "SUIT Variable", SUIT, "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-font: var(--font-sans), "SUIT Variable", SUIT, "Helvetica Neue", Helvetica, Arial, "Apple SD Gothic Neo", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #ffc800;
  --background-deep: #e7ad00;
  --background-soft: rgba(255, 200, 0, 0.16);
  --background-faint: rgba(255, 200, 0, 0.11);
  --brand: #ffc800;
  --brand-soft: #ffe889;
  --brand-ink: #211a00;
  --surface: #171d1a;
  --surface-soft: #202823;
  --surface-muted: #1c241f;
  --surface-row: rgba(255, 255, 255, 0.07);
  --foreground: #f7f5ea;
  --muted-foreground: #b7b4a7;
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --accent: #78b7ff;
  --accent-strong: #9fceff;
  --accent-care: #56cfae;
  --danger: #ff7a66;
  --border: rgba(255, 255, 255, 0.13);
  --border-soft: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.2);
  --shadow: 0 22px 54px rgba(0, 0, 0, 0.42);
  --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 12px 28px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--body-font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  font-synthesis-style: none;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.1), transparent 28%),
    #050506;
}

a {
  color: inherit;
  text-decoration: none;
}

a[href],
button:not(:disabled),
select:not(:disabled),
summary,
label[for],
[role="button"]:not([aria-disabled="true"]),
input[type="button"]:not(:disabled),
input[type="submit"]:not(:disabled),
input[type="reset"]:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="radio"]:not(:disabled),
.site-overlay.is-open {
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
}

img {
  display: block;
  max-width: 100%;
}

p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.68;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--foreground);
  font-family: var(--heading-font);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
}

h3 {
  font-size: clamp(1.32rem, 2vw, 1.8rem);
  line-height: 1.12;
}

main {
  min-height: calc(100vh - 220px);
}

.container {
  width: min(var(--content-max), calc(100% - 32px));
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: 16px;
  z-index: 100;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  background: white;
  color: var(--foreground);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.skip-link:focus-visible {
  top: 16px;
}

.stack,
.stack-tight,
.page-intro-support,
.hero-side-copy,
.section-header-copy,
.detail-stack,
.story-layout,
.timeline,
.field,
.empty-state,
.auth-card,
.content-card-body,
.sidebar-utility {
  display: grid;
}

.stack {
  gap: 24px;
}

.stack-tight {
  gap: 8px;
}

.section,
.hero-band,
.page-band,
.detail-band {
  padding: 34px 0;
}

.muted-section {
  background: rgba(255, 255, 255, 0.34);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.site-shell {
  position: relative;
}

.site-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 33, 33, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 30;
}

.site-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #fff2bf 100%);
  color: var(--accent-strong);
  box-shadow: var(--shadow-soft);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.mobile-nav-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
}

.mobile-nav-toggle.is-open {
  background: linear-gradient(180deg, #212121 0%, #38414a 100%);
  border-color: rgba(33, 33, 33, 0.55);
  color: white;
}

.mobile-toggle-icon {
  width: 20px;
  height: 20px;
}

.site-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: min(88vw, 332px);
  padding: 24px 18px 22px;
  background: rgba(255, 255, 255, 0.98);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(-102%);
  transition: transform 180ms ease, width 180ms ease, padding 180ms ease, box-shadow 180ms ease;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 33, 33, 0.2) transparent;
}

.site-sidebar::-webkit-scrollbar {
  width: 10px;
}

.site-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.site-sidebar::-webkit-scrollbar-thumb {
  background: rgba(33, 33, 33, 0.18);
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, 0.98);
}

.site-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(33, 33, 33, 0.26);
}

.site-sidebar.is-open {
  transform: translateX(0);
}

.sidebar-desktop-pin-toggle {
  display: none;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.045);
  color: rgba(15, 23, 42, 0.82);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.sidebar-desktop-pin-toggle:is(:hover, :focus-visible), .sidebar-desktop-pin-toggle.is-pinned {
  background: rgba(15, 23, 42, 0.09);
  color: #111827;
}

.sidebar-desktop-pin-icon {
  display: inline-grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
}

.sidebar-desktop-pin-icon svg {
  width: 17px;
  height: 17px;
}

.sidebar-desktop-pin-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 4px 10px;
}

.sidebar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  position: relative;
}

.sidebar-brand-logo {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.sidebar-brand-logo-dark {
  display: none;
}

.theme-toggle-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.38);
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.86), transparent 46%),
    var(--surface-muted);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.theme-toggle-button:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.28);
}

.theme-toggle-button svg {
  width: 18px;
  height: 18px;
}

.sidebar-brand-name,
.brandmark-kicker,
.eyebrow,
.meta-label,
.footer-heading,
.sidebar-section-title {
  margin: 0;
}

.sidebar-brand-name {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brandmark-kicker,
.eyebrow,
.meta-label,
.footer-heading,
.sidebar-section-title,
.sidebar-language-label {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 800;
}

.brandmark-kicker,
.eyebrow,
.meta-label,
.sidebar-section-title,
.sidebar-language-label {
  color: var(--accent);
}

.brandmark-title {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.45;
}

.sidebar-nav,
.sidebar-support-actions {
  display: grid;
  gap: 8px;
}

.language-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar-nav {
  gap: 8px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  --sidebar-icon-bg: rgba(242, 177, 54, 0.16);
  --sidebar-icon-bg-strong: rgba(242, 177, 54, 0.28);
  --sidebar-icon-color: var(--accent-strong);
  --sidebar-icon-shadow: rgba(166, 96, 6, 0.12);
  color: rgba(33, 33, 33, 0.82);
  font-weight: 760;
  font-size: 0.92rem;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.sidebar-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sidebar-icon-color);
  box-shadow: none;
  position: relative;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease,
    opacity 140ms ease,
    transform 140ms ease;
}

.sidebar-link-icon::after {
  display: none;
}

.sidebar-link-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-link-label {
  min-width: 0;
}

.sidebar-link-secondary {
  min-height: 38px;
  padding-inline: 10px;
  border-radius: 14px;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 650;
}

.sidebar-link-secondary .sidebar-link-icon {
  width: 26px;
  height: 26px;
  border-radius: 10px;
}

.sidebar-link-secondary .sidebar-link-icon svg {
  width: 16.5px;
  height: 16.5px;
}

.sidebar-link-tone-home {
  --sidebar-icon-bg: rgba(255, 200, 0, 0.2);
  --sidebar-icon-bg-strong: rgba(255, 200, 0, 0.34);
  --sidebar-icon-color: #9a5f00;
  --sidebar-icon-shadow: rgba(154, 95, 0, 0.14);
}

.sidebar-link-tone-cats {
  --sidebar-icon-bg: rgba(255, 154, 109, 0.2);
  --sidebar-icon-bg-strong: rgba(255, 154, 109, 0.34);
  --sidebar-icon-color: #a4411e;
  --sidebar-icon-shadow: rgba(164, 65, 30, 0.14);
}

.sidebar-link-tone-support {
  --sidebar-icon-bg: rgba(65, 195, 128, 0.17);
  --sidebar-icon-bg-strong: rgba(65, 195, 128, 0.3);
  --sidebar-icon-color: #0f7a4a;
  --sidebar-icon-shadow: rgba(15, 122, 74, 0.13);
}

.sidebar-link-tone-shorts {
  --sidebar-icon-bg: rgba(138, 111, 255, 0.17);
  --sidebar-icon-bg-strong: rgba(138, 111, 255, 0.3);
  --sidebar-icon-color: #5943c8;
  --sidebar-icon-shadow: rgba(89, 67, 200, 0.13);
}

.sidebar-link-tone-stories {
  --sidebar-icon-bg: rgba(247, 170, 56, 0.16);
  --sidebar-icon-bg-strong: rgba(247, 170, 56, 0.28);
  --sidebar-icon-color: #996020;
  --sidebar-icon-shadow: rgba(153, 96, 32, 0.12);
}

.sidebar-link-tone-community {
  --sidebar-icon-bg: rgba(43, 172, 208, 0.16);
  --sidebar-icon-bg-strong: rgba(43, 172, 208, 0.28);
  --sidebar-icon-color: #167692;
  --sidebar-icon-shadow: rgba(22, 118, 146, 0.12);
}

.sidebar-link-tone-projects {
  --sidebar-icon-bg: rgba(93, 150, 246, 0.16);
  --sidebar-icon-bg-strong: rgba(93, 150, 246, 0.29);
  --sidebar-icon-color: #2765b8;
  --sidebar-icon-shadow: rgba(39, 101, 184, 0.12);
}

.sidebar-link-tone-saved {
  --sidebar-icon-bg: rgba(236, 107, 148, 0.16);
  --sidebar-icon-bg-strong: rgba(236, 107, 148, 0.29);
  --sidebar-icon-color: #b63f70;
  --sidebar-icon-shadow: rgba(182, 63, 112, 0.12);
}

.sidebar-link-tone-alerts {
  --sidebar-icon-bg: rgba(255, 185, 76, 0.18);
  --sidebar-icon-bg-strong: rgba(255, 185, 76, 0.3);
  --sidebar-icon-color: #9b650e;
  --sidebar-icon-shadow: rgba(155, 101, 14, 0.12);
}

.sidebar-more-group {
  display: grid;
  gap: 8px;
}

.sidebar-more-group summary {
  list-style: none;
  cursor: pointer;
}

.sidebar-more-group summary::-webkit-details-marker {
  display: none;
}

.sidebar-more-menu {
  display: grid;
  gap: 6px;
  padding: 4px 0 0 10px;
  border-left: 1px solid var(--border-soft);
}

.sidebar-more-menu .sidebar-link-secondary {
  min-height: 34px;
  font-size: 0.84rem;
}

.sidebar-link:hover {
  background: rgba(15, 23, 42, 0.035);
  border-color: rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.sidebar-link:hover .sidebar-link-icon {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(15, 23, 42, 0.06);
  color: var(--sidebar-icon-color);
  transform: translateY(-1px);
}

.sidebar-link.is-active {
  background: rgba(248, 250, 252, 0.92);
  border-color: rgba(15, 23, 42, 0.08);
  color: var(--foreground);
  box-shadow: inset 3px 0 0 var(--sidebar-icon-color);
}

.sidebar-link.is-active .sidebar-link-icon {
  background: color-mix(in srgb, var(--sidebar-icon-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--sidebar-icon-color) 18%, transparent);
  color: var(--sidebar-icon-color);
  box-shadow: none;
}

.sidebar-support-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  background: linear-gradient(180deg, #fff6cb 0%, #ffffff 100%);
  box-shadow: var(--shadow-card);
}

.sidebar-footer {
  display: grid;
  gap: 16px;
  padding-top: 4px;
  border-top: 1px solid rgba(33, 33, 33, 0.06);
}

.sidebar-utility {
  margin-top: auto;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.sidebar-user {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(248, 250, 252, 0.66));
}

.sidebar-user-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.sidebar-user-avatar {
  display: inline-grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(86, 207, 174, 0.16));
  color: #211a00;
  font-size: 0.98rem;
  font-weight: 940;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-user-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sidebar-user-row {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.sidebar-user-kicker {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.62rem;
  font-weight: 880;
  letter-spacing: 0.08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-user-role-pill {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 1px solid rgba(31, 95, 174, 0.16);
  border-radius: 999px;
  background: rgba(31, 95, 174, 0.08);
  color: #1f5fae;
  font-size: 0.58rem;
  font-weight: 920;
  line-height: 1;
}

.sidebar-user-name,
.sidebar-user-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-name {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
  line-height: 1.12;
}

.sidebar-user-email {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.15;
}

.sidebar-user-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.sidebar-user-actions .sidebar-button {
  justify-content: center;
  min-height: 34px;
  padding-inline: 8px;
  border-radius: 11px;
  font-size: 0.72rem;
  font-weight: 820;
}

.sidebar-locale-card {
  gap: 10px;
}

.sidebar-language-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.sidebar-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.sidebar-theme-toggle {
  width: 34px;
  height: 34px;
  box-shadow: none;
}

.sidebar-language-label {
  flex-shrink: 0;
}

.sidebar-button {
  width: 100%;
}

.button-inline-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.language-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.84);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.language-pill:hover {
  transform: translateY(-1px);
  color: var(--foreground);
  border-color: rgba(11, 105, 183, 0.24);
  background: white;
}

.language-pill.is-active {
  border-color: var(--foreground);
  background: var(--foreground);
  color: white;
}

.site-main-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left 180ms ease;
}

.site-main-shell.site-main-shell-soft-record {
  background: var(--background);
}

.site-main {
  flex: 1;
  --site-main-top: 78px;
  padding-top: var(--site-main-top);
}

.site-main.site-main-not-home {
  --site-main-top: 40px;
}

.site-main.site-main-soft-record {
  --site-main-top: 0px;
}

.site-main.site-main-cat-detail {
  --site-main-top: 0px;
}

.site-main-shell:has(.missing-pet-page-band),
.site-main:has(.missing-pet-page-band) {
  background: #f6f8fb;
}

.site-shell-rescue-console {
  --rescue-topbar-height: 64px;
}

.site-shell-rescue-console .site-sidebar.is-rescue-console {
  border: 0;
  background: var(--background);
  box-shadow: none;
}

.rescue-shell-topbar-brand-mark {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
}

.rescue-shell-topbar-brand-mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.rescue-shell-topbar-brand-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  line-height: 1;
}

.rescue-shell-topbar-brand-copy strong,
.rescue-shell-topbar-brand-copy small {
  min-width: 0;
  overflow: hidden;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rescue-shell-topbar-brand-copy strong {
  color: inherit;
  font-size: 0.92rem;
  font-weight: 920;
}

.rescue-shell-topbar-brand-copy small {
  color: rgba(15, 23, 42, 0.54);
  font-size: 0.62rem;
  font-weight: 850;
}

.rescue-shell-topbar-spacer {
  min-width: 0;
}

.rescue-shell-topbar-search-submit {
  appearance: none;
  display: inline-grid;
  grid-column: 2;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.rescue-shell-topbar-search-submit:is(:hover, :focus-visible) {
  background: #1f2937;
  color: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.rescue-shell-topbar-search-submit svg {
  width: 15px;
  height: 15px;
}

.rescue-shell-topbar-nav {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-self: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 250, 252, 0.58)),
    rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.rescue-shell-topbar-nav-link {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(15, 23, 42, 0.66);
  font-size: 0.8rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.rescue-shell-topbar-nav-link:is(:hover, :focus-visible) {
  background: rgba(15, 23, 42, 0.07);
  color: #0f172a;
  outline: none;
}

.rescue-shell-topbar-nav-link.is-active {
  background: #0f172a;
  color: #ffffff;
}

.rescue-shell-topbar-action {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: rgba(15, 23, 42, 0.78);
  font-size: 0.78rem;
  font-weight: 880;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.rescue-shell-topbar-action svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.rescue-shell-topbar-action:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
  color: #0f172a;
  outline: none;
  transform: translateY(-1px);
}

.rescue-shell-topbar-action.is-primary {
  border-color: #0f172a;
  background: #0f172a;
  color: #ffffff;
}

.rescue-shell-topbar-action.is-primary:is(:hover, :focus-visible) {
  border-color: #1f2937;
  background: #1f2937;
  color: #ffffff;
}

.rescue-shell-topbar-sign-in {
  min-width: 76px;
  padding-inline: 15px;
}

.rescue-shell-topbar-theme.theme-toggle-button {
  width: 38px;
  height: 38px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.rescue-shell-account-menu {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.rescue-shell-account-menu summary {
  display: inline-flex;
  list-style: none;
  cursor: pointer;
}

.rescue-shell-account-menu summary::-webkit-details-marker {
  display: none;
}

.rescue-shell-topbar-avatar,
.rescue-shell-account-avatar {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.7), transparent 36%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.9), rgba(86, 207, 174, 0.7));
  color: #172033;
  font-weight: 940;
  line-height: 1;
  text-transform: uppercase;
}

.rescue-shell-topbar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 15px;
  font-size: 0.9rem;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.rescue-shell-account-avatar {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  font-size: 1rem;
}

.rescue-shell-topbar-avatar img,
.rescue-shell-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rescue-shell-account-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  display: grid;
  width: min(300px, calc(100vw - 32px));
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92)),
    #ffffff;
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(18px) saturate(130%);
}

.rescue-shell-account-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.rescue-shell-account-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.rescue-shell-account-copy strong,
.rescue-shell-account-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rescue-shell-account-copy strong {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 920;
}

.rescue-shell-account-copy small {
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.74rem;
  font-weight: 760;
}

.rescue-shell-account-actions {
  display: grid;
  gap: 6px;
}

.rescue-shell-account-actions :is(a, button) {
  appearance: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.045);
  color: rgba(15, 23, 42, 0.82);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 860;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rescue-shell-account-actions :is(a, button):is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.08);
  color: #0f172a;
  outline: none;
}

.rescue-shell-account-actions :is(a, button):disabled {
  cursor: wait;
  opacity: 0.62;
}

.rescue-shell-account-actions svg {
  width: 16px;
  height: 16px;
}

body:has(.legal-document-route-state) {
  background: #000;
  color-scheme: dark;
}

body:has(.legal-document-route-state) :is(.site-sidebar, .mobile-nav-toggle, .site-overlay, .site-footer) {
  display: none !important;
}

body:has(.legal-document-route-state) :is(.site-main-shell, .site-main) {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #000;
  box-shadow: none;
}

body:has(.legal-document-route-state) .site-main {
  --site-main-top: 0px;
}

.legal-document-page {
  min-height: 100svh;
  padding: 0 22px 82px;
  background:
    radial-gradient(circle at 82% 4%, rgba(217, 176, 106, 0.16), transparent 32rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24rem),
    #000;
  color: #f7f7f4;
}

.legal-document-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.legal-document-header {
  display: grid;
  gap: 46px;
  padding: 0 0 42px;
}

.legal-document-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 12px 0;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.92) 72%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(18px);
}

.legal-document-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #fff;
  font-size: 1rem;
  font-weight: 780;
  line-height: 1;
  text-decoration: none;
}

.legal-document-brand span {
  color: rgba(255, 255, 255, 0.92);
}

.legal-document-brand strong {
  color: rgba(255, 255, 255, 0.58);
  font: inherit;
  font-weight: 700;
}

.legal-document-nav {
  display: inline-flex;
  width: fit-content;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28);
}

.legal-document-nav a {
  display: inline-grid;
  min-height: 34px;
  place-items: center;
  border-radius: 999px;
  padding: 0 15px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
  font-weight: 720;
  letter-spacing: 0;
  text-decoration: none;
}

.legal-document-nav a:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.legal-document-nav a.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #090909;
}

.legal-document-hero {
  display: block;
  padding-top: 34px;
}

.legal-document-intro {
  display: grid;
  gap: 18px;
  max-width: 760px;
}

.legal-document-kicker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-document-kicker-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0;
}

.legal-document-intro h1 {
  max-width: 11ch;
  margin: 0;
  color: #fff;
  font-size: 4.9rem;
  font-weight: 780;
  line-height: 0.92;
  letter-spacing: 0;
}

.legal-document-intro p {
  max-width: 66ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.08rem;
  line-height: 1.66;
}

.legal-document-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.legal-document-card {
  display: grid;
  gap: 12px;
  padding: 26px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  background: transparent;
  box-shadow: none;
}

.legal-document-card h2 {
  margin: 0;
  color: #fff;
  font-size: 1.22rem;
  font-weight: 760;
  line-height: 1.18;
  letter-spacing: 0;
}

.legal-document-card p {
  max-width: 82ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.96rem;
  line-height: 1.75;
}

@media (max-width: 980px) {
  .legal-document-header {
    gap: 46px;
  }

  .legal-document-hero {
    padding-top: 18px;
  }

  .legal-document-intro h1 {
    max-width: 13ch;
    font-size: 4.25rem;
  }
}

@media (max-width: 720px) {
  .legal-document-page {
    padding: 0 12px 50px;
  }

  .legal-document-header {
    gap: 30px;
    padding-bottom: 26px;
  }

  .legal-document-topbar {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 0;
    padding: 16px 0 4px;
  }

  .legal-document-brand {
    font-size: 0.98rem;
  }

  .legal-document-nav {
    width: 100%;
  }

  .legal-document-nav a {
    flex: 1;
    padding-inline: 10px;
  }

  .legal-document-hero {
    padding-top: 16px;
  }

  .legal-document-kicker-row span {
    min-height: 28px;
    padding-inline: 10px;
    font-size: 0.72rem;
  }

  .legal-document-intro h1 {
    max-width: 11ch;
    font-size: 3rem;
    line-height: 0.96;
  }

  .legal-document-intro p {
    font-size: 0.98rem;
  }

  .legal-document-card {
    gap: 12px;
    padding: 21px 0 23px;
  }
}

@keyframes studioUserStoryNameTwinkle {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.9) rotate(0deg);
  }

  45% {
    opacity: 1;
    transform: scale(1.08) rotate(7deg);
  }
}

@keyframes studioUserStoryMemoryPulse {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes studioUserStoryBasicShine {
  0%,
  28% {
    transform: translateX(-120%);
  }

  62%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes studioUserStoryNeededPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.15) inset,
      0 0 18px rgba(251, 191, 36, 0.1),
      0 14px 38px rgba(0, 0, 0, 0.34);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(254, 243, 199, 0.26) inset,
      0 0 32px rgba(251, 191, 36, 0.21),
      0 16px 42px rgba(0, 0, 0, 0.36);
  }
}

@keyframes studioPendingUploadPulse {
  0%,
  100% {
    opacity: 0.74;
  }

  50% {
    opacity: 0.48;
  }
}

.site-footer {
  padding: 34px 0 42px;
}

.cats-page-band {
  position: relative;
  padding-top: 34px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 214, 79, 0.18), transparent 32%),
    linear-gradient(180deg, #fffaf0 0%, #fffdf8 270px, #fbfaf6 100%);
  overflow: hidden;
}

.cats-page-band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(390px, 48vw);
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 200, 0, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 200, 0, 0.06), transparent 72%);
  pointer-events: none;
}

.cats-page-band > .container {
  position: relative;
  z-index: 1;
}

.cat-detail-band {
  padding-top: 0;
}

.footer-grid,
.hero-grid,
.detail-grid,
.page-intro-grid,
.section-header,
.field-grid,
.preset-grid,
.card-grid,
.snapshot-grid,
.stats-grid,
.two-up-grid,
.support-grid,
.note-grid,
.compact-card-grid {
  display: grid;
  gap: 18px;
}

.footer-brand,
.page-intro-card,
.hero-copy,
.hero-side,
.card,
.snapshot-card,
.notice-card,
.timeline-card,
.detail-main,
.detail-side,
.story-layout,
.form-card,
.empty-state {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.page-intro-card,
.hero-copy,
.hero-side,
.card,
.snapshot-card,
.notice-card,
.timeline-card,
.detail-main,
.detail-side,
.story-layout,
.form-card,
.empty-state,
.footer-brand {
  padding: 24px;
}

.cat-detail-band .detail-main,
.cat-detail-band .detail-side {
  padding-top: 16px;
}

.site-main-soft-record .detail-main,
.site-main-soft-record .detail-side {
  padding-top: 18px;
}

.site-main-cat-detail .cat-detail-band .detail-main,
.site-main-cat-detail .cat-detail-band .detail-side {
  padding-top: 16px;
}

.site-main-soft-record > .page-band:first-child,
.site-main-soft-record > .detail-band:first-child {
  padding-top: 12px;
}

.site-main-soft-record > .loading-page:first-child {
  padding-top: 12px;
}

.site-main-not-home > .page-band:first-child,
.site-main-not-home > .detail-band:first-child {
  padding-top: 22px;
}

.site-main-not-home > .loading-page:first-child {
  padding-top: 10px;
}

.page-intro-card,
.hero-copy,
.hero-side,
.card,
.snapshot-card,
.notice-card,
.timeline-card,
.detail-main,
.detail-side,
.story-layout,
.form-card,
.empty-state {
  display: grid;
  gap: 16px;
}

.auth-card {
  gap: 14px;
}

.login-page-shell {
  width: min(100%, 520px);
  margin-inline: auto;
}

.login-provider-card {
  gap: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, rgba(249, 252, 247, 0.96) 100%);
  border-color: rgba(255, 200, 0, 0.34);
}

.login-provider-heading,
.login-email-heading {
  display: grid;
  gap: 6px;
}

.login-provider-heading h2,
.login-email-heading h2 {
  margin: 0;
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  line-height: 1.16;
}

.login-provider-heading p:last-child {
  margin: 0;
  color: var(--foreground-muted);
}

.google-sign-in-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid #dadce0;
  background: #ffffff;
  color: #1f1f1f;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.google-sign-in-button:hover {
  transform: translateY(-1px);
  border-color: #c6cbd1;
  background: #f8fbff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.google-sign-in-button:focus-visible {
  outline: 3px solid rgba(66, 133, 244, 0.28);
  outline-offset: 3px;
}

.google-sign-in-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.login-email-card {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.page-intro-support {
  gap: 16px;
}

.page-intro-card.is-compact {
  gap: 18px;
  padding: 20px 22px;
}

.page-intro-card.is-compact h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
}

.page-intro-card.is-compact .hero-lead {
  font-size: 0.96rem;
  max-width: 52ch;
}

.project-page-intro > .stack-tight {
  align-content: center;
}

.page-intro-support > * {
  height: 100%;
}

.cats-page-intro.page-intro-card.is-compact {
  padding: 16px 18px;
  gap: 8px;
}

.cats-page-intro.page-intro-card.is-compact.page-intro-grid {
  grid-template-columns: minmax(0, 1fr);
}

.cats-page-intro > .stack-tight {
  gap: 4px;
}

.cats-page-intro.page-intro-card.is-compact h1 {
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.08;
}

.cats-page-intro.page-intro-card.is-compact .hero-lead {
  max-width: 68ch;
  font-size: 0.92rem;
  line-height: 1.5;
}

.cats-directory-intro {
  align-items: start;
  border-radius: 18px;
  border-color: rgba(245, 180, 0, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 229, 0.9)),
    #ffffff;
  box-shadow: 0 18px 52px rgba(117, 83, 0, 0.09);
}

.cats-directory-intro-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.cats-directory-intro-meta {
  display: inline-grid;
  gap: 3px;
  width: fit-content;
  max-width: 100%;
  min-width: min(100%, 190px);
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.cats-directory-intro-meta span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.cats-directory-intro-meta strong {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.2;
}

.cats-directory-filter-list {
  padding-top: 4px;
}

.cats-filter-mobile-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--card);
  color: var(--foreground);
  font: inherit;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.cats-filter-mobile-toggle-copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.cats-filter-mobile-toggle-copy span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.cats-filter-mobile-toggle-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.92rem;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-filter-caret {
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 140ms ease;
}

.cats-filter-mobile-toggle[aria-expanded="true"] .cats-filter-caret {
  transform: rotate(225deg) translateY(-2px);
}

.footer-heading {
  color: var(--foreground);
  margin-bottom: 12px;
}

.footer-links,
.button-row,
.cta-rail,
.detail-meta,
.tag-row,
.project-meter,
.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-age-panel {
  display: grid;
  gap: 10px;
}

.detail-age-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.detail-age-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.86);
}

.detail-age-card strong {
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.2;
}

.detail-age-label {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-age-note {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

@media (max-width: 639px) {
  .detail-age-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.footer-links {
  display: grid;
  gap: 10px;
}

.footer-column {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-links a {
  color: var(--foreground);
  font-weight: 700;
  line-height: 1.45;
  transition: color 120ms ease, transform 120ms ease;
}

.footer-links a:hover {
  color: var(--accent-strong);
  transform: translateX(1px);
}

.footer-brand {
  align-content: start;
}

.footer-brand p {
  max-width: 48ch;
}

.hero-copy h1,
.page-intro-card h1,
.detail-main h1 {
  font-size: clamp(2.65rem, 5vw, 4.85rem);
}

.section-header h2 {
  font-size: clamp(1.95rem, 3vw, 3.1rem);
}

.hero-lead {
  font-size: 1.06rem;
  max-width: 60ch;
}

.detail-intro-expanded {
  max-width: 68ch;
  line-height: 1.7;
  white-space: pre-line;
}

.expandable-text {
  display: grid;
  gap: 8px;
}

.expandable-text > p {
  margin: 0;
}

.expandable-text-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.expandable-text-toggle:hover {
  color: var(--foreground);
  text-decoration: underline;
}

.hero-side {
  gap: 18px;
}

.hero-side-copy {
  gap: 14px;
}

.hero-media,
.media-thumb,
.detail-hero-media {
  position: relative;
  overflow: hidden;
}

.hero-media {
  min-height: 276px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: var(--surface-soft);
}

.media-thumb {
  width: calc(100% + 48px);
  height: 198px;
  margin: -24px -24px 16px;
  border-radius: 24px 24px 18px 18px;
  background: var(--surface-soft);
}

.detail-hero-media {
  min-height: 340px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.detail-photo-gallery,
.detail-case-intro,
.detail-gallery,
.detail-follow-up-card,
.detail-action-card,
.detail-project-card {
  display: grid;
  gap: 16px;
}

.detail-gallery {
  gap: 12px;
}

.detail-gallery-header,
.detail-signal-line,
.detail-project-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detail-gallery-header span,
.detail-signal-line span,
.detail-project-summary p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.45;
}

.detail-gallery-header-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.detail-gallery-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-gallery-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.detail-gallery-control:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
}

.detail-media-note,
.detail-signal-note {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.55;
}

.detail-signal-line strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 800;
}

.detail-gallery-stage {
  display: grid;
  gap: 14px;
}

.detail-gallery-stage-media {
  min-height: 420px;
}

.detail-gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, 112px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.detail-gallery-thumb {
  appearance: none;
  position: relative;
  min-height: 112px;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.detail-gallery-thumb.is-active {
  border-color: rgba(11, 105, 183, 0.32);
  box-shadow: var(--shadow-card);
}

.detail-gallery-thumb:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
}

.detail-gallery-thumb img {
  object-fit: cover;
}

.detail-case-body {
  align-items: start;
}

.detail-case-body-full {
  grid-column: 1 / -1;
}

.snapshot-grid.detail-snapshot-grid {
  gap: 14px;
}

.detail-snapshot-card {
  align-content: start;
  gap: 10px;
  min-height: 0;
}

.detail-snapshot-card strong {
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  line-height: 1.2;
}

.detail-snapshot-copy,
.detail-action-description,
.detail-preset-copy {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.detail-snapshot-copy {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

.cat-detail-minis {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(94, 224, 184, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.cat-detail-minis-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.cat-detail-minis-head h3 {
  margin: 4px 0 0;
  font-size: clamp(1.25rem, 2.2vw, 1.68rem);
}

.cat-detail-minis-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cat-detail-mini-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}

.cat-detail-mini-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 14px;
  background: #111827;
  object-fit: cover;
}

.cat-detail-mini-card div {
  display: grid;
  gap: 4px;
}

.cat-detail-mini-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.cat-detail-mini-card strong {
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.25;
}

.detail-action-description {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}

.detail-action-buttons,
.detail-preset-grid,
.detail-related-list {
  display: grid;
  gap: 10px;
}

.detail-action-card {
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 245, 191, 0.94) 0%, rgba(255, 255, 255, 0.98) 34%),
    rgba(255, 255, 255, 0.98);
}

.detail-action-card h3 {
  font-size: clamp(1.16rem, 1.6vw, 1.42rem);
  line-height: 1.24;
}

.detail-action-primary {
  display: grid;
  gap: 8px;
}

.detail-action-primary .button {
  min-height: 50px;
  box-shadow: var(--shadow-card);
}

.detail-secondary-actions {
  display: grid;
  gap: 8px;
}

.detail-secondary-actions .button {
  min-height: 44px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.detail-support-block {
  gap: 10px;
  border-color: rgba(255, 200, 0, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 222, 0.94) 100%);
}

.detail-support-hint {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.4;
}

.detail-preset-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-action-card .detail-preset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.detail-preset-card {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease,
    background 120ms ease;
}

.detail-action-card .detail-preset-card {
  justify-items: center;
  text-align: center;
  align-content: center;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 8px;
  gap: 0;
}

.detail-preset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.28);
  box-shadow: var(--shadow-card);
  background: white;
}

.detail-preset-amount {
  color: var(--foreground);
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.detail-action-card .detail-preset-amount {
  font-size: 1.04rem;
  text-align: center;
}

.detail-support-note {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  line-height: 1.35;
}

.detail-favorite-row {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(201, 213, 226, 0.72);
}

.detail-favorite-row > * {
  width: 100%;
}

.detail-favorite-row .stack {
  gap: 8px;
}

.detail-favorite-row .button {
  min-height: 40px;
  font-size: 0.88rem;
}

@media (max-width: 460px) {
  .detail-action-card .detail-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.detail-project-card {
  gap: 18px;
}

.detail-project-card .tag-row {
  gap: 8px;
}

.detail-project-card .tag {
  background: #fffef4;
  border-color: rgba(255, 200, 0, 0.28);
}

.detail-project-card .project-meter {
  align-items: center;
  justify-content: space-between;
}

.detail-project-card .detail-project-summary {
  padding-top: 4px;
  border-top: 1px solid rgba(201, 213, 226, 0.72);
}

.detail-action-card .button,
.detail-project-card .button {
  width: 100%;
}

.detail-related-item {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.detail-related-item:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
}

.detail-related-item p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.hero-media img,
.media-thumb img,
.detail-hero-media img,
.story-gallery-media img {
  object-fit: cover;
}

.theme-image-dark {
  display: none;
}

html[data-theme="dark"] .theme-image-light {
  display: none;
}

html[data-theme="dark"] .theme-image-dark {
  display: block;
}

.hero-bullets,
.summary-list {
  display: grid;
  gap: 12px;
  padding-left: 18px;
  margin: 0;
}

.hero-bullets li,
.summary-list li {
  color: var(--foreground);
}

.section-header-copy {
  gap: 12px;
}

.section-header {
  align-items: flex-end;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tag-icon,
.eyebrow-icon,
.meta-row-icon,
.cats-priority-icon,
.cats-status-icon,
.cats-need-icon,
.cats-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tag-icon,
.cats-priority-icon,
.cats-status-icon,
.cats-need-icon,
.cats-search-icon {
  width: 16px;
  height: 16px;
}

.eyebrow-icon,
.meta-row-icon {
  width: 15px;
  height: 15px;
}

.tag-icon svg,
.eyebrow-icon svg,
.meta-row-icon svg,
.cats-priority-icon svg,
.cats-status-icon svg,
.cats-need-icon svg,
.cats-search-icon svg {
  width: 100%;
  height: 100%;
}

.card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eyebrow-icon {
  color: var(--accent-strong);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  transform: none;
}

.button-small {
  min-height: 40px;
  padding-inline: 14px;
}

.report-action-button {
  min-width: 126px;
}

.monthly-report-pdf-download {
  display: grid;
  gap: 6px;
  min-width: min(240px, 100%);
}

.monthly-report-pdf-download-button {
  justify-content: center;
  gap: 8px;
}

.monthly-report-pdf-download-button svg {
  flex: 0 0 auto;
}

.monthly-report-pdf-download.is-pending .monthly-report-pdf-download-button svg {
  animation: spin 900ms linear infinite;
}

.monthly-report-pdf-download-message {
  max-width: 270px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 750;
  line-height: 1.35;
}

.monthly-report-pdf-download.is-error .monthly-report-pdf-download-message {
  color: #b84a35;
}

html[data-theme="dark"] .monthly-report-pdf-download.is-error .monthly-report-pdf-download-message {
  color: #ff9a84;
}

.report-button-spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: spin 720ms linear infinite;
}

.button-primary {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: rgba(255, 200, 0, 0.58);
  box-shadow: var(--shadow-card);
}

.button-primary:hover {
  background: #ffd84d;
}

.button-secondary {
  background: var(--foreground);
  color: white;
  box-shadow: var(--shadow-card);
}

.button-ghost {
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .button-primary {
  color: var(--brand-ink);
}

html[data-theme="dark"] .button-secondary {
  background: #f7f5ea;
  color: #111511;
}

html[data-theme="dark"] .button-ghost {
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .site-sidebar {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.11), transparent 28%),
    rgba(15, 20, 18, 0.98);
  border-right-color: var(--border);
}

html[data-theme="dark"] .mobile-nav-toggle {
  background: rgba(23, 29, 26, 0.96);
  color: var(--brand);
  border-color: rgba(255, 200, 0, 0.3);
}

html[data-theme="dark"] .mobile-nav-toggle.is-open {
  background: var(--brand);
  color: var(--brand-ink);
}

html[data-theme="dark"] .sidebar-brand-logo-light {
  display: none;
}

html[data-theme="dark"] .sidebar-brand-logo-dark {
  display: block;
}

html[data-theme="dark"] .theme-toggle-button {
  background:
    radial-gradient(circle at top, rgba(255, 200, 0, 0.16), transparent 48%),
    rgba(255, 255, 255, 0.08);
  color: var(--brand-soft);
  border-color: rgba(255, 200, 0, 0.3);
}

html[data-theme="dark"] .rescue-shell-topbar-brand-copy small {
  color: rgba(238, 246, 255, 0.52);
}

html[data-theme="dark"] .rescue-shell-topbar-nav {
  border-color: rgba(148, 163, 184, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .rescue-shell-topbar-nav-link {
  color: rgba(238, 246, 255, 0.64);
}

html[data-theme="dark"] .rescue-shell-topbar-nav-link:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

html[data-theme="dark"] .rescue-shell-topbar-nav-link.is-active {
  background: rgba(255, 200, 0, 0.9);
  color: #211a00;
}

html[data-theme="dark"] .rescue-shell-topbar-action {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 246, 255, 0.78);
  box-shadow: none;
}

html[data-theme="dark"] .rescue-shell-topbar-action:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

html[data-theme="dark"] .rescue-shell-topbar-action.is-primary {
  border-color: rgba(255, 200, 0, 0.72);
  background: rgba(255, 200, 0, 0.9);
  color: #211a00;
}

html[data-theme="dark"] .rescue-shell-topbar-search-submit {
  background: rgba(255, 200, 0, 0.9);
  color: #211a00;
}

html[data-theme="dark"] .rescue-shell-topbar-search-submit:is(:hover, :focus-visible) {
  background: #ffe16a;
  color: #211a00;
}

html[data-theme="dark"] .rescue-shell-topbar-avatar,
html[data-theme="dark"] .rescue-shell-account-avatar {
  border-color: rgba(255, 255, 255, 0.1);
  color: #211a00;
  box-shadow: none;
}

html[data-theme="dark"] .rescue-shell-account-popover {
  border-color: rgba(148, 163, 184, 0.14);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 17, 32, 0.94)),
    #0b1120;
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .rescue-shell-account-copy strong {
  color: #eef6ff;
}

html[data-theme="dark"] .rescue-shell-account-copy small {
  color: rgba(238, 246, 255, 0.56);
}

html[data-theme="dark"] .rescue-shell-account-actions :is(a, button) {
  border-color: rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(238, 246, 255, 0.8);
}

html[data-theme="dark"] .rescue-shell-account-actions :is(a, button):is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

html[data-theme="dark"] .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .sidebar-link {
  --sidebar-icon-bg: rgba(255, 255, 255, 0.08);
  --sidebar-icon-bg-strong: rgba(255, 255, 255, 0.13);
  --sidebar-icon-color: var(--brand-soft);
  --sidebar-icon-shadow: rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .sidebar-link-tone-home {
  --sidebar-icon-bg: rgba(255, 200, 0, 0.14);
  --sidebar-icon-bg-strong: rgba(255, 200, 0, 0.22);
  --sidebar-icon-color: #ffd85a;
}

html[data-theme="dark"] .sidebar-link-tone-cats {
  --sidebar-icon-bg: rgba(255, 154, 109, 0.14);
  --sidebar-icon-bg-strong: rgba(255, 154, 109, 0.22);
  --sidebar-icon-color: #ffb08f;
}

html[data-theme="dark"] .sidebar-link-tone-support {
  --sidebar-icon-bg: rgba(65, 195, 128, 0.13);
  --sidebar-icon-bg-strong: rgba(65, 195, 128, 0.21);
  --sidebar-icon-color: #72dda5;
}

html[data-theme="dark"] .sidebar-link-tone-shorts {
  --sidebar-icon-bg: rgba(155, 137, 255, 0.14);
  --sidebar-icon-bg-strong: rgba(155, 137, 255, 0.22);
  --sidebar-icon-color: #b8aaff;
}

html[data-theme="dark"] .sidebar-link-tone-stories {
  --sidebar-icon-bg: rgba(247, 170, 56, 0.13);
  --sidebar-icon-bg-strong: rgba(247, 170, 56, 0.21);
  --sidebar-icon-color: #f5bd70;
}

html[data-theme="dark"] .sidebar-link-tone-community {
  --sidebar-icon-bg: rgba(76, 202, 236, 0.13);
  --sidebar-icon-bg-strong: rgba(76, 202, 236, 0.21);
  --sidebar-icon-color: #82daf0;
}

html[data-theme="dark"] .sidebar-link-tone-projects {
  --sidebar-icon-bg: rgba(105, 166, 255, 0.13);
  --sidebar-icon-bg-strong: rgba(105, 166, 255, 0.21);
  --sidebar-icon-color: #9cc5ff;
}

html[data-theme="dark"] .sidebar-link-tone-saved {
  --sidebar-icon-bg: rgba(248, 122, 170, 0.13);
  --sidebar-icon-bg-strong: rgba(248, 122, 170, 0.21);
  --sidebar-icon-color: #ffa0c3;
}

html[data-theme="dark"] .sidebar-link-tone-alerts {
  --sidebar-icon-bg: rgba(255, 190, 85, 0.13);
  --sidebar-icon-bg-strong: rgba(255, 190, 85, 0.21);
  --sidebar-icon-color: #ffd085;
}

html[data-theme="dark"] .sidebar-link.is-active {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
  box-shadow: inset 3px 0 0 var(--sidebar-icon-color);
}

html[data-theme="dark"] .sidebar-link.is-active .sidebar-link-icon {
  color: var(--sidebar-icon-color);
  border-color: color-mix(in srgb, var(--sidebar-icon-color) 18%, transparent);
  background: color-mix(in srgb, var(--sidebar-icon-color) 10%, transparent);
}

html[data-theme="dark"] .sidebar-link-secondary .sidebar-link-icon {
  color: var(--sidebar-icon-color);
}

html[data-theme="dark"] .sidebar-support-card,
html[data-theme="dark"] .sidebar-user,
html[data-theme="dark"] .language-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
}

html[data-theme="dark"] .sidebar-user-avatar {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.16), transparent 42%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(86, 207, 174, 0.12));
  color: #ffe889;
}

html[data-theme="dark"] .sidebar-user-role-pill {
  border-color: rgba(147, 197, 253, 0.2);
  background: rgba(147, 197, 253, 0.09);
  color: #bfdbfe;
}

html[data-theme="dark"] .sidebar-footer,
html[data-theme="dark"] .sidebar-utility {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .site-main-shell.site-main-shell-soft-record {
  background:
    radial-gradient(circle at 90% 0%, rgba(86, 207, 174, 0.1), transparent 30%),
    linear-gradient(180deg, #101612 0%, #111815 42%, #0c110f 100%);
}

html[data-theme="dark"] .sidebar-more-menu {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .language-pill.is-active {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

html[data-theme="dark"] .footer-brand,
html[data-theme="dark"] .page-intro-card,
html[data-theme="dark"] .hero-copy,
html[data-theme="dark"] .hero-side,
html[data-theme="dark"] .card,
html[data-theme="dark"] .snapshot-card,
html[data-theme="dark"] .cat-detail-minis,
html[data-theme="dark"] .notice-card,
html[data-theme="dark"] .timeline-card,
html[data-theme="dark"] .detail-main,
html[data-theme="dark"] .detail-side,
html[data-theme="dark"] .story-layout,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .help-detail-main,
html[data-theme="dark"] .help-detail-action-card,
html[data-theme="dark"] .help-detail-participants-card,
html[data-theme="dark"] .help-comment-thread.is-room {
  background: rgba(23, 29, 26, 0.94);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .muted-section {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .tag,
html[data-theme="dark"] .language-pill,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder {
  color: rgba(247, 245, 234, 0.48);
}

.content-card {
  align-content: start;
  gap: 14px;
  min-height: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.content-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(255, 200, 0, 0.42);
}

.support-entry-card {
  gap: 18px;
  background: #ffffff;
}

.support-page-band > .container {
  width: 100%;
}

body:has(.site-shell-rescue-console) .site-main:has(.support-page-band) {
  --site-main-top: 0px;
}

.support-page-band .support-anchor-section {
  width: min(var(--content-max), calc(100% - 32px));
  justify-self: center;
}

.support-donation-hero {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 54px);
  min-height: clamp(680px, calc(100vh - 112px), 840px);
  width: 100%;
  margin-top: 0;
  padding: clamp(58px, 8vw, 112px) clamp(18px, 3vw, 64px) clamp(64px, 8vw, 104px);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(180deg, #ffcf35 0%, #ffd032 100%);
  overflow: hidden;
}

.support-donation-hero::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  top: 54%;
  display: none;
  height: 78px;
  background:
    linear-gradient(135deg, transparent 0 18px, #fff3cf 18px 32px, transparent 32px 42px) 0 0 / 92px 78px repeat-x,
    linear-gradient(24deg, transparent 0 16px, #fff3cf 16px 31px, transparent 31px 45px) 0 10px / 110px 76px repeat-x;
  pointer-events: none;
  transform: translateY(-50%);
  opacity: 0.96;
}

.support-donation-copy {
  position: relative;
  z-index: 1;
  align-self: start;
  display: grid;
  max-width: 580px;
  gap: clamp(18px, 2vw, 28px);
  padding-top: clamp(16px, 4vw, 52px);
}

.support-donation-copy h1 {
  margin: 0;
  color: #050505;
  font-size: clamp(2.65rem, 4.8vw, 5.8rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.96;
}

.support-donation-copy p:not(.eyebrow) {
  max-width: 48ch;
  margin: 0;
  color: #111111;
  font-size: clamp(1.1rem, 1.55vw, 1.55rem);
  font-weight: 720;
  line-height: 1.34;
}

.support-donation-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.72fr) minmax(430px, 760px);
  gap: clamp(24px, 4vw, 82px);
  align-items: start;
  width: min(1500px, 100%);
  margin-inline: auto;
}

.support-donation-main {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.support-checkout-return-note {
  width: min(760px, 100%);
  margin-inline: auto;
  padding: 12px 16px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: rgba(255, 254, 248, 0.92);
  color: #111111;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.1);
}

.support-donation-paypal {
  position: relative;
  min-height: 100%;
  gap: clamp(16px, 2vw, 22px);
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.support-donation-paypal.support-stripe-card {
  box-sizing: border-box;
  width: min(760px, 100%);
  gap: 28px;
  margin-inline: auto;
  padding: clamp(24px, 3.2vw, 36px);
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 22px;
  background: rgba(255, 254, 248, 0.99);
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.16);
}

.support-donation-paypal::before {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand);
}

.support-donation-paypal.support-stripe-card::before {
  display: none;
}

.support-donation-paypal .eyebrow {
  color: var(--foreground);
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

.support-checkout-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-checkout-control-group {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.support-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.support-control-label {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-stripe-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  max-width: none;
  padding: 3px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.support-frequency-toggle {
  gap: 0;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #f0ede6;
}

.support-stripe-mode-toggle button {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--foreground-muted);
  font-size: 0.84rem;
  font-weight: 900;
  letter-spacing: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.support-frequency-toggle button {
  min-height: 118px;
  gap: 12px;
  border-radius: 0;
  color: #111111;
  font-size: clamp(1.12rem, 2.4vw, 1.55rem);
  font-weight: 900;
}

.support-frequency-toggle button:first-child {
  border-radius: 14px 0 0 14px;
}

.support-frequency-toggle button:last-child {
  border-radius: 0 14px 14px 0;
}

.support-frequency-toggle button.is-selected {
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

.support-frequency-toggle button.is-selected::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -16px;
  width: 0;
  height: 0;
  border-right: 16px solid transparent;
  border-left: 16px solid transparent;
  border-top: 16px solid #111111;
  transform: translateX(-50%);
}

.support-mode-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-mode-icon::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: 0;
  border-radius: 999px;
  background: rgba(255, 208, 59, 0.2);
  opacity: 0;
  transform: scale(0.72);
  pointer-events: none;
}

.support-mode-icon svg {
  position: relative;
  z-index: 1;
}

.support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon {
  animation: support-monthly-icon-float 2.8s ease-in-out infinite;
  transform-origin: 50% 58%;
}

.support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon::before {
  animation: support-monthly-icon-halo 2.8s ease-in-out infinite;
}

@keyframes support-monthly-icon-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  18% {
    transform: translateY(-3px) scale(1.04);
  }

  34% {
    transform: translateY(0) scale(1);
  }

  48% {
    transform: translateY(-1px) scale(1.02);
  }
}

@keyframes support-monthly-icon-halo {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.72);
  }

  18% {
    opacity: 1;
    transform: scale(1);
  }

  46% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon,
  .support-frequency-toggle button.support-frequency-monthly:not(.is-selected) .support-mode-icon::before {
    animation: none;
  }
}

.support-mode-label {
  color: currentColor;
  font-size: inherit;
  font-weight: 950;
  line-height: 1;
}

.support-stripe-mode-toggle button strong {
  color: inherit;
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.05;
}

.support-stripe-mode-toggle button span {
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  opacity: 0.66;
}

.support-stripe-mode-toggle button .support-mode-icon,
.support-stripe-mode-toggle button .support-mode-label {
  opacity: 1;
}

.support-stripe-mode-toggle button .support-mode-label {
  font-size: inherit;
  font-weight: 950;
}

.support-stripe-currency-toggle {
  display: inline-flex;
  justify-content: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-stripe-currency-toggle button {
  min-height: 0;
  padding: 2px 0;
  border-radius: 0;
  background: transparent;
  color: rgba(17, 24, 39, 0.46);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: none;
}

.support-stripe-mode-toggle button:is(:hover, :focus-visible) {
  background: rgba(15, 23, 42, 0.05);
  color: var(--foreground);
  outline: none;
}

.support-stripe-mode-toggle button.is-selected {
  background: rgba(15, 23, 42, 0.09);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.support-stripe-mode-toggle.support-frequency-toggle button.is-selected {
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

.support-stripe-mode-toggle.support-stripe-currency-toggle button:is(:hover, :focus-visible), .support-stripe-mode-toggle.support-stripe-currency-toggle button.is-selected {
  background: transparent;
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  box-shadow: none;
}

.support-selected-amount {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.support-selected-amount span,
.support-checkout-section-heading span {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-selected-amount strong {
  color: var(--foreground);
  font-size: clamp(1.22rem, 2.1vw, 1.72rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
}

.support-selected-amount small {
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.25;
}

.support-checkout-section {
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-checkout-section-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.support-checkout-section-heading span {
  color: #111111;
  font-size: clamp(1.38rem, 2.6vw, 1.9rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
  text-align: center;
  text-transform: none;
}

.support-donation-paypal h3 {
  color: var(--foreground-muted);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0;
}

.support-donation-paypal .stack-tight {
  gap: 4px;
}

.support-donation-paypal .paypal-preset-grid {
  gap: 8px;
}

.support-donation-paypal .support-stripe-preset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-top: 14px;
}

.support-donation-paypal .chip-button {
  position: relative;
  min-height: 94px;
  align-content: center;
  justify-items: center;
  overflow: visible;
  padding: 18px 12px;
  border-radius: 12px;
  border: 2px solid rgba(17, 17, 17, 0.22);
  background: #ffffff;
  box-shadow: 0 9px 18px rgba(17, 17, 17, 0.08);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.support-donation-paypal .chip-button:is(:hover, :focus-visible) {
  border-color: rgba(17, 17, 17, 0.42);
  background: #ffffff;
  outline: none;
  transform: translateY(-1px);
}

.support-donation-paypal .chip-button.is-selected {
  border-color: #111111;
  background: #111111;
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.16);
}

.support-donation-paypal .chip-button strong,
.support-donation-paypal .chip-button.is-selected strong {
  color: #111111;
  font-size: clamp(1.82rem, 3.2vw, 2.55rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.support-donation-paypal .chip-button span,
.support-donation-paypal .chip-button.is-selected span {
  color: rgba(17, 24, 39, 0.68);
  font-weight: 780;
  line-height: 1.34;
}

.support-donation-paypal .chip-button.is-selected strong,
.support-donation-paypal .chip-button.is-selected span {
  color: #ffffff;
}

.support-donation-paypal .chip-button .support-preset-badge,
.support-donation-paypal .chip-button.is-selected .support-preset-badge {
  position: absolute;
  top: -19px;
  left: 50%;
  z-index: 2;
  width: max-content;
  max-width: calc(100% + 22px);
  padding: 5px 12px 6px;
  border-radius: 999px;
  background: #ffd344;
  color: #050505;
  font-size: clamp(0.72rem, 1.2vw, 0.86rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: none;
  box-shadow: 0 8px 14px rgba(17, 17, 17, 0.12);
  transform: translateX(-50%);
}

.support-donation-paypal .field {
  gap: 14px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.support-donation-paypal .field input {
  background: #ffffff;
}

.support-custom-amount-field {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 280px);
  align-items: center;
  justify-content: stretch;
  max-width: none;
  padding: 18px 20px;
  border: 2px solid rgba(17, 17, 17, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 22px rgba(17, 17, 17, 0.06);
}

.support-donation-paypal .support-custom-amount-field {
  gap: 18px;
  padding: 18px 20px;
  border: 2px solid rgba(17, 17, 17, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.support-custom-amount-field label {
  color: #111111;
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.support-donation-paypal .support-custom-amount-field label {
  color: #111111;
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  font-weight: 920;
  letter-spacing: 0;
  line-height: 1.15;
}

.support-custom-amount-field input {
  width: 100%;
  min-height: 66px;
  border-width: 2px;
  border-color: rgba(17, 17, 17, 0.28);
  border-radius: 12px;
  font-size: 1.34rem;
  font-weight: 900;
}

.support-donation-paypal .support-custom-amount-field input {
  min-height: 66px;
  padding: 16px 18px;
  border: 2px solid rgba(17, 17, 17, 0.28);
  border-radius: 12px;
  background: #ffffff;
  color: #111111;
  font-size: 1.34rem;
  font-weight: 900;
}

.support-amount-stack {
  display: grid;
  gap: 20px;
}

.support-impact-card {
  position: relative;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-height: 158px;
  padding: 10px 16px 10px 10px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  background: #f4f1ea;
}

.support-impact-card::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 22px solid transparent;
  border-bottom: 22px solid #f4f1ea;
  border-left: 22px solid transparent;
  transform: translateX(-50%);
}

.support-impact-visual {
  position: relative;
  display: block;
  width: 138px;
  height: 138px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff8de;
  box-shadow: 0 10px 20px rgba(17, 17, 17, 0.1);
}

.support-impact-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support-impact-illustration {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #111111;
  border-radius: inherit;
  background: #ffd03b;
}

.support-impact-illustration::before {
  content: "";
  position: absolute;
  left: 17px;
  bottom: 18px;
  width: 44px;
  height: 25px;
  border: 4px solid #111111;
  border-top: 0;
  border-radius: 0 0 999px 999px;
}

.support-impact-illustration::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #111111;
  box-shadow: 17px -4px 0 #111111, 34px 2px 0 #111111;
}

.support-impact-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.support-impact-copy small {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-impact-copy strong {
  color: #111111;
  font-size: clamp(1.02rem, 1.8vw, 1.24rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.28;
}

.support-donate-now-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 76px;
  width: 100%;
  padding: 0 26px;
  border: 2px solid #111111;
  border-radius: 999px;
  background: #111111;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.support-donate-now-button:is(:hover, :focus-visible) {
  border-color: #111111;
  background: #ffd03b;
  color: #111111;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(17, 17, 17, 0.16);
}

.support-donate-now-button:disabled {
  cursor: not-allowed;
  opacity: 0.54;
  transform: none;
  box-shadow: none;
}

.support-payment-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 17, 17, 0.42);
  backdrop-filter: blur(8px);
  isolation: isolate;
}

.support-payment-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(720px, 100%);
  gap: 18px;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 24px;
  background: #fffef8;
  box-shadow: 0 28px 80px rgba(17, 17, 17, 0.22);
}

.support-payment-sheet h3 {
  margin: 0 34px 8px;
  color: #111111;
  font-size: clamp(1.65rem, 4vw, 2.8rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
  text-align: center;
}

.support-payment-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: #111111;
}

.support-payment-sheet-close:is(:hover, :focus-visible) {
  background: #ffffff;
  outline: none;
}

.support-payment-option-card,
.support-payment-option-paypal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(40px, 0.14fr);
  align-items: center;
  min-height: 74px;
  width: 100%;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
  transition: transform 140ms ease, filter 140ms ease, background 140ms ease;
}

.support-payment-option-card:is(:hover, :focus-visible), .support-payment-option-paypal:is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-1px);
}

.support-payment-option-card:disabled,
.support-payment-option-paypal:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

.support-payment-option-card {
  border: 2px solid #111111;
  background: #111111;
  color: #ffffff;
}

.support-payment-option-card:is(:hover, :focus-visible) {
  filter: brightness(0.94);
}

.support-payment-option-card strong {
  justify-self: center;
  color: #ffffff;
  font: inherit;
}

.support-payment-option-copy {
  justify-self: center;
  display: grid;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  color: inherit;
}

.support-payment-option-copy strong {
  justify-self: center;
}

.support-payment-option-copy small {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(0.72rem, 1.15vw, 0.9rem);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.support-payment-option-card > span:last-child {
  justify-self: end;
}

.support-payment-option-paypal {
  grid-template-columns: 1fr;
  justify-items: center;
  border: 2px solid #111111;
  background: #ffffff;
  color: #111111;
}

.support-payment-option-paypal:is(:hover, :focus-visible) {
  background: #fffdf7;
}

.support-payment-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.support-payment-actions.has-paypal {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-brand-pay-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 72px;
  padding: 16px 18px;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  text-align: left;
  box-shadow: none;
  transition: filter 140ms ease, transform 140ms ease;
}

.support-brand-pay-button:is(:hover, :focus-visible) {
  filter: brightness(0.96);
  outline: none;
  transform: translateY(-1px);
}

.support-brand-pay-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.2);
  opacity: 0.62;
  transform: none;
}

.support-brand-pay-button > span:last-child:not(:first-child) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.support-brand-pay-button strong,
.support-brand-pay-button small {
  color: currentColor;
  line-height: 1.1;
}

.support-brand-pay-button strong {
  font-size: 1rem;
  font-weight: 950;
}

.support-brand-pay-button small {
  font-size: 0.78rem;
  font-weight: 760;
  opacity: 0.74;
}

.support-brand-pay-mark {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1;
}

.support-brand-pay-button-stripe {
  background: #635bff;
}

.support-brand-pay-button-paypal {
  background: #ffc439;
  color: #111111;
}

.support-paypal-wordmark {
  display: inline-flex;
  gap: 0;
  align-items: baseline;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.support-paypal-wordmark span:first-child {
  color: #003087;
}

.support-paypal-wordmark span:last-child {
  color: #009cde;
}

.support-donation-paypal .paypal-checkout-button {
  min-height: 58px;
  border-radius: 8px;
  background: #111111;
  color: #ffffff;
}

.support-donation-paypal .paypal-checkout-button:is(:hover, :focus-visible) {
  background: #000000;
}

.support-donation-paypal .paypal-checkout-amount {
  border-color: var(--brand);
  background: var(--brand);
  color: #111111;
}

.support-alt-payment-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.support-alt-payment-button {
  min-height: 46px;
  border-radius: 8px;
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.74);
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: none;
}

.support-alt-payment-button:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.22);
  background: #ffffff;
  color: var(--foreground);
  outline: none;
}

.support-donation-secondary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: min(1050px, calc(100% - 32px));
  margin-inline: auto;
}

.support-donation-secondary-card,
.support-donation-secondary-bank .bank-transfer-card {
  min-height: 132px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: none;
}

.support-donation-secondary-card {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--foreground);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.support-donation-secondary-card:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: #ffffff;
  color: var(--foreground);
  outline: none;
  transform: translateY(-1px);
}

.support-donation-patreon-card {
  border-color: rgba(255, 200, 0, 0.4);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 0, 0.22), transparent 34%),
    linear-gradient(135deg, #fff9db 0%, #fffef8 64%, #fff3b5 100%);
}

.support-donation-patreon-card:is(:hover, :focus-visible) {
  border-color: rgba(17, 17, 17, 0.28);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 0, 0.3), transparent 36%),
    linear-gradient(135deg, #fff4b8 0%, #fffdf3 62%, #ffe27a 100%);
}

.support-donation-patreon-card span {
  color: rgba(17, 17, 17, 0.62);
}

.support-donation-patreon-card small {
  color: rgba(17, 17, 17, 0.68);
}

.support-donation-secondary-card span {
  color: var(--foreground-muted);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-donation-secondary-card strong {
  color: var(--foreground);
  font-size: clamp(1.14rem, 2vw, 1.52rem);
  font-weight: 950;
  line-height: 1.04;
}

.support-donation-secondary-card small {
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.35;
}

.support-donation-secondary-card.support-donation-patreon-card span {
  color: rgba(17, 17, 17, 0.62);
}

.support-donation-secondary-card.support-donation-patreon-card small {
  color: rgba(17, 17, 17, 0.68);
}

.support-donation-secondary-bank .bank-transfer-card summary {
  min-height: 132px;
  padding: 20px;
}

.support-donation-secondary-bank .bank-transfer-card[open] summary {
  min-height: auto;
}

.support-donation-secondary-bank .bank-transfer-summary-title {
  font-size: clamp(1.14rem, 2vw, 1.52rem);
  line-height: 1.04;
}

.support-donation-secondary-bank .bank-transfer-open-label {
  background: #111111;
  color: #ffffff;
}

.support-field-photo-band {
  --support-field-gutter: max(clamp(26px, 4vw, 42px), calc((100vw - var(--content-max)) / 2 + clamp(26px, 4vw, 42px)));
  display: grid;
  grid-template-columns: minmax(300px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: center;
  min-height: clamp(520px, 38vw, 740px);
  width: 100%;
  justify-self: stretch;
  margin-top: clamp(24px, 4vw, 52px);
  padding: clamp(52px, 7vw, 104px) var(--support-field-gutter);
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 9% 12%, rgba(255, 211, 68, 0.28), transparent 30%),
    linear-gradient(135deg, #fff8dc 0%, #fffdf7 100%);
  overflow: hidden;
}

.support-field-photo-copy {
  display: grid;
  gap: 14px;
  max-width: 560px;
}

.support-field-photo-copy .eyebrow {
  color: rgba(17, 17, 17, 0.58);
}

.support-field-photo-copy h2 {
  margin: 0;
  color: #111111;
  font-size: clamp(1.9rem, 3.6vw, 3.65rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
}

.support-field-photo-copy p {
  max-width: 45ch;
  margin: 0;
  color: rgba(17, 24, 39, 0.72);
  font-size: clamp(0.98rem, 1.35vw, 1.12rem);
  font-weight: 680;
  line-height: 1.48;
}

.support-field-photo-rail {
  display: grid;
  align-items: stretch;
  grid-auto-columns: clamp(240px, 18vw, 380px);
  grid-auto-flow: column;
  gap: clamp(14px, 1.2vw, 22px);
  width: calc(100% + var(--support-field-gutter));
  margin-right: calc(var(--support-field-gutter) * -1);
  padding: 8px var(--support-field-gutter) 18px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 0 var(--support-field-gutter);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(17, 17, 17, 0.3) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 54px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 54px), transparent 100%);
  cursor: grab;
}

.support-field-photo-rail:active {
  cursor: grabbing;
}

.support-field-photo-rail::-webkit-scrollbar,
.support-public-record-rail::-webkit-scrollbar {
  height: 7px;
}

.support-field-photo-rail::-webkit-scrollbar-track,
.support-public-record-rail::-webkit-scrollbar-track {
  background: transparent;
}

.support-field-photo-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.3);
}

.support-field-photo-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 22px;
  background: #111111;
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.12);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.support-field-photo-item:is(:hover, :focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(17, 17, 17, 0.18);
}

.support-field-photo-item img {
  object-fit: cover;
  transition: transform 220ms ease;
}

.support-field-photo-item:is(:hover, :focus-visible) img {
  transform: scale(1.035);
}

.support-public-record-band {
  --support-record-gutter: max(clamp(36px, 6vw, 72px), calc((100vw - var(--content-max)) / 2 + clamp(36px, 6vw, 72px)));
  display: grid;
  grid-template-columns: minmax(320px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(34px, 5vw, 88px);
  align-items: center;
  min-height: clamp(520px, 34vw, 700px);
  width: 100%;
  justify-self: stretch;
  margin-top: -24px;
  padding: clamp(56px, 7vw, 96px) var(--support-record-gutter);
  border-radius: 0;
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 211, 68, 0.26), transparent 28%),
    linear-gradient(135deg, #874017 0%, #9d4518 100%);
  color: #ffffff;
  overflow: hidden;
}

.support-public-record-copy {
  display: grid;
  gap: 20px;
  max-width: 680px;
}

.support-public-record-copy .eyebrow {
  color: #ffd344;
}

.support-public-record-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.65rem, 2.4vw, 3.1rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.support-public-record-copy p {
  max-width: 52ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(0.96rem, 1.15vw, 1.08rem);
  font-weight: 620;
  line-height: 1.52;
}

.support-public-record-copy ul {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.support-public-record-copy li {
  position: relative;
  padding-left: 28px;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.95rem, 1.08vw, 1.04rem);
  font-weight: 720;
  line-height: 1.42;
}

.support-public-record-copy li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #ffd344;
}

.support-public-record-rail {
  display: grid;
  align-items: stretch;
  grid-auto-columns: clamp(340px, 24vw, 520px);
  grid-auto-flow: column;
  gap: clamp(18px, 1.4vw, 26px);
  width: calc(100% + var(--support-record-gutter));
  margin-right: calc(var(--support-record-gutter) * -1);
  padding: 12px var(--support-record-gutter) 22px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 0 var(--support-record-gutter);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(255, 211, 68, 0.68) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 62px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 62px), transparent 100%);
  cursor: grab;
}

.support-public-record-rail:active {
  cursor: grabbing;
}

.support-public-record-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 211, 68, 0.68);
}

.support-public-record-card {
  display: grid;
  grid-template-rows: 240px minmax(210px, auto);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  background: rgba(255, 254, 248, 0.96);
  color: #111111;
  text-decoration: none;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.support-public-record-card:is(:hover, :focus-visible) {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.24);
}

.support-public-record-media {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #111111;
}

.support-public-record-media img {
  object-fit: cover;
  transition: transform 220ms ease;
}

.support-public-record-card:is(:hover, :focus-visible) .support-public-record-media img {
  transform: scale(1.035);
}

.support-public-record-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 24px;
}

.support-public-record-body small {
  color: rgba(17, 17, 17, 0.58);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.support-public-record-body strong {
  color: #111111;
  font-size: clamp(1.24rem, 2vw, 1.58rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
}

.support-public-record-body span {
  color: rgba(17, 24, 39, 0.72);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.45;
}

html[data-theme="dark"] .support-public-record-band {
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 211, 68, 0.22), transparent 28%),
    linear-gradient(135deg, #6f3413 0%, #8d3c14 100%);
}

html[data-theme="dark"] .support-field-photo-band {
  background:
    radial-gradient(circle at 9% 12%, rgba(255, 211, 68, 0.14), transparent 30%),
    linear-gradient(135deg, #161616 0%, #0d0d0d 100%);
}

html[data-theme="dark"] .support-field-photo-copy .eyebrow {
  color: rgba(255, 211, 68, 0.86);
}

html[data-theme="dark"] .support-field-photo-copy h2 {
  color: #ffffff;
}

html[data-theme="dark"] .support-field-photo-copy p {
  color: rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] .support-field-photo-item {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .support-public-record-card,
html[data-theme="dark"] .support-public-record-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 254, 248, 0.96);
  color: #111111;
}

html[data-theme="dark"] .support-public-record-body small {
  color: rgba(17, 17, 17, 0.58);
}

html[data-theme="dark"] .support-public-record-body strong {
  color: #111111;
}

html[data-theme="dark"] .support-public-record-body span {
  color: rgba(17, 24, 39, 0.72);
}

.support-stripe-disclaimer {
  max-width: 52ch;
  margin: 0;
}

.support-donation-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.support-route-card {
  display: grid;
  min-height: 144px;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.support-route-card:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.035);
  outline: none;
  transform: translateY(-2px);
}

.support-route-card > span {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.support-route-card > strong {
  display: block;
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.04;
}

.support-route-card > small {
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 680;
  line-height: 1.45;
}

.support-route-card-monthly {
  border-color: #111111;
  background: #111111;
  color: #ffffff;
}

.support-route-card-monthly > strong {
  color: #ffffff;
}

.support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: #000000;
  background: #000000;
}

.support-donation-side .bank-transfer-card {
  min-height: 144px;
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
  box-shadow: none;
}

.support-donation-side .bank-transfer-card summary {
  min-height: 144px;
  padding: 20px;
}

.support-donation-side .bank-transfer-card[open] summary {
  min-height: auto;
}

.support-donation-side .bank-transfer-summary-title {
  font-size: clamp(1.18rem, 2vw, 1.56rem);
  line-height: 1.04;
}

.support-donation-side .bank-transfer-open-label {
  background: #111111;
  color: #ffffff;
}

.support-entry-copy {
  display: grid;
  max-width: 720px;
  gap: 7px;
}

.support-entry-copy > strong {
  font-size: clamp(1.72rem, 3vw, 2.55rem);
  letter-spacing: 0;
  line-height: 1.04;
}

.support-entry-copy > p {
  max-width: 58ch;
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.98rem;
  font-weight: 680;
  line-height: 1.52;
}

.support-entry-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.support-entry-option {
  display: grid;
  min-width: 0;
  min-height: 136px;
  align-content: start;
  gap: 7px;
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: transparent;
  color: var(--foreground);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

.support-entry-option:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.035);
  outline: none;
}

.support-entry-option > span {
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.support-entry-option > strong {
  display: block;
  color: var(--foreground);
  font-size: 1.08rem;
  letter-spacing: 0;
  line-height: 1.12;
}

.support-entry-option > small {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 680;
  line-height: 1.42;
}

.support-entry-option-primary {
  border-color: rgba(15, 23, 42, 0.16);
}

.support-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.08);
}

.support-trust-strip span {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 13px 14px;
  background: #ffffff;
}

.support-trust-strip strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.12;
}

.support-trust-strip small {
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 680;
  letter-spacing: 0;
  line-height: 1.42;
}

html[data-theme="dark"] .support-entry-option {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #ffffff;
}

html[data-theme="dark"] .support-entry-option:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .support-entry-option > span,
html[data-theme="dark"] .support-entry-option > small {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-entry-option > strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-hero {
  border-color: transparent;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 200, 0, 0.1), transparent 25%),
    linear-gradient(180deg, #050505 0%, #000000 100%);
}

html[data-theme="dark"] .support-donation-hero::after {
  background:
    linear-gradient(135deg, transparent 0 18px, #000000 18px 32px, transparent 32px 42px) 0 0 / 92px 78px repeat-x,
    linear-gradient(24deg, transparent 0 16px, #000000 16px 31px, transparent 31px 45px) 0 10px / 110px 76px repeat-x;
  opacity: 1;
}

html[data-theme="dark"] .support-donation-copy h1,
html[data-theme="dark"] .support-donation-paypal .eyebrow,
html[data-theme="dark"] .support-route-card > strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-copy p:not(.eyebrow),
html[data-theme="dark"] .support-donation-paypal h3,
html[data-theme="dark"] .support-route-card > span,
html[data-theme="dark"] .support-route-card > small {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-donation-paypal,
html[data-theme="dark"] .support-route-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}

html[data-theme="dark"] .support-donation-paypal {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .support-donation-paypal.support-stripe-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #050505;
}

html[data-theme="dark"] .support-donation-paypal .chip-button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-checkout-controls,
html[data-theme="dark"] .support-checkout-section {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .support-control-label {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-selected-amount {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

html[data-theme="dark"] .support-selected-amount strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-selected-amount span,
html[data-theme="dark"] .support-selected-amount small,
html[data-theme="dark"] .support-checkout-section-heading span {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-stripe-mode-toggle button {
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-stripe-mode-toggle {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-stripe-mode-toggle button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

html[data-theme="dark"] .support-stripe-mode-toggle button.is-selected {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle {
  background: transparent;
  border-color: transparent;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle button {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle button:is(:hover, :focus-visible), html[data-theme="dark"] .support-stripe-mode-toggle.support-stripe-currency-toggle button.is-selected {
  background: transparent;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-frequency-toggle {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-frequency-toggle button.is-selected {
  background: #ffffff;
  color: #111111;
  box-shadow: none;
}

html[data-theme="dark"] .support-stripe-mode-toggle.support-frequency-toggle button.is-selected::after {
  border-top-color: #ffffff;
}

html[data-theme="dark"] .support-donation-paypal .chip-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .support-donation-paypal .chip-button strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-paypal .chip-button span {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected {
  border-color: #ffffff;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected strong {
  color: #111111;
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected span {
  color: rgba(17, 17, 17, 0.64);
}

html[data-theme="dark"] .support-impact-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #111111;
}

html[data-theme="dark"] .support-impact-card::before {
  border-bottom-color: #111111;
}

html[data-theme="dark"] .support-impact-illustration {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-impact-copy small {
  color: rgba(255, 255, 255, 0.58);
}

html[data-theme="dark"] .support-impact-copy strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donate-now-button {
  border-color: var(--brand);
  background: var(--brand);
  color: #111111;
  box-shadow: 0 18px 36px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .support-donate-now-button:is(:hover, :focus-visible) {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

html[data-theme="dark"] .support-alt-payment-button {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

html[data-theme="dark"] .support-alt-payment-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-secondary-card,
html[data-theme="dark"] .support-donation-secondary-bank .bank-transfer-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-donation-secondary-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .support-donation-secondary-card strong,
html[data-theme="dark"] .support-donation-secondary-bank .bank-transfer-summary-title {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-secondary-card span,
html[data-theme="dark"] .support-donation-secondary-card small {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] .support-donation-patreon-card,
html[data-theme="dark"] .support-donation-patreon-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 200, 0, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.16) 0%, rgba(255, 255, 255, 0.065) 64%, rgba(255, 200, 0, 0.1) 100%);
}

html[data-theme="dark"] .support-donation-secondary-card.support-donation-patreon-card span,
html[data-theme="dark"] .support-donation-secondary-card.support-donation-patreon-card small {
  color: rgba(255, 236, 170, 0.72);
}

html[data-theme="dark"] .support-donation-secondary-card.support-donation-patreon-card strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-donation-secondary-bank .bank-transfer-open-label {
  background: #ffffff;
  color: #111111;
}

html[data-theme="dark"] .support-donation-paypal .field {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .support-donation-paypal .field input {
  background: #050505;
}

html[data-theme="dark"] .support-donation-paypal .support-custom-amount-field {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

html[data-theme="dark"] .support-custom-amount-field label {
  color: #ffffff;
}

html[data-theme="dark"] .support-custom-amount-field input {
  border-color: rgba(255, 255, 255, 0.24);
  background: #050505;
  color: #ffffff;
}

html[data-theme="dark"] .support-route-card-monthly {
  border-color: #ffffff;
  background: #ffffff;
}

html[data-theme="dark"] .support-route-card-monthly > strong {
  color: #111111;
}

html[data-theme="dark"] .support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-donation-side .bank-transfer-card {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0a0a0a;
}

html[data-theme="dark"] .support-route-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-trust-strip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .support-trust-strip span {
  background: #101010;
}

html[data-theme="dark"] .support-trust-strip strong {
  color: #ffffff;
}

html[data-theme="dark"] .support-trust-strip small {
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 760px) {
  .support-donation-hero {
    min-height: auto;
    padding: clamp(44px, 7vw, 76px) clamp(18px, 5vw, 42px) clamp(54px, 7vw, 82px);
  }

  .support-donation-hero::after {
    top: 39%;
  }

  .support-donation-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(760px, 100%);
    gap: clamp(24px, 4vw, 38px);
  }

  .support-donation-copy {
    justify-self: center;
    max-width: min(650px, 100%);
    padding-top: 0;
    text-align: center;
  }

  .support-donation-copy p:not(.eyebrow) {
    margin-inline: auto;
  }

  .support-donation-main,
  .support-donation-paypal.support-stripe-card {
    width: 100%;
  }

  .support-donation-paypal .chip-button {
    min-height: 84px;
  }
}

@media (max-width: 720px) {
  .support-donation-hero {
    min-height: auto;
    margin-top: 0;
    padding: 34px max(16px, env(safe-area-inset-right)) 46px max(16px, env(safe-area-inset-left));
    background:
      radial-gradient(circle at 22% 10%, rgba(255, 255, 255, 0.15), transparent 30%),
      linear-gradient(180deg, #ffcf35 0%, #ffd03b 100%);
  }

  .support-donation-hero::after {
    top: 34%;
    height: 52px;
    background:
      linear-gradient(135deg, transparent 0 13px, #fff3cf 13px 23px, transparent 23px 32px) 0 0 / 74px 52px repeat-x,
      linear-gradient(24deg, transparent 0 12px, #fff3cf 12px 23px, transparent 23px 34px) 0 8px / 88px 50px repeat-x;
  }

  html[data-theme="dark"] .support-donation-hero {
    background:
      radial-gradient(circle at 22% 10%, rgba(255, 200, 0, 0.1), transparent 30%),
      linear-gradient(180deg, #050505 0%, #000000 100%);
  }

  html[data-theme="dark"] .support-donation-hero::after {
    background:
      linear-gradient(135deg, transparent 0 13px, #000000 13px 23px, transparent 23px 32px) 0 0 / 74px 52px repeat-x,
      linear-gradient(24deg, transparent 0 12px, #000000 12px 23px, transparent 23px 34px) 0 8px / 88px 50px repeat-x;
  }

  .support-donation-copy {
    max-width: 100%;
    gap: 12px;
    padding-top: 4px;
    text-align: left;
  }

  .support-donation-copy h1 {
    font-size: clamp(2.25rem, 9.6vw, 3.05rem);
    white-space: nowrap;
  }

  .support-donation-copy p:not(.eyebrow) {
    max-width: 34ch;
    font-size: 1.02rem;
  }

  .support-donation-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .support-donation-paypal.support-stripe-card {
    width: 100%;
    gap: 22px;
    padding: 20px 14px;
    border-radius: 18px;
  }

  .support-checkout-controls,
  .support-payment-actions.has-paypal {
    grid-template-columns: 1fr;
  }

  .support-control-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .support-donation-paypal .support-stripe-preset-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .support-donation-paypal .chip-button {
    min-height: 68px;
    padding: 12px 8px;
    border-radius: 10px;
  }

  .support-donation-paypal .chip-button strong,
  .support-donation-paypal .chip-button.is-selected strong {
    font-size: clamp(1.12rem, 5.8vw, 1.58rem);
  }

  .support-donation-paypal .chip-button span,
  .support-donation-paypal .chip-button.is-selected span {
    font-size: 0.78rem;
  }

  .support-impact-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    min-height: 108px;
    padding: 10px 12px 10px 10px;
    border-radius: 14px;
  }

  .support-impact-visual {
    width: 88px;
    height: 88px;
    border-radius: 12px;
  }

  .support-impact-illustration {
    border-radius: 18px;
  }

  .support-impact-illustration::before {
    left: 13px;
    bottom: 14px;
    width: 32px;
    height: 18px;
    border-width: 3px;
  }

  .support-impact-illustration::after {
    top: 15px;
    left: 15px;
    width: 7px;
    height: 7px;
    box-shadow: 13px -3px 0 #111111, 26px 2px 0 #111111;
  }

  .support-impact-copy strong {
    font-size: 0.95rem;
  }

  .support-custom-amount-field {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 12px;
    padding: 16px;
  }

  .support-donation-paypal .support-custom-amount-field {
    gap: 12px;
    padding: 16px;
  }

  .support-custom-amount-field input {
    min-height: 58px;
    font-size: 1.14rem;
  }

  .support-donation-paypal .support-custom-amount-field input {
    min-height: 58px;
    padding: 13px 15px;
    font-size: 1.14rem;
  }

  .support-payment-sheet {
    gap: 14px;
    padding: 22px 16px;
  }

  .support-payment-option-card {
    grid-template-columns: minmax(0, 1fr) 28px;
    min-height: 64px;
    padding: 8px 14px;
  }

  .support-payment-option-copy small {
    font-size: 0.68rem;
  }

  .support-payment-option-paypal {
    min-height: 62px;
  }

  .support-donation-secondary-grid,
  .support-alt-payment-row {
    grid-template-columns: 1fr;
  }

  .support-field-photo-band {
    grid-template-columns: 1fr;
    gap: 22px;
    min-height: auto;
    width: 100%;
    justify-self: stretch;
    margin-top: 0;
    padding: 24px 18px 20px;
    border: 0;
  }

  .support-field-photo-copy {
    gap: 12px;
  }

  .support-field-photo-copy h2 {
    font-size: clamp(2rem, 10vw, 3.2rem);
  }

  .support-field-photo-copy p {
    font-size: 0.96rem;
  }

  .support-field-photo-rail {
    grid-auto-columns: minmax(190px, 72vw);
    width: calc(100% + 18px);
    margin-right: -18px;
    padding: 2px 18px 12px 0;
    scroll-padding-inline: 0 18px;
  }

  .support-field-photo-item {
    border: 0;
    border-radius: 18px;
  }

  .support-public-record-band {
    grid-template-columns: 1fr;
    gap: 28px;
    min-height: auto;
    width: 100%;
    justify-self: stretch;
    margin-top: -24px;
    padding: 28px 18px 22px;
    border: 0;
  }

  .support-public-record-copy {
    gap: 14px;
  }

  .support-public-record-copy h2 {
    font-size: clamp(1.75rem, 8.5vw, 2.85rem);
  }

  .support-public-record-copy p,
  .support-public-record-copy li {
    font-size: 0.96rem;
  }

  .support-public-record-rail {
    grid-auto-columns: minmax(260px, 82vw);
    width: calc(100% + 18px);
    margin-right: -18px;
    padding: 4px 18px 14px 0;
    scroll-padding-inline: 0 18px;
  }

  .support-public-record-card {
    grid-template-rows: 196px minmax(184px, auto);
    border: 0;
    border-radius: 20px;
  }

  .support-public-record-body {
    gap: 10px;
    padding: 18px;
  }

  .support-route-card {
    min-height: auto;
  }

  .support-entry-actions {
    grid-template-columns: 1fr;
  }

  .support-entry-option {
    min-height: auto;
  }

  .support-trust-strip {
    grid-template-columns: 1fr;
  }

  .rescue-search-destinations {
    grid-template-columns: 1fr;
  }
}

.rescue-search-intro {
  align-items: start;
}

.rescue-search-results-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
  gap: 18px;
  align-items: end;
  padding: 2px 0 6px;
}

.rescue-search-results-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.rescue-search-results-copy h1 {
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.08;
}

.rescue-search-results-copy p:not(.eyebrow) {
  max-width: 56ch;
  color: var(--foreground-muted);
  font-size: 0.94rem;
  font-weight: 720;
  line-height: 1.5;
}

.rescue-search-page-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: min(100%, 760px);
  align-items: center;
}

.rescue-search-page-form.has-clear {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.rescue-search-page-form input {
  min-width: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  font: inherit;
  font-size: 0.96rem;
  font-weight: 760;
  letter-spacing: 0;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.rescue-search-page-form input:focus-visible {
  border-color: rgba(11, 105, 183, 0.36);
  box-shadow: 0 0 0 4px rgba(11, 105, 183, 0.12);
}

.rescue-search-page-form input::placeholder {
  color: rgba(15, 23, 42, 0.44);
}

.rescue-search-page-form .button {
  gap: 8px;
  min-height: 44px;
}

.rescue-search-clear-link {
  white-space: nowrap;
}

.rescue-search-summary {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.92rem;
  font-weight: 780;
  letter-spacing: 0;
}

.rescue-search-results {
  align-items: stretch;
}

.rescue-search-empty strong {
  color: var(--foreground);
  font-size: 1.02rem;
  letter-spacing: 0;
}

.rescue-search-destinations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.rescue-search-destinations a {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.rescue-search-destinations a:is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.2);
  background: rgba(15, 23, 42, 0.035);
  outline: none;
  transform: translateY(-1px);
}

.rescue-search-destinations strong {
  font-size: 0.9rem;
  line-height: 1.15;
}

.rescue-search-destinations span {
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 680;
  line-height: 1.38;
}

html[data-theme="dark"] .rescue-search-destinations a {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .rescue-search-destinations a:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .rescue-search-destinations span {
  color: rgba(255, 255, 255, 0.62);
}

.bank-transfer-card {
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: transparent;
}

.bank-transfer-card summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  cursor: pointer;
  list-style: none;
}

.bank-transfer-card summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.bank-transfer-card summary::-webkit-details-marker {
  display: none;
}

.bank-transfer-card strong,
.bank-transfer-card p,
.bank-transfer-card dl {
  margin: 0;
}

.bank-transfer-card strong {
  display: block;
  margin-top: 3px;
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.25;
}

.bank-transfer-summary-title {
  display: block;
  margin-top: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.18;
}

.bank-transfer-open-label {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground-muted);
  font-size: 0.74rem;
  font-weight: 900;
}

.bank-transfer-card[open] .bank-transfer-open-label {
  background: var(--foreground);
  color: #ffffff;
}

.bank-transfer-panel {
  display: grid;
  gap: 12px;
  padding: 0 16px 16px;
}

.bank-transfer-card p {
  margin-top: 4px;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.bank-transfer-details {
  display: grid;
  gap: 8px;
}

.bank-transfer-details div {
  display: grid;
  grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.bank-transfer-details dt {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bank-transfer-details dd {
  margin: 0;
  color: var(--foreground);
  font-weight: 900;
  overflow-wrap: anywhere;
}

.loading-page {
  padding-top: 10px;
}

body:has(.loading-page) .site-sidebar,
body:has(.loading-page) .site-overlay,
body:has(.loading-page) .mobile-nav-toggle {
  display: none !important;
}

body:has(.loading-page) .site-main-shell {
  min-height: 100svh;
  margin-left: 0 !important;
}

body:has(.loading-page) .site-main {
  --site-main-top: 0px;
  min-height: 100svh;
  padding-top: 0 !important;
}

.loading-shell {
  gap: 18px;
}

.loading-hero {
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 222, 0.96) 100%);
}

.loading-status-card {
  gap: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 251, 0.98) 100%);
}

.site-main-shell-soft-record .loading-page {
  background: transparent;
}

.site-main-shell-soft-record .loading-hero {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 247, 0.96) 100%);
}

.loading-status-list,
.loading-card-grid,
.loading-card-body {
  display: grid;
}

.loading-status-list {
  gap: 12px;
}

.loading-status-row,
.loading-tag-row,
.loading-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loading-card-grid {
  gap: 16px;
}

.loading-card {
  gap: 14px;
  min-height: 100%;
  overflow: hidden;
}

.loading-thumb {
  width: calc(100% + 48px);
  height: 180px;
  margin: -24px -24px 0;
  border-radius: 24px 24px 18px 18px;
  background: #e9eef5;
}

.loading-card-body {
  gap: 12px;
}

.loading-pill,
.loading-line,
.loading-dot,
.loading-chip,
.loading-thumb {
  position: relative;
  overflow: hidden;
  background: #e8edf4;
}

.loading-pill,
.loading-chip {
  height: 28px;
  border-radius: 999px;
}

.loading-pill {
  width: 76px;
}

.loading-pill-wide {
  width: 108px;
}

.loading-chip {
  width: 48px;
  flex-shrink: 0;
}

.loading-line {
  height: 12px;
  border-radius: 999px;
}

.loading-line-title {
  width: 72%;
  height: 22px;
}

.loading-line-long {
  width: 100%;
}

.loading-line-medium {
  width: 72%;
}

.loading-line-short {
  width: 46%;
}

.loading-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex-shrink: 0;
}

.loading-meta-row {
  margin-top: auto;
}

.loading-shimmer::after,
.loading-line::after,
.loading-dot::after,
.loading-pill::after,
.loading-chip::after,
.loading-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.82) 50%, transparent 100%);
  animation: loading-shimmer 1.5s ease-in-out infinite;
}

@keyframes loading-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.home-hero-band {
  padding-top: 12px;
}

.recognition-ticker-band {
  --recognition-ticker-duration: 96s;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.recognition-ticker-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  background: var(--foreground);
  color: #ffffff;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.recognition-ticker-window {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  color: #172033;
  mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%);
}

.recognition-ticker-track {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: max-content;
  animation: recognition-marquee var(--recognition-ticker-duration) linear infinite;
}

.recognition-ticker-band:hover .recognition-ticker-track {
  animation-play-state: paused;
}

.recognition-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  color: #172033;
  white-space: nowrap;
}

.recognition-ticker-item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #172033;
  opacity: 0.36;
}

.recognition-ticker-name {
  font-size: 0.84rem;
  font-weight: 950;
  letter-spacing: 0;
}

.recognition-ticker-kind {
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-foreground);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

@keyframes recognition-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.home-home-stack,
.home-hero-header {
  gap: 18px;
}

.help-room-form-section .field-grid {
  align-items: start;
}

.home-home-highlights,
.home-intro-grid,
.home-card-grid {
  gap: 16px;
}

.home-hero-shell {
  display: grid;
  gap: 18px;
  padding: 18px;
  overflow: hidden;
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.home-hero-shell-copy,
.home-hero-shell-media,
.home-home-highlights {
  display: grid;
}

.home-hero-shell-copy {
  min-width: 0;
}

.home-hero-shell-copy {
  gap: 20px;
  align-content: center;
  padding: 8px 4px;
}

.home-hero-shell-copy h1 {
  max-width: none;
  font-size: clamp(2.65rem, 5vw, 4.85rem);
}

.home-hero-lead {
  max-width: none;
  font-size: 0.96rem;
  line-height: 1.55;
}

.home-hero-media {
  min-height: 248px;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: var(--shadow-soft);
}

.home-hero-media img {
  object-position: 58% center;
}

.home-home-highlights {
  display: grid;
}

.home-feature-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.home-feature-card-pet {
  background: #ffffff;
}

.home-feature-card-video {
  background: #ffffff;
}

.home-feature-media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: 0;
  background: var(--surface-soft);
}

.home-feature-media img {
  object-fit: cover;
}

.home-feature-media-pet::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 18, 26, 0.12) 0%, rgba(13, 18, 26, 0) 34%, rgba(13, 18, 26, 0.52) 100%);
}

.home-feature-media-video {
  display: grid;
  place-items: center;
  isolation: isolate;
  min-height: 390px;
  padding: 18px;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(24, 24, 24, 0.98) 0%, rgba(34, 34, 34, 0.98) 100%);
}

.home-feature-video-bg {
  position: absolute;
  z-index: 0;
  inset: -34px;
  width: calc(100% + 68px);
  height: calc(100% + 68px);
  object-fit: cover;
  opacity: 0.72;
  filter: blur(24px) saturate(1.16) contrast(1.05) brightness(0.72);
  transform: scale(1.04);
  pointer-events: none;
}

.home-feature-media-video::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(10, 12, 16, 0.32) 0%, rgba(10, 12, 16, 0.64) 100%);
}

.home-feature-video-frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  padding-block: 10px;
}

.home-feature-video-embed.story-video-embed-short {
  width: min(100%, 298px);
  max-width: 298px;
  margin-inline: auto;
}

.home-feature-panel {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 20px 20px 22px;
  border-top: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
}

.home-feature-panel-video {
  background: #ffffff;
}

@keyframes studioLoadingBlink {
  0%,
  88%,
  100% {
    transform: scaleY(1);
  }

  91%,
  94% {
    transform: scaleY(0.08);
  }
}

@keyframes studioLoadingCatBreathe {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.018, 0.988);
  }
}

@keyframes studioLoadingSunbeam {
  0%,
  100% {
    opacity: 0.58;
  }

  50% {
    opacity: 0.86;
  }
}

@keyframes studioLoadingLightDrift {
  0%,
  100% {
    opacity: 0.78;
    transform: translateY(0) rotate(-1deg);
  }

  48% {
    opacity: 1;
    transform: translateY(4px) rotate(1deg);
  }
}

@keyframes studioLoadingSpotlightSweep {
  0%,
  100% {
    opacity: 0.16;
    transform: translateX(-8vw) rotate(-15deg) scaleX(0.82);
  }

  28% {
    opacity: 0.58;
    transform: translateX(7vw) rotate(-5deg) scaleX(1);
  }

  58% {
    opacity: 0.34;
    transform: translateX(18vw) rotate(7deg) scaleX(0.92);
  }
}

@keyframes studioLoadingSpotlightSweepAlt {
  0%,
  100% {
    opacity: 0.12;
    transform: translateX(8vw) rotate(15deg) scaleX(0.84);
  }

  34% {
    opacity: 0.48;
    transform: translateX(-5vw) rotate(4deg) scaleX(1);
  }

  64% {
    opacity: 0.28;
    transform: translateX(-18vw) rotate(-8deg) scaleX(0.9);
  }
}

@keyframes studioLoadingSpotlightCenter {
  0%,
  100% {
    opacity: 0.1;
    transform: translateY(-3vh) rotate(-2deg) scaleX(0.86);
  }

  45% {
    opacity: 0.36;
    transform: translateY(2vh) rotate(3deg) scaleX(1.04);
  }
}

@keyframes studioLoadingBloomDrift {
  0%,
  100% {
    opacity: 0.18;
    transform: translate3d(-10px, 8px, 0) scale(0.92);
  }

  45% {
    opacity: 0.62;
    transform: translate3d(18px, -14px, 0) scale(1.08);
  }

  72% {
    opacity: 0.34;
    transform: translate3d(6px, -4px, 0) scale(0.98);
  }
}

@keyframes studioLoadingScan {
  0%,
  34% {
    transform: translateX(-118%);
  }

  62%,
  100% {
    transform: translateX(118%);
  }
}

@keyframes studioLoadingFilmCue {
  0%,
  100% {
    opacity: 0.34;
    transform: translateY(0);
  }

  42% {
    opacity: 0.9;
    transform: translateY(-2px);
  }
}

@keyframes studioLoadingCueFloat {
  0%,
  100% {
    opacity: 0.62;
    transform: translateY(0) scale(0.94);
  }

  50% {
    opacity: 1;
    transform: translateY(-7px) scale(1.08);
  }
}

@keyframes studioLoadingHaloSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes studioLoadingLensBreathe {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.018);
  }
}

@keyframes studioLoadingApertureTwinkle {
  0%,
  100% {
    opacity: 0.52;
    filter: brightness(1);
  }

  34% {
    opacity: 1;
    filter: brightness(1.28);
  }

  62% {
    opacity: 0.76;
    filter: brightness(1.06);
  }
}

@keyframes studioLoadingSpark {
  0%,
  100% {
    opacity: 0.34;
    transform: translateY(0) scale(0.72);
  }

  36% {
    opacity: 1;
    transform: translateY(-7px) scale(1.2);
  }

  58% {
    opacity: 1;
    transform: translateY(-5px) scale(1.04);
  }

  76% {
    opacity: 0.48;
    transform: translateY(-1px) scale(0.84);
  }
}

@keyframes studioLoadingOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes studioLoadingPulse {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.92);
  }

  48% {
    opacity: 1;
    transform: scale(1.14);
  }
}

@keyframes studioLoadingProgress {
  0% {
    left: -42%;
  }

  52% {
    left: 28%;
  }

  100% {
    left: 100%;
  }
}

@keyframes studioFameSlotSweep {
  0%,
  48% {
    transform: translateX(-110%);
  }
  76%,
  100% {
    transform: translateX(110%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mini-spin {
  animation: spin 0.9s linear infinite;
}

.photo-upload-queue {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(42, 39, 31, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.photo-upload-queue.is-uploading {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 248, 224, 0.84);
}

.photo-upload-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.photo-upload-queue-head strong {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 920;
}

.photo-upload-queue-head span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 820;
}

.photo-upload-queue-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.photo-upload-queue-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 62px;
  padding: 6px;
  border: 1px solid rgba(42, 39, 31, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.photo-upload-queue-item.is-primary {
  border-color: rgba(86, 207, 174, 0.26);
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.74);
}

.photo-upload-preview {
  display: block;
  width: 52px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(42, 39, 31, 0.08);
}

.photo-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.photo-upload-copy strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-upload-copy small {
  color: var(--muted-foreground);
  font-size: 0.73rem;
  font-weight: 760;
}

.photo-upload-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.photo-upload-state {
  display: grid;
  width: 28px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: #1f6f58;
  font-size: 0.76rem;
  font-weight: 900;
}

.photo-upload-action {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(42, 39, 31, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted-foreground);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}

.photo-upload-action:hover,
.photo-upload-action:focus-visible {
  border-color: rgba(255, 200, 0, 0.46);
  background: rgba(255, 248, 224, 0.9);
  color: #6b4a10;
  transform: translateY(-1px);
}

.photo-upload-action.is-remove:hover,
.photo-upload-action.is-remove:focus-visible {
  border-color: rgba(220, 38, 38, 0.28);
  background: rgba(254, 226, 226, 0.82);
  color: #b91c1c;
}

.photo-upload-queue.is-uploading .photo-upload-state {
  background: rgba(255, 200, 0, 0.2);
  color: #5b3a0d;
}

.photo-upload-queue.is-uploading .photo-upload-state svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.photo-upload-queue p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.45;
}

@keyframes studioPhotoIconSpin {
  to {
    transform: rotate(360deg);
  }
}

.support-anchor-section {
  scroll-margin-top: 96px;
}

@keyframes admin-studio-free-preview-card-sheen {
  0% {
    transform: translateX(-120%);
  }

  54%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes admin-studio-job-dot-pulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.68;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

#mini-recent-productions {
  scroll-margin-top: 18px;
}

#mini-next-action,
#mini-keyframe-work,
#mini-video-work,
#mini-failure-details {
  scroll-margin-top: 96px;
}

.button.is-disabled {
  pointer-events: none;
  opacity: 0.48;
}

html[data-theme="dark"] .photo-upload-queue {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .photo-upload-queue.is-uploading {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .photo-upload-queue-item {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.065);
}

html[data-theme="dark"] .photo-upload-queue-item.is-primary {
  border-color: rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.09), transparent 36%),
    rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .photo-upload-preview {
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .photo-upload-state {
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .photo-upload-action {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .photo-upload-action:hover,
html[data-theme="dark"] .photo-upload-action:focus-visible {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.12);
  color: #ffe48a;
}

html[data-theme="dark"] .photo-upload-action.is-remove:hover,
html[data-theme="dark"] .photo-upload-action.is-remove:focus-visible {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(248, 113, 113, 0.13);
  color: #fecaca;
}

html[data-theme="dark"] .photo-upload-queue.is-uploading .photo-upload-state {
  background: rgba(255, 200, 0, 0.14);
  color: #ffe48a;
}

@keyframes studioLoadingWordmarkRule {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(385%);
  }
}

.home-feature-kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.home-feature-kicker {
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.home-feature-date {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-feature-card h2 {
  font-size: clamp(1.55rem, 2.45vw, 2.2rem);
  line-height: 1.08;
}

.home-feature-tags {
  gap: 8px;
}

.home-feature-tags .tag-chip {
  min-height: 30px;
  border-color: rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.home-feature-copy {
  --home-feature-copy-line-height: 1.62;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: var(--home-feature-copy-line-height);
}

.home-feature-card-pet .home-feature-copy {
  display: -webkit-box;
  overflow: hidden;
  max-height: calc(5em * var(--home-feature-copy-line-height));
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}

.home-feature-note {
  padding-top: 12px;
  border-top: 1px solid rgba(33, 33, 33, 0.08);
  color: var(--foreground);
  font-size: 0.9rem;
  line-height: 1.55;
}

.home-feature-actions {
  gap: 8px;
}

.home-feature-linkline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.home-feature-linkline a {
  color: var(--accent-strong);
  font-size: 0.84rem;
  font-weight: 800;
  text-decoration: none;
}

.home-feature-linkline a:hover {
  text-decoration: underline;
}

.home-feature-caption {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.home-hero-actions {
  gap: 8px;
}

.home-hero-action {
  min-height: 38px;
  padding-inline: 16px;
  border-radius: 16px;
  box-shadow: none;
  font-size: 0.92rem;
}

.home-hero-actions .button-ghost,
.home-intro-card .button-ghost {
  background: rgba(255, 255, 255, 0.82);
}

.home-intro-card {
  gap: 12px;
}

.home-intro-card h3 {
  font-size: clamp(1.2rem, 1.7vw, 1.52rem);
  line-height: 1.18;
}

.home-intro-card p {
  font-size: 0.95rem;
  line-height: 1.58;
}

.home-project-brief {
  gap: 14px;
}

.home-project-brief-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-project-brief-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
}

.home-project-brief-item strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.16;
}

.home-story-empty {
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 251, 0.98) 100%);
}

.home-story-empty p {
  max-width: 52ch;
}

.home-story-empty .button-row {
  margin-top: 2px;
}

.home-content-card {
  gap: 12px;
  overflow: hidden;
}

.home-content-card .media-thumb {
  height: 180px;
  margin-bottom: 12px;
}

.home-content-card .content-card-body {
  gap: 10px;
}

.home-content-card h3 {
  font-size: clamp(1.22rem, 1.6vw, 1.48rem);
  line-height: 1.14;
}

.home-card-tags {
  order: 2;
  gap: 8px;
}

.home-content-card .tag {
  min-height: 28px;
  padding-inline: 10px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}

.home-card-description {
  order: 3;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 0.95rem;
  line-height: 1.58;
}

.home-pet-card .home-card-description {
  -webkit-line-clamp: 2;
}

.home-card-meta {
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.45;
}

.home-card-meta .meta-row-icon {
  margin-top: 2px;
}

.home-card-meta > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-project-meter {
  order: 4;
  margin-top: 2px;
}

.project-intro-summary {
  gap: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.1), transparent 26%),
    linear-gradient(180deg, #fff9df 0%, #ffffff 100%);
}

.project-intro-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.project-intro-metric {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.project-intro-metric span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-intro-metric strong {
  font-size: clamp(1.08rem, 1.6vw, 1.42rem);
  line-height: 1.14;
}

.project-intro-list-card {
  gap: 14px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 248, 251, 0.98) 100%);
}

.project-intro-feature-card {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 24%),
    radial-gradient(circle at bottom left, rgba(11, 105, 183, 0.1), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 236, 0.96) 100%);
}

.project-intro-feature-shell {
  display: grid;
  gap: 0;
}

.project-intro-feature-media {
  display: block;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 26%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.96) 0%, rgba(242, 247, 255, 0.96) 100%);
}

.project-intro-feature-art {
  position: relative;
  width: 100%;
  min-height: 240px;
  height: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 248, 226, 0.9) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.project-intro-feature-media img {
  object-fit: contain;
  object-position: center;
}

.project-intro-feature-copy {
  display: grid;
  gap: 14px;
  padding: 20px 20px 22px;
}

.project-intro-feature-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-intro-feature-card h2 {
  font-size: clamp(1.48rem, 2.1vw, 2rem);
  line-height: 1.1;
}

.project-intro-feature-summary {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.6;
}

.project-intro-feature-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.project-intro-feature-metric {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
}

.project-intro-feature-metric span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-intro-feature-metric strong {
  font-size: 1rem;
  line-height: 1.2;
}

.project-intro-list {
  display: grid;
  gap: 10px;
}

.project-intro-link {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.project-intro-link:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
}

.project-intro-link-head,
.project-intro-link-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.project-intro-link-head strong {
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.project-intro-link-copy {
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.project-intro-link-meta {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.42;
}

.project-intro-remaining {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.45);
  background: #fff3c4;
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.story-hub-stack {
  gap: 24px;
}

.story-hub-hero {
  background: #ffffff;
}

.story-hub-hero > * {
  min-width: 0;
}

.story-hub-hero-copy {
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.story-hub-hero-copy-panel {
  min-height: 100%;
  padding: 24px;
  border-radius: 24px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.story-hub-hero-copy .hero-lead {
  max-width: none;
}

.story-hub-hero .page-intro-support {
  min-width: 0;
}

.story-hub-hero .story-feature-card-public {
  width: 100%;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.story-hub-hero .story-feature-media {
  width: 100%;
  min-height: 216px;
  margin: 0 0 2px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.08);
}

.story-hub-hero .story-feature-card-public .inline-note {
  background: rgba(255, 255, 255, 0.74);
}

.story-hub-highlight-row {
  row-gap: 10px;
}

.story-hub-primary-action {
  margin-top: 2px;
}

.story-feature-meta {
  margin: 0;
  color: rgba(33, 33, 33, 0.58);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.35;
}

.story-feature-actions {
  margin-top: 2px;
}

.story-page-nav {
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.08), transparent 24%),
    rgba(255, 255, 255, 0.96);
}

.story-page-nav-grid,
.story-track-grid,
.story-gallery-grid {
  display: grid;
  gap: 14px;
}

.story-page-nav-link {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.84);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-page-nav-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-page-nav-label,
.story-page-nav-count {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.story-page-nav-label {
  color: var(--accent);
}

.story-page-nav-count {
  color: var(--muted);
}

.story-track-strip {
  background: rgba(255, 255, 255, 0.96);
}

.story-series-main,
.story-series-panel,
.story-series-action-card,
.story-series-library,
.story-series-route-grid {
  display: grid;
  gap: 16px;
}

.story-series-panel,
.story-series-action-card,
.story-series-library,
.story-series-episode-card,
.story-series-route-card {
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(255, 255, 255, 0.78);
}

.story-series-panel-media {
  align-content: start;
}

.story-series-episode-grid {
  display: grid;
  gap: 12px;
}

.story-series-route-grid {
  grid-template-columns: minmax(0, 1fr);
}

.story-series-route-card {
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-series-route-card.is-latest {
  border-color: rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.story-series-route-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-series-route-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.1rem;
}

.story-series-route-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.story-series-route-label,
.story-series-episode-kicker {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.story-series-episode-card {
  display: grid;
  gap: 6px;
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-series-episode-card.is-latest {
  border-color: rgba(15, 23, 42, 0.12);
  background: #f8fafc;
}

.story-series-episode-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-series-episode-media {
  overflow: hidden;
  border-radius: 16px;
  background: rgba(17, 17, 17, 0.06);
  aspect-ratio: 9 / 16;
}

.story-series-episode-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-series-episode-badge {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.story-series-episode-meta {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.story-series-more {
  display: grid;
  gap: 14px;
}

.story-series-more summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--foreground);
}

.story-series-more[open] summary {
  margin-bottom: 2px;
}

.story-video-card {
  display: grid;
  gap: 18px;
  background: #ffffff;
}

.story-video-embed {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #111;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-soft);
}

.story-video-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.lazy-embed-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(12, 16, 24, 0.94) 0%, rgba(12, 16, 24, 0.98) 100%);
}

.lazy-embed-poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.62;
  filter: saturate(1.08) contrast(1.02);
}

.lazy-embed-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 18, 0.1) 0%, rgba(10, 12, 18, 0.52) 100%),
    radial-gradient(circle at center, transparent 0%, rgba(10, 12, 18, 0.34) 82%);
}

.lazy-embed-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(14px, 3vw, 22px);
  text-align: left;
}

.lazy-embed-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  gap: 11px;
  min-width: 0;
  min-height: 48px;
  padding: 7px 16px 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #121212;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition:
    transform 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.lazy-embed-play:hover,
.lazy-embed-play:focus-visible {
  transform: translateY(-1px);
  background: #ffffff;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.34);
}

.lazy-embed-play-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand);
  color: #111;
}

.lazy-embed-play-icon svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke-width: 2.8;
  transform: translateX(1px);
}

.lazy-embed-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.58);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(12px);
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.lazy-embed-link:hover,
.lazy-embed-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(12, 16, 24, 0.76);
}

.lazy-embed-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.4;
}

.story-video-embed-short {
  width: min(100%, 340px);
  max-width: 340px;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
}

.story-track-link {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.story-track-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: rgba(15, 23, 42, 0.16);
}

.story-track-link strong {
  font-size: 0.96rem;
  line-height: 1.4;
}

.story-track-count {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.story-feature-card {
  align-content: start;
}

.story-feature-media {
  position: relative;
  overflow: hidden;
  width: calc(100% + 48px);
  min-height: 244px;
  margin: -24px -24px 0;
  border-radius: 24px 24px 18px 18px;
  background: var(--surface-soft);
}

.story-feature-media img {
  object-fit: cover;
}

.story-feature-card-public {
  gap: 18px;
  background: #ffffff;
}

.story-library-section {
  gap: 18px;
}

.story-library-section-public {
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.08), transparent 28%),
    rgba(255, 255, 255, 0.98);
}

.story-library-section-instagram {
  background: #ffffff;
}

#stories-instagram-records,
#stories-short-form,
#stories-public-records,
#stories-live-context {
  scroll-margin-top: 92px;
}

.story-record-shelf {
  display: grid;
  gap: 16px;
}

.story-record-shelf + .story-record-shelf {
  padding-top: 4px;
  border-top: 1px solid rgba(11, 18, 32, 0.08);
}

.story-record-shelf-header {
  max-width: 68ch;
}

.story-record-shelf-header h4 {
  margin: 0;
}

.story-record-card {
  background: #ffffff;
}

.story-record-card-instagram {
  background: #ffffff;
}

.instagram-record-preview {
  gap: 14px;
  overflow: hidden;
  background: #ffffff;
}

.instagram-record-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% + 48px);
  height: 198px;
  margin: -24px -24px 16px;
  border-radius: 24px 24px 18px 18px;
  border-bottom: 1px solid rgba(11, 18, 32, 0.08);
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, 0.98), transparent 20%),
    linear-gradient(135deg, #f1f5f9 0%, #ffffff 48%, #eef2f7 100%);
}

.instagram-record-visual-large {
  width: 100%;
  min-height: 360px;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: inherit;
}

.instagram-record-visual-photo {
  background: #0b1220;
}

.instagram-record-real-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.instagram-record-real-media img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.instagram-record-real-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(11, 18, 32, 0.05) 0%, rgba(11, 18, 32, 0.18) 56%, rgba(11, 18, 32, 0.56) 100%),
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.24), transparent 30%);
}

.instagram-record-glow,
.instagram-record-phone,
.instagram-record-floating-badge,
.instagram-record-title-chip {
  position: absolute;
  z-index: 1;
}

.instagram-record-glow {
  border-radius: 999px;
  filter: blur(2px);
}

.instagram-record-glow-one {
  top: -60px;
  right: -42px;
  width: 180px;
  height: 180px;
  background: rgba(148, 163, 184, 0.22);
}

.instagram-record-glow-two {
  bottom: -76px;
  left: -46px;
  width: 190px;
  height: 190px;
  background: rgba(94, 224, 184, 0.22);
}

.instagram-record-phone {
  top: 20px;
  left: 50%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(48%, 178px);
  min-width: 136px;
  height: calc(100% - 34px);
  padding: 10px;
  transform: translateX(-50%) rotate(-2deg);
  border: 3px solid rgba(11, 18, 32, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 36px rgba(11, 18, 32, 0.18);
}

.instagram-record-visual-large .instagram-record-phone {
  top: 36px;
  width: min(36%, 240px);
  min-width: 190px;
  height: calc(100% - 60px);
  padding: 14px;
  border-radius: 30px;
  border-width: 4px;
}

.instagram-record-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
}

.instagram-record-phone-top span:first-child {
  width: 42%;
  height: 7px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.12);
}

.instagram-record-phone-top span:last-child {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 126, 101, 0.86);
}

.instagram-record-scene {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(241, 245, 249, 0.98) 0%, rgba(255, 255, 255, 0.98) 56%, rgba(238, 242, 247, 0.98) 100%);
}

.instagram-record-sun {
  position: absolute;
  top: 15%;
  right: 16%;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #cbd5e1;
  box-shadow: 0 0 0 10px rgba(148, 163, 184, 0.16);
}

.instagram-record-cat {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 72px;
  height: 58px;
  transform: translateX(-50%);
  border: 3px solid rgba(11, 18, 32, 0.94);
  border-radius: 48% 48% 42% 42%;
  background: #ffffff;
}

.instagram-record-cat-ear {
  position: absolute;
  top: -19px;
  width: 26px;
  height: 26px;
  border: 3px solid rgba(11, 18, 32, 0.94);
  border-bottom: 0;
  background: #ffffff;
}

.instagram-record-cat-ear-left {
  left: 8px;
  transform: rotate(45deg);
  border-radius: 7px 0 0;
}

.instagram-record-cat-ear-right {
  right: 8px;
  transform: rotate(45deg);
  border-radius: 0 7px 0 0;
}

.instagram-record-cat-eye,
.instagram-record-cat-nose {
  position: absolute;
  background: rgba(11, 18, 32, 0.94);
}

.instagram-record-cat-eye {
  top: 23px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.instagram-record-cat-eye-left {
  left: 21px;
}

.instagram-record-cat-eye-right {
  right: 21px;
}

.instagram-record-cat-nose {
  top: 34px;
  left: 50%;
  width: 8px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px 999px 6px 6px;
}

.instagram-record-cat-mouth {
  position: absolute;
  top: 41px;
  left: 50%;
  width: 22px;
  height: 9px;
  transform: translateX(-50%);
  border-bottom: 3px solid rgba(11, 18, 32, 0.94);
  border-radius: 0 0 999px 999px;
}

.instagram-record-caption-lines {
  display: grid;
  gap: 6px;
  padding-top: 9px;
}

.instagram-record-caption-lines span {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.12);
}

.instagram-record-caption-lines span:nth-child(2) {
  width: 74%;
}

.instagram-record-caption-lines span:nth-child(3) {
  width: 52%;
}

.instagram-record-floating-badge,
.instagram-record-title-chip {
  display: inline-flex;
  align-items: center;
  max-width: min(72%, 320px);
  border: 1px solid rgba(11, 18, 32, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  box-shadow: 0 12px 26px rgba(11, 18, 32, 0.12);
  backdrop-filter: blur(14px);
}

.instagram-record-floating-badge {
  top: 22px;
  left: 18px;
  gap: 7px;
  padding: 8px 11px;
  font-size: 0.72rem;
  font-weight: 900;
}

.instagram-record-floating-badge svg {
  width: 18px;
  height: 18px;
  color: var(--accent-strong);
}

.instagram-record-title-chip {
  right: 18px;
  bottom: 18px;
  padding: 9px 12px;
  overflow: hidden;
  font-size: 0.8rem;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instagram-record-visual-large .instagram-record-floating-badge {
  top: 28px;
  left: 28px;
  padding: 10px 13px;
  font-size: 0.82rem;
}

.instagram-record-visual-large .instagram-record-title-chip {
  right: 28px;
  bottom: 28px;
  max-width: min(62%, 520px);
  padding: 12px 16px;
  font-size: clamp(1rem, 2vw, 1.35rem);
}

.story-instagram-detail-hero {
  background:
    radial-gradient(circle at top right, rgba(15, 23, 42, 0.06), transparent 26%),
    linear-gradient(135deg, rgba(248, 250, 252, 0.98) 0%, rgba(255, 255, 255, 0.98) 54%, rgba(238, 242, 247, 0.98) 100%);
}

.story-record-card .content-card-body {
  gap: 12px;
}

.story-record-card-partner .media-thumb {
  background: rgba(255, 255, 255, 0.98);
}

.story-record-card-partner .media-thumb img {
  object-fit: contain;
  padding: 18px;
}

.story-detail-media {
  min-height: 360px;
}

.story-instagram-embed-card {
  gap: 18px;
  background: #ffffff;
}

.story-instagram-embed {
  position: relative;
  width: 100%;
  min-height: 760px;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(11, 18, 32, 0.08);
  background: rgba(255, 255, 255, 0.98);
}

.story-instagram-embed iframe {
  display: block;
  width: 100%;
  min-height: 760px;
  border: 0;
}

.story-instagram-embed .lazy-embed-poster {
  min-height: 760px;
}

.story-quote {
  margin: 0;
  padding-left: 16px;
  border-left: 4px solid rgba(11, 105, 183, 0.24);
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.7;
}

.story-body {
  display: grid;
  gap: 14px;
}

.story-body p {
  color: var(--foreground);
  line-height: 1.75;
}

.story-gallery-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.story-gallery-media {
  position: relative;
  min-height: 210px;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
}

.proof-section-card {
  padding: 28px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(11, 105, 183, 0.12);
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 24%),
    linear-gradient(180deg, #fff9e4 0%, #ffffff 100%);
  box-shadow: var(--shadow-soft);
}

.proof-feature-grid,
.trust-logo-grid {
  display: grid;
  gap: 16px;
}

.proof-feature-card {
  display: grid;
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-height: 100%;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.proof-feature-card:hover,
.trust-logo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.proof-feature-media,
.trust-archive-media {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
}

.proof-feature-media {
  min-height: 208px;
}

.proof-feature-media img,
.trust-archive-media img {
  object-fit: cover;
}

.proof-feature-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.proof-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-strong);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.trust-logo-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trust-logo-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #fffdf7 0%, #ffffff 100%);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.trust-logo-card:hover {
  border-color: rgba(15, 23, 42, 0.16);
}

.trust-logo-card strong,
.trust-archive-card strong {
  color: var(--foreground);
  line-height: 1.3;
}

.trust-logo-card span {
  font-size: 0.94rem;
  line-height: 1.55;
}

.trust-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: var(--surface-muted);
}

.trust-logo-mark img {
  width: 100%;
  height: auto;
  max-width: 144px;
  object-fit: contain;
}

.trust-archive-card {
  align-content: start;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.16), transparent 22%),
    linear-gradient(180deg, #fff5d7 0%, #ffffff 100%);
}

.trust-archive-media {
  min-height: 280px;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.trust-note-card {
  gap: 18px;
  background: #ffffff;
}

.trust-entry-card {
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
  background: #ffffff;
}

.cats-discovery-panel {
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.cats-discovery-layout,
.cats-discovery-main {
  display: grid;
  min-width: 0;
}

.cats-discovery-layout {
  align-items: stretch;
}

.cats-discovery-main {
  gap: 14px;
  align-content: start;
  padding: 22px;
}

.cats-discovery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 16px;
  max-width: none;
}

.cats-discovery-head .eyebrow {
  margin-bottom: 2px;
}

.cats-discovery-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 62ch;
}

.cats-discovery-copy h1 {
  max-width: 100%;
  font-size: clamp(1.46rem, 2vw, 2rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.cats-discovery-copy p:not(.eyebrow) {
  max-width: 68ch;
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cats-discovery-count {
  display: grid;
  gap: 2px;
  min-width: min(100%, 152px);
  padding: 9px 12px;
  border-radius: 16px;
  border: 1px solid rgba(11, 105, 183, 0.16);
  background: rgba(255, 255, 255, 0.82);
}

.cats-discovery-count strong {
  font-size: 0.94rem;
  line-height: 1.16;
}

.cats-discovery-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  min-width: min(100%, 260px);
}

.cats-discovery-form-button {
  min-height: 42px;
  gap: 8px;
  padding-inline: 14px;
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

.cats-discovery-form-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.cats-discovery-form-icon svg {
  width: 18px;
  height: 18px;
}

.cats-discovery-controls {
  display: grid;
  gap: 12px;
  align-items: flex-end;
  min-width: 0;
}

.cats-search-field {
  gap: 10px;
}

.cats-search-field,
.cats-sort-field,
.cats-filter-row,
.cats-results-status {
  min-width: 0;
}

.cats-search-shell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 15px;
  border: 1px solid var(--border-strong);
  background: white;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cats-search-shell svg {
  color: var(--accent);
}

.cats-search-icon {
  color: var(--accent-strong);
}

.cats-search-shell:focus-within {
  border-color: rgba(11, 105, 183, 0.3);
  box-shadow: 0 0 0 4px rgba(11, 105, 183, 0.08);
}

.cats-search-shell input {
  width: 100%;
  min-height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--foreground);
}

.cats-search-shell input:focus {
  outline: 0;
}

.cats-filter-row {
  display: grid;
  gap: 8px;
}

.cats-results-status {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(11, 105, 183, 0.12);
}

.cats-results-status strong {
  display: block;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.16;
}

.cats-filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cats-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 800;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.cats-filter-chip > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-filter-chip:hover {
  transform: translateY(-1px);
}

.cats-filter-chip:disabled {
  opacity: 0.48;
  transform: none;
  box-shadow: none;
}

.cats-filter-chip:disabled:hover {
  transform: none;
}

.cats-filter-chip.is-active[data-filter="adoptable"] {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="all"] {
  background: var(--foreground);
  border-color: var(--foreground);
  color: #ffffff;
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="foster"] {
  background: #eef6ff;
  border-color: rgba(11, 105, 183, 0.34);
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="support"] {
  background: #f7f9fc;
  border-color: rgba(33, 33, 33, 0.16);
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="medical"],
.cats-filter-chip.is-active[data-filter="kittens"] {
  background: #fff3e8;
  border-color: rgba(255, 122, 102, 0.28);
  color: #9d3a20;
  box-shadow: var(--shadow-card);
}

.cats-filter-chip.is-active[data-filter="pairs"] {
  background: #f2f0ff;
  border-color: rgba(138, 111, 255, 0.28);
  color: #4f3fba;
  box-shadow: var(--shadow-card);
}

.cats-filter-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.06);
  font-size: 0.78rem;
}

.cats-sticky-toolbar {
  position: sticky;
  top: 8px;
  z-index: 16;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(33, 33, 33, 0.1);
  backdrop-filter: blur(18px) saturate(1.1);
  animation: cats-sticky-toolbar-in 150ms ease-out;
}

@keyframes cats-sticky-toolbar-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cats-sticky-search {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.84);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.cats-sticky-search:focus-within {
  border-color: rgba(255, 200, 0, 0.58);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

.cats-sticky-search input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 720;
}

.cats-sticky-search input:focus {
  outline: 0;
}

.cats-quick-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.cats-quick-tabs::-webkit-scrollbar {
  display: none;
}

.cats-quick-tab {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: rgba(255, 255, 255, 0.74);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.cats-quick-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
}

.cats-quick-tab:disabled {
  opacity: 0.46;
  transform: none;
}

.cats-quick-tab span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.06);
  font-size: 0.72rem;
}

.cats-quick-tab.is-active[data-filter="all"] {
  background: var(--foreground);
  border-color: var(--foreground);
  color: white;
}

.cats-quick-tab.is-active[data-filter="adoptable"] {
  background: var(--brand);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--brand-ink);
}

.cats-quick-tab.is-active[data-filter="foster"] {
  background: #e7f3ff;
  border-color: rgba(11, 105, 183, 0.34);
  color: var(--accent-strong);
}

.cats-quick-tab.is-active[data-filter="support"] {
  background: #eafaf4;
  border-color: rgba(38, 159, 125, 0.32);
  color: #0f6f55;
}

.cats-feature-card {
  display: grid;
  grid-template-rows: minmax(200px, auto) auto;
  min-height: 100%;
  min-width: 0;
  border-top: 1px solid rgba(11, 105, 183, 0.12);
  background: #ffffff;
  color: var(--foreground);
  text-decoration: none;
  overflow: hidden;
  transition: background 120ms ease;
}

.cats-feature-card:hover {
  background: #f7f9fc;
}

.cats-feature-media {
  position: relative;
  isolation: isolate;
  min-height: 200px;
  background: var(--surface-soft);
  overflow: hidden;
}

.cats-feature-media img {
  object-fit: cover;
  transition: transform 180ms ease;
}

.cats-feature-card:hover .cats-feature-media img {
  transform: scale(1.025);
}

.cats-feature-photo-label {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  max-width: calc(100% - 28px);
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(33, 33, 33, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cats-feature-body {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 24px 18px 18px;
  border-top: 1px solid var(--border-soft);
  background: #ffffff;
}

.cats-feature-heading {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding-top: 10px;
}

.cats-feature-body h3 {
  font-size: clamp(1.34rem, 2vw, 1.9rem);
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.cats-feature-location,
.cats-feature-chip {
  min-width: 0;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font-weight: 900;
}

.cats-feature-location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cats-feature-location span:last-child,
.cats-feature-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-feature-copy {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.54;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.cats-feature-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cats-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cats-feature-chip[data-priority="adoptable"] {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(15, 23, 42, 0.12);
}

.cats-feature-chip[data-priority="foster"] {
  background: #eef6ff;
  border-color: rgba(11, 105, 183, 0.28);
  color: var(--accent-strong);
}

.cats-feature-chip[data-priority="support"] {
  background: #f7f9fc;
  border-color: rgba(33, 33, 33, 0.12);
}

.cats-feature-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.cats-feature-chip-icon svg {
  width: 100%;
  height: 100%;
}

.cats-results-grid {
  display: grid;
  gap: 18px;
}

.cats-results-actions {
  justify-content: center;
}

.cats-directory-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.cats-directory-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(15, 23, 42, 0.16);
}

.cats-directory-media {
  position: relative;
  min-height: 192px;
  background: var(--surface-soft);
}

.cats-directory-media img {
  object-fit: cover;
}

.cats-directory-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.cats-directory-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cats-priority-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cats-priority-badge[data-priority="adoptable"] {
  background: rgba(255, 200, 0, 0.14);
  border-color: rgba(15, 23, 42, 0.12);
}

.cats-priority-badge[data-priority="foster"] {
  background: #eef6ff;
  border-color: rgba(11, 105, 183, 0.28);
  color: var(--accent-strong);
}

.cats-priority-badge[data-priority="support"] {
  background: #f7f9fc;
  border-color: rgba(33, 33, 33, 0.08);
}

.cats-priority-badge[data-priority="medical"] {
  background: #fff3e8;
  border-color: rgba(255, 122, 102, 0.28);
  color: #9d3a20;
}

.cats-priority-badge[data-priority="recovery"] {
  background: #eafaf4;
  border-color: rgba(38, 159, 125, 0.28);
  color: #0f6f55;
}

.cats-directory-status {
  display: grid;
  gap: 4px;
  margin: 0;
}

.cats-directory-status-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-weight: 700;
}

.cats-directory-copy {
  margin: 0;
  color: var(--foreground);
  line-height: 1.65;
}

.cats-directory-need {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.cats-directory-need-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground);
  font-weight: 800;
}

.cats-directory-need p {
  margin: 0;
  line-height: 1.6;
  color: var(--foreground);
}

.cats-directory-action-hint {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.16);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1;
}

.cats-recent-strip {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 28%),
    rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.cats-recent-copy {
  display: grid;
  gap: 2px;
}

.cats-recent-copy strong {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.18;
}

.cats-recent-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.cats-recent-item {
  display: grid;
  grid-template-columns: 42px minmax(96px, 1fr);
  align-items: center;
  gap: 9px;
  flex: 0 0 min(212px, 72vw);
  min-height: 58px;
  padding: 7px 10px 7px 7px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.8);
  color: inherit;
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.cats-recent-item:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  background: #ffffff;
}

.cats-recent-photo {
  position: relative;
  width: 42px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-soft);
}

.cats-recent-photo img {
  object-fit: cover;
}

.cats-recent-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cats-recent-text strong,
.cats-recent-text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cats-recent-text strong {
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.08;
}

.cats-recent-text small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 760;
}

.recent-media-rail {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 30%),
    rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.recent-media-copy {
  display: grid;
  gap: 2px;
}

.recent-media-copy strong {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.18;
}

.recent-media-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.recent-media-card {
  display: grid;
  gap: 8px;
  flex: 0 0 min(158px, 58vw);
  color: inherit;
  text-decoration: none;
}

.recent-media-thumb {
  position: relative;
  display: block;
  aspect-ratio: 9 / 12;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.18), rgba(86, 207, 174, 0.16)),
    var(--surface-soft);
}

.recent-media-thumb img {
  object-fit: cover;
}

.recent-media-placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 200, 0, 0.36), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(86, 207, 174, 0.22), transparent 26%),
    rgba(255, 255, 255, 0.7);
}

.recent-media-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.recent-media-text small,
.recent-media-text strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-media-text small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 840;
  line-height: 1;
  white-space: nowrap;
}

.recent-media-text strong {
  color: var(--foreground);
  font-size: 0.86rem;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cats-empty-state {
  gap: 14px;
}

.account-nav-shell {
  display: grid;
  gap: 16px;
  padding: 22px 24px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-soft);
}

.account-nav-shell {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.notification-summary-card strong {
  font-size: clamp(1.6rem, 2vw, 2rem);
}

.notification-flow-card,
.notification-section-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 28%),
    rgba(255, 255, 255, 0.97);
}

.notification-pref-grid {
  gap: 16px;
}

.notification-pref-card {
  background:
    linear-gradient(180deg, rgba(255, 251, 239, 0.96) 0%, rgba(255, 255, 255, 0.98) 42%),
    rgba(255, 255, 255, 0.98);
}

.notification-pref-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.saved-page-intro {
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.07), transparent 26%),
    radial-gradient(circle at bottom left, rgba(11, 105, 183, 0.07), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
}

.saved-mobile-card {
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
}

.saved-mobile-card h3 {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.18;
}

.saved-summary-card {
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.06), transparent 24%),
    rgba(255, 255, 255, 0.97);
}

.saved-watchlist-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.saved-watchlist-card {
  min-height: 100%;
  align-content: start;
}

.saved-watchlist-summary,
.saved-watchlist-meta {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.saved-watchlist-summary {
  -webkit-line-clamp: 3;
}

.saved-watchlist-meta {
  -webkit-line-clamp: 2;
}

.notification-pref-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(245, 247, 250, 0.96);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.notification-pref-status.is-enabled {
  border-color: rgba(255, 200, 0, 0.38);
  background: #fff2be;
  color: var(--foreground);
}

.notification-empty-card {
  gap: 14px;
}

.account-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.account-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: white;
  color: var(--foreground);
  font-weight: 800;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.account-nav-link:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  box-shadow: var(--shadow-card);
}

.account-nav-link.is-active {
  border-color: rgba(15, 23, 42, 0.16);
  background: var(--background-faint);
}

.account-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--accent-strong);
}

.account-nav-icon svg {
  width: 100%;
  height: 100%;
}

.account-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.06);
  font-size: 0.82rem;
}

.record-card {
  gap: 14px;
}

.record-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.record-header {
  display: grid;
  gap: 6px;
}

.record-meta-list,
.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.record-meta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.record-status-note,
.record-secondary-copy {
  font-size: 0.94rem;
  line-height: 1.58;
}

.record-note {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  background: #f6fbff;
}

.outreach-panel-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.76);
}

.outreach-panel-count {
  display: inline-flex;
  min-width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border-radius: 999px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
  line-height: 1;
}

.outreach-status-menu {
  position: relative;
  width: fit-content;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.outreach-status-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px 0 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  list-style: none;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.outreach-status-menu summary:hover,
.outreach-status-menu summary:focus-visible {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 3px rgba(11, 105, 183, 0.08);
  outline: 0;
}

.outreach-status-menu summary::-webkit-details-marker {
  display: none;
}

.outreach-status-menu summary > span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.16);
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 950;
}

.outreach-status-menu summary strong {
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.outreach-status-menu summary::after {
  content: "";
  width: 0;
  height: 0;
  border-inline: 4px solid transparent;
  border-top: 5px solid var(--muted-foreground);
}

.outreach-status-menu[open] summary::after {
  transform: rotate(180deg);
}

.outreach-status-menu-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  min-width: 180px;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
}

.outreach-status-menu-options button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 5px 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.outreach-status-menu-options button:hover,
.outreach-status-menu-options button:focus-visible,
.outreach-status-menu-options button.is-active {
  background: rgba(255, 200, 0, 0.16);
  outline: 0;
}

.outreach-status-menu-options button > span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  font-weight: 950;
}

.outreach-status-menu-options button strong {
  font-size: 0.82rem;
  font-weight: 900;
}

.field-card-operator-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  background: #f7f8f9;
}

.field-card-operator-task > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.field-card-operator-task strong,
.field-card-operator-task p {
  margin: 0;
}

.field-card-operator-task strong {
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 940;
}

.field-card-operator-task p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.field-card-operator-task.is-urgent {
  border-color: rgba(201, 24, 31, 0.2);
  background: #fff4f4;
}

.field-card-operator-task.is-urgent > span {
  background: #c9181f;
  color: #fff;
}

.field-card-operator-task.is-warning {
  border-color: rgba(245, 181, 68, 0.28);
  background: #fff8e8;
}

.field-card-operator-task.is-warning > span {
  background: #ffc800;
  color: #111;
}

.field-card-operator-task.is-ready {
  border-color: rgba(44, 219, 200, 0.28);
  background: #e9fbfa;
}

.field-card-operator-task.is-ready > span {
  background: #2cdbc8;
  color: #063c39;
}

.field-card-review-thumb {
  flex: 0 0 auto;
  display: inline-flex;
  width: 72px;
  height: 96px;
  overflow: hidden;
  border: 1px solid rgba(25, 25, 25, 0.1);
  border-radius: 18px;
  background: #f2f4f5;
  box-shadow: 0 10px 24px rgba(25, 25, 25, 0.08);
}

.field-card-review-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field-card-review-thumb.is-empty {
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: repeating-linear-gradient(
    -45deg,
    #f4f6f7,
    #f4f6f7 8px,
    #eceff1 8px,
    #eceff1 16px
  );
}

.field-card-source-photo-placeholder {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
}

.field-card-review-gate {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-color: rgba(11, 105, 183, 0.24);
  background: #eaf6ff;
}

.field-card-review-gate p {
  margin: 4px 0 0;
}

.field-card-review-checks {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 420px;
}

.field-card-review-checks span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 999px;
  background: #fff;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.field-card-review-checks span.is-ok {
  border-color: rgba(44, 219, 200, 0.44);
  background: #e9fbfa;
  color: var(--foreground);
}

.field-card-review-checks span.is-waiting {
  border-color: rgba(245, 181, 68, 0.44);
  background: #fff8e8;
  color: var(--foreground);
}

.field-card-generated-review-panel {
  display: grid;
  gap: 14px;
  border-color: rgba(25, 25, 25, 0.08);
  background: #fff;
}

.field-card-generated-review-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.field-card-generated-review-heading p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
}

.field-card-generated-review-heading span {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff0f0;
  color: #c9181f;
  font-size: 0.76rem;
  font-weight: 900;
}

.field-card-generated-review-heading span.is-approved {
  background: #e9fbfa;
  color: #087b7b;
}

.field-card-generated-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.field-card-generated-review-grid figure {
  display: grid;
  gap: 8px;
  margin: 0;
}

.field-card-generated-review-grid figure > span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.field-card-generated-review-grid img,
.field-card-generated-review-empty,
.field-card-source-photo-missing {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 18px;
  background: #f4f6f7;
}

.field-card-source-photo-missing {
  display: grid;
  place-content: center;
  gap: 7px;
  padding: 18px;
  border-style: dashed;
  background:
    radial-gradient(circle at 50% 22%, rgba(201, 24, 31, 0.08), transparent 34%),
    #f7f8f9;
  color: var(--muted-foreground);
  text-align: center;
}

.field-card-source-photo-missing strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 940;
}

.field-card-source-photo-missing span,
.field-card-source-photo-missing small {
  font-size: 0.75rem;
  font-weight: 820;
  line-height: 1.35;
}

.field-card-source-photo-missing small {
  opacity: 0.72;
}

.field-card-generated-review-grid img {
  display: block;
  height: auto;
  object-fit: cover;
}

.field-card-generated-review-grid .is-generated img {
  object-fit: contain;
  background: #f7f7f7;
}

.field-card-generated-review-empty {
  display: grid;
  place-items: center;
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 900;
}

.field-card-generated-review-checks {
  justify-content: flex-start;
  max-width: none;
}

.field-card-generated-review-actions {
  display: grid;
  gap: 10px;
}

.field-card-generated-review-action-guide {
  padding: 12px;
  border: 1px solid rgba(44, 219, 200, 0.24);
  border-radius: 16px;
  background: #f1fffd;
}

.field-card-generated-review-action-guide strong,
.field-card-generated-review-action-guide p {
  margin: 0;
}

.field-card-generated-review-action-guide strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 930;
}

.field-card-generated-review-action-guide p {
  margin-top: 4px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 730;
  line-height: 1.45;
}

.field-card-generated-review-primary-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px;
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 16px;
  background: #fff;
}

.field-card-generated-review-primary-action .button {
  min-height: 42px;
  border-color: rgba(44, 219, 200, 0.52);
  background: #2cdbc8;
  color: #071f1d;
}

.field-card-generated-review-secondary-actions {
  border: 1px solid rgba(25, 25, 25, 0.08);
  border-radius: 16px;
  background: #fff;
}

.field-card-generated-review-secondary-actions summary {
  min-height: 40px;
  padding: 11px 12px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 900;
}

.field-card-generated-review-secondary-actions > div {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.field-card-generated-review-actions .button-row,
.field-card-generated-review-primary-action {
  justify-content: flex-start;
}

.field-card-generated-review-actions input,
.field-card-generated-review-actions select {
  min-height: 38px;
  border: 1px solid rgba(25, 25, 25, 0.12);
  border-radius: 12px;
  background: #fff;
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 820;
}

.field-card-generated-review-actions input {
  width: min(190px, 34vw);
  padding: 0 10px;
}

.field-card-generated-review-actions select {
  width: min(230px, 48vw);
  padding: 0 30px 0 10px;
}

.field-card-payout-event-panel {
  display: grid;
  gap: 8px;
}

.field-card-payout-event-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-card-payout-event-row {
  display: grid;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid rgba(11, 105, 183, 0.1);
}

.field-card-payout-event-main,
.field-card-payout-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.field-card-payout-event-main span,
.field-card-payout-event-meta span {
  overflow-wrap: anywhere;
}

.field-card-payout-event-main span {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 880;
}

.field-card-payout-event-meta span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
}

.field-card-generation-command {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.field-card-generation-command > div:first-child {
  display: grid;
  gap: 5px;
}

.field-card-generation-command h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0;
}

.field-card-generation-command p {
  max-width: 760px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.55;
}

.field-card-generation-command .is-ready,
.field-card-generation-command .is-blocked {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.field-card-generation-command .is-ready {
  background: #e9fbfa;
  color: #007f78;
}

.field-card-generation-command .is-blocked {
  background: #fff2f2;
  color: #b42318;
}

.field-card-generation-command-stats,
.field-card-generation-command-warnings {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field-card-generation-command-stats span,
.field-card-generation-command-warnings span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: #f7f8f9;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 800;
}

.field-card-generation-command-stats strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.field-card-generation-command-warnings span {
  background: #fff8e8;
  color: #92400e;
}

.field-card-generation-failures {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.field-card-generation-failures li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 9px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.field-card-generation-failure-copy,
.field-card-generation-failure-actions,
.field-card-generation-failure-actions form {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.field-card-generation-failure-actions {
  justify-content: flex-end;
}

.field-card-generation-failure-actions input {
  width: min(190px, 34vw);
}

.field-card-generation-failures strong,
.field-card-generation-failures span,
.field-card-generation-failures small {
  overflow-wrap: anywhere;
}

.field-card-generation-failures strong {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.field-card-generation-failures span,
.field-card-generation-failures small {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 760;
}

.field-card-generation-failures .field-card-generation-failure-status {
  color: #0b69b7;
  font-weight: 900;
}

.field-card-generation-refund-button {
  border-color: rgba(180, 35, 24, 0.24);
  color: #b42318;
}

.field-card-generation-provider-refund-button {
  border-color: rgba(11, 105, 183, 0.24);
  color: #0b69b7;
}

@media (max-width: 760px) {
  .field-card-generation-failures li {
    grid-template-columns: 1fr;
  }

  .field-card-generation-failure-actions {
    justify-content: flex-start;
  }

  .field-card-generation-failure-actions input {
    width: min(100%, 220px);
  }
}

.outreach-console {
  display: grid;
  gap: 14px;
}

.outreach-grid {
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.42fr);
}

.outreach-list-panel {
  top: 88px;
}

.outreach-record {
  width: 100%;
  cursor: pointer;
  text-align: left;
}

.outreach-record-avatar {
  position: relative;
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 200, 0, 0.32);
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 34%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(11, 105, 183, 0.11));
  color: var(--foreground);
  font-size: 1.2rem;
  font-weight: 950;
}

.outreach-record-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.outreach-editor {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.outreach-campaign-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.outreach-campaign-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.055), transparent 30%),
    rgba(255, 255, 255, 0.94);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
  box-shadow: var(--shadow-soft);
}

.outreach-campaign-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-campaign-card strong {
  color: var(--foreground);
  font-size: 1.45rem;
  font-weight: 960;
  line-height: 1;
}

.outreach-campaign-card small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-campaign-card.is-active {
  border-color: rgba(255, 200, 0, 0.4);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.17), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

.outreach-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.outreach-create-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.outreach-create-card summary::-webkit-details-marker {
  display: none;
}

.outreach-create-card summary span,
.outreach-note-grid span,
.outreach-revision-form span,
.outreach-form-grid label > span,
.outreach-draft-generator label > span,
.outreach-message-editor label > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-create-card summary strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 900;
  text-align: right;
}

.outreach-form-grid,
.outreach-draft-generator {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.outreach-form-grid label,
.outreach-draft-generator label,
.outreach-message-editor label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.outreach-field-help {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-form-grid input,
.outreach-form-grid select,
.outreach-form-grid textarea,
.outreach-draft-generator input,
.outreach-draft-generator select,
.outreach-draft-generator textarea,
.outreach-message-editor input,
.outreach-message-editor textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.outreach-form-grid textarea,
.outreach-draft-generator textarea,
.outreach-message-editor textarea {
  resize: vertical;
  line-height: 1.5;
}

.outreach-field-wide,
.outreach-form-grid .button,
.outreach-draft-generator .button {
  grid-column: 1 / -1;
}

.outreach-detail-head,
.outreach-message-head,
.outreach-send-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.outreach-detail-head h2,
.outreach-message-head h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.2rem, 2vw, 1.64rem);
  line-height: 1.08;
}

.outreach-detail-head p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.outreach-note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.outreach-note-grid > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
}

.outreach-note-grid p {
  margin: 0;
  color: var(--foreground);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.outreach-research-card {
  border-color: rgba(11, 105, 183, 0.14);
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.075), transparent 28%),
    rgba(255, 255, 255, 0.96);
}

.outreach-research-runs {
  display: grid;
  gap: 8px;
}

.outreach-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.outreach-prompt-chip {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

.outreach-prompt-chip strong {
  overflow: hidden;
  font-size: 0.86rem;
  font-weight: 920;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-prompt-chip span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 820;
  text-transform: capitalize;
}

.outreach-prompt-chip.is-active {
  border-color: rgba(255, 200, 0, 0.42);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

.outreach-research-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.92);
}

.outreach-research-run > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-research-run span {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.1);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: capitalize;
}

.outreach-research-run strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-research-run small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
}

.outreach-message-editor {
  display: grid;
  gap: 13px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}

.outreach-detail-card.has-draft .outreach-contact-hero {
  order: 1;
}

.outreach-detail-card.has-draft .outreach-message-editor {
  order: 2;
  gap: 15px;
  padding: 16px;
  border: 1px solid rgba(86, 207, 174, 0.26);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.outreach-detail-card.has-draft .outreach-next-step {
  order: 3;
}

.outreach-detail-card.has-draft .outreach-contact-summary {
  order: 4;
}

.outreach-detail-card.has-draft .outreach-draft-generator {
  display: none;
}

.outreach-detail-card.has-draft .outreach-message-head {
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.outreach-detail-card.has-draft .outreach-message-head h3 {
  font-size: clamp(1.36rem, 2.3vw, 1.9rem);
}

.outreach-detail-card.has-draft .outreach-message-head p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.45;
}

.outreach-detail-card.has-draft #outreach-body {
  min-height: clamp(360px, 46vh, 560px);
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  font-size: 0.96rem;
  font-weight: 720;
  line-height: 1.6;
}

.outreach-detail-card.has-draft #outreach-subject {
  font-size: 1rem;
  font-weight: 880;
}

.outreach-editor-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.86fr);
  gap: 12px;
}

.outreach-editor-tool-card,
.outreach-editor-approve-card {
  display: grid;
  gap: 12px;
  align-content: space-between;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.86);
}

.outreach-editor-approve-card {
  border-color: rgba(86, 207, 174, 0.32);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.14), transparent 34%),
    rgba(246, 253, 250, 0.96);
}

.outreach-editor-tool-card > div:first-child,
.outreach-editor-approve-card > div:first-child {
  display: grid;
  gap: 5px;
}

.outreach-editor-tool-card span,
.outreach-editor-approve-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-editor-tool-card strong,
.outreach-editor-approve-card strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.outreach-editor-tool-card p,
.outreach-editor-approve-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-editor-tool-card .button-row {
  justify-content: flex-start;
}

.outreach-autosave-pill {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  margin-top: 4px;
  padding: 0 11px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 850;
}

.outreach-autosave-pill > span {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.68);
}

.outreach-autosave-pill strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: inherit;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-autosave-pill.is-dirty > span {
  background: #d99700;
}

.outreach-autosave-pill.is-saving > span {
  animation: outreach-autosave-pulse 1s ease-in-out infinite;
  background: #0b69b7;
}

.outreach-autosave-pill.is-saved > span {
  background: #35b78f;
}

.outreach-autosave-pill.is-error > span {
  background: #d84d4d;
}

@keyframes outreach-autosave-pulse {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.outreach-editor-approve-card .button {
  justify-self: start;
}

.outreach-review-helper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-queue-helper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-queue-helper > div,
.outreach-review-helper > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 36%),
    rgba(248, 250, 252, 0.92);
}

.outreach-queue-helper span,
.outreach-review-helper span {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  grid-row: span 2;
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.18);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
}

.outreach-queue-helper strong,
.outreach-queue-helper p,
.outreach-review-helper strong,
.outreach-review-helper p {
  margin: 0;
}

.outreach-queue-helper strong,
.outreach-review-helper strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.outreach-queue-helper p,
.outreach-review-helper p {
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-draft-generator.is-queue-primary {
  border-color: rgba(86, 207, 174, 0.26);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(248, 250, 252, 0.94);
}

.outreach-revision-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.3fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.075), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-revision-form > div {
  display: grid;
  gap: 4px;
}

.outreach-revision-form strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 930;
}

.outreach-revision-form p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.4;
}

.outreach-revision-form textarea {
  width: 100%;
  min-height: 86px;
  padding: 10px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
  line-height: 1.5;
  resize: vertical;
}

.outreach-revise-pill {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
  color: var(--foreground);
}

.outreach-revise-overlay {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(10px);
}

.outreach-revise-modal {
  display: grid;
  width: min(560px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  gap: 14px;
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
}

.outreach-revise-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.outreach-revise-modal-head span,
.outreach-revise-modal-form label > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-revise-modal-head h3 {
  margin: 2px 0 0;
  color: var(--foreground);
  font-size: clamp(1.18rem, 2.2vw, 1.54rem);
  line-height: 1.05;
}

.outreach-revise-modal-form {
  display: grid;
  gap: 12px;
}

.outreach-revise-modal-form label {
  display: grid;
  gap: 8px;
}

.outreach-revise-working {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(86, 207, 174, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.13), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-revise-working strong,
.outreach-revise-working p {
  margin: 0;
}

.outreach-revise-working strong {
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 950;
}

.outreach-revise-working p {
  margin-top: 2px;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.42;
}

.outreach-revise-modal-form textarea {
  width: 100%;
  min-height: 150px;
  padding: 12px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
  line-height: 1.5;
  resize: vertical;
}

.outreach-revise-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.outreach-revise-examples button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 880;
}

.outreach-revise-examples button:hover {
  border-color: rgba(86, 207, 174, 0.36);
  background: rgba(86, 207, 174, 0.12);
}

.outreach-revise-examples button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.outreach-send-row {
  justify-content: flex-start;
  padding-top: 4px;
}

.outreach-approved-next {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.24);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-approved-next > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-approved-next span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-approved-next strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.outreach-approved-next p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-toast {
  min-height: 24px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 820;
}

html[data-theme="dark"] .outreach-filter-drawer,
html[data-theme="dark"] .outreach-campaign-card,
html[data-theme="dark"] .outreach-card {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .outreach-panel-head-actions,
html[data-theme="dark"] .outreach-panel-count,
html[data-theme="dark"] .outreach-status-menu,
html[data-theme="dark"] .outreach-status-menu summary > span,
html[data-theme="dark"] .outreach-status-menu-options,
html[data-theme="dark"] .outreach-status-menu-options button > span,
html[data-theme="dark"] .outreach-note-grid > div,
html[data-theme="dark"] .outreach-form-grid input,
html[data-theme="dark"] .outreach-form-grid select,
html[data-theme="dark"] .outreach-form-grid textarea,
html[data-theme="dark"] .outreach-draft-generator input,
html[data-theme="dark"] .outreach-draft-generator select,
html[data-theme="dark"] .outreach-draft-generator textarea,
html[data-theme="dark"] .outreach-message-editor input,
html[data-theme="dark"] .outreach-message-editor textarea,
html[data-theme="dark"] .outreach-queue-helper > div,
html[data-theme="dark"] .outreach-review-helper > div,
html[data-theme="dark"] .outreach-revision-form,
html[data-theme="dark"] .outreach-revision-form textarea,
html[data-theme="dark"] .outreach-revise-modal,
html[data-theme="dark"] .outreach-decision-modal,
html[data-theme="dark"] .outreach-revise-modal-form textarea,
html[data-theme="dark"] .outreach-revise-examples button,
html[data-theme="dark"] .outreach-revise-working,
html[data-theme="dark"] .outreach-decision-form select,
html[data-theme="dark"] .outreach-decision-form textarea,
html[data-theme="dark"] .outreach-decision-warning,
html[data-theme="dark"] .outreach-contact-summary-meta span,
html[data-theme="dark"] .outreach-queue-decision-bar,
html[data-theme="dark"] .outreach-decision-card,
html[data-theme="dark"] .outreach-contact-route,
html[data-theme="dark"] .outreach-editor-tool-card,
html[data-theme="dark"] .outreach-autosave-pill,
html[data-theme="dark"] .outreach-editor-approve-card,
html[data-theme="dark"] .outreach-approved-next {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .outreach-revise-overlay {
  background: rgba(0, 0, 0, 0.58);
}

html[data-theme="dark"] .outreach-revise-modal {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(15, 20, 18, 0.98);
}

html[data-theme="dark"] .outreach-detail-card.has-draft .outreach-message-editor {
  border-color: rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(15, 20, 18, 0.94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .outreach-detail-card.has-draft #outreach-body {
  background: rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .outreach-editor-approve-card {
  border-color: rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .outreach-filter-drawer summary::after {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .outreach-status-menu-options button.is-active,
html[data-theme="dark"] .outreach-campaign-card.is-active {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 32%),
    rgba(255, 200, 0, 0.11);
}

html[data-theme="dark"] .outreach-research-run {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .outreach-prompt-chip {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .outreach-prompt-chip.is-active {
  border-color: rgba(255, 200, 0, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .outreach-research-run span {
  background: rgba(255, 200, 0, 0.12);
}

@media (max-width: 640px) {

  .field-card-operator-task {
    grid-template-columns: 1fr;
  }

  .outreach-revision-form {
    grid-template-columns: 1fr;
  }

  .outreach-queue-helper,
  .outreach-review-helper {
    grid-template-columns: 1fr;
  }

  .outreach-record {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .outreach-record-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .field-card-review-gate {
    flex-direction: column;
  }

  .field-card-review-checks {
    justify-content: flex-start;
    max-width: none;
  }

  .field-card-generated-review-heading,
  .field-card-generated-review-grid {
    grid-template-columns: 1fr;
  }

  .field-card-generated-review-heading {
    flex-direction: column;
  }

  .field-card-generated-review-primary-action,
  .field-card-generated-review-primary-action input,
  .field-card-generated-review-primary-action .button,
  .field-card-generated-review-secondary-actions .button-row,
  .field-card-generated-review-secondary-actions input,
  .field-card-generated-review-secondary-actions select,
  .field-card-generated-review-secondary-actions .button {
    width: 100%;
  }
}

body:has(.outreach-console),
.site-main-shell:has(.outreach-console),
.site-main:has(.outreach-console),
.site-main:has(.outreach-console) + .site-footer {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.16), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(86, 207, 174, 0.12), transparent 24%),
    linear-gradient(180deg, #f7f8fb 0%, #fffdf7 52%, #f7f8fb 100%);
}

.site-main-shell:has(.outreach-console) {
  min-height: 100dvh;
}

.outreach-command-card {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(255, 200, 0, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 235, 0.94));
  box-shadow: var(--shadow-soft);
}

.outreach-command-card.is-simple-home {
  grid-template-columns: minmax(0, 1fr);
  padding: 22px;
}

.outreach-command-card.is-simple-home .outreach-command-copy {
  justify-items: start;
}

.outreach-command-card.is-simple-home h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.outreach-command-card.is-simple-home p {
  max-width: 560px;
}

.outreach-command-copy {
  display: grid;
  gap: 8px;
  align-content: center;
  min-width: 0;
}

.outreach-command-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.5rem, 2.8vw, 2.32rem);
  line-height: 1.04;
}

.outreach-command-copy p {
  max-width: 760px;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.55;
}

.outreach-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-workflow-step {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  text-align: left;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.outreach-workflow-step:hover,
.outreach-workflow-step:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.22);
  box-shadow: var(--shadow-card);
  outline: 0;
}

.outreach-workflow-step span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.08);
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 950;
}

.outreach-workflow-step strong {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.1;
}

.outreach-workflow-step small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
}

.outreach-workflow-step.is-active span {
  background: rgba(255, 200, 0, 0.28);
}

.outreach-workflow-step.is-ready span {
  background: rgba(86, 207, 174, 0.22);
}

.outreach-workflow-step.is-selected {
  border-color: rgba(255, 200, 0, 0.58);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 36%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 30px rgba(255, 200, 0, 0.14);
}

.outreach-workspace-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.outreach-workspace-link {
  display: grid;
  gap: 3px;
  min-height: 64px;
  align-content: center;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.outreach-workspace-link:hover,
.outreach-workspace-link:focus-visible {
  background: rgba(255, 200, 0, 0.13);
  color: var(--foreground);
  outline: 0;
  transform: translateY(-1px);
}

.outreach-workspace-link strong {
  color: inherit;
  font-size: 0.9rem;
  font-weight: 950;
}

.outreach-workspace-link span {
  font-size: 0.72rem;
  font-weight: 820;
  line-height: 1.25;
}

.outreach-workspace-link.is-active {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 38%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.36);
}

.outreach-filter-drawer {
  border: 1px dashed rgba(148, 163, 184, 0.48);
  border-radius: 15px;
  background: rgba(248, 250, 252, 0.56);
}

.outreach-filter-drawer summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}

.outreach-filter-drawer summary::-webkit-details-marker {
  display: none;
}

.outreach-filter-drawer summary::after {
  content: "+";
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.065);
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.outreach-filter-drawer[open] summary::after {
  content: "-";
}

.outreach-filter-drawer summary small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 840;
}

.outreach-filter-drawer summary strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outreach-filter-drawer-body {
  display: grid;
  gap: 10px;
  padding: 0 10px 10px;
}

.outreach-filter-drawer .outreach-campaign-strip {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.outreach-filter-drawer .outreach-campaign-card {
  min-height: 72px;
  padding: 10px;
  border-radius: 14px;
  box-shadow: none;
}

.outreach-filter-drawer .outreach-campaign-card span {
  font-size: 0.66rem;
}

.outreach-filter-drawer .outreach-campaign-card strong {
  font-size: 1.08rem;
}

.outreach-filter-drawer .outreach-campaign-card small {
  font-size: 0.68rem;
}

.outreach-simple-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid rgba(86, 207, 174, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.11), transparent 32%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.outreach-simple-guide > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.outreach-simple-guide ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outreach-simple-guide li {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 830;
  line-height: 1.35;
}

.outreach-gmail-status {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
  user-select: text;
}

.outreach-gmail-reconnect-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 122, 102, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 122, 102, 0.12), transparent 32%),
    rgba(255, 250, 247, 0.98);
  box-shadow: var(--shadow-soft);
}

.outreach-gmail-reconnect-card > div {
  display: grid;
  min-width: min(100%, 440px);
  gap: 4px;
}

.outreach-gmail-reconnect-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-gmail-reconnect-card strong {
  color: var(--foreground);
  font-size: clamp(1.08rem, 2vw, 1.36rem);
  font-weight: 950;
  line-height: 1.08;
}

.outreach-gmail-reconnect-card p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-home-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.outreach-home-action {
  display: grid;
  gap: 10px;
  min-height: 188px;
  align-content: center;
  padding: 22px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.outreach-home-action:hover,
.outreach-home-action:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 200, 0, 0.44);
  box-shadow: var(--shadow-soft);
  outline: 0;
}

.outreach-home-action.is-primary {
  border-color: rgba(86, 207, 174, 0.32);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.98);
}

.outreach-home-action span {
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.07);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 930;
}

.outreach-home-action strong {
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  font-weight: 950;
  line-height: 1.15;
}

.outreach-home-action p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-overview-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.outreach-overview-primary {
  display: grid;
  gap: 10px;
  align-content: center;
  min-width: 0;
  padding: 4px;
}

.outreach-overview-primary span,
.outreach-overview-stats span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-overview-primary strong {
  color: var(--foreground);
  font-size: clamp(1.45rem, 2.8vw, 2.05rem);
  font-weight: 960;
  line-height: 1.05;
}

.outreach-overview-primary p,
.outreach-overview-stats p,
.outreach-overview-note {
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.45;
}

.outreach-overview-primary .button {
  width: fit-content;
  margin-top: 2px;
}

.outreach-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-overview-stats > div {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.86);
}

.outreach-overview-stats strong {
  color: var(--foreground);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 960;
  line-height: 0.95;
}

.outreach-overview-stats p {
  font-size: 0.82rem;
}

.outreach-overview-note {
  grid-column: 1 / -1;
  padding-top: 2px;
  font-size: 0.86rem;
}

.outreach-campaign-performance {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding-top: 4px;
}

.outreach-performance-card {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}

.outreach-performance-card span,
.outreach-performance-card small {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 880;
}

.outreach-performance-card strong {
  color: var(--foreground);
  font-size: 1.55rem;
  font-weight: 960;
  line-height: 0.95;
}

.outreach-performance-card p {
  margin: 0;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 820;
  line-height: 1.35;
}

.outreach-advanced-fields {
  padding: 8px 2px;
  border: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.7);
  border-radius: 0;
  background: transparent;
}

.outreach-advanced-fields summary {
  display: flex;
  width: fit-content;
  gap: 6px 10px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.72);
  cursor: pointer;
  color: var(--muted-foreground);
}

.outreach-advanced-fields summary span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-advanced-fields summary strong {
  font-size: 0.78rem;
  font-weight: 820;
}

.outreach-advanced-fields > .outreach-form-grid {
  margin-top: 12px;
}

.outreach-manual-form {
  display: grid;
  gap: 14px;
}

.outreach-required-block {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 34%),
    rgba(248, 250, 252, 0.78);
}

.outreach-required-block p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-contact-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.outreach-manual-form > label,
.outreach-contact-route-grid label {
  display: grid;
  gap: 7px;
}

.outreach-manual-form input,
.outreach-manual-form select,
.outreach-manual-form textarea {
  min-height: 44px;
  width: 100%;
}

.outreach-live-status {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 32;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border: 1px solid rgba(11, 105, 183, 0.15);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.outreach-live-status.is-active {
  border-color: rgba(255, 200, 0, 0.46);
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.98);
}

.outreach-live-status strong,
.outreach-live-status p {
  margin: 0;
}

.outreach-live-status strong {
  display: block;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 950;
}

.outreach-live-status p {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 780;
}

.outreach-progress-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.outreach-progress-list li {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.065);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
}

.outreach-progress-list li.is-active {
  background: rgba(255, 200, 0, 0.24);
  color: var(--foreground);
}

.outreach-live-dot,
.outreach-spinner {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.outreach-live-dot {
  background: rgba(86, 207, 174, 0.72);
  box-shadow: 0 0 0 6px rgba(86, 207, 174, 0.16);
}

.outreach-spinner {
  border: 3px solid rgba(255, 200, 0, 0.22);
  border-top-color: #ffc800;
  animation: outreach-spin 820ms linear infinite;
}

@keyframes outreach-spin {
  to {
    transform: rotate(360deg);
  }
}

.outreach-schedule-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.outreach-schedule-panel > .button-row {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.outreach-schedule-panel > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-schedule-panel span {
  color: var(--muted-foreground);
  font-size: 0.75rem;
  font-weight: 900;
}

.outreach-schedule-panel > div:first-child > span {
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-schedule-panel strong {
  color: var(--foreground);
  font-size: 1.08rem;
  font-weight: 950;
}

.outreach-schedule-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.42;
}

.outreach-schedule-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.outreach-schedule-stats span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.1);
  color: var(--foreground);
}

.outreach-automation-toggle {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(11, 105, 183, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  cursor: pointer;
}

.outreach-automation-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #087a62;
}

.outreach-automation-toggle:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.58;
}

.outreach-automation-toggle span {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.outreach-grid {
  grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.48fr);
}

.outreach-console.is-mode-dashboard .outreach-campaign-strip,
.outreach-console.is-mode-dashboard .outreach-grid {
  display: none;
}

.outreach-console:not(.is-mode-research) .outreach-research-card {
  display: none;
}

.outreach-console.is-mode-research .outreach-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: min(1280px, 100%);
  width: 100%;
  margin-inline: auto;
}

.outreach-console.is-mode-research .outreach-campaign-strip,
.outreach-console.is-mode-research .outreach-list-panel,
.outreach-console.is-mode-research .outreach-detail-card {
  display: none;
}

.outreach-console.is-mode-drafts .outreach-campaign-strip,
.outreach-console.is-mode-drafts .outreach-create-card,
.outreach-console.is-mode-drafts .outreach-draft-generator,
.outreach-console.is-mode-send .outreach-create-card,
.outreach-console.is-mode-sent .outreach-create-card,
.outreach-console.is-mode-send .outreach-draft-generator,
.outreach-console.is-mode-sent .outreach-draft-generator {
  display: none;
}

.outreach-console.is-mode-sent .outreach-message-head .button-row,
.outreach-console.is-mode-sent .outreach-revision-form,
.outreach-console.is-mode-sent .outreach-send-panel,
.outreach-console.is-mode-sent .outreach-muted-actions {
  display: none;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-next-step,
.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-contact-summary {
  display: none;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-contact-hero {
  order: 1;
}

.outreach-console.is-mode-sent .outreach-replies-panel.is-sent-primary {
  order: 2;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-message-editor {
  order: 3;
  gap: 11px;
  border-color: rgba(148, 163, 184, 0.18);
  background:
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.06), transparent 34%),
    rgba(248, 250, 252, 0.84);
  box-shadow: none;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft .outreach-message-head h3 {
  font-size: 1.08rem;
}

.outreach-console.is-mode-sent .outreach-detail-card.has-draft #outreach-body {
  min-height: 260px;
  background: rgba(255, 255, 255, 0.72);
}

.outreach-console.is-mode-send .outreach-list-panel,
.outreach-console.is-mode-sent .outreach-list-panel {
  align-self: start;
}

.outreach-list-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 247, 0.94));
}

.outreach-card {
  border-color: rgba(226, 232, 240, 0.9);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(255, 255, 255, 0.98);
}

.outreach-campaign-strip {
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
}

.outreach-campaign-card {
  min-height: 126px;
  border-color: rgba(226, 232, 240, 0.92);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.96);
}

.outreach-campaign-card.is-active {
  border-color: rgba(255, 200, 0, 0.56);
  box-shadow: 0 14px 30px rgba(255, 200, 0, 0.14);
}

.outreach-campaign-all {
  border-color: rgba(86, 207, 174, 0.24);
}

.outreach-record {
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  min-height: 124px;
  padding: 12px;
  overflow: hidden;
}

.outreach-record-selectable {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}

.outreach-record-selectable.is-selected {
  border-color: rgba(86, 207, 174, 0.48);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.18), transparent 34%),
    rgba(248, 250, 252, 0.96);
}

.outreach-record-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.outreach-record-main:focus-visible {
  border-radius: 16px;
  outline: 3px solid rgba(11, 105, 183, 0.18);
  outline-offset: 3px;
}

.outreach-record-check {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  align-self: start;
  border-radius: 999px;
  cursor: pointer;
}

.outreach-record-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.outreach-record-check span {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid rgba(11, 105, 183, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7);
}

.outreach-record-check input:checked + span {
  border-color: rgba(86, 207, 174, 0.72);
  background: rgba(86, 207, 174, 0.88);
}

.outreach-record-check input:checked + span::after {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  margin: 5px auto 0;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.outreach-record-check.is-disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

.outreach-record-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  font-size: 1rem;
}

.outreach-research-card {
  overflow: hidden;
}

.outreach-batch-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(148, 163, 184, 0.07), transparent 34%),
    rgba(248, 250, 252, 0.82);
}

.outreach-batch-bar.has-selection {
  justify-content: space-between;
  border-color: rgba(86, 207, 174, 0.34);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

.outreach-batch-bar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-batch-bar strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
  line-height: 1.1;
}

.outreach-batch-bar span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.35;
}

.outreach-batch-bar .button-row {
  display: grid;
  grid-template-columns: auto auto minmax(104px, auto);
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.outreach-batch-bar .button {
  min-width: 0;
  white-space: nowrap;
}

.outreach-batch-bar .button-ghost {
  min-height: 34px;
  padding-inline: 11px;
  border-color: rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.68);
}

.outreach-write-drafts-button {
  min-height: 38px;
  padding-inline: 16px;
}

.outreach-prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.outreach-prompt-chip {
  min-height: 104px;
  align-content: start;
  padding: 15px;
  text-align: left;
  white-space: normal;
}

.outreach-prompt-chip strong {
  font-size: 0.95rem;
}

.outreach-prompt-chip span {
  line-height: 1.35;
}

.outreach-big-action {
  min-height: 62px;
  width: min(360px, 100%);
  min-width: 220px;
  justify-self: center;
  border-radius: 999px;
  font-size: 1.08rem;
  box-shadow: 0 18px 38px rgba(11, 105, 183, 0.18);
}

.outreach-research-submit-row {
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
}

.outreach-console.is-mode-research .outreach-card {
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 28px;
}

.outreach-console.is-mode-research .outreach-form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.outreach-console.is-mode-research .outreach-form-grid input[name="query"] {
  min-height: 58px;
  padding-inline: 16px;
  font-size: 1rem;
  line-height: 1.45;
}

.outreach-console.is-mode-research .outreach-advanced-fields > .outreach-form-grid,
.outreach-console.is-mode-research .outreach-manual-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outreach-console.is-mode-research .outreach-research-runs,
.outreach-console.is-mode-research .outreach-create-card {
  max-width: none;
}

.outreach-console.is-mode-research .outreach-required-block,
.outreach-console.is-mode-research .outreach-contact-route-grid,
.outreach-console.is-mode-research .outreach-manual-form .outreach-field-wide,
.outreach-console.is-mode-research .outreach-manual-form details,
.outreach-console.is-mode-research .outreach-manual-form .outreach-big-action {
  grid-column: 1 / -1;
}

.outreach-research-working {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.92);
}

.outreach-research-working strong,
.outreach-research-working p {
  margin: 0;
}

.outreach-research-working strong {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 950;
}

.outreach-research-working p {
  margin-top: 3px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.4;
}

.outreach-research-runs {
  border: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.72);
  border-radius: 0;
  background: transparent;
  padding: 10px 2px 0;
}

.outreach-research-runs summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.72);
  cursor: pointer;
  color: var(--muted-foreground);
}

.outreach-research-runs summary span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 920;
  text-transform: uppercase;
}

.outreach-research-runs summary strong {
  font-size: 0.78rem;
  font-weight: 820;
}

.outreach-research-runs-help {
  margin: 10px 0 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-research-runs .outreach-research-run:first-of-type {
  margin-top: 12px;
}

.outreach-research-runs .outreach-research-run + .outreach-research-run {
  margin-top: 10px;
}

.outreach-form-grid input:focus,
.outreach-form-grid select:focus,
.outreach-form-grid textarea:focus,
.outreach-draft-generator input:focus,
.outreach-draft-generator select:focus,
.outreach-draft-generator textarea:focus,
.outreach-message-editor input:focus,
.outreach-message-editor textarea:focus,
.outreach-revision-form textarea:focus {
  border-color: rgba(11, 105, 183, 0.28);
  box-shadow: 0 0 0 3px rgba(11, 105, 183, 0.08);
  outline: 0;
}

.outreach-contact-hero {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.outreach-contact-avatar {
  width: 72px;
  height: 72px;
  font-size: 1.55rem;
}

.outreach-contact-copy {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.outreach-contact-copy h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.46rem, 2.5vw, 2.15rem);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.outreach-contact-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 780;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.outreach-contact-summary {
  display: grid;
  gap: 10px;
}

.outreach-queue-decision-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.78)),
    rgba(248, 250, 252, 0.84);
}

.outreach-queue-decision-bar > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.outreach-queue-decision-bar span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-queue-decision-bar strong {
  color: var(--foreground);
  font-size: 0.98rem;
  line-height: 1.2;
}

.outreach-queue-decision-bar p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.83rem;
  font-weight: 720;
  line-height: 1.45;
}

.outreach-queue-decision-bar .button-row {
  flex-shrink: 0;
}

.outreach-contact-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.outreach-contact-summary-meta span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.88);
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 880;
  line-height: 1;
  text-transform: capitalize;
}

.outreach-contact-summary-meta span:nth-child(2) {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.11);
  color: var(--foreground);
}

.outreach-decision-card,
.outreach-contact-route {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.82);
}

.outreach-decision-card span,
.outreach-contact-route span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-decision-card p,
.outreach-contact-route strong {
  margin: 0;
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 790;
  line-height: 1.52;
  overflow-wrap: anywhere;
}

.outreach-contact-route {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  padding-block: 12px;
}

.outreach-contact-route strong {
  font-weight: 890;
  text-align: right;
}

.outreach-quality-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 34%),
    rgba(248, 250, 252, 0.84);
}

.outreach-quality-panel > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-quality-panel > div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.outreach-quality-panel article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.outreach-quality-panel small {
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.outreach-quality-panel strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.outreach-quality-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-help-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 950;
}

.outreach-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(10px);
}

.outreach-help-modal {
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.11), transparent 32%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.outreach-help-modal-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.outreach-help-modal-head span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outreach-help-modal h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 3vw, 1.95rem);
  line-height: 1.05;
}

.outreach-help-modal ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outreach-help-modal li {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(86, 207, 174, 0.2);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
}

.outreach-help-modal strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 950;
}

.outreach-help-modal p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-batch-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(12px);
}

.outreach-batch-modal {
  display: grid;
  gap: 14px;
  width: min(620px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 32%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.outreach-batch-modal-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.outreach-batch-modal-head > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.outreach-batch-modal-head span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outreach-batch-modal h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.05;
}

.outreach-batch-progress {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.075);
}

.outreach-batch-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(86, 207, 174, 0.92), rgba(255, 200, 0, 0.9));
  transition: width 180ms ease;
}

.outreach-batch-note {
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.9);
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 780;
  line-height: 1.5;
}

.outreach-batch-list {
  display: grid;
  gap: 9px;
}

.outreach-batch-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.86);
}

.outreach-batch-item > span {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.22);
}

.outreach-batch-item.is-running > span {
  background: rgba(255, 200, 0, 0.9);
  box-shadow: 0 0 0 5px rgba(255, 200, 0, 0.14);
}

.outreach-batch-item.is-done > span {
  background: rgba(86, 207, 174, 0.92);
}

.outreach-batch-item.is-failed > span {
  background: rgba(255, 122, 102, 0.9);
}

.outreach-batch-item strong,
.outreach-batch-item p {
  margin: 0;
}

.outreach-batch-item strong {
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 930;
}

.outreach-batch-item p {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.35;
}

.outreach-status-pill {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: rgba(33, 33, 33, 0.055);
  color: var(--foreground);
  font-size: 0.73rem;
  font-weight: 950;
}

.outreach-status-pill.is-working {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.16);
}

.outreach-status-pill.is-ready {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.16);
}

.outreach-status-pill.is-done {
  border-color: rgba(11, 105, 183, 0.18);
  background: rgba(11, 105, 183, 0.1);
}

.outreach-status-pill.is-muted {
  color: var(--muted-foreground);
}

.outreach-next-step,
.outreach-step-card,
.outreach-send-panel {
  border: 1px solid rgba(11, 105, 183, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.06), transparent 34%),
    rgba(248, 250, 252, 0.92);
}

.outreach-next-step {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
}

.outreach-next-step span,
.outreach-step-card-head span,
.outreach-send-panel span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-next-step strong,
.outreach-step-card-head strong,
.outreach-send-panel strong {
  color: var(--foreground);
  font-size: 1.02rem;
  font-weight: 950;
}

.outreach-next-step p,
.outreach-step-card-head p,
.outreach-send-panel p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-step-card {
  padding: 14px;
}

.outreach-step-card-head {
  display: grid;
  gap: 5px;
}

.outreach-message-head p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 760;
}

.outreach-send-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
}

.outreach-send-panel > div:first-child {
  display: grid;
  gap: 5px;
}

.outreach-replies-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(248, 250, 252, 0.94);
}

.outreach-replies-panel.is-sent-primary {
  gap: 14px;
  padding: 16px;
  border-color: rgba(11, 105, 183, 0.18);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.15), transparent 32%),
    radial-gradient(circle at bottom left, rgba(255, 200, 0, 0.1), transparent 32%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.outreach-replies-panel.is-sent-primary .outreach-replies-head strong {
  font-size: clamp(1.12rem, 2vw, 1.45rem);
}

.outreach-follow-up-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 1.4fr);
  gap: 8px 18px;
  align-items: start;
  padding: 2px 0 14px;
  border-bottom: 1px solid var(--border-soft);
}

.outreach-follow-up-status > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.outreach-follow-up-status span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-follow-up-status strong {
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 950;
}

.outreach-follow-up-status.is-sent strong {
  color: #1f7a62;
}

.outreach-follow-up-status.is-failed strong,
.outreach-follow-up-status.is-unknown strong {
  color: #b84635;
}

.outreach-follow-up-status p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 750;
  line-height: 1.5;
}

.outreach-follow-up-status pre {
  grid-column: 1 / -1;
  max-height: 260px;
  overflow: auto;
  margin: 6px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--border-soft);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 710;
  line-height: 1.55;
  white-space: pre-wrap;
}

.outreach-replies-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.outreach-replies-head > div:first-child,
.outreach-reply-draft {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.outreach-replies-head span,
.outreach-reply-draft span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-replies-head strong,
.outreach-reply-draft strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
}

.outreach-replies-head p,
.outreach-replies-note,
.outreach-replies-empty {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.outreach-reply-list {
  display: grid;
  gap: 10px;
}

.outreach-reply-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
}

.outreach-reply-card.has-ai-draft {
  border-color: rgba(86, 207, 174, 0.28);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.11), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

.outreach-reply-card.is-archived {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(248, 250, 252, 0.76);
}

.outreach-reply-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.outreach-reply-meta strong {
  min-width: 0;
  color: var(--foreground);
  font-size: 0.94rem;
  font-weight: 950;
}

.outreach-reply-meta span,
.outreach-reply-meta small {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 850;
}

.outreach-reply-match {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(11, 105, 183, 0.15);
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.06);
  color: #0b69b7;
  font-size: 0.74rem;
  font-weight: 880;
  line-height: 1.25;
}

.outreach-reply-snippet {
  margin: 0;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 730;
  line-height: 1.56;
  white-space: pre-wrap;
}

.outreach-reply-draft {
  padding: 12px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.075), transparent 34%),
    rgba(248, 250, 252, 0.96);
}

.outreach-reply-draft pre {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.58;
  white-space: pre-wrap;
}

.outreach-muted-actions {
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

.outreach-muted-actions summary {
  width: fit-content;
  cursor: pointer;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.outreach-muted-actions .button-row {
  margin-top: 10px;
}

.outreach-decision-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(8px);
}

.outreach-decision-modal {
  display: grid;
  gap: 18px;
  width: min(560px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(226, 232, 240, 0.96);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
}

.outreach-decision-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.outreach-decision-modal-head > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.outreach-decision-modal-head span,
.outreach-decision-form label > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.outreach-decision-modal-head h3 {
  margin: 0;
  color: var(--foreground);
  font-size: 1.35rem;
  line-height: 1.08;
}

.outreach-decision-modal-head p {
  margin: 0;
  color: var(--muted-foreground);
  font-weight: 720;
  line-height: 1.48;
}

.outreach-decision-form {
  display: grid;
  gap: 14px;
}

.outreach-decision-form label,
.outreach-decision-warning {
  display: grid;
  gap: 8px;
}

.outreach-decision-form select,
.outreach-decision-form textarea {
  width: 100%;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.88);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.outreach-decision-form select {
  min-height: 46px;
  padding: 0 12px;
}

.outreach-decision-form textarea {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

.outreach-decision-warning {
  padding: 13px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.84);
}

.outreach-decision-warning strong {
  color: var(--foreground);
  font-size: 0.92rem;
}

.outreach-decision-warning p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.5;
}

.outreach-empty-detail h2,
.outreach-empty-detail p {
  margin: 0;
}

.outreach-empty-detail p {
  color: var(--muted-foreground);
  line-height: 1.55;
}

html[data-theme="dark"] .site-main:has(.outreach-console) {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.09), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(86, 207, 174, 0.08), transparent 24%),
    linear-gradient(180deg, #0f1412 0%, #121915 54%, #0b0f0d 100%);
}

html[data-theme="dark"] .outreach-command-card,
html[data-theme="dark"] .outreach-live-status,
html[data-theme="dark"] .outreach-workspace-nav,
html[data-theme="dark"] .outreach-simple-guide,
html[data-theme="dark"] .outreach-list-panel,
html[data-theme="dark"] .outreach-card {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(15, 20, 18, 0.98);
  color: var(--foreground);
}

html[data-theme="dark"] .outreach-workflow-step,
html[data-theme="dark"] .outreach-workspace-link.is-active,
html[data-theme="dark"] .outreach-simple-guide li,
html[data-theme="dark"] .outreach-home-action,
html[data-theme="dark"] .outreach-overview-panel,
html[data-theme="dark"] .outreach-overview-stats > div,
html[data-theme="dark"] .outreach-performance-card,
html[data-theme="dark"] .outreach-advanced-fields,
html[data-theme="dark"] .outreach-required-block,
html[data-theme="dark"] .outreach-research-working,
html[data-theme="dark"] .outreach-research-runs,
html[data-theme="dark"] .outreach-batch-bar,
html[data-theme="dark"] .outreach-gmail-reconnect-card,
html[data-theme="dark"] .outreach-schedule-panel,
html[data-theme="dark"] .outreach-schedule-stats span,
html[data-theme="dark"] .outreach-next-step,
html[data-theme="dark"] .outreach-step-card,
html[data-theme="dark"] .outreach-send-panel,
html[data-theme="dark"] .outreach-replies-panel,
html[data-theme="dark"] .outreach-reply-card,
html[data-theme="dark"] .outreach-reply-draft,
html[data-theme="dark"] .outreach-quality-panel,
html[data-theme="dark"] .outreach-quality-panel article,
html[data-theme="dark"] .outreach-reply-meta span,
html[data-theme="dark"] .outreach-reply-meta small {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .outreach-status-pill,
html[data-theme="dark"] .outreach-gmail-status,
html[data-theme="dark"] .outreach-muted-actions {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .outreach-batch-bar.has-selection {
  border-color: rgba(86, 207, 174, 0.3);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .outreach-gmail-status {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .outreach-help-overlay {
  background: rgba(0, 0, 0, 0.52);
}

html[data-theme="dark"] .outreach-help-modal {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.075), transparent 32%),
    rgba(15, 20, 18, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .outreach-help-modal li {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .outreach-record-selectable.is-selected {
  border-color: rgba(86, 207, 174, 0.42);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.075);
}

html[data-theme="dark"] .outreach-record-check span {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.12);
}

html[data-theme="dark"] .outreach-batch-overlay {
  background: rgba(0, 0, 0, 0.56);
}

html[data-theme="dark"] .outreach-batch-modal {
  border-color: var(--border);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 32%),
    rgba(15, 20, 18, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .outreach-batch-note,
html[data-theme="dark"] .outreach-batch-item {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 980px) {
  .outreach-command-card,
  .outreach-schedule-panel,
  .outreach-send-panel,
  .outreach-editor-actions {
    grid-template-columns: 1fr;
  }

  .outreach-overview-panel {
    grid-template-columns: 1fr;
  }

  .outreach-workspace-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .outreach-simple-guide,
  .outreach-home-actions,
  .outreach-contact-route-grid {
    grid-template-columns: 1fr;
  }

  .outreach-simple-guide ul {
    grid-template-columns: 1fr;
  }

  .outreach-workflow {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .outreach-contact-hero {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .outreach-contact-hero .button-row {
    grid-column: 1 / -1;
  }

  .outreach-queue-decision-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .outreach-queue-decision-bar .button-row {
    width: 100%;
  }

  .outreach-queue-decision-bar .button-row .button {
    flex: 1 1 0;
  }
}

@media (max-width: 640px) {
  .outreach-command-card,
  .outreach-card,
  .outreach-live-status {
    border-radius: 20px;
  }

  .outreach-command-card {
    padding: 14px;
  }

  .outreach-workspace-nav {
    display: flex;
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .outreach-workspace-link {
    flex: 0 0 132px;
  }

  .outreach-overview-stats {
    grid-template-columns: 1fr;
  }

  .outreach-schedule-panel .button-row,
  .outreach-schedule-stats {
    justify-content: stretch;
  }

  .outreach-schedule-panel .button-row .button,
  .outreach-schedule-stats span {
    flex: 1 1 auto;
    justify-content: center;
  }

  .outreach-follow-up-status {
    grid-template-columns: 1fr;
  }

  .outreach-home-action {
    min-height: 132px;
  }

  .outreach-campaign-strip {
    display: flex;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .outreach-campaign-card {
    flex: 0 0 176px;
  }

  .outreach-form-grid,
  .outreach-draft-generator {
    grid-template-columns: 1fr;
  }

  .outreach-contact-avatar {
    width: 64px;
    height: 64px;
  }
}

.report-period-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.report-period-form .field {
  min-width: min(220px, 100%);
}

.report-status-card {
  border-color: rgba(86, 207, 174, 0.38);
  background: #f3fffb;
  color: var(--foreground);
  font-weight: 800;
}

html[data-theme="dark"] .report-status-card {
  border-color: rgba(86, 207, 174, 0.26);
  background: rgba(32, 40, 35, 0.9);
  color: var(--foreground);
}

.report-status-card.is-error {
  border-color: rgba(255, 122, 102, 0.42);
  background: #fff4f1;
}

html[data-theme="dark"] .report-status-card.is-error {
  border-color: rgba(255, 122, 102, 0.34);
  background: rgba(68, 28, 24, 0.7);
}

.report-share-created-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.report-share-created-card a {
  overflow-wrap: anywhere;
  color: #0b69b7;
}

html[data-theme="dark"] .report-share-created-card a {
  color: var(--accent);
}

.report-source-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-source-card {
  align-content: start;
}

.report-compact-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.report-input-form {
  gap: 20px;
}

.report-quick-metrics {
  max-width: 760px;
}

.report-share-manager,
.report-share-list {
  display: grid;
  gap: 14px;
}

.report-share-create-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
}

.report-share-create-form .field {
  min-width: 180px;
}

.report-share-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: var(--surface-row);
}

.report-share-row p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
}

html[data-theme="dark"] .report-share-row {
  border-color: var(--border-soft);
  background: var(--surface-row);
  color: var(--foreground);
}

.report-public-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 200, 0, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.14), transparent 44%),
    rgba(255, 255, 255, 0.92);
}

.report-public-toolbar .report-print-hint {
  display: block;
  max-width: 560px;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
}

html[data-theme="dark"] .report-public-toolbar {
  border-color: rgba(255, 200, 0, 0.24);
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.12), transparent 44%),
    rgba(28, 29, 25, 0.92);
  color: var(--foreground);
}

.monthly-report-document {
  display: grid;
  gap: 22px;
  width: min(980px, 100%);
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 18px;
  border: 1px solid rgba(33, 33, 33, 0.1);
  background: #fffdf8;
  color: #1f2933;
  box-shadow: var(--shadow-soft);
}

.monthly-report-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 4px solid var(--brand);
}

.monthly-report-header h2 {
  color: #1f2933;
  font-size: clamp(2rem, 5vw, 3.4rem);
  letter-spacing: 0;
  line-height: 1;
}

.monthly-report-header p {
  color: #4b5563;
}

.monthly-report-linkline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  line-height: 1.55;
}

.monthly-report-linkline a {
  color: #0b69b7;
  font-weight: 750;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.monthly-report-linkline a:hover {
  color: #074f8b;
}

.monthly-report-kicker {
  color: #0b69b7;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.monthly-report-mark {
  display: inline-grid;
  place-items: center;
  width: 76px;
  min-width: 76px;
  height: 66px;
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 14px;
  background: var(--brand);
}

.monthly-report-mark img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46px;
  object-fit: contain;
}

.monthly-report-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.monthly-report-section h3 {
  color: #1f2933;
  font-size: 1.28rem;
  letter-spacing: 0;
}

.monthly-report-section p,
.monthly-report-section li {
  color: #374151;
  line-height: 1.62;
}

.monthly-report-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.monthly-report-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.monthly-report-metrics div {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  text-align: center;
}

.monthly-report-metrics span {
  color: #5d6674;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-report-metrics strong {
  color: #1f2933;
  font-size: 1.32rem;
  letter-spacing: 0;
}

.monthly-report-split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.monthly-report-split-head h3 {
  margin: 0;
}

.monthly-report-split-head p {
  margin: 3px 0 0;
  color: #5d6674;
  font-size: 0.88rem;
  line-height: 1.5;
}

.monthly-report-media-coverage {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    linear-gradient(135deg, rgba(242, 183, 5, 0.12), transparent 40%),
    #ffffff;
  break-inside: avoid;
}

.monthly-report-media-grid {
  display: grid;
  gap: 10px;
}

.monthly-report-media-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.94);
}

.monthly-report-media-card span {
  color: #5d6674;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.monthly-report-media-card strong {
  color: #1f2933;
  font-size: 0.98rem;
  line-height: 1.28;
}

.monthly-report-media-card p {
  margin: 0;
  color: #374151;
  font-size: 0.82rem;
  line-height: 1.48;
}

.monthly-report-media-card a {
  color: #0b69b7;
  font-size: 0.8rem;
  font-weight: 850;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.monthly-report-impact-snapshot,
.monthly-report-proof-section {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  break-inside: avoid;
}

.monthly-report-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 9px;
}

.monthly-report-impact-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  justify-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(46, 64, 87, 0.05);
  text-align: center;
}

.monthly-report-impact-grid span,
.monthly-report-proof-card span {
  color: #5d6674;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-report-impact-grid strong {
  color: #1f2933;
  font-size: 1.18rem;
  line-height: 1.1;
}

.monthly-report-impact-grid small {
  color: #5d6674;
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.35;
}

.monthly-report-cat-wall {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    radial-gradient(circle at top left, rgba(242, 183, 5, 0.14), transparent 28%),
    #ffffff;
  break-inside: avoid;
}

.monthly-report-cat-wall-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.monthly-report-cat-wall-head h3 {
  margin: 0;
}

.monthly-report-cat-wall-head p {
  margin: 3px 0 0;
  color: #5d6674;
  font-size: 0.88rem;
  line-height: 1.5;
}

.monthly-report-cat-wall-head strong {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(242, 183, 5, 0.18);
  color: #1f2933;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.monthly-report-cat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.monthly-report-cat-badge {
  display: inline-flex;
  max-width: 168px;
  min-width: 0;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  color: #1f2933;
  font-size: 0.72rem;
  font-weight: 850;
}

.monthly-report-cat-badge img {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border: 2px solid #ffffff;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(46, 64, 87, 0.15);
}

.monthly-report-cat-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monthly-report-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monthly-report-proof-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.92);
}

.monthly-report-proof-card > img {
  width: 54px;
  height: 54px;
  border: 2px solid #ffffff;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(46, 64, 87, 0.14);
}

.monthly-report-proof-card div {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.monthly-report-proof-card h4 {
  margin: 0;
  color: #1f2933;
  font-size: 1rem;
  line-height: 1.1;
}

.monthly-report-proof-card p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #374151;
  font-size: 0.78rem;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.monthly-report-proof-card p strong {
  color: #1f2933;
}

.monthly-report-funnel-section {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background:
    linear-gradient(135deg, rgba(11, 105, 183, 0.07), transparent 38%),
    #ffffff;
  break-inside: avoid;
}

.monthly-report-funnel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.monthly-report-funnel-stage {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 7px;
  align-content: start;
  justify-items: center;
  min-height: 178px;
  padding: 12px 10px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.94);
  text-align: center;
}

.monthly-report-funnel-stage-top {
  display: grid;
  gap: 5px;
  justify-items: center;
  width: 100%;
}

.monthly-report-funnel-stage span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.1);
  color: #0b69b7;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.monthly-report-funnel-stage em {
  color: #8a7284;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.monthly-report-funnel-stage strong {
  color: #1f2933;
  font-size: 1.28rem;
  line-height: 1.1;
}

.monthly-report-funnel-stage small {
  color: #5d6674;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.32;
}

.monthly-report-funnel-stage p {
  margin: 0;
  color: #6c7480;
  font-size: 0.67rem;
  font-weight: 650;
  line-height: 1.36;
}

.monthly-report-funnel-stage i {
  position: absolute;
  top: 50%;
  right: -18px;
  z-index: 1;
  width: 16px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.28);
  pointer-events: none;
  transform: translateY(-50%);
}

.monthly-report-funnel-stage i::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 2px solid rgba(11, 105, 183, 0.34);
  border-right: 2px solid rgba(11, 105, 183, 0.34);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.monthly-report-shorts-appendix {
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  break-inside: avoid;
}

.monthly-report-short-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.monthly-report-short-card {
  display: grid;
  min-width: 0;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.92);
  color: inherit;
  text-decoration: none;
}

.monthly-report-short-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 7px;
  background: rgba(46, 64, 87, 0.08);
}

.monthly-report-short-card span {
  color: #0b69b7;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.monthly-report-short-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: #1f2933;
  font-size: 0.78rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.monthly-report-short-card small {
  color: #6c7480;
  font-size: 0.66rem;
  font-weight: 750;
  line-height: 1.2;
}

.monthly-report-trend-section {
  gap: 14px;
}

.monthly-report-trend-chart {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  min-height: 210px;
  padding: 18px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
}

.monthly-report-trend-column {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 7px;
  min-width: 0;
  text-align: center;
}

.monthly-report-trend-bar-shell {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 132px;
  border-bottom: 1px solid rgba(46, 64, 87, 0.2);
}

.monthly-report-trend-bar {
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  width: min(38px, 72%);
  min-height: 0;
  border-radius: 8px 8px 3px 3px;
  background: #edf2f7;
}

.monthly-report-trend-segment {
  display: block;
  width: 100%;
}

.monthly-report-trend-segment.is-patreon,
.monthly-report-trend-legend i.is-patreon {
  background: #cf1616;
}

.monthly-report-trend-segment.is-paypal,
.monthly-report-trend-legend i.is-paypal {
  background: #2e4057;
}

.monthly-report-trend-value {
  color: #1f2933;
  font-size: 0.76rem;
  font-weight: 850;
  white-space: nowrap;
}

.monthly-report-trend-label {
  color: #5d6674;
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.monthly-report-trend-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: #4b5563;
  font-size: 0.82rem;
  font-weight: 800;
}

.monthly-report-trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.monthly-report-trend-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.monthly-report-table-wrap {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
}

.monthly-report-trend-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  color: #374151;
  font-size: 0.86rem;
}

.monthly-report-trend-table th,
.monthly-report-trend-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(33, 33, 33, 0.08);
  text-align: left;
  white-space: nowrap;
}

.monthly-report-trend-table th {
  color: #1f2933;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(46, 64, 87, 0.05);
}

.monthly-report-trend-table tr:last-child td {
  border-bottom: 0;
}

.monthly-report-note {
  color: #5d6674;
  font-size: 0.84rem;
}

.monthly-report-audience-trend-section {
  gap: 14px;
}

.monthly-report-audience-line-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  background: #ffffff;
  overflow: hidden;
}

.monthly-report-audience-series-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.monthly-report-audience-series-header strong {
  color: #1f2933;
  font-size: 0.94rem;
}

.monthly-report-audience-series-header span {
  color: #5d6674;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-report-audience-line-chart {
  display: block;
  width: 100%;
  height: auto;
  min-height: 210px;
}

.monthly-report-audience-grid-line {
  stroke: rgba(46, 64, 87, 0.12);
  stroke-width: 1;
}

.monthly-report-audience-axis-line {
  stroke: rgba(46, 64, 87, 0.26);
  stroke-width: 1.4;
}

.monthly-report-audience-axis-value,
.monthly-report-audience-axis-label {
  fill: #5d6674;
  font-size: 0.7rem;
  font-weight: 800;
}

.monthly-report-audience-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.monthly-report-audience-line.is-main-instagram,
.monthly-report-audience-point.is-main-instagram {
  stroke: #0b69b7;
}

.monthly-report-audience-point {
  fill: #fffdf8;
  stroke-width: 3;
}

.monthly-report-audience-point-label {
  fill: #1f2933;
  font-size: 0.68rem;
  font-weight: 900;
}

.monthly-report-audience-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: #374151;
  font-size: 0.84rem;
  font-weight: 850;
}

.monthly-report-audience-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.monthly-report-audience-legend i {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: #0b69b7;
}

@media screen {
  html[data-theme="dark"] .monthly-report-document {
    border-color: rgba(255, 255, 255, 0.12);
    background:
      radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
      linear-gradient(180deg, rgba(28, 36, 31, 0.98), rgba(18, 25, 21, 0.98));
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-header {
    border-bottom-color: rgba(255, 200, 0, 0.72);
  }

  html[data-theme="dark"] .monthly-report-header h2,
  html[data-theme="dark"] .monthly-report-section h3,
  html[data-theme="dark"] .monthly-report-proof-card h4,
  html[data-theme="dark"] .monthly-report-proof-card p strong,
  html[data-theme="dark"] .monthly-report-metrics strong,
  html[data-theme="dark"] .monthly-report-impact-grid strong,
  html[data-theme="dark"] .monthly-report-funnel-stage strong,
  html[data-theme="dark"] .monthly-report-trend-value,
  html[data-theme="dark"] .monthly-report-audience-series-header strong,
  html[data-theme="dark"] .monthly-report-audience-point-label,
  html[data-theme="dark"] .monthly-report-trend-table th {
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-header p,
  html[data-theme="dark"] .monthly-report-section p,
  html[data-theme="dark"] .monthly-report-section li,
  html[data-theme="dark"] .monthly-report-proof-card p,
  html[data-theme="dark"] .monthly-report-trend-table,
  html[data-theme="dark"] .monthly-report-trend-table td {
    color: rgba(247, 245, 234, 0.82);
  }

  html[data-theme="dark"] .monthly-report-linkline a {
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-linkline a:hover {
    color: var(--accent);
  }

  html[data-theme="dark"] .monthly-report-kicker {
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-metrics div,
  html[data-theme="dark"] .monthly-report-media-coverage,
  html[data-theme="dark"] .monthly-report-impact-snapshot,
  html[data-theme="dark"] .monthly-report-proof-section,
  html[data-theme="dark"] .monthly-report-funnel-section,
  html[data-theme="dark"] .monthly-report-cat-wall,
  html[data-theme="dark"] .monthly-report-shorts-appendix,
  html[data-theme="dark"] .monthly-report-trend-chart,
  html[data-theme="dark"] .monthly-report-table-wrap,
  html[data-theme="dark"] .monthly-report-audience-line-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(15, 20, 18, 0.62);
  }

  html[data-theme="dark"] .monthly-report-metrics span,
  html[data-theme="dark"] .monthly-report-split-head p,
  html[data-theme="dark"] .monthly-report-media-card span,
  html[data-theme="dark"] .monthly-report-impact-grid span,
  html[data-theme="dark"] .monthly-report-impact-grid small,
  html[data-theme="dark"] .monthly-report-proof-card span,
  html[data-theme="dark"] .monthly-report-funnel-stage small,
  html[data-theme="dark"] .monthly-report-funnel-stage p,
  html[data-theme="dark"] .monthly-report-short-card small,
  html[data-theme="dark"] .monthly-report-cat-wall-head p,
  html[data-theme="dark"] .monthly-report-trend-label,
  html[data-theme="dark"] .monthly-report-trend-legend,
  html[data-theme="dark"] .monthly-report-audience-series-header span,
  html[data-theme="dark"] .monthly-report-audience-axis-value,
  html[data-theme="dark"] .monthly-report-audience-axis-label,
  html[data-theme="dark"] .monthly-report-note {
    color: rgba(247, 245, 234, 0.62);
    fill: rgba(247, 245, 234, 0.62);
  }

  html[data-theme="dark"] .monthly-report-cat-wall-head strong {
    background: rgba(255, 200, 0, 0.16);
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-cat-badge {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(247, 245, 234, 0.88);
  }

  html[data-theme="dark"] .monthly-report-impact-grid div,
  html[data-theme="dark"] .monthly-report-media-card,
  html[data-theme="dark"] .monthly-report-proof-card,
  html[data-theme="dark"] .monthly-report-funnel-stage,
  html[data-theme="dark"] .monthly-report-short-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.07);
  }

  html[data-theme="dark"] .monthly-report-media-card strong {
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-media-card a {
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-funnel-stage span {
    background: rgba(255, 200, 0, 0.12);
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-short-card span {
    background: transparent;
    color: var(--accent-strong);
  }

  html[data-theme="dark"] .monthly-report-short-card strong {
    color: var(--foreground);
  }

  html[data-theme="dark"] .monthly-report-funnel-stage em {
    color: rgba(247, 245, 234, 0.5);
  }

  html[data-theme="dark"] .monthly-report-trend-bar-shell {
    border-bottom-color: rgba(255, 255, 255, 0.18);
  }

  html[data-theme="dark"] .monthly-report-trend-bar {
    background: rgba(255, 255, 255, 0.08);
  }

  html[data-theme="dark"] .monthly-report-trend-table th,
  html[data-theme="dark"] .monthly-report-trend-table td {
    border-bottom-color: rgba(255, 255, 255, 0.09);
  }

  html[data-theme="dark"] .monthly-report-trend-table th {
    background: rgba(255, 255, 255, 0.06);
  }

  html[data-theme="dark"] .monthly-report-audience-grid-line,
  html[data-theme="dark"] .monthly-report-audience-axis-line {
    stroke: rgba(255, 255, 255, 0.14);
  }

  html[data-theme="dark"] .monthly-report-audience-point {
    fill: rgba(15, 20, 18, 0.96);
  }

  html[data-theme="dark"] .monthly-report-audience-point-label,
  html[data-theme="dark"] .monthly-report-audience-legend {
    color: rgba(247, 245, 234, 0.86);
    fill: rgba(247, 245, 234, 0.86);
  }
}

.command-center {
  display: grid;
  gap: 22px;
}

.command-hero,
.command-status,
.command-attention,
.command-panel,
.command-cockpit-card,
.command-template-panel,
.command-growth-lab,
.command-suggestions,
.command-stat-grid > div,
.command-signal-strip article {
  border: 1px solid var(--border-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(45, 32, 14, 0.08);
}

.command-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 28px;
}

.command-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.command-hero h2,
.command-hero p,
.command-section-head h3,
.command-section-head p,
.command-item-card p,
.command-brief-card p,
.command-empty p {
  margin: 0;
}

.command-hero h2 {
  color: var(--foreground);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0;
}

.command-hero p {
  max-width: 760px;
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.5;
}

.command-status {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 18px;
  color: var(--muted-foreground);
}

.command-status span,
.command-section-head span,
.command-item-topline,
.command-item-meta,
.command-brief-card > span,
.command-add-form strong {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-status strong {
  color: var(--foreground);
  font-size: 0.92rem;
}

.command-status.is-error {
  border-color: rgba(190, 75, 75, 0.36);
  background: rgba(255, 245, 242, 0.96);
}

.command-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.command-stat-grid > div {
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: 22px;
}

.command-stat-grid span {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.command-stat-grid strong {
  color: var(--foreground);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 0.95;
}

.command-signal-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.command-signal-strip article {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 22px;
}

.command-signal-strip span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.command-signal-strip strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1;
}

.command-signal-strip p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.32;
}

.command-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(300px, 0.84fr);
  gap: 16px;
  align-items: stretch;
}

.command-cockpit-card {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 260px;
  padding: 18px;
  border-radius: 26px;
}

.command-cockpit-card.is-primary {
  border-color: rgba(218, 143, 36, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.96);
}

.command-today-list,
.command-goal-mini-list,
.command-signal-list {
  display: grid;
  gap: 10px;
}

.command-today-list div,
.command-goal-mini-list div,
.command-signal-list div {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.78);
}

.command-today-list span,
.command-goal-mini-list span,
.command-signal-list span {
  color: var(--accent-foreground);
  font-size: 0.7rem;
  font-weight: 920;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-today-list strong,
.command-goal-mini-list strong,
.command-signal-list strong {
  color: var(--foreground);
  line-height: 1.16;
}

.command-signal-list strong {
  font-size: 1.28rem;
}

.command-today-list p,
.command-goal-mini-list p,
.command-signal-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-attention,
.command-panel,
.command-template-panel,
.command-growth-lab,
.command-suggestions {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 26px;
}

.command-template-panel.is-collapsed {
  padding: 12px;
}

.command-workflow-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.82);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  padding: 14px 16px;
  text-align: left;
}

.command-workflow-toggle span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-workflow-toggle strong {
  color: var(--foreground);
  font-size: 0.94rem;
}

.command-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
}

.command-section-head h3 {
  color: var(--foreground);
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.05;
}

.command-section-head p {
  max-width: 460px;
  color: var(--muted-foreground);
  font-size: 0.94rem;
  font-weight: 760;
  line-height: 1.45;
  text-align: right;
}

.command-attention-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.command-template-grid,
.command-suggestion-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.command-template-grid button,
.command-suggestion-grid article {
  display: grid;
  gap: 9px;
  min-height: 160px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 252, 243, 0.82);
  color: inherit;
  text-align: left;
}

.command-template-grid button {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-template-grid button:hover,
.command-template-grid button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(218, 143, 36, 0.34);
  background: rgba(255, 248, 226, 0.94);
  outline: none;
}

.command-template-grid button:disabled,
.command-template-grid button.is-running {
  cursor: default;
  opacity: 0.72;
}

.command-template-grid button:disabled:hover {
  transform: none;
}

.command-template-grid span,
.command-suggestion-grid span {
  color: var(--accent-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-template-grid strong,
.command-suggestion-grid strong {
  color: var(--foreground);
  line-height: 1.14;
}

.command-template-grid p,
.command-suggestion-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-suggestion-grid .button {
  align-self: end;
  width: 100%;
}

.command-growth-lab {
  border-color: rgba(59, 130, 246, 0.18);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.11), transparent 32%),
    rgba(255, 255, 255, 0.95);
}

.command-growth-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.command-growth-kpi-grid > div {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.command-growth-kpi-grid span {
  color: var(--accent-foreground);
  font-size: 0.7rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-growth-kpi-grid strong {
  color: var(--foreground);
  font-size: clamp(1.2rem, 1.7vw, 1.55rem);
  line-height: 1;
}

.command-growth-kpi-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 730;
  line-height: 1.34;
}

.command-growth-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.command-growth-grid > div {
  display: grid;
  gap: 8px;
  min-height: 154px;
  padding: 15px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: rgba(255, 252, 243, 0.78);
}

.command-growth-grid span {
  color: var(--accent-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-growth-grid strong {
  color: var(--foreground);
  line-height: 1.14;
}

.command-growth-grid p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-growth-analytics-grid,
.command-growth-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.command-growth-analytics-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: rgba(255, 252, 243, 0.76);
}

.command-growth-funnel {
  display: grid;
  gap: 9px;
}

.command-growth-funnel > div {
  display: grid;
  grid-template-columns: minmax(96px, 0.5fr) 44px minmax(140px, 1fr);
  gap: 10px;
  align-items: center;
}

.command-growth-funnel span,
.command-growth-target-list span,
.command-economics-list span,
.command-competitor-table span,
.command-checklist-list span {
  color: var(--accent-foreground);
  font-size: 0.7rem;
  font-weight: 920;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-growth-funnel strong {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 920;
  text-align: right;
}

.command-growth-funnel i {
  display: block;
  min-width: 8px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.68), rgba(218, 143, 36, 0.62));
}

.command-growth-target-list,
.command-economics-list,
.command-contract-list,
.command-competitor-table,
.command-checklist-list,
.command-video-review-list {
  display: grid;
  gap: 10px;
}

.command-growth-target-list > div,
.command-economics-list > form,
.command-contract-list > form,
.command-competitor-table > div,
.command-checklist-list > div,
.command-video-review-list > div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.command-economics-list > form > div:first-child,
.command-growth-row-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.command-growth-target-list strong,
.command-economics-list strong,
.command-contract-list strong,
.command-competitor-table strong,
.command-checklist-list strong,
.command-video-review-list strong {
  color: var(--foreground);
  line-height: 1.16;
}

.command-growth-target-list p,
.command-economics-list p,
.command-contract-list p,
.command-competitor-table p,
.command-checklist-list p,
.command-video-review-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 730;
  line-height: 1.38;
}

.command-growth-target-list small,
.command-economics-list small,
.command-contract-list small,
.command-competitor-table small,
.command-video-check-grid small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.35;
}

.command-growth-row-topline select,
.command-video-check-grid select {
  width: auto;
  min-width: 112px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 840;
  padding: 7px 9px;
}

.command-growth-score-grid,
.command-economics-input-grid,
.command-video-check-grid {
  display: grid;
  gap: 8px;
}

.command-growth-score-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.command-economics-input-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  padding-top: 4px;
}

.command-video-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 6px;
}

.command-growth-score-grid label,
.command-economics-input-grid label,
.command-video-check-grid label {
  display: grid;
  gap: 5px;
}

.command-growth-score-grid label > span,
.command-economics-input-grid label > span,
.command-video-check-grid label > span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-growth-score-grid input,
.command-economics-input-grid input {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 780;
  padding: 8px 9px;
}

.command-economics-input-grid button {
  border: 1px solid rgba(218, 143, 36, 0.3);
  border-radius: 12px;
  background: rgba(255, 246, 218, 0.9);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  padding: 9px 11px;
}

.command-video-cost-form {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.command-growth-add-form {
  background: rgba(255, 255, 255, 0.58);
}

.command-growth-analytics-card.is-video-review {
  grid-column: 1 / -1;
}

.command-competitor-table span,
.command-checklist-list span {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.1);
}

.command-competitor-table span.is-high,
.command-checklist-list span.is-high {
  background: rgba(190, 75, 75, 0.12);
  color: #9f3434;
}

.command-competitor-table span.is-medium,
.command-checklist-list span.is-medium {
  background: rgba(218, 143, 36, 0.14);
}

.command-attention-list article,
.command-item-card,
.command-brief-card,
.command-focus-stage,
.command-empty,
.command-add-form {
  border: 1px solid var(--border-soft);
  background: rgba(255, 252, 243, 0.82);
}

.command-focus-stage {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(45, 32, 14, 0.08);
}

.command-focus-list {
  display: grid;
  gap: 14px;
}

.command-focus-list article {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(218, 143, 36, 0.22);
  border-radius: 24px;
  background: rgba(255, 252, 243, 0.86);
}

.command-focus-list span {
  color: var(--accent-foreground);
  font-size: 0.78rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-focus-list strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.08;
}

.command-focus-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.98rem;
  font-weight: 760;
  line-height: 1.45;
}

.command-focus-actions,
.command-task-status-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.command-focus-actions button,
.command-task-status-actions button {
  border: 1px solid rgba(218, 143, 36, 0.3);
  border-radius: 999px;
  background: rgba(255, 246, 218, 0.9);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 920;
  padding: 8px 12px;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-focus-actions button:hover,
.command-focus-actions button:focus-visible,
.command-task-status-actions button:hover,
.command-task-status-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(218, 143, 36, 0.52);
  background: rgba(255, 235, 177, 0.96);
  outline: none;
}

.command-attention-list article {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border-radius: 20px;
}

.command-attention-list span {
  color: var(--accent-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.command-attention-list strong,
.command-item-card strong,
.command-empty strong {
  color: var(--foreground);
  line-height: 1.18;
}

.command-attention-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.88rem;
  font-weight: 720;
  line-height: 1.38;
}

.command-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, 0.74fr);
  gap: 18px;
  align-items: start;
}

.command-panel.is-goals {
  grid-column: 1 / -1;
}

.command-goal-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
  gap: 14px;
  align-items: start;
}

.command-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.command-column-head span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-column-head strong {
  display: inline-flex;
  min-width: 32px;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.14);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 920;
}

.command-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
  align-items: start;
}

.command-card-list {
  display: grid;
  gap: 12px;
}

.command-card-list.is-compact-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.command-item-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-radius: 20px;
}

.command-item-card.is-high {
  border-color: rgba(218, 143, 36, 0.36);
  background: linear-gradient(180deg, rgba(255, 248, 226, 0.94), rgba(255, 255, 255, 0.86));
}

.command-item-card p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  font-weight: 720;
  line-height: 1.42;
}

.command-item-topline,
.command-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.command-item-meta {
  justify-content: flex-start;
  letter-spacing: 0;
  text-transform: none;
}

.command-item-meta span {
  display: inline-flex;
  max-width: 100%;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

.command-link-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.command-link-stack span {
  display: inline-flex;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(255, 200, 0, 0.13);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.command-linked-list {
  display: grid;
  gap: 6px;
  padding-top: 2px;
}

.command-linked-list small {
  display: block;
  overflow-wrap: anywhere;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 820;
  line-height: 1.35;
}

.command-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.14);
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 920;
}

.command-item-card select,
.command-add-form input,
.command-add-form select,
.command-add-form textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.command-item-card select {
  width: auto;
  min-width: 108px;
  padding: 7px 10px;
  font-size: 0.78rem;
}

.command-done-tasks {
  display: grid;
  gap: 12px;
}

.command-done-tasks > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(255, 252, 243, 0.74);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  padding: 12px 14px;
  text-align: left;
}

.command-done-tasks > button span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-done-tasks > button strong {
  font-size: 0.9rem;
}

.command-add-form {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
}

.command-add-form input,
.command-add-form select,
.command-add-form textarea {
  padding: 11px 12px;
}

.command-add-form textarea {
  min-height: 78px;
  resize: vertical;
}

.command-add-form.is-horizontal {
  grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1fr) minmax(180px, 0.74fr) auto;
  align-items: center;
}

.command-goal-wizard-shell {
  display: grid;
  gap: 10px;
}

.command-add-form label {
  display: grid;
  gap: 7px;
}

.command-add-form label > span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.command-brief-card,
.command-empty {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 22px;
}

.command-brief-card h3 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.05;
}

.command-brief-card p,
.command-brief-card li {
  color: var(--muted-foreground);
  font-weight: 760;
  line-height: 1.5;
}

.command-brief-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
}

.command-brief-actions {
  display: grid;
  gap: 9px;
}

.command-brief-actions > strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-brief-actions div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.64);
}

.command-brief-actions span {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  font-weight: 760;
  line-height: 1.42;
}

.command-brief-actions button {
  border: 1px solid rgba(218, 143, 36, 0.32);
  border-radius: 999px;
  background: rgba(255, 246, 218, 0.9);
  color: var(--foreground);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 900;
  padding: 8px 11px;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-brief-actions button:hover,
.command-brief-actions button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(218, 143, 36, 0.52);
  background: rgba(255, 235, 177, 0.96);
  outline: none;
}

.command-weekly-review {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(218, 143, 36, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 32%),
    rgba(255, 252, 243, 0.86);
}

.command-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.command-review-list {
  display: grid;
  gap: 8px;
  min-height: 130px;
  padding: 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.66);
}

.command-review-list > strong {
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.command-review-list ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.command-review-list li,
.command-review-list p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 740;
  line-height: 1.4;
}

.command-risk-note {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 236, 189, 0.46);
}

.command-task-link {
  display: inline-flex;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid rgba(218, 143, 36, 0.28);
  border-radius: 999px;
  background: rgba(255, 246, 218, 0.86);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.command-task-link:hover,
.command-task-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(218, 143, 36, 0.48);
  background: rgba(255, 235, 177, 0.96);
  outline: none;
}

html[data-theme="dark"] .command-hero,
html[data-theme="dark"] .command-status,
html[data-theme="dark"] .command-attention,
html[data-theme="dark"] .command-panel,
html[data-theme="dark"] .command-cockpit-card,
html[data-theme="dark"] .command-template-panel,
html[data-theme="dark"] .command-growth-lab,
html[data-theme="dark"] .command-suggestions,
html[data-theme="dark"] .command-stat-grid > div,
html[data-theme="dark"] .command-signal-strip article {
  border-color: var(--border-soft);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(15, 20, 18, 0.96);
  box-shadow: none;
}

html[data-theme="dark"] .command-cockpit-card.is-primary {
  border-color: rgba(255, 214, 90, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 90, 0.1), transparent 34%),
    rgba(15, 20, 18, 0.96);
}

html[data-theme="dark"] .command-attention-list article,
html[data-theme="dark"] .command-today-list div,
html[data-theme="dark"] .command-goal-mini-list div,
html[data-theme="dark"] .command-signal-list div,
html[data-theme="dark"] .command-workflow-toggle,
html[data-theme="dark"] .command-template-grid button,
html[data-theme="dark"] .command-suggestion-grid article,
html[data-theme="dark"] .command-growth-grid > div,
html[data-theme="dark"] .command-growth-kpi-grid > div,
html[data-theme="dark"] .command-growth-analytics-card,
html[data-theme="dark"] .command-growth-target-list > div,
html[data-theme="dark"] .command-economics-list > form,
html[data-theme="dark"] .command-contract-list > form,
html[data-theme="dark"] .command-competitor-table > div,
html[data-theme="dark"] .command-checklist-list > div,
html[data-theme="dark"] .command-video-review-list > div,
html[data-theme="dark"] .command-item-card,
html[data-theme="dark"] .command-brief-card,
html[data-theme="dark"] .command-focus-stage,
html[data-theme="dark"] .command-focus-list article,
html[data-theme="dark"] .command-empty,
html[data-theme="dark"] .command-add-form {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .command-item-card.is-high {
  border-color: rgba(255, 214, 90, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 214, 90, 0.08), transparent 30%),
    rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .command-item-card select,
html[data-theme="dark"] .command-add-form input,
html[data-theme="dark"] .command-add-form select,
html[data-theme="dark"] .command-add-form textarea,
html[data-theme="dark"] .command-growth-row-topline select,
html[data-theme="dark"] .command-video-check-grid select,
html[data-theme="dark"] .command-growth-score-grid input,
html[data-theme="dark"] .command-economics-input-grid input,
html[data-theme="dark"] .command-item-meta span,
html[data-theme="dark"] .command-link-stack span {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .command-risk-note {
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .command-task-link {
  border-color: rgba(255, 214, 90, 0.24);
  background: rgba(255, 214, 90, 0.1);
}

html[data-theme="dark"] .command-focus-actions button,
html[data-theme="dark"] .command-task-status-actions button,
html[data-theme="dark"] .command-done-tasks > button,
html[data-theme="dark"] .command-weekly-review,
html[data-theme="dark"] .command-review-list {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .command-brief-actions div {
  background: rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .command-brief-actions button {
  border-color: rgba(255, 214, 90, 0.24);
  background: rgba(255, 214, 90, 0.1);
}

@media (max-width: 1180px) {
  .command-main-grid,
  .command-secondary-grid,
  .command-cockpit,
  .command-signal-strip,
  .command-growth-grid,
  .command-growth-kpi-grid,
  .command-growth-analytics-grid,
  .command-growth-decision-grid,
  .command-economics-input-grid,
  .command-video-check-grid,
  .command-template-grid,
  .command-suggestion-grid,
  .command-attention-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-panel.is-brief {
    grid-column: 1 / -1;
  }

  .command-goal-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .command-hero,
  .command-section-head,
  .command-status {
    align-items: stretch;
    flex-direction: column;
  }

  .command-section-head p {
    text-align: left;
  }

  .command-stat-grid,
  .command-cockpit,
  .command-signal-strip,
  .command-growth-grid,
  .command-growth-kpi-grid,
  .command-growth-analytics-grid,
  .command-growth-decision-grid,
  .command-growth-score-grid,
  .command-economics-input-grid,
  .command-video-check-grid,
  .command-template-grid,
  .command-suggestion-grid,
  .command-main-grid,
  .command-secondary-grid,
  .command-card-list.is-compact-list,
  .command-attention-list,
  .command-add-form.is-horizontal {
    grid-template-columns: 1fr;
  }

  .command-hero .button {
    width: 100%;
  }

  .command-hero-actions {
    width: 100%;
  }

  .command-brief-actions div {
    grid-template-columns: 1fr;
  }

  .command-growth-funnel > div {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .command-growth-funnel i {
    grid-column: 1 / -1;
  }

  .command-brief-actions button {
    width: 100%;
  }

  .command-review-grid {
    grid-template-columns: 1fr;
  }
}

.brand-board-grid,
.brand-context-grid,
.brand-swatch-grid {
  display: grid;
  gap: 18px;
}

.brand-board-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.brand-board-card,
.brand-board-section,
.brand-context-preview {
  border: 1px solid var(--border-soft);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-soft);
}

.brand-board-card,
.brand-board-section {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.brand-board-card-head {
  display: grid;
  gap: 8px;
}

.brand-board-card-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  letter-spacing: 0;
}

.brand-logo-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brand-logo-tile,
.brand-context-card,
.brand-context-preview,
.brand-swatch-card {
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.74);
}

.brand-logo-tile {
  display: grid;
  min-height: 180px;
  place-items: center;
  padding: 18px;
}

.brand-logo-tile span,
.brand-context-card span,
.brand-context-preview > span,
.brand-swatch-card small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-logo-tile img {
  width: min(112px, 68%);
  height: auto;
}

.brand-logo-tile.is-light {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 200, 0, 0.14), transparent 34%),
    #fffdf5;
}

.brand-logo-tile.is-dark {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 200, 0, 0.16), transparent 34%),
    #101612;
}

.brand-logo-downloads {
  overflow: hidden;
}

.brand-logo-download-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.brand-logo-download-card {
  display: grid;
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 200, 0, 0.12), transparent 36%),
    rgba(255, 255, 255, 0.72);
}

.brand-logo-download-preview {
  display: grid;
  min-height: 154px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 20px;
  background:
    linear-gradient(45deg, rgba(23, 18, 10, 0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(23, 18, 10, 0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(23, 18, 10, 0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(23, 18, 10, 0.05) 75%),
    #fffdf7;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

.brand-logo-download-preview img {
  display: block;
  width: min(128px, 82%);
  height: auto;
  object-fit: contain;
}

.brand-logo-download-preview.is-full img {
  width: min(164px, 94%);
}

.brand-logo-download-copy {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.brand-logo-download-copy strong {
  color: var(--foreground);
  font-size: 1.02rem;
  line-height: 1.16;
}

.brand-logo-download-copy p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.45;
}

.brand-generated-logo-concepts {
  overflow: hidden;
}

.brand-generated-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.brand-generated-logo-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 200, 0, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.72);
}

.brand-generated-logo-image {
  overflow: hidden;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 18px;
  background: #fffdf7;
}

.brand-generated-logo-image img {
  display: block;
  width: 100%;
  height: auto;
}

.brand-generated-logo-card strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 900;
}

.brand-generated-logo-card p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.45;
}

.brand-context-card {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
}

.brand-context-card strong {
  color: var(--foreground);
  line-height: 1.36;
}

.brand-context-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brand-context-preview {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.brand-sidebar-preview,
.brand-topbar-preview,
.brand-loading-preview {
  display: flex;
  min-height: 98px;
  align-items: center;
  gap: 12px;
  border-radius: 18px;
  padding: 14px;
}

.brand-sidebar-preview {
  background: #fff7dc;
}

.brand-sidebar-preview img {
  flex: 0 0 auto;
}

.brand-sidebar-preview div {
  display: grid;
  gap: 3px;
}

.brand-sidebar-preview strong,
.brand-topbar-preview b {
  color: #17120a;
}

.brand-sidebar-preview small {
  color: rgba(23, 18, 10, 0.62);
  font-weight: 760;
}

.brand-topbar-preview {
  justify-content: space-between;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 209, 92, 0.36), transparent 32%),
    #f4b000;
}

.brand-topbar-preview nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.brand-topbar-preview b {
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.brand-loading-preview {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 200, 0, 0.18), transparent 32%),
    radial-gradient(circle at 82% 82%, rgba(86, 207, 174, 0.18), transparent 34%),
    #fffdf6;
}

.brand-loading-preview i {
  display: block;
  width: min(190px, 72%);
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f4b000, #56cfae);
}

.brand-swatch-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.brand-swatch-card {
  display: grid;
  gap: 9px;
  padding: 14px;
}

.brand-swatch-card span {
  display: block;
  height: 64px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 16px;
}

.brand-swatch-card strong {
  color: var(--foreground);
  font-size: 0.94rem;
  line-height: 1.24;
}

@media (max-width: 900px) {
  .brand-board-grid,
  .brand-context-grid,
  .brand-logo-download-grid,
  .brand-generated-logo-grid {
    grid-template-columns: 1fr;
  }

  .brand-swatch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .brand-logo-comparison,
  .brand-logo-download-card,
  .brand-swatch-grid {
    grid-template-columns: 1fr;
  }

  .brand-topbar-preview {
    align-items: flex-start;
    flex-direction: column;
  }
}

html[data-theme="dark"] .brand-board-card,
html[data-theme="dark"] .brand-board-section,
html[data-theme="dark"] .brand-context-preview,
html[data-theme="dark"] .brand-context-card,
html[data-theme="dark"] .brand-logo-download-card,
html[data-theme="dark"] .brand-generated-logo-card,
html[data-theme="dark"] .brand-swatch-card {
  border-color: var(--border);
  background: var(--surface);
  color: var(--foreground);
}

html[data-theme="dark"] .brand-logo-tile,
html[data-theme="dark"] .brand-logo-download-preview,
html[data-theme="dark"] .brand-generated-logo-image {
  border-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .brand-logo-download-preview {
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.08) 75%),
    #151d18;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-size: 20px 20px;
}

html[data-theme="dark"] .brand-logo-tile.is-light,
html[data-theme="dark"] .brand-sidebar-preview,
html[data-theme="dark"] .brand-topbar-preview,
html[data-theme="dark"] .brand-loading-preview {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.project-linking-field,
.project-manual-log-editor,
.project-pet-copy {
  gap: 16px;
}

.project-manual-update-list {
  display: grid;
  gap: 16px;
}

.project-pet-selector-toolbar,
.project-manual-log-header,
.project-manual-update-top,
.project-update-pet-row,
.project-stale-chip-row,
.project-pet-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.project-pet-selector-toolbar,
.project-manual-log-header,
.project-manual-update-top {
  align-items: center;
  justify-content: space-between;
}

.project-pet-selection-count {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.38);
  background: #fff4ca;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 800;
}

.project-pet-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.project-pet-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: white;
  text-align: left;
  color: var(--foreground);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.project-pet-card:hover,
.project-pet-pill:hover,
.project-stale-chip:hover,
.project-update-pet-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.project-pet-card.is-selected,
.project-pet-pill.is-selected {
  border-color: rgba(255, 200, 0, 0.52);
  background: linear-gradient(180deg, #fff7d2 0%, #fffdfa 100%);
}

.project-pet-avatar,
.project-pet-pill-avatar,
.project-update-pet-avatar {
  position: relative;
  overflow: hidden;
  background: var(--surface-soft);
}

.project-pet-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 1px solid var(--border);
}

.project-pet-pill-avatar,
.project-update-pet-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.project-pet-avatar img,
.project-pet-pill-avatar img,
.project-update-pet-avatar img {
  object-fit: cover;
}

.project-pet-copy {
  display: grid;
  min-width: 0;
  text-align: left;
}

.project-pet-copy strong {
  line-height: 1.2;
}

.project-pet-copy span {
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted-foreground);
  word-break: break-word;
}

.project-pet-slug {
  color: var(--accent-strong) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem !important;
}

.project-pet-note {
  color: var(--muted-foreground);
}

.project-stale-chip,
.project-pet-pill,
.project-update-pet-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-radius: 999px;
  color: var(--foreground);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.project-stale-chip {
  padding: 0 14px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-soft);
  font-size: 0.82rem;
  font-weight: 800;
}

.project-pet-pill,
.project-update-pet-link {
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--border);
  background: white;
  font-size: 0.9rem;
  font-weight: 800;
}

.project-manual-update-card {
  gap: 16px;
  background: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);
}

.project-update-pet-link {
  background: var(--surface-soft);
}

.transparency-heading {
  display: block;
  color: var(--foreground);
  line-height: 1.4;
}

.transparency-archive-card {
  background: linear-gradient(180deg, #fff9df 0%, #ffffff 100%);
}

.transparency-project-card {
  align-content: start;
}

.content-card-body {
  gap: 12px;
}

.meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.92rem;
  color: var(--foreground);
  font-weight: 700;
  line-height: 1.5;
}

.snapshot-card strong,
.project-meter strong {
  display: block;
  font-size: clamp(1.35rem, 2vw, 2rem);
  color: var(--foreground);
  line-height: 1.08;
}

.notice-card {
  background: #ffffff;
}

.shorts-motion-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: min(calc((100vw - var(--sidebar-rail-width, 0px)) * 0.5625), 76svh, 920px);
  min-height: clamp(520px, calc((100vw - var(--sidebar-rail-width, 0px)) * 0.54), 760px);
  align-items: end;
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #050506;
  color: #ffffff;
  box-shadow: none;
}

.shorts-motion-hero::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 34%, rgba(0, 0, 0, 0.58) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.22) 36%, transparent 74%);
  pointer-events: none;
}

.shorts-motion-hero-bg,
.shorts-motion-hero-frame,
.shorts-motion-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.shorts-motion-hero-bg {
  z-index: 0;
  object-fit: cover;
  opacity: 0.92;
  filter: none;
  pointer-events: none;
}

.shorts-motion-hero-frame {
  z-index: 1;
  overflow: hidden;
  background: #050506;
  box-shadow: none;
}

.shorts-motion-hero-video {
  display: block;
  object-fit: cover;
  object-position: center center;
}

.shorts-motion-hero-copy {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(720px, calc(100% - 48px));
  gap: 14px;
  align-self: end;
  justify-items: start;
  margin: 0 0 clamp(34px, 5.2vw, 78px) max(32px, calc((100vw - var(--sidebar-rail-width, 0px) - 1180px) / 2 + 34px));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
}

.shorts-motion-hero-copy .eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}

.shorts-motion-hero-copy h1 {
  max-width: 12.5ch;
  margin: 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(2.35rem, 4.1vw, 4.25rem);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.46);
}

.shorts-motion-hero-tags,
.shorts-motion-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.shorts-motion-hero-tags span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
    rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  font-weight: 820;
  line-height: 1;
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(120%);
}

.shorts-motion-hero-actions .button {
  width: auto;
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 16px;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.shorts-motion-hero-actions .button-primary {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.96);
  color: #090909;
}

.shorts-motion-hero-actions .button-primary:is(:hover, :focus-visible) {
  background: #ffffff;
  color: #090909;
}

.shorts-motion-hero-actions .button-secondary {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
    rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.92);
}

.shorts-motion-hero-actions .button-secondary:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)),
    rgba(0, 0, 0, 0.42);
  color: #ffffff;
}

.shorts-flow-hero-progress {
  --shorts-hero-progress: 0%;
  display: flex;
  width: min(360px, 72vw);
  gap: 10px;
  margin-top: 2px;
}

.shorts-flow-hero-progress button {
  appearance: none;
  position: relative;
  flex: 1 1 0;
  height: 6px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition:
    background 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.shorts-flow-hero-progress button span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

.shorts-flow-hero-progress button.is-active {
  background: rgba(255, 255, 255, 0.32);
  cursor: default;
}

.shorts-flow-hero-progress button.is-active span {
  width: var(--shorts-hero-progress);
}

.shorts-flow-hero-progress button:not(.is-active):is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.44);
  outline: none;
  transform: translateY(-1px);
}

body:has(.site-shell-rescue-console) .site-main:has(.shorts-motion-hero) {
  --site-main-top: var(--rescue-topbar-height) !important;
}

body:has(.site-shell-rescue-console) .page-band:has(.shorts-motion-hero) {
  padding: 0 !important;
}

body:has(.site-shell-rescue-console) .page-band:has(.shorts-motion-hero) > .container {
  width: 100%;
  max-width: none;
  gap: 18px;
  padding-inline: 0;
}

body:has(.site-shell-rescue-console) .shorts-motion-hero + .shorts-season-nav,
body:has(.site-shell-rescue-console) .shorts-motion-hero ~ .shorts-season-section,
body:has(.site-shell-rescue-console) .shorts-motion-hero ~ .empty-state,
body:has(.site-shell-rescue-console) .shorts-motion-hero ~ .shorts-minis-archive {
  width: min(calc(100% - 32px), var(--content-max));
  margin-inline: auto;
}

@media (min-width: 721px) and (max-width: 980px) {
  .shorts-motion-hero {
    height: min(72vw, 620px);
    min-height: 520px;
  }

  .shorts-motion-hero-copy {
    width: min(640px, calc(100% - 64px));
    margin: 0 32px 36px;
  }

  .shorts-motion-hero-copy h1 {
    max-width: 12ch;
    font-size: clamp(2.35rem, 7vw, 3.25rem);
  }
}

@media (max-width: 720px) {
  .shorts-motion-hero {
    height: min(72svh, 560px);
    min-height: 480px;
  }

  .shorts-motion-hero::before {
    background:
      linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.64) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.16), transparent 58%);
  }

  .shorts-motion-hero-copy {
    width: calc(100% - 48px);
    gap: 12px;
    margin: 0 24px 24px;
  }

  .shorts-motion-hero-copy h1 {
    max-width: 9.5ch;
    font-size: clamp(1.9rem, 9.6vw, 2.65rem);
    line-height: 1.02;
  }

  .shorts-motion-hero-tags,
  .shorts-motion-hero-actions {
    gap: 8px;
  }

  .shorts-motion-hero-tags span {
    min-height: 31px;
    padding-inline: 10px;
    font-size: 0.76rem;
  }

  .shorts-motion-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(260px, 100%);
  }

  .shorts-motion-hero-actions .button {
    width: 100%;
  }

  .shorts-flow-hero-progress {
    width: min(300px, 100%);
    gap: 6px;
    margin-top: 0;
  }

  .shorts-flow-hero-progress button {
    height: 5px;
  }
}

.shorts-hero-card {
  border-color: rgba(15, 23, 42, 0.1);
  background: #ffffff;
}

.shorts-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr);
  gap: 18px;
  align-items: flex-end;
}

.shorts-hero-copy,
.shorts-hero-side {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.shorts-hero-card .hero-lead {
  max-width: 50ch;
}

.shorts-hero-tags {
  min-width: 0;
  gap: 8px;
}

.shorts-hero-tags .tag,
.shorts-episode-card .tag,
.shorts-season-stats .tag {
  min-width: 0;
  max-width: 100%;
}

.shorts-hero-tags .tag > span:last-child,
.shorts-episode-card .tag > span:last-child,
.shorts-season-stats .tag > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.shorts-hero-metric {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid rgba(201, 213, 226, 0.78);
  background: rgba(255, 255, 255, 0.84);
}

.shorts-hero-metric span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shorts-hero-metric strong {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  line-height: 1.08;
}

.shorts-hero-actions {
  gap: 8px;
}

.shorts-season-nav {
  position: sticky;
  top: max(8px, env(safe-area-inset-top));
  z-index: 12;
  padding: 10px;
  border: 1px solid rgba(201, 213, 226, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 42px rgba(16, 24, 40, 0.1);
  backdrop-filter: blur(14px);
}

.shorts-season-nav-scroll {
  display: grid;
  grid-auto-columns: minmax(168px, 220px);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
}

.shorts-season-nav-link {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--foreground);
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.shorts-season-nav-link:hover,
.shorts-season-nav-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  background: #ffffff;
  box-shadow: var(--shadow-card);
  outline: 0;
}

.shorts-season-nav-link span,
.shorts-season-nav-link small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.shorts-season-nav-link strong {
  overflow: hidden;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-season-jump {
  display: grid;
  min-width: 0;
  gap: 10px;
}

.shorts-season-jump .button-row {
  min-width: 0;
}

.shorts-season-jump .button {
  min-width: 0;
  max-width: 100%;
}

.shorts-season-jump .button,
.shorts-hero-side > .meta-label {
  overflow-wrap: anywhere;
}

.shorts-season-section {
  position: relative;
  scroll-margin-top: 112px;
}

.shorts-season-section + .shorts-season-section {
  margin-top: 18px;
  border-top: 0;
}

.shorts-season-section + .shorts-season-section::before {
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 860px);
  height: 1px;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(255, 200, 0, 0),
    rgba(255, 200, 0, 0.54) 16%,
    rgba(94, 224, 184, 0.42) 46%,
    rgba(11, 105, 183, 0.18) 74%,
    rgba(11, 105, 183, 0)
  );
}

.shorts-season-section + .shorts-season-section::after {
  position: absolute;
  top: -4px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 200, 0, 0.38);
  content: "";
}

.shorts-season-disclosure {
  overflow: hidden;
  border: 1px solid rgba(201, 213, 226, 0.78);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.shorts-season-summary-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
}

.shorts-season-summary-toggle::-webkit-details-marker {
  display: none;
}

.shorts-season-summary-toggle:hover {
  background: rgba(15, 23, 42, 0.04);
}

.shorts-season-disclosure[open] .shorts-season-summary-toggle {
  border-bottom: 1px solid var(--border-soft);
}

.shorts-season-summary-toggle .shorts-season-copy {
  gap: 7px;
}

.shorts-season-copy > strong {
  color: var(--foreground);
  font-size: clamp(1.58rem, 2.4vw, 2.34rem);
  font-weight: 950;
  line-height: 1.08;
}

.shorts-season-toggle-side {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.shorts-season-toggle-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  font-size: 1.1rem;
  font-weight: 950;
}

.shorts-season-toggle-indicator::before {
  content: "+";
}

.shorts-season-disclosure[open] .shorts-season-toggle-indicator::before {
  content: "−";
}

.shorts-season-body {
  padding: 20px 22px 22px;
}

.shorts-minis-archive {
  padding-top: 18px;
}

.shorts-minis-archive .shorts-subsection-head {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.54fr);
  align-items: end;
}

.shorts-minis-archive .shorts-subsection-head p:last-child {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.94rem;
  line-height: 1.5;
}

.shorts-mini-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.shorts-mini-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-soft);
}

.shorts-mini-card video {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #111827;
  object-fit: cover;
}

.shorts-mini-card-copy {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.shorts-mini-card-copy > span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.shorts-mini-card-copy h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1rem;
  line-height: 1.22;
}

@media (max-width: 960px) {
  .cat-detail-minis-grid,
  .shorts-mini-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shorts-minis-archive .shorts-subsection-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 560px) {
  .cat-detail-minis-grid,
  .shorts-mini-card-grid {
    grid-template-columns: 1fr;
  }
}

.shorts-season-head,
.shorts-subsection-head,
.shorts-follow-head {
  display: grid;
  gap: 8px;
}

.shorts-season-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 16px;
}

.shorts-season-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.shorts-season-copy {
  display: grid;
  gap: 8px;
}

.shorts-season-copy h2 {
  font-size: clamp(1.85rem, 2.6vw, 2.6rem);
  line-height: 1.08;
}

.shorts-season-summary {
  display: -webkit-box;
  max-width: 58ch;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.96rem;
  line-height: 1.58;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shorts-season-stats {
  justify-content: flex-end;
}

.shorts-season-actions {
  justify-content: flex-end;
}

.shorts-cat-mini-rail {
  display: grid;
  justify-self: end;
  align-items: start;
  width: fit-content;
  max-width: min(100%, 520px);
  gap: 8px;
  padding: 9px;
  border: 1px solid rgba(201, 213, 226, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 36px rgba(26, 37, 54, 0.07);
}

.shorts-cat-mini-rail.is-single {
  max-width: min(100%, 310px);
}

.shorts-cat-mini-head {
  display: flex;
  justify-self: stretch;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 0 4px;
}

.shorts-cat-mini-head .meta-label {
  margin: 0;
}

.shorts-cat-mini-head span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
}

.shorts-cat-mini-list,
.shorts-episode-cat-list {
  min-width: 0;
  gap: 7px;
}

.shorts-cat-mini-list {
  display: grid;
  justify-self: end;
  width: 100%;
  max-width: 100%;
  justify-content: end;
  justify-items: stretch;
}

.shorts-episode-cat-list {
  display: flex;
  flex-wrap: wrap;
}

.shorts-cat-mini-rail.is-count-1 .shorts-cat-mini-list {
  grid-template-columns: max-content;
}

.shorts-cat-mini-rail.is-count-2 .shorts-cat-mini-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shorts-cat-mini-rail.is-count-3 .shorts-cat-mini-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shorts-cat-mini-rail.is-count-4 .shorts-cat-mini-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shorts-cat-mini-rail.is-count-5 .shorts-cat-mini-list,
.shorts-cat-mini-rail.is-count-6 .shorts-cat-mini-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.shorts-cat-mini-item {
  display: inline-flex;
  min-width: 0;
  width: 100%;
  max-width: 176px;
  min-height: 46px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid rgba(201, 213, 226, 0.8);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--foreground);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(26, 37, 54, 0.06);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.shorts-cat-mini-item:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: 0 12px 28px rgba(26, 37, 54, 0.1);
}

.shorts-cat-mini-item.is-static {
  cursor: default;
  opacity: 0.88;
}

.shorts-cat-mini-item.is-static:hover {
  transform: none;
  border-color: rgba(201, 213, 226, 0.8);
  box-shadow: 0 8px 22px rgba(26, 37, 54, 0.06);
}

.shorts-cat-mini-rail.is-dense {
  max-width: min(100%, 560px);
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-item {
  max-width: none;
  min-height: 42px;
  padding-right: 8px;
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-avatar {
  width: 32px;
  height: 32px;
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-copy strong {
  font-size: 0.8rem;
}

.shorts-cat-mini-rail.is-dense .shorts-cat-mini-copy span {
  font-size: 0.62rem;
}

.shorts-cat-mini-avatar,
.shorts-episode-cat-avatar {
  position: relative;
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-soft);
}

.shorts-cat-mini-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(201, 213, 226, 0.72);
}

.shorts-episode-cat-avatar {
  width: 26px;
  height: 26px;
}

.shorts-cat-mini-avatar img,
.shorts-episode-cat-avatar img {
  object-fit: cover;
}

.shorts-cat-mini-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.shorts-cat-mini-copy strong,
.shorts-cat-mini-copy span,
.shorts-episode-cat-pill > span:not(.shorts-episode-cat-avatar),
.shorts-episode-cat-pill small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-cat-mini-copy strong {
  font-size: 0.86rem;
  line-height: 1.12;
}

.shorts-cat-mini-copy span {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.shorts-cat-mini-more,
.shorts-episode-cat-more {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted-foreground);
  font-weight: 900;
}

.shorts-cat-mini-more {
  min-height: 36px;
  padding: 0 11px;
  background: rgba(247, 248, 251, 0.96);
  font-size: 0.78rem;
}

.shorts-episode-cats {
  display: grid;
  gap: 7px;
  padding-top: 4px;
  border-top: 1px solid rgba(201, 213, 226, 0.54);
}

.shorts-episode-cats.is-dense {
  gap: 6px;
}

.shorts-episode-cat-pill {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 3px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
}

.shorts-episode-cat-pill small {
  color: var(--muted-foreground);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.shorts-episode-cat-more {
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.74rem;
}

.shorts-episode-cat-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 100%;
  padding: 4px 9px 4px 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
}

.shorts-episode-cat-stack {
  display: flex;
  min-width: 0;
  padding-left: 2px;
}

.shorts-episode-cat-stack .shorts-episode-cat-avatar {
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(201, 213, 226, 0.72);
}

.shorts-episode-cat-stack .shorts-episode-cat-avatar + .shorts-episode-cat-avatar {
  margin-left: -9px;
}

.shorts-episode-cat-names {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shorts-episode-cat-names small {
  margin-left: 4px;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 900;
}

.shorts-season-lower,
.shorts-detail-support-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 0.72fr);
  align-items: start;
}

.shorts-season-lower > :only-child,
.shorts-detail-support-grid > :only-child {
  grid-column: 1 / -1;
}

.shorts-subsection {
  gap: 14px;
}

.card-grid.shorts-linked-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid.shorts-linked-grid.shorts-linked-grid-detail {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.shorts-subsection-head h3,
.shorts-follow-head h3 {
  font-size: clamp(1.18rem, 1.6vw, 1.42rem);
  line-height: 1.16;
}

.shorts-episode-card {
  background: #ffffff;
}

.shorts-linked-card {
  background: #ffffff;
}

.shorts-linked-card-static {
  cursor: default;
}

.shorts-linked-card-static:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

.shorts-linked-card-detail {
  align-content: start;
}

.shorts-linked-card-detail .media-thumb {
  height: 182px;
  margin-bottom: 14px;
}

.shorts-episode-card,
.shorts-linked-card,
.shorts-follow-group,
.shorts-link-card {
  min-width: 0;
}

.shorts-episode-card .content-card-body h3,
.shorts-linked-card .content-card-body h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.shorts-card-summary,
.shorts-card-note,
.shorts-link-text strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

.shorts-card-summary {
  -webkit-line-clamp: 3;
}

.shorts-card-summary.shorts-card-summary-tight {
  -webkit-line-clamp: 2;
}

.shorts-card-note {
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
}

.shorts-linked-card .meta-row,
.shorts-episode-card .meta-row {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 8px;
  min-width: 0;
}

.shorts-linked-card .meta-row .meta-row-icon,
.shorts-episode-card .meta-row .meta-row-icon {
  margin-top: 2px;
}

.shorts-linked-card .meta-row > span:last-child,
.shorts-episode-card .meta-row > span:last-child,
.shorts-linked-card .helper-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shorts-context-card {
  gap: 10px;
}

.shorts-context-card > p:last-child {
  margin: 0;
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.62;
}

.shorts-follow-panel {
  gap: 16px;
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.06), transparent 26%),
    linear-gradient(180deg, rgba(247, 248, 251, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.shorts-follow-panel-compact {
  align-content: start;
}

.shorts-follow-panel-detail {
  gap: 18px;
  padding: 22px 24px;
}

.shorts-follow-panel-detail .shorts-follow-head {
  gap: 6px;
}

.shorts-follow-panel-detail .shorts-follow-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}

.shorts-follow-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1.28fr) minmax(240px, 0.84fr);
  align-items: start;
}

.shorts-follow-group,
.shorts-link-list {
  display: grid;
  gap: 8px;
}

.shorts-follow-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.shorts-follow-group-primary,
.shorts-follow-group-secondary {
  align-content: start;
}

.shorts-link-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(201, 213, 226, 0.86);
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.shorts-link-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  box-shadow: var(--shadow-card);
}

.shorts-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--accent-strong);
}

.shorts-link-icon svg {
  width: 100%;
  height: 100%;
}

.shorts-link-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.shorts-link-kicker {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shorts-link-text strong {
  font-size: 0.94rem;
  line-height: 1.42;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.shorts-season-rail-card {
  align-content: start;
}

.shorts-season-sidebar-card {
  align-content: start;
  gap: 12px;
}

.shorts-season-sidebar-card .shorts-season-summary {
  max-width: none;
  -webkit-line-clamp: 3;
}

.shorts-season-sidebar-card .helper-text {
  margin: 0;
}

.shorts-season-sidebar-card .button-row {
  row-gap: 8px;
}

.shorts-episode-rail {
  display: grid;
  gap: 8px;
}

.shorts-episode-rail-item {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(201, 213, 226, 0.82);
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.shorts-episode-rail-item:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 105, 183, 0.24);
  box-shadow: var(--shadow-card);
}

.shorts-episode-rail-item.is-current {
  border-color: rgba(15, 23, 42, 0.16);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 24%),
    rgba(255, 252, 242, 0.98);
}

.shorts-episode-rail-label {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shorts-episode-rail-item strong {
  font-size: 0.94rem;
  line-height: 1.4;
}

@media (max-width: 980px) {
  .shorts-hero-layout,
  .shorts-season-head,
  .shorts-season-summary-toggle,
  .shorts-follow-grid,
  .shorts-follow-stack,
  .shorts-season-lower,
  .shorts-detail-support-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shorts-season-side,
  .shorts-season-stats,
  .shorts-season-toggle-side {
    justify-content: flex-start;
    justify-items: start;
  }

  .shorts-season-toggle-side {
    display: flex;
    flex-wrap: wrap;
  }

  .shorts-cat-mini-rail {
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .shorts-cat-mini-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 719px) {
  .shorts-hero-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-grid.shorts-linked-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shorts-follow-panel-detail .shorts-follow-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .shorts-season-section {
    gap: 18px;
    scroll-margin-top: 96px;
  }

  .shorts-hero-tags {
    display: grid;
  }

  .shorts-season-jump .button {
    min-height: 42px;
    height: auto;
    padding-block: 9px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .shorts-season-section + .shorts-season-section {
    margin-top: 14px;
    padding-top: 0;
  }

  .shorts-season-nav {
    margin-inline: -4px;
    border-radius: 18px;
  }

  .shorts-season-summary-toggle,
  .shorts-season-body {
    padding: 16px;
  }

  .shorts-link-card {
    padding: 11px 12px;
    border-radius: 16px;
  }

  .shorts-link-text strong {
    font-size: 0.9rem;
  }
}

@media (max-width: 479px) {
  .shorts-hero-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
}

.story-highlight,
.inline-note {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.success-note {
  background: #ecfdf3;
}

.info-note {
  background: #eef6ff;
}

.support-success-band {
  padding-top: 42px;
  background:
    linear-gradient(180deg, #fff9ee 0%, #f7fbff 48%, #ffffff 100%);
}

.support-success-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.support-success-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.72fr);
  gap: 24px;
  align-items: stretch;
}

.support-success-copy,
.support-success-status-card,
.support-success-card,
.support-success-impact-card {
  border: 1px solid rgba(135, 148, 166, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.08);
}

.support-success-copy {
  display: grid;
  align-content: center;
  gap: 22px;
  min-height: 520px;
  padding: 46px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 232, 0.96) 58%, rgba(238, 250, 246, 0.98) 100%);
}

.support-success-eyebrow {
  margin: 0;
  color: #0b69b7;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.support-success-copy h1,
.support-success-section-header h2,
.support-success-card h2,
.support-success-status-card h2 {
  margin: 0;
  color: #101828;
  letter-spacing: 0;
}

.support-success-copy h1 {
  max-width: 820px;
  font-size: 4.25rem;
  line-height: 1;
}

.support-success-copy p:not(.support-success-eyebrow),
.support-success-status-card p,
.support-success-card p,
.support-success-impact-card p {
  margin: 0;
  color: #526071;
  font-size: 1rem;
  line-height: 1.62;
}

.support-success-copy > p:not(.support-success-eyebrow) {
  max-width: 720px;
  font-size: 1.08rem;
}

.support-success-actions,
.support-success-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.support-success-status-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 32px;
  overflow: hidden;
}

.support-success-status-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, #16a36b, #f0b429, #0b69b7);
}

.support-success-status-mark {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ecfdf3;
  border: 1px solid rgba(22, 163, 107, 0.28);
}

.support-success-status-mark::after {
  content: "";
  width: 18px;
  height: 10px;
  border-left: 4px solid #118653;
  border-bottom: 4px solid #118653;
  transform: rotate(-45deg) translate(1px, -1px);
}

.support-success-status-mark.is-pending {
  background: #fff7db;
  border-color: rgba(240, 180, 41, 0.42);
}

.support-success-status-mark.is-pending::after,
.support-success-status-mark.is-unverified::after {
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #b7791f;
  transform: none;
}

.support-success-status-mark.is-unverified {
  background: #f3f6fb;
  border-color: rgba(82, 96, 113, 0.24);
}

.support-success-status-mark.is-unverified::after {
  color: #526071;
}

.support-success-amount {
  display: grid;
  gap: 5px;
  padding: 18px;
  border-radius: 8px;
  background: #f5fbff;
  border: 1px solid rgba(11, 105, 183, 0.16);
}

.support-success-amount span,
.support-success-mini-list span {
  color: #526071;
  font-size: 0.86rem;
  font-weight: 780;
}

.support-success-amount strong {
  color: #101828;
  font-size: 2.05rem;
  line-height: 1.1;
}

.support-success-mini-list {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.support-success-mini-list span {
  position: relative;
  padding-left: 22px;
  line-height: 1.42;
}

.support-success-mini-list span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.46em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #16a36b;
}

.support-success-impact {
  display: grid;
  gap: 18px;
}

.support-success-section-header {
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.support-success-section-header h2,
.support-success-card h2 {
  font-size: 2rem;
  line-height: 1.12;
}

.support-success-impact-grid,
.support-success-next-grid {
  display: grid;
  gap: 18px;
}

.support-success-impact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.support-success-impact-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 14px;
}

.support-success-impact-card h3 {
  margin: 0 0 6px;
  color: #101828;
  font-size: 1.12rem;
  line-height: 1.22;
}

.support-success-impact-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 8px;
  background: #eef2f7;
}

.support-success-impact-media img {
  object-fit: cover;
}

.support-success-next-grid {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.68fr);
}

.support-success-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 28px;
}

.support-success-card-soft {
  background:
    linear-gradient(180deg, rgba(255, 247, 219, 0.9), rgba(255, 255, 255, 0.96));
}

html[data-theme="dark"] .support-success-band {
  background:
    linear-gradient(180deg, #111827 0%, #0f172a 52%, #111827 100%);
}

html[data-theme="dark"] .support-success-copy,
html[data-theme="dark"] .support-success-status-card,
html[data-theme="dark"] .support-success-card,
html[data-theme="dark"] .support-success-impact-card {
  border-color: rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: none;
}

html[data-theme="dark"] .support-success-copy {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.98) 0%, rgba(40, 35, 24, 0.96) 58%, rgba(15, 42, 37, 0.96) 100%);
}

html[data-theme="dark"] .support-success-copy h1,
html[data-theme="dark"] .support-success-section-header h2,
html[data-theme="dark"] .support-success-card h2,
html[data-theme="dark"] .support-success-status-card h2,
html[data-theme="dark"] .support-success-impact-card h3,
html[data-theme="dark"] .support-success-amount strong {
  color: #f8fafc;
}

html[data-theme="dark"] .support-success-copy p:not(.support-success-eyebrow),
html[data-theme="dark"] .support-success-status-card p,
html[data-theme="dark"] .support-success-card p,
html[data-theme="dark"] .support-success-impact-card p,
html[data-theme="dark"] .support-success-amount span,
html[data-theme="dark"] .support-success-mini-list span {
  color: #cbd5e1;
}

html[data-theme="dark"] .support-success-amount {
  border-color: rgba(96, 165, 250, 0.22);
  background: rgba(15, 23, 42, 0.78);
}

@media (max-width: 980px) {
  .support-success-hero,
  .support-success-next-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .support-success-copy {
    min-height: auto;
  }

  .support-success-impact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 719px) {
  .support-success-band {
    padding-top: 18px;
  }

  .support-success-shell {
    width: min(100% - 24px, 1180px);
    gap: 18px;
  }

  .support-success-copy,
  .support-success-status-card,
  .support-success-card {
    padding: 20px;
  }

  .support-success-copy h1 {
    font-size: 2.55rem;
    line-height: 1.04;
  }

  .support-success-section-header h2,
  .support-success-card h2 {
    font-size: 1.55rem;
  }

  .support-success-actions .button,
  .support-success-card-actions .button {
    width: 100%;
    justify-content: center;
  }
}

.mobile-companion-card {
  align-content: start;
  background:
    linear-gradient(180deg, rgba(255, 248, 220, 0.9), rgba(255, 255, 255, 0.96)),
    rgba(255, 255, 255, 0.96);
}

.mobile-companion-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.mobile-companion-card-coming-soon {
  border-color: rgba(90, 103, 108, 0.18);
  background:
    linear-gradient(180deg, rgba(246, 243, 235, 0.96), rgba(255, 255, 255, 0.98)),
    rgba(255, 255, 255, 0.98);
}

.mobile-companion-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(90, 103, 108, 0.16);
  background: rgba(90, 103, 108, 0.08);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-companion-card h3 {
  line-height: 1.18;
}

.mobile-companion-note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

.mobile-companion-disabled-button {
  background: rgba(90, 103, 108, 0.08);
  color: var(--muted);
  border-color: rgba(90, 103, 108, 0.16);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.note-grid.note-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.story-detail-snapshot-grid .snapshot-card {
  align-content: start;
}

.timeline-item {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.timeline-item:first-child {
  padding-top: 0;
  border-top: 0;
}

.meter-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e9eef5;
  overflow: hidden;
}

.meter-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.field {
  gap: 8px;
}

.field label {
  color: var(--foreground);
  font-size: 0.93rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  border-radius: 16px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--foreground);
}

.cats-search-field .cats-search-shell input {
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--foreground);
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.cats-search-field .cats-search-shell input::-webkit-search-decoration,
.cats-search-field .cats-search-shell input::-webkit-search-cancel-button,
.cats-search-field .cats-search-shell input::-webkit-search-results-button,
.cats-search-field .cats-search-shell input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.field textarea {
  min-height: 128px;
  resize: vertical;
}

.checkbox-field {
  align-content: end;
}

.checkbox-field input,
.checkbox-row input {
  width: 18px;
  height: 18px;
  min-height: auto;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--foreground);
  font-weight: 700;
}

.helper-text {
  font-size: 0.93rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.paypal-card.is-compact {
  gap: 14px;
}

.paypal-card.is-compact h3 {
  font-size: clamp(1.24rem, 1.8vw, 1.6rem);
}

.paypal-card.is-compact .helper-text {
  font-size: 0.88rem;
  line-height: 1.5;
}

.paypal-checkout-button {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
  padding-inline: 18px;
  text-align: left;
  white-space: normal;
}

.paypal-checkout-button.is-centered {
  justify-content: center;
}

.paypal-checkout-copy {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}

.paypal-checkout-amount {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 0, 0.48);
  background: rgba(255, 200, 0, 0.14);
  line-height: 1;
  white-space: nowrap;
}

.paypal-card.support-case-checkout {
  gap: 12px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 248, 214, 0.96) 0%, rgba(255, 255, 255, 0.98) 36%),
    rgba(255, 255, 255, 0.98);
}

.paypal-card.support-case-checkout .stack-tight {
  gap: 6px;
}

.paypal-card.support-case-checkout h3 {
  font-size: clamp(1.1rem, 1.7vw, 1.42rem);
}

.paypal-card.support-case-checkout .helper-text {
  font-size: 0.82rem;
  line-height: 1.45;
}

.paypal-card.support-case-checkout .paypal-preset-grid.is-compact {
  gap: 7px;
}

.paypal-card.support-case-checkout .chip-button.is-compact {
  align-content: center;
  min-height: 50px;
  padding: 10px 12px;
  gap: 8px;
  border-radius: 16px;
}

.paypal-card.support-case-checkout .chip-button.is-compact strong {
  font-size: 0.96rem;
  line-height: 1;
}

.paypal-card.support-case-checkout .chip-button.is-compact span {
  font-size: 0.78rem;
  line-height: 1.2;
}

.paypal-card.support-case-checkout .field {
  gap: 8px;
}

.paypal-card.support-case-checkout .field label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.paypal-card.support-case-checkout .field input {
  min-height: 46px;
  padding-inline: 14px;
  font-size: 0.96rem;
}

.paypal-card.support-case-checkout .button-primary {
  min-height: 48px;
  font-size: 0.95rem;
}

.support-case-followup {
  gap: 12px;
  padding: 20px;
}

.support-case-followup h3 {
  font-size: clamp(1.04rem, 1.45vw, 1.28rem);
  line-height: 1.25;
}

.support-case-followup p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.support-case-followup-actions {
  gap: 8px;
}

.support-case-followup-actions .button {
  min-height: 42px;
  padding-inline: 14px;
  font-size: 0.9rem;
}

.support-case-header {
  gap: 12px;
}

.support-case-header .hero-lead {
  font-size: 1.02rem;
}

.support-case-story {
  gap: 12px;
}

.support-case-story h3 {
  font-size: clamp(1.08rem, 1.5vw, 1.34rem);
  line-height: 1.28;
}

.support-case-story p:not(.meta-label) {
  font-size: 0.96rem;
  line-height: 1.7;
}

.paypal-preset-grid.is-compact {
  grid-template-columns: 1fr;
  gap: 10px;
}

.uploaded-image-preview {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--border);
}

.chip-button {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 92px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: white;
  text-align: left;
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

.chip-button strong {
  font-size: 1.2rem;
  line-height: 1.1;
}

.chip-button span {
  color: var(--muted-foreground);
  line-height: 1.45;
}

.chip-button.is-selected {
  border-color: rgba(255, 200, 0, 0.58);
  background: linear-gradient(180deg, #fff7d2 0%, #fffdfa 100%);
}

.chip-button.is-compact {
  grid-template-columns: auto 1fr;
  align-content: center;
  align-items: center;
  min-height: 60px;
  padding: 12px 14px;
  gap: 12px;
}

.chip-button.is-compact strong {
  font-size: 1.04rem;
  white-space: nowrap;
}

.chip-button.is-compact span {
  font-size: 0.84rem;
  line-height: 1.35;
}

.empty-state {
  background: rgba(255, 255, 255, 0.96);
}

.project-meter {
  align-items: center;
  justify-content: space-between;
}

.detail-side {
  align-self: start;
}

.site-footer .footer-brand h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.5rem);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-grid,
  .section-header,
  .detail-grid,
  .field-grid,
  .preset-grid,
  .page-intro-grid,
  .two-up-grid,
  .support-grid,
  .note-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .note-grid.note-grid-single {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-grid,
  .snapshot-grid,
  .stats-grid,
  .compact-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cats-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cats-discovery-layout {
    grid-template-columns: minmax(0, 1.32fr) minmax(260px, 0.68fr);
  }

  .cats-feature-card {
    grid-template-rows: minmax(190px, 0.92fr) auto;
    border-top: 0;
    border-left: 1px solid rgba(11, 105, 183, 0.12);
  }

  .cats-feature-media {
    min-height: 190px;
  }

  .proof-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loading-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) and (max-width: 1359px) {
  .mobile-nav-toggle,
  .site-overlay {
    display: none;
  }

  .site-sidebar {
    width: var(--sidebar-rail-width);
    transform: translateX(0);
    padding: 20px 9px 18px;
    box-shadow: 0 18px 36px rgba(33, 33, 33, 0.12);
  }

  .sidebar-desktop-pin-toggle {
    display: flex;
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar:hover,
  .site-sidebar.is-desktop-expanded {
    width: var(--sidebar-width);
    padding-inline: 18px;
    box-shadow: var(--shadow);
  }

  .site-main-shell {
    margin-left: var(--sidebar-rail-width);
  }

  .site-main {
    --site-main-top: 28px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 18px;
  }

  .site-main.site-main-soft-record,
  .site-main.site-main-cat-detail {
    --site-main-top: 0px;
  }

  .site-main:has(.cat-detail-band) {
    --site-main-top: 0px;
    padding-top: var(--site-main-top);
  }

  .site-sidebar .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar .sidebar-brand-row {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .site-sidebar .sidebar-theme-row {
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar .sidebar-nav,
  .site-sidebar .sidebar-support-actions {
    justify-items: center;
  }

  .site-sidebar .sidebar-link {
    width: 100%;
    justify-content: center;
    padding-inline: 0;
  }

  .site-sidebar .sidebar-user {
    justify-items: center;
    padding: 10px 8px;
  }

  .site-sidebar .sidebar-user-main {
    grid-template-columns: auto;
    justify-items: center;
  }

  .site-sidebar .sidebar-section-title,
  .site-sidebar .sidebar-link-label,
  .site-sidebar .sidebar-language-row,
  .site-sidebar .sidebar-theme-row .sidebar-language-label,
  .site-sidebar .sidebar-user .meta-label,
  .site-sidebar .sidebar-user-meta,
  .site-sidebar .sidebar-button span,
  .site-sidebar .sidebar-desktop-pin-copy {
    display: none;
  }

  .site-sidebar .sidebar-user-actions {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .site-sidebar:hover .sidebar-brand,
  .site-sidebar.is-desktop-expanded .sidebar-brand {
    justify-content: flex-start;
    padding-inline: 4px;
  }

  .site-sidebar:hover .sidebar-desktop-pin-toggle,
  .site-sidebar.is-desktop-expanded .sidebar-desktop-pin-toggle {
    justify-content: flex-start;
    padding-inline: 10px;
  }

  .site-sidebar:hover .sidebar-brand-row,
  .site-sidebar.is-desktop-expanded .sidebar-brand-row {
    flex-direction: row;
    justify-content: flex-start;
  }

  .site-sidebar:hover .sidebar-theme-row,
  .site-sidebar.is-desktop-expanded .sidebar-theme-row {
    justify-content: space-between;
    padding-inline: 2px;
  }

  .site-sidebar:hover .sidebar-nav,
  .site-sidebar:hover .sidebar-support-actions,
  .site-sidebar.is-desktop-expanded .sidebar-nav,
  .site-sidebar.is-desktop-expanded .sidebar-support-actions {
    justify-items: stretch;
  }

  .site-sidebar:hover .sidebar-link,
  .site-sidebar.is-desktop-expanded .sidebar-link {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .site-sidebar:hover .sidebar-link-secondary,
  .site-sidebar.is-desktop-expanded .sidebar-link-secondary {
    padding-inline: 10px;
  }

  .site-sidebar:hover .sidebar-user,
  .site-sidebar.is-desktop-expanded .sidebar-user {
    justify-items: stretch;
    padding: 12px;
  }

  .site-sidebar:hover .sidebar-user-main,
  .site-sidebar.is-desktop-expanded .sidebar-user-main {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
  }

  .site-sidebar:hover .sidebar-section-title,
  .site-sidebar:hover .sidebar-link-label,
  .site-sidebar:hover .sidebar-user .meta-label,
  .site-sidebar.is-desktop-expanded .sidebar-section-title,
  .site-sidebar.is-desktop-expanded .sidebar-link-label,
  .site-sidebar.is-desktop-expanded .sidebar-user .meta-label,
  .site-sidebar:hover .sidebar-theme-row .sidebar-language-label,
  .site-sidebar.is-desktop-expanded .sidebar-theme-row .sidebar-language-label {
    display: block;
  }

  .site-sidebar:hover .sidebar-user-meta,
  .site-sidebar.is-desktop-expanded .sidebar-user-meta {
    display: grid;
  }

  .site-sidebar:hover .sidebar-user-actions,
  .site-sidebar.is-desktop-expanded .sidebar-user-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }

  .site-sidebar:hover .sidebar-language-row,
  .site-sidebar.is-desktop-expanded .sidebar-language-row {
    display: flex;
  }

  .site-sidebar:hover .sidebar-button span,
  .site-sidebar.is-desktop-expanded .sidebar-button span,
  .site-sidebar:hover .sidebar-desktop-pin-copy,
  .site-sidebar.is-desktop-expanded .sidebar-desktop-pin-copy {
    display: inline;
  }
}

@media (min-width: 1360px) {
  .mobile-nav-toggle,
  .site-overlay {
    display: none;
  }

  .site-sidebar {
    width: var(--sidebar-width);
    transform: translateX(0);
  }

  .site-main-shell {
    margin-left: var(--sidebar-width);
  }

  .site-main {
    --site-main-top: 28px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 18px;
  }

  .site-main.site-main-soft-record,
  .site-main.site-main-cat-detail {
    --site-main-top: 0px;
  }

  .site-main:has(.cat-detail-band) {
    --site-main-top: 0px;
    padding-top: var(--site-main-top);
  }
}

@media (min-width: 1024px) {

  .site-shell-rescue-console .site-sidebar.is-rescue-console {
    width: var(--sidebar-rail-width);
    padding: calc(var(--rescue-topbar-height) + 14px) 9px 18px;
    transform: translateX(0);
    box-shadow: none;
  }

  .site-shell-rescue-console .site-sidebar.is-rescue-console:hover,
  .site-shell-rescue-console .site-sidebar.is-rescue-console.is-desktop-expanded,
  .site-shell-rescue-console .site-sidebar.is-rescue-console.is-desktop-pinned {
    width: var(--sidebar-width);
    padding-inline: 18px;
    box-shadow: none;
  }

  .site-shell-rescue-console .site-sidebar.is-rescue-console .sidebar-brand-row {
    display: none;
  }

  .site-shell-rescue-console .site-main-shell {
    margin-left: var(--sidebar-rail-width);
  }

  .site-shell-rescue-console .site-main {
    --site-main-top: calc(var(--rescue-topbar-height) + 18px);
    padding-top: var(--site-main-top);
  }

  .site-shell-rescue-console .site-main:has(.home-hero-band) {
    --site-main-top: calc(var(--rescue-topbar-height) + 10px);
  }

  .site-shell-rescue-console .home-hero-band {
    padding-top: 12px;
  }

  .site-shell-rescue-console .site-main.site-main-not-home {
    --site-main-top: calc(var(--rescue-topbar-height) + 14px);
  }

  .site-shell-rescue-console .site-main.site-main-soft-record,
  .site-shell-rescue-console .site-main.site-main-cat-detail,
  .site-shell-rescue-console .site-main:has(.cat-detail-band) {
    --site-main-top: var(--rescue-topbar-height);
    padding-top: var(--site-main-top);
  }

  .site-shell-rescue-console .site-sidebar .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
  }

  .site-shell-rescue-console .site-sidebar .sidebar-brand-row {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .site-shell-rescue-console .site-sidebar .sidebar-nav,
  .site-shell-rescue-console .site-sidebar .sidebar-support-actions {
    justify-items: center;
  }

  .site-shell-rescue-console .site-sidebar .sidebar-link {
    width: 100%;
    justify-content: center;
    padding-inline: 0;
  }

  .site-shell-rescue-console .site-sidebar :is(
    .sidebar-section-title,
    .sidebar-link-label,
    .sidebar-language-row,
    .sidebar-theme-row .sidebar-language-label,
    .sidebar-user .meta-label,
    .sidebar-user-meta,
    .sidebar-button span,
    .sidebar-desktop-pin-copy,
    .sidebar-more-menu
  ) {
    display: none;
  }

  .site-shell-rescue-console .sidebar-utility {
    display: none;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-brand,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-brand,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-brand {
    justify-content: flex-start;
    padding-inline: 4px;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-brand-row,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-brand-row,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-brand-row {
    flex-direction: row;
    justify-content: flex-start;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-nav,
  .site-shell-rescue-console .site-sidebar:hover .sidebar-support-actions,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-nav,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-support-actions,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-nav,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-support-actions {
    justify-items: stretch;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-link,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-link,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-link {
    justify-content: flex-start;
    padding-inline: 12px;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-link-secondary,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-link-secondary,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-link-secondary {
    padding-inline: 10px;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-section-title,
  .site-shell-rescue-console .site-sidebar:hover .sidebar-link-label,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-section-title,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-link-label,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-section-title,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-link-label {
    display: block;
  }

  .site-shell-rescue-console .site-sidebar:hover .sidebar-more-menu,
  .site-shell-rescue-console .site-sidebar.is-desktop-expanded .sidebar-more-menu,
  .site-shell-rescue-console .site-sidebar.is-desktop-pinned .sidebar-more-menu {
    display: grid;
  }
}

@media (min-width: 1024px) and (max-width: 1160px) {

  .site-shell-rescue-console .rescue-shell-topbar-brand-copy small {
    display: none;
  }

  .site-shell-rescue-console .rescue-shell-topbar-nav-link {
    padding-inline: 9px;
  }

  .site-shell-rescue-console .rescue-shell-topbar-action {
    width: 38px;
    padding: 0;
  }

  .site-shell-rescue-console .rescue-shell-topbar-action span {
    display: none;
  }

  .site-shell-rescue-console .rescue-shell-topbar-sign-in {
    width: auto;
    padding-inline: 14px;
  }

  .site-shell-rescue-console .rescue-shell-topbar-sign-in span {
    display: inline;
  }
}

@media (min-width: 1024px) {
  .section,
  .hero-band,
  .page-band,
  .detail-band {
    padding: 42px 0;
  }

  .cats-page-band {
    padding-top: 34px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    align-items: stretch;
  }

  .loading-hero {
    grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.84fr);
    align-items: stretch;
  }

  .loading-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-hero-shell {
    display: grid !important;
    gap: 18px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
    align-items: stretch;
  }

  .home-hero-shell-copy {
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 16px 12px 16px clamp(24px, 3vw, 40px);
  }

  .home-hero-shell-media {
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .home-home-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .home-hero-media {
    min-height: 400px;
  }

  .home-feature-card {
    height: 100%;
  }

  .project-intro-feature-shell {
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    align-items: stretch;
  }

  .project-intro-feature-media {
    min-height: 100%;
  }

  .home-feature-media {
    min-height: 340px;
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: start;
  }

  .support-case-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(340px, 0.72fr);
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(0, 0.65fr));
    align-items: start;
  }

  .footer-brand {
    grid-column: auto;
  }

  .detail-side {
    position: sticky;
    top: 28px;
  }

  .detail-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snapshot-grid.detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .snapshot-grid.story-detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-header {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
    align-items: flex-end;
  }

  .page-intro-card.is-compact.page-intro-grid {
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr);
    align-items: start;
  }

  .project-page-intro.page-intro-card.is-compact.page-intro-grid {
    align-items: center;
  }

  .project-page-intro > .stack-tight {
    min-height: 100%;
  }

  .story-hub-hero.page-intro-grid {
    display: flex;
    gap: 18px;
    align-items: stretch;
  }

  .story-series-main {
    grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr);
    align-items: start;
  }

  .story-series-panel-media {
    order: -1;
  }

  .story-series-episode-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .story-series-route-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .story-page-nav-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-hub-hero-pane {
    flex: 0 0 calc((100% - 18px) / 2);
    width: calc((100% - 18px) / 2);
    max-width: calc((100% - 18px) / 2);
  }

  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-track-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .story-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-grid,
  .snapshot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .snapshot-grid.story-detail-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cats-discovery-controls {
    grid-template-columns: minmax(0, 1.45fr) minmax(200px, 0.55fr);
  }

  .cats-discovery-layout {
    grid-template-columns: minmax(0, 1.22fr) minmax(312px, 0.78fr);
  }

  .cats-feature-media {
    min-height: 214px;
  }

  .cats-results-status {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .cats-results-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1440px) {
  .cats-results-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .mobile-nav-toggle {
    top: 12px;
    left: 12px;
    width: 42px;
    height: 42px;
  }

  .site-main {
    --site-main-top: 60px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 48px;
  }

  .site-main.site-main-soft-record {
    --site-main-top: 44px;
  }

  .site-main.site-main-cat-detail {
    --site-main-top: 44px;
  }

  .site-footer {
    padding: 22px 0 28px;
  }

  .section,
  .hero-band,
  .page-band,
  .detail-band {
    padding: 20px 0 24px;
  }

  .cats-page-band {
    padding-top: 22px;
  }

  .cat-detail-band {
    padding-top: 0;
  }

  .site-main-soft-record > .page-band:first-child,
  .site-main-soft-record > .detail-band:first-child,
  .site-main-soft-record > .loading-page:first-child {
    padding-top: 10px;
  }

  .site-main-not-home > .page-band:first-child,
  .site-main-not-home > .detail-band:first-child {
    padding-top: 12px;
  }

  .site-main-not-home > .loading-page:first-child {
    padding-top: 8px;
  }

  .home-hero-band {
    padding-top: 8px;
  }

  .stack {
    gap: 18px;
  }

  .stack-tight {
    gap: 6px;
  }

  .detail-grid,
  .page-intro-grid,
  .section-header,
  .field-grid,
  .preset-grid,
  .card-grid,
  .snapshot-grid,
  .stats-grid,
  .two-up-grid,
  .note-grid,
  .compact-card-grid,
  .story-page-nav-grid,
  .story-track-grid,
  .story-gallery-grid,
  .cats-results-grid,
  .proof-feature-grid {
    gap: 14px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .form-card,
  .empty-state,
  .footer-brand,
  .proof-section-card,
  .trust-logo-card {
    padding: 18px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .form-card,
  .empty-state,
  .content-card-body,
  .section-header-copy,
  .detail-stack,
  .timeline,
  .field,
  .auth-card,
  .page-intro-support {
    gap: 12px;
  }

  .page-intro-card.is-compact {
    padding: 18px;
    gap: 14px;
  }

  .page-intro-card h1,
  .detail-main h1,
  .home-hero-shell-copy h1 {
    font-size: clamp(1.95rem, 8.4vw, 2.4rem);
    line-height: 1.04;
  }

  .section-header h2 {
    font-size: clamp(1.5rem, 6.2vw, 2rem);
    line-height: 1.08;
  }

  .hero-lead,
  .home-hero-lead {
    font-size: 0.98rem;
    line-height: 1.52;
  }

  .button-row,
  .cta-rail,
  .inline-list {
    display: grid;
    gap: 8px;
  }

  .button,
  .button-small {
    width: 100%;
  }

  .button {
    min-height: 46px;
    padding-inline: 16px;
    font-size: 0.95rem;
  }

  .button-small {
    min-height: 38px;
    padding-inline: 12px;
  }

  .tag-row {
    gap: 8px;
  }

  .tag {
    min-height: 30px;
    padding: 0 10px;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

  .meta-row {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .loading-thumb {
    height: 164px;
  }

  .media-thumb {
    width: calc(100% + 36px);
    height: 168px;
    margin: -18px -18px 12px;
    border-radius: 18px 18px 16px 16px;
  }

  .home-hero-copy h1 {
    max-width: none;
  }

  .home-home-stack,
  .home-home-highlights,
  .home-intro-grid,
  .home-card-grid,
  .story-hub-stack {
    gap: 18px;
  }

  .home-hero-shell {
    gap: 14px;
    padding: 14px;
  }

  .home-hero-shell-copy {
    gap: 16px;
    padding: 4px 0;
  }

  .home-hero-media {
    min-height: 180px;
    border-radius: 20px;
  }

  .detail-hero-media {
    min-height: 248px;
    border-radius: 20px;
  }

  .story-detail-media {
    min-height: 248px;
  }

  .detail-gallery-stage-media {
    min-height: 248px;
  }

  .detail-gallery-strip {
    grid-auto-columns: minmax(80px, 92px);
    gap: 10px;
  }

  .project-intro-feature-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .project-intro-feature-media {
    min-height: 200px;
    padding: 12px;
  }

  .project-intro-feature-art {
    min-height: 180px;
    border-radius: 20px;
  }

  .project-intro-feature-copy {
    gap: 12px;
    padding: 16px;
  }

  .project-intro-feature-card h2 {
    font-size: clamp(1.28rem, 5.4vw, 1.75rem);
  }

  .project-intro-feature-summary {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .project-intro-feature-metric {
    padding: 12px;
    border-radius: 16px;
  }

  .project-intro-feature-metric strong {
    font-size: 0.96rem;
  }

  .home-feature-media {
    min-height: 200px;
  }

  .home-feature-media-video {
    min-height: 248px;
    padding: 10px;
  }

  .home-feature-panel {
    gap: 10px;
    padding: 16px;
  }

  .home-feature-card h2 {
    font-size: clamp(1.35rem, 5.8vw, 1.8rem);
  }

  .home-feature-video-embed.story-video-embed-short {
    width: min(100%, 240px);
    max-width: 240px;
  }

  .home-feature-copy,
  .home-feature-note,
  .home-intro-card p,
  .support-case-story p:not(.meta-label),
  .support-case-followup p {
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .home-feature-copy {
    --home-feature-copy-line-height: 1.6;
  }

  .home-project-brief-grid {
    grid-template-columns: 1fr;
  }

  .cats-discovery-panel {
    gap: 0;
    padding: 0;
  }

  .cats-discovery-main {
    gap: 12px;
    padding: 16px;
  }

  .cats-discovery-head {
    display: grid;
    gap: 8px;
  }

  .cats-discovery-count {
    min-width: 0;
    width: 100%;
    padding: 8px 10px;
  }

  .cats-discovery-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .cats-discovery-form-button {
    width: 100%;
    justify-content: center;
    padding-inline: 10px;
  }

  .cats-discovery-controls,
  .cats-filter-row,
  .cats-results-status {
    gap: 10px;
  }

  .cats-filter-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .cats-filter-mobile-toggle {
    display: flex;
  }

  .cats-directory-filter-list {
    display: none;
    padding-top: 0;
  }

  .cats-directory-filter-list.is-open {
    display: grid;
    padding-top: 8px;
  }

  .cats-search-shell {
    min-height: 46px;
    padding: 0 12px;
    border-radius: 14px;
  }

  .cats-search-shell input {
    min-height: 40px;
  }

  .cats-filter-chip {
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    gap: 8px;
    font-size: 0.78rem;
  }

  .cats-filter-chip-count {
    min-width: 24px;
    min-height: 24px;
    font-size: 0.78rem;
  }

  .cats-sticky-toolbar {
    top: 6px;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
    border-radius: 19px;
  }

  .cats-sticky-search {
    min-height: 40px;
    border-radius: 14px;
  }

  .cats-sticky-search input {
    min-height: 36px;
    font-size: 0.86rem;
  }

  .cats-quick-tabs {
    padding-bottom: 1px;
  }

  .cats-quick-tab {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .cats-quick-tab span:last-child {
    min-width: 20px;
    min-height: 20px;
    font-size: 0.68rem;
  }

  .cats-directory-media {
    min-height: 168px;
  }

  .cats-feature-media {
    min-height: 174px;
  }

  .cats-feature-body {
    padding: 20px 16px 16px;
  }

  .cats-directory-body {
    gap: 12px;
    padding: 16px;
  }

  .cats-directory-need {
    padding-top: 12px;
  }

  .proof-section-card,
  .trust-logo-card {
    padding: 18px;
  }

  .proof-feature-media {
    min-height: 176px;
  }

  .proof-feature-body {
    gap: 12px;
    padding: 16px;
  }

  .trust-logo-grid {
    grid-template-columns: 1fr;
  }

  .trust-archive-media {
    min-height: 220px;
  }

  .story-hub-hero {
    gap: 14px;
  }

  .story-hub-hero-copy {
    gap: 14px;
  }

  .story-hub-hero-copy-panel {
    padding: 18px;
    border-radius: 20px;
  }

  .story-hub-hero .story-feature-media {
    min-height: 182px;
  }

  .story-page-nav-link {
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
  }

  .story-video-card {
    gap: 14px;
  }

  .story-series-main,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-route-grid {
    gap: 12px;
  }

  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-episode-card,
  .story-series-route-card {
    padding: 14px;
    border-radius: 18px;
  }

  .story-video-embed {
    border-radius: 18px;
  }

  .story-video-embed-short {
    width: min(100%, 260px);
    max-width: 260px;
  }

  .story-gallery-card {
    gap: 10px;
    padding: 12px;
  }

  .story-gallery-media {
    min-height: 168px;
  }

  .detail-gallery-header,
  .detail-gallery-header-side {
    gap: 6px 10px;
  }

  .detail-gallery-stage {
    gap: 10px;
  }

  .detail-gallery-thumb {
    min-height: 92px;
    border-radius: 16px;
  }

  .snapshot-card strong,
  .project-meter strong {
    font-size: clamp(1.2rem, 6vw, 1.55rem);
  }

  .timeline-item {
    gap: 6px;
    padding-top: 12px;
  }

  .detail-preset-card {
    min-height: 78px;
    padding: 12px 13px;
  }

  .record-topline,
  .record-meta-list,
  .record-actions,
  .project-update-pet-row {
    gap: 8px;
  }

  .record-note {
    padding: 12px 14px;
  }

  .mobile-companion-card {
    gap: 12px;
  }

  .project-update-pet-link {
    min-height: 40px;
    padding: 4px 12px 4px 4px;
    font-size: 0.84rem;
  }

  .project-update-pet-avatar {
    width: 32px;
    height: 32px;
  }

  .field input,
  .field textarea,
  .field select {
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .field textarea {
    min-height: 112px;
  }

  .paypal-card.is-compact {
    gap: 12px;
  }

  .paypal-card.is-compact h3 {
    font-size: clamp(1.12rem, 5vw, 1.35rem);
  }

  .paypal-card.support-case-checkout {
    padding: 18px;
  }

  .paypal-card .button-primary {
    min-height: 46px;
    font-size: 0.94rem;
  }

  .chip-button {
    min-height: 82px;
    padding: 14px;
    border-radius: 18px;
  }

  .chip-button strong {
    font-size: 1.08rem;
  }

  .chip-button.is-compact {
    min-height: 54px;
    padding: 10px 12px;
    gap: 10px;
  }

  .chip-button.is-compact strong {
    font-size: 0.98rem;
  }

  .chip-button.is-compact span {
    font-size: 0.8rem;
  }

  .support-case-followup {
    gap: 10px;
    padding: 18px;
  }

  .support-case-followup-actions .button {
    min-height: 40px;
  }

  .support-case-header {
    gap: 10px;
  }

  .support-case-header .hero-lead {
    font-size: 0.98rem;
  }

  .project-pet-selector-toolbar,
  .project-manual-log-header,
  .project-manual-update-top {
    display: grid;
    justify-content: stretch;
  }

  .project-pet-selection-count,
  .project-stale-chip,
  .project-pet-pill,
  .project-update-pet-link {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 479px) {
  .cats-filter-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 389px) {
  .container {
    width: min(var(--content-max), calc(100% - 24px));
  }

  .mobile-nav-toggle {
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
  }

  .site-main {
    --site-main-top: 54px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 44px;
  }

  .site-main.site-main-soft-record {
    --site-main-top: 40px;
  }

  .site-main.site-main-cat-detail {
    --site-main-top: 40px;
  }

  .section,
  .hero-band,
  .page-band,
  .detail-band {
    padding: 16px 0 20px;
  }

  .cats-page-band {
    padding-top: 20px;
  }

  .cat-detail-band {
    padding-top: 0;
  }

  .site-main-soft-record > .page-band:first-child,
  .site-main-soft-record > .detail-band:first-child,
  .site-main-soft-record > .loading-page:first-child {
    padding-top: 8px;
  }

  .site-main-not-home > .page-band:first-child,
  .site-main-not-home > .detail-band:first-child {
    padding-top: 10px;
  }

  .site-main-not-home > .loading-page:first-child {
    padding-top: 8px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .form-card,
  .empty-state,
  .footer-brand,
  .proof-section-card,
  .trust-logo-card {
    padding: 16px;
  }

  .page-intro-card,
  .hero-copy,
  .hero-side,
  .card,
  .snapshot-card,
  .notice-card,
  .timeline-card,
  .detail-main,
  .detail-side,
  .story-layout,
  .form-card,
  .empty-state,
  .content-card-body,
  .section-header-copy,
  .detail-stack,
  .timeline,
  .field,
  .auth-card,
  .page-intro-support {
    gap: 10px;
  }

  .page-intro-card h1,
  .detail-main h1,
  .home-hero-shell-copy h1 {
    font-size: clamp(1.72rem, 9vw, 2.02rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
  }

  .section-header h2 {
    font-size: clamp(1.35rem, 7vw, 1.72rem);
  }

  .hero-lead,
  .home-hero-lead,
  .home-feature-copy,
  .home-feature-note,
  .home-intro-card p,
  .support-case-story p:not(.meta-label),
  .support-case-followup p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .home-feature-copy {
    --home-feature-copy-line-height: 1.55;
  }

  .button-row,
  .cta-rail,
  .inline-list {
    gap: 7px;
  }

  .button {
    min-height: 44px;
    padding-inline: 14px;
    font-size: 0.92rem;
  }

  .button-small {
    min-height: 36px;
    padding-inline: 11px;
  }

  .tag {
    min-height: 28px;
    padding: 0 9px;
    font-size: 0.72rem;
  }

  .media-thumb {
    width: calc(100% + 32px);
    height: 156px;
    margin: -16px -16px 10px;
    border-radius: 16px 16px 14px 14px;
  }

  .home-home-stack,
  .home-home-highlights,
  .home-intro-grid,
  .home-card-grid,
  .story-hub-stack {
    gap: 16px;
  }

  .home-hero-shell {
    gap: 12px;
    padding: 12px;
  }

  .home-hero-shell-copy {
    gap: 14px;
    padding: 2px 0;
  }

  .home-hero-media {
    min-height: 164px;
    border-radius: 18px;
  }

  .home-feature-media {
    min-height: 184px;
  }

  .home-feature-media-video {
    min-height: 224px;
    padding: 8px;
  }

  .home-feature-panel {
    gap: 8px;
    padding: 14px;
  }

  .home-feature-card h2 {
    font-size: clamp(1.24rem, 6.4vw, 1.52rem);
  }

  .home-feature-video-embed.story-video-embed-short {
    width: min(100%, 210px);
    max-width: 210px;
  }

  .project-intro-feature-media {
    min-height: 184px;
    padding: 10px;
  }

  .project-intro-feature-art {
    min-height: 164px;
    border-radius: 18px;
  }

  .project-intro-feature-copy {
    gap: 10px;
    padding: 14px;
  }

  .project-intro-feature-card h2 {
    font-size: clamp(1.18rem, 6vw, 1.5rem);
  }

  .story-hub-hero-copy-panel,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-episode-card,
  .story-series-route-card,
  .story-page-nav-link,
  .story-gallery-card {
    padding: 12px;
    border-radius: 16px;
  }

  .story-hub-hero .story-feature-media,
  .proof-feature-media,
  .story-gallery-media {
    min-height: 156px;
  }

  .story-video-embed-short {
    width: min(100%, 232px);
    max-width: 232px;
  }

  .detail-hero-media,
  .story-detail-media,
  .detail-gallery-stage-media,
  .trust-archive-media {
    min-height: 220px;
    border-radius: 18px;
  }

  .detail-gallery-thumb {
    min-height: 84px;
    border-radius: 14px;
  }

  .cats-directory-body,
  .cats-discovery-main,
  .cats-feature-body,
  .proof-feature-body,
  .support-case-followup,
  .paypal-card.support-case-checkout {
    padding: 16px;
  }

  .cats-feature-body {
    padding-top: 20px;
  }

  .cats-directory-media {
    min-height: 156px;
  }

  .cats-search-shell {
    min-height: 46px;
    padding: 0 12px;
  }

  .cats-search-shell input {
    min-height: 40px;
  }

  .cats-filter-chip {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.74rem;
  }

  .cats-filter-chip-count {
    min-width: 22px;
    min-height: 22px;
    font-size: 0.74rem;
  }

  .cats-sticky-toolbar {
    border-radius: 18px;
  }

  .cats-quick-tab {
    min-height: 34px;
    padding: 0 9px;
  }

  .field input,
  .field textarea,
  .field select {
    min-height: 44px;
    padding: 11px 13px;
  }

  .field textarea {
    min-height: 104px;
  }

  .chip-button {
    min-height: 76px;
    padding: 12px;
    border-radius: 16px;
  }

  .chip-button strong {
    font-size: 1rem;
  }

  .chip-button.is-compact {
    min-height: 50px;
    padding: 9px 11px;
    gap: 8px;
  }

  .chip-button.is-compact strong {
    font-size: 0.92rem;
  }

  .chip-button.is-compact span {
    font-size: 0.76rem;
  }
}

@media (max-width: 920px) {
  .home-feature-card,
  .cats-feature-card,
  .cats-directory-card {
    padding: 0;
  }

  .home-feature-card > .home-feature-media,
  .cats-feature-card > .cats-feature-media,
  .cats-directory-card > .cats-directory-media {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .home-feature-media,
  .cats-feature-media,
  .cats-directory-media {
    flex: 0 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-shimmer::after,
  .loading-line::after,
  .loading-dot::after,
  .loading-pill::after,
  .loading-chip::after,
  .loading-thumb::after,
  .recognition-ticker-track {
    animation: none;
  }
}

@media (max-width: 640px) {
  .recognition-ticker-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 34px;
    padding: 5px;
  }

  .recognition-ticker-label {
    display: none;
  }

  .recognition-ticker-window {
    width: 100%;
  }

  .recognition-ticker-name {
    font-size: 0.82rem;
  }

  .recognition-ticker-kind {
    display: none;
  }
}

.help-network-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.4fr);
  gap: 22px;
  align-items: start;
}

.help-page-band {
  padding-top: 18px;
}

.help-community-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr);
  gap: 18px;
  align-items: flex-end;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.2), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 250, 0.96) 100%);
  box-shadow: var(--shadow-card);
}

.help-community-hero.is-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(14px, 2vw, 18px);
  border-radius: 20px;
}

.help-community-hero-copy {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.help-community-hero.is-compact .help-community-hero-copy {
  gap: 2px;
}

.help-community-hero-copy h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.05rem, 5vw, 4.2rem);
  line-height: 0.98;
}

.help-community-hero.is-compact .help-community-hero-copy h1 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.08;
}

.help-community-hero-copy p:not(.eyebrow) {
  max-width: 68ch;
  margin: 0;
  color: var(--foreground-muted);
  font-size: 1.02rem;
  line-height: 1.58;
}

.help-community-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.help-community-actions .button {
  min-height: 42px;
}

.help-community-counts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.help-community-hero.is-compact .help-community-counts {
  justify-content: flex-end;
  padding-top: 0;
}

.help-community-counts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.78);
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 850;
}

.help-community-counts strong {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1;
}

.help-community-gateway {
  display: block;
}

.help-community-gateway.is-production {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: clamp(16px, 2.8vw, 24px);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.16), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(86, 207, 174, 0.13), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 22px 58px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.help-community-gateway-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.help-community-gateway-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-community-gateway-head h1 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  line-height: 1.02;
}

.help-community-primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(12px, 2vw, 18px);
}

.help-community-entry-card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: space-between;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  min-height: clamp(210px, 24vw, 280px);
  padding: clamp(18px, 2.8vw, 28px);
  border-radius: 10px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.help-community-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.4);
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.1);
}

.help-community-entry-card.is-primary {
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.22), transparent 34%),
    linear-gradient(135deg, #fffaf0, #fff7ed);
  border-color: rgba(217, 119, 6, 0.24);
}

.help-community-card-icon {
  position: relative;
  display: grid;
  width: 58px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 16px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(11, 105, 183, 0.1));
  color: #0f766e;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.help-community-card-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.52);
  transform: rotate(-8deg);
}

.help-community-card-icon svg {
  width: auto;
  height: auto;
}

.help-community-card-icon-main {
  filter: drop-shadow(0 5px 10px rgba(15, 23, 42, 0.12));
}

.help-community-card-icon-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 26px !important;
  height: 26px !important;
  border: 2px solid #ffffff;
  border-radius: 999px;
  padding: 5px;
  background: #ffffff;
  color: inherit;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.16);
}

.help-community-card-icon.is-lost-pet {
  border-color: rgba(217, 119, 6, 0.18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.28), rgba(249, 115, 22, 0.13));
  color: #9a3412;
}

.help-community-card-icon.is-cat-sitting {
  border-color: rgba(20, 184, 166, 0.18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(86, 207, 174, 0.26), rgba(11, 105, 183, 0.1));
  color: #0f766e;
}

.help-community-card-icon.is-rescue-help {
  border-color: rgba(11, 105, 183, 0.18);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.95), transparent 36%),
    linear-gradient(135deg, rgba(120, 183, 255, 0.26), rgba(86, 207, 174, 0.12));
  color: var(--accent-strong);
}

.help-community-card-label {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.1);
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.help-community-entry-card.is-primary .help-community-card-label {
  background: rgba(217, 119, 6, 0.13);
  color: #9a3412;
}

.help-community-entry-card strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.8vw, 2.15rem);
  line-height: 1.04;
}

.help-community-entry-card small {
  color: var(--foreground-muted);
  font-size: clamp(0.92rem, 1vw, 1rem);
  font-weight: 750;
  line-height: 1.42;
}

.help-community-entry-card em {
  align-self: end;
  justify-self: start;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 860;
  line-height: 1.2;
}

.community-my-missing-panel {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 18px);
  background: #ffffff;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.community-my-missing-panel.is-account-summary {
  border-color: rgba(11, 105, 183, 0.16);
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 0.95)),
    #ffffff;
}

.community-my-missing-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.community-my-missing-head > div {
  display: grid;
  gap: 3px;
}

.community-my-missing-head small {
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
}

.community-my-missing-head h2 {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.05;
}

.community-my-missing-head-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  justify-content: flex-end;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 999px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.community-my-missing-head-actions > span {
  display: inline-flex;
  min-width: 76px;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(239, 246, 255, 0.95);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 920;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.community-my-missing-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}

.community-my-missing-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.community-my-missing-thumb {
  display: grid;
  width: 96px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  border-radius: 8px;
  background: #e2e8f0;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
}

.community-my-missing-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-my-missing-card > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.community-my-missing-card strong {
  color: var(--foreground);
  font-size: 1.05rem;
  line-height: 1.05;
}

.community-my-missing-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.community-my-missing-status {
  justify-self: start;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255, 247, 237, 0.9);
  color: #9a3412;
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
}

.community-my-missing-status.is-sighting-reported {
  border-color: rgba(11, 105, 183, 0.18);
  background: #eff6ff;
  color: var(--accent-strong);
}

.community-my-missing-status.is-found {
  border-color: rgba(86, 207, 174, 0.28);
  background: #ecfdf5;
  color: #047857;
}

.community-my-missing-status.is-closed {
  border-color: rgba(100, 116, 139, 0.18);
  background: #f1f5f9;
  color: #475569;
}

.community-my-missing-owner-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.community-my-missing-owner-chip {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(11, 105, 183, 0.07);
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 920;
  line-height: 1;
}

.community-my-missing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.help-my-rooms-panel {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(30, 41, 59, 0.08);
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.14), transparent 30%),
    #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.055);
}

.help-my-rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.help-my-rooms-head h2 {
  margin: 2px 0 0;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  line-height: 1.18;
}

.help-viewer-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  max-width: min(100%, 360px);
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 123, 0.18);
  background: rgba(22, 163, 123, 0.1);
  color: #116c55;
  font-size: 0.8rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.help-viewer-pill.is-compact {
  min-height: 32px;
  background: rgba(248, 250, 252, 0.9);
  color: var(--foreground-muted);
}

.help-my-room-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-my-room-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.78);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    background var(--transition-fast);
}

.help-my-room-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 200, 0, 0.55);
  background: #ffffff;
}

.help-my-room-card strong,
.help-my-room-card small {
  flex-basis: 100%;
  min-width: 0;
}

.help-my-room-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-my-room-card small,
.help-my-room-empty,
.help-my-room-empty-copy {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.help-my-room-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.84);
}

.help-my-room-empty p,
.help-my-room-empty-copy {
  margin: 0;
}

.ai-copilot-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.15), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.96));
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.ai-copilot-card-inline {
  margin-top: 2px;
  gap: 10px;
  padding: 13px;
  border-radius: 20px;
  border-color: rgba(255, 200, 0, 0.2);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.18), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 253, 251, 0.98));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.ai-copilot-inline-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.ai-copilot-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.ai-copilot-heading > span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  aspect-ratio: 1;
  border-radius: 14px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.22), transparent 28%),
    #16231f;
  color: white;
  font-size: 0.76rem;
  font-weight: 950;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.ai-copilot-heading h2,
.ai-copilot-heading h3,
.ai-copilot-heading p {
  margin: 0;
}

.ai-copilot-heading h2,
.ai-copilot-heading h3 {
  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
  line-height: 1.18;
}

.ai-copilot-heading .eyebrow {
  color: var(--accent-strong);
  letter-spacing: 0.06em;
}

.ai-copilot-review-button {
  min-height: 38px;
  padding-inline: 14px;
  box-shadow: 0 8px 18px rgba(255, 200, 0, 0.18);
}

.ai-copilot-feature-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-left: 48px;
}

.ai-copilot-feature-row span {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 850;
}

.ai-copilot-card .button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.ai-copilot-result,
.ai-summary-result {
  display: grid;
  gap: 11px;
  padding: 12px;
  border-radius: 17px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.88);
}

.ai-copilot-result.is-applied {
  border-color: rgba(22, 163, 74, 0.34);
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.94), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 32px rgba(22, 163, 74, 0.1);
}

.ai-copilot-result p,
.ai-summary-result p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.ai-copilot-result-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.ai-copilot-result-head h4 {
  margin: 4px 0 0;
  color: var(--foreground);
  font-size: clamp(1.14rem, 1.7vw, 1.34rem);
  line-height: 1.18;
}

.ai-copilot-result-head .button {
  white-space: nowrap;
}

.ai-copilot-applied-note {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(22, 163, 74, 0.1);
  color: #166534 !important;
  font-weight: 850;
}

.ai-copilot-suggested-copy {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 200, 0, 0.26);
  background: rgba(255, 253, 244, 0.92);
}

.ai-copilot-suggested-copy span,
.ai-copilot-details summary span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-copilot-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-copilot-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(11, 105, 183, 0.18);
  background: rgba(240, 249, 255, 0.82);
  color: var(--accent-strong);
  font-size: 0.78rem;
  font-weight: 850;
}

.ai-copilot-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ai-copilot-result-grid div,
.ai-summary-result div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
}

.ai-copilot-result-grid span,
.ai-summary-result span {
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ai-copilot-warning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ai-copilot-warning-list span {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  border-radius: 13px;
  background: rgba(255, 200, 0, 0.18);
  color: #5f4a00;
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.34;
}

.ai-copilot-warning-list span strong {
  color: currentColor;
  font-size: 0.74rem;
  font-weight: 950;
}

.ai-copilot-warning-list .is-high,
.ai-summary-result.is-high {
  border-color: rgba(255, 119, 91, 0.34);
}

.ai-copilot-warning-list .is-high {
  background: rgba(255, 119, 91, 0.16);
  color: #9d2618;
}

.ai-copilot-result ul,
.ai-summary-result ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.ai-copilot-details {
  display: grid;
  gap: 10px;
  border-radius: 15px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.7);
}

.ai-copilot-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.ai-copilot-details summary::-webkit-details-marker {
  display: none;
}

.ai-copilot-details summary strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  font-size: 0.76rem;
}

.ai-copilot-details[open] {
  padding-bottom: 10px;
}

.ai-copilot-details[open] .ai-copilot-warning-list,
.ai-copilot-details[open] ul {
  margin-inline: 10px;
}

.ai-copilot-result-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}

.ai-copilot-result small,
.ai-summary-result small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
}

.donation-copilot-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 252, 250, 0.98)),
    rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-soft);
}

.donation-copilot-top {
  max-width: 680px;
}

.donation-copilot-top h2,
.donation-copilot-top p {
  margin: 0;
}

.donation-copilot-top h2 {
  color: var(--foreground);
  font-size: clamp(1.28rem, 2vw, 1.68rem);
  line-height: 1.12;
}

.donation-copilot-top p {
  margin-top: 5px;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.donation-copilot-controls,
.donation-copilot-result {
  display: grid;
  gap: 12px;
}

.donation-copilot-label {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.donation-copilot-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 7px;
}

.donation-copilot-choice {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  cursor: pointer;
  text-align: left;
}

.donation-copilot-choice:hover {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 255, 255, 0.92);
}

.donation-copilot-choice-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(86, 207, 174, 0.12);
  color: #116c55;
}

.donation-copilot-choice > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.donation-copilot-choice strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 0.88rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donation-copilot-choice small {
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.7rem;
  font-weight: 760;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.donation-copilot-choice.is-selected {
  border-color: rgba(255, 200, 0, 0.72);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 36%),
    rgba(255, 253, 244, 0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.18);
}

.donation-copilot-choice.is-selected .donation-copilot-choice-icon {
  background: var(--brand);
  color: var(--brand-ink);
}

.donation-copilot-amount-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.donation-copilot-amount {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.7);
  color: var(--foreground);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 850;
}

.donation-copilot-amount.is-selected {
  border-color: rgba(255, 200, 0, 0.64);
  background: rgba(255, 200, 0, 0.22);
  color: #4c3b00;
}

.donation-copilot-options {
  position: relative;
  justify-self: end;
}

.donation-copilot-options summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.68);
  color: var(--foreground-muted);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 850;
  list-style: none;
}

.donation-copilot-options summary::-webkit-details-marker {
  display: none;
}

.donation-copilot-options-panel {
  position: absolute;
  right: 0;
  z-index: 5;
  display: grid;
  gap: 12px;
  width: min(420px, calc(100vw - 48px));
  margin-top: 8px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
}

.donation-copilot-options-panel label {
  display: grid;
}

.donation-copilot-options-panel input {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  font: inherit;
  font-weight: 760;
}

.donation-copilot-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: flex-start;
}

.donation-copilot-result {
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
}

.donation-copilot-result-head span,
.donation-copilot-context-grid > section > span,
.donation-route-card span {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.donation-copilot-result-head h3,
.donation-copilot-result-head p {
  margin: 0;
}

.donation-copilot-result-head h3 {
  margin-top: 3px;
  color: var(--foreground);
  font-size: clamp(1.14rem, 1.8vw, 1.42rem);
}

.donation-copilot-result-head p {
  margin-top: 5px;
  color: var(--muted-foreground);
}

.donation-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.donation-route-card,
.donation-copilot-context-grid a {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.86);
  color: inherit;
  text-decoration: none;
}

.donation-route-feature {
  display: grid;
}

.donation-route-section {
  display: grid;
  gap: 8px;
}

.donation-route-card-primary {
  min-height: 136px;
  padding: 16px;
  border-radius: 20px;
}

.donation-route-card-primary strong {
  font-size: clamp(1.2rem, 2vw, 1.54rem);
}

.donation-route-card:hover,
.donation-copilot-context-grid a:hover {
  border-color: rgba(255, 200, 0, 0.55);
  background: #ffffff;
}

.donation-route-card.is-monthly {
  border-color: rgba(255, 200, 0, 0.44);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 253, 244, 0.9);
}

.donation-route-card strong,
.donation-copilot-context-grid strong {
  color: var(--foreground);
  line-height: 1.2;
}

.donation-route-card p,
.donation-copilot-context-grid p,
.donation-route-card small,
.donation-copilot-context-grid small {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.38;
}

.donation-route-card small,
.donation-copilot-context-grid small {
  font-size: 0.78rem;
  font-weight: 760;
}

.donation-copilot-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.donation-copilot-context-grid section {
  display: grid;
  gap: 8px;
}

.donation-copilot-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(86, 207, 174, 0.12);
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.help-command-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.help-command-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.help-command-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: var(--shadow-soft);
}

.help-command-card.is-primary {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.22), transparent 30%),
    #ffffff;
}

.help-command-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--foreground);
  color: white;
  font-size: 1.2rem;
  font-weight: 950;
}

.help-command-card.is-primary .help-command-icon {
  background: var(--brand);
  color: var(--foreground);
}

.help-command-card span:last-child {
  display: grid;
  gap: 4px;
}

.help-command-card strong {
  font-size: 1.02rem;
}

.help-command-card small {
  color: var(--foreground-muted);
  line-height: 1.35;
}

.help-community-brief {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-community-brief div {
  display: grid;
  gap: 5px;
  min-height: 104px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 252, 250, 0.92) 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.help-community-brief strong {
  font-size: 0.96rem;
}

.help-community-brief span {
  color: var(--foreground-muted);
  font-size: 0.9rem;
  line-height: 1.42;
}

.help-safety-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #ffffff;
}

.help-safety-strip span {
  color: var(--foreground-muted);
}

.help-channel-board {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(247, 249, 252, 0.96);
  box-shadow: var(--shadow-card);
}

.help-channel-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--border-soft);
  background: #ffffff;
}

.help-channel-topbar h2 {
  margin: 0;
}

.help-channel-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.78);
}

.help-channel-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 850;
  white-space: nowrap;
}

.help-channel-tabs a:hover,
.help-channel-tabs a.is-active {
  background: var(--foreground);
  color: #ffffff;
}

.help-channel-tabs span {
  opacity: 0.72;
}

.help-board-tools {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.9);
}

.help-search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.help-search-field {
  display: grid;
  flex: 1 1 280px;
  gap: 5px;
}

.help-search-field span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.help-search-field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 14px;
  background: #ffffff;
  color: var(--foreground);
  font: inherit;
  font-weight: 750;
}

.help-search-field input:focus {
  border-color: rgba(255, 200, 0, 0.86);
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.18);
  outline: none;
}

.help-status-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.help-status-filters a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: #ffffff;
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.help-status-filters a:hover,
.help-status-filters a.is-active {
  border-color: rgba(33, 33, 33, 0.82);
  background: var(--foreground);
  color: #ffffff;
}

.help-board-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.help-network-sidebar,
.help-board-section {
  display: grid;
  gap: 16px;
}

.help-network-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.help-network-stats div {
  display: grid;
  gap: 2px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--border);
}

.help-network-stats strong {
  font-size: clamp(1.45rem, 4vw, 2rem);
  line-height: 1;
}

.help-network-stats span,
.help-request-meta,
.help-linked-cat small {
  color: var(--foreground-muted);
}

.help-safety-card,
.help-network-form-card {
  align-content: start;
}

.help-safety-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, rgba(249, 252, 247, 0.96) 100%);
}

.help-form-heading,
.help-request-card,
.help-offer-form,
.help-owner-actions {
  display: grid;
  gap: 12px;
}

.help-room-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.help-room-topbar > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.92);
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.help-room-draft-status,
.help-draft-status {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 820;
}

.help-room-topbar > .help-room-draft-status {
  background: rgba(86, 207, 174, 0.13);
  color: #246552;
}

.help-room-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px 0 8px;
  border-radius: 999px;
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 900;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.help-room-back-link:hover {
  transform: translateX(-1px);
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground);
}

.help-room-back-link span {
  font-size: 1.05rem;
  line-height: 1;
}

.help-room-wizard-progress {
  --wizard-progress: 0%;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 6px 8px;
  border-block: 1px solid var(--border-soft);
  background:
    linear-gradient(90deg, rgba(255, 200, 0, 0.8) var(--wizard-progress), rgba(226, 232, 240, 0.95) var(--wizard-progress)) center 28px / calc(100% - 54px) 3px no-repeat;
}

.help-room-wizard-progress:has(button:nth-child(1).is-current) {
  --wizard-progress: 0%;
}

.help-room-wizard-progress:has(button:nth-child(2).is-current) {
  --wizard-progress: 33%;
}

.help-room-wizard-progress:has(button:nth-child(3).is-current) {
  --wizard-progress: 66%;
}

.help-room-wizard-progress:has(button:nth-child(4).is-current) {
  --wizard-progress: 100%;
}

.help-room-wizard-progress button {
  display: grid;
  justify-items: center;
  gap: 7px;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground-muted);
  text-align: center;
  cursor: pointer;
  transition: color 120ms ease, transform 120ms ease;
}

.help-room-wizard-progress button:disabled {
  cursor: default;
  opacity: 0.62;
}

.help-room-wizard-progress button:not(:disabled):hover {
  transform: translateY(-1px);
}

.help-room-wizard-progress button.is-current {
  color: var(--foreground);
}

.help-room-wizard-progress button.is-complete {
  color: var(--foreground);
}

.help-room-wizard-progress span {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #64748b;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
  font-size: 0.78rem;
  font-weight: 950;
}

.help-room-wizard-progress button.is-current span {
  background: var(--brand);
  color: var(--foreground);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.18);
}

.help-room-wizard-progress button.is-complete span {
  background: #16a37b;
}

.help-room-wizard-progress button:disabled:not(.is-current) span {
  background: rgba(15, 23, 42, 0.34);
}

.help-room-wizard-progress strong,
.help-room-wizard-progress small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-room-wizard-progress strong {
  color: inherit;
  font-size: 0.83rem;
  line-height: 1.12;
}

.help-room-wizard-progress small {
  color: var(--foreground-muted);
  font-size: 0.7rem;
  font-weight: 760;
}

.help-room-form-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.76) 100%);
}

.help-room-form-section[hidden] {
  display: none !important;
}

.help-room-form-section.is-private-note {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.78) 100%);
}

.help-room-step-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.help-room-step-heading > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 13px;
  background: var(--foreground);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1;
}

.help-room-step-heading h3,
.help-room-step-heading p {
  margin: 0;
}

.help-room-step-heading h3 {
  font-size: 1.08rem;
  line-height: 1.2;
}

.help-room-step-heading p {
  margin-top: 3px;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.help-room-card-field {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
}

.help-room-card-field legend {
  display: block;
  margin-bottom: 10px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-room-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.help-room-urgency-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.help-room-type-card,
.help-room-urgency-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.help-room-type-card:has(input:checked),
.help-room-urgency-card:has(input:checked),
.help-visibility-options label:has(input:checked),
.help-cat-choice:has(input:checked) {
  border-color: rgba(255, 200, 0, 0.72);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.14);
}

.help-room-urgency-card.is-urgent:has(input:checked) {
  border-color: rgba(255, 119, 91, 0.54);
  background: #fff8f5;
  box-shadow: 0 0 0 3px rgba(255, 119, 91, 0.12);
}

.help-room-type-card input,
.help-room-urgency-card input,
.help-visibility-options input,
.help-cat-choice input {
  margin-top: 3px;
  accent-color: var(--brand);
}

.help-room-type-card span,
.help-room-urgency-card span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-room-type-card small,
.help-room-urgency-card small {
  color: var(--foreground-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.help-cat-search-field {
  display: grid;
  gap: 6px;
}

.help-area-picker {
  gap: 8px;
  position: relative;
}

.help-area-search-field {
  display: grid;
  gap: 6px;
}

.help-area-search-field span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-area-search-field input {
  width: 100%;
}

.help-area-option-grid {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 42;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 7px;
  max-height: 190px;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.58);
}

.help-area-option {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, transform 120ms ease;
}

.help-area-option:hover {
  border-color: rgba(255, 200, 0, 0.64);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12);
  transform: translateY(-1px);
}

.help-area-option strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  line-height: 1.18;
}

.help-area-option small {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground-muted);
  font-size: 0.74rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-area-empty {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.help-pet-combobox {
  display: grid;
  gap: 8px;
  position: relative;
}

.help-pet-combobox > span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-pet-combobox-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.help-pet-combobox-control input {
  width: 100%;
}

.help-pet-combobox-control button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 850;
  cursor: pointer;
}

.help-pet-selected-note {
  margin: 0;
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 750;
}

.help-pet-option-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 41;
  display: grid;
  gap: 7px;
  max-height: 240px;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.58);
}

.help-pet-option {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  background: #ffffff;
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, transform 120ms ease;
}

.help-pet-option:hover {
  border-color: rgba(255, 200, 0, 0.64);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12);
  transform: translateY(-1px);
}

.help-pet-option strong {
  min-width: 0;
  overflow: hidden;
  font-size: 0.88rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-pet-option small {
  min-width: 0;
  overflow: hidden;
  color: var(--foreground-muted);
  font-size: 0.76rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.help-selected-cat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.help-selected-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 7px 8px 7px 11px;
  border: 1px solid rgba(255, 200, 0, 0.42);
  border-radius: 999px;
  background: #fff8d8;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 850;
}

.help-selected-cat-chip button {
  display: inline-grid;
  place-items: center;
  width: 20px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: rgba(33, 33, 33, 0.12);
  color: var(--foreground);
  cursor: pointer;
}

.help-cat-search-field span {
  color: var(--foreground-muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-cat-search-field input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 13px;
  background: #ffffff;
  color: var(--foreground);
  font: inherit;
  font-weight: 750;
}

.help-room-submit-row {
  justify-content: flex-end;
  padding-top: 2px;
}

.help-board-header {
  align-items: flex-end;
}

.help-result-count {
  margin: 6px 0 0;
  color: var(--foreground-muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.help-request-grid {
  display: grid;
  gap: 10px;
}

.help-request-thread {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(30, 41, 59, 0.08);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.help-request-thread.is-urgent {
  border-color: rgba(255, 119, 91, 0.34);
}

.help-thread-avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border-radius: 15px;
  background: rgba(33, 33, 33, 0.92);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 950;
}

.help-request-thread.is-urgent .help-thread-avatar {
  background: #ff775b;
  color: #2f160f;
}

.help-thread-content {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.help-request-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(30, 41, 59, 0.08);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 28%),
    #ffffff;
}

.help-request-card.is-urgent {
  border-color: rgba(255, 119, 91, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 119, 91, 0.14), transparent 28%),
    #ffffff;
}

.help-card-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.help-card-header h3 {
  margin: 0;
}

.help-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(25, 43, 38, 0.08);
  color: var(--foreground);
  font-size: 0.74rem;
  font-weight: 800;
  white-space: nowrap;
}

.help-status-chip.is-open {
  background: rgba(86, 207, 174, 0.18);
  color: #116c55;
}

.help-status-chip.is-offered,
.help-status-chip.is-matched {
  background: rgba(255, 200, 0, 0.24);
  color: #6b5200;
}

.help-status-chip.is-resolved,
.help-status-chip.is-closed,
.help-status-chip.is-hidden {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground-muted);
}

.help-status-chip.is-following {
  background: rgba(47, 107, 95, 0.12);
  color: #2f6b5f;
}

.help-status-chip.is-private {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground);
}

.help-card-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.help-unread-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #ff775b;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: nowrap;
}

.help-card-details {
  padding: 12px;
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid var(--border-soft);
  white-space: pre-wrap;
}

.help-details-disclosure {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-details-disclosure summary {
  cursor: pointer;
  padding: 10px 12px;
  color: var(--foreground);
  font-weight: 850;
  list-style: none;
}

.help-details-disclosure summary::-webkit-details-marker {
  display: none;
}

.help-details-disclosure[open] summary {
  border-bottom: 1px solid var(--border-soft);
}

.help-details-disclosure .help-card-details {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.help-linked-cat {
  display: inline-grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  max-width: 340px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
  cursor: default;
}

.help-linked-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-linked-cat-more {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.help-linked-cat-image {
  position: relative;
  width: 56px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface-soft);
}

.help-linked-cat-image img {
  object-fit: cover;
}

.help-linked-cat span:last-child {
  display: grid;
  min-width: 0;
}

.help-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 0.88rem;
}

.help-request-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.help-request-meta svg {
  width: 16px;
  height: 16px;
}

.help-offer-details {
  display: grid;
  gap: 10px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  background: rgba(248, 250, 252, 0.78);
  overflow: hidden;
}

.help-offer-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.help-offer-details summary::-webkit-details-marker {
  display: none;
}

.help-offer-details summary span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.help-offer-details summary strong {
  color: var(--foreground);
  font-weight: 900;
}

.help-offer-details summary small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.help-offer-details summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 28px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--border-soft);
  color: var(--foreground);
  font-weight: 950;
}

.help-offer-details[open] summary::after {
  content: "-";
}

.help-offer-form {
  margin: 0 12px 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-cat-choice-field {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
}

.help-cat-choice-field legend {
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-cat-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.78);
}

.help-cat-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

button.help-cat-choice {
  grid-template-columns: minmax(0, 1fr);
  color: var(--foreground);
  text-align: left;
  font: inherit;
}

button.help-cat-choice:hover {
  border-color: rgba(255, 200, 0, 0.64);
  background: #fffdf3;
  box-shadow: 0 0 0 3px rgba(255, 200, 0, 0.12);
}

.help-cat-choice span {
  display: grid;
  min-width: 0;
}

.help-cat-choice small {
  color: var(--foreground-muted);
  font-size: 0.78rem;
}

.help-visibility-field {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
}

.help-visibility-field legend {
  display: block;
  margin-bottom: 10px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-visibility-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.help-visibility-options label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.86);
  cursor: pointer;
}

.help-visibility-options span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-visibility-options small {
  color: var(--foreground-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.help-owner-actions,
.help-offer-locked,
.help-offer-closed {
  padding: 12px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
}

.help-owner-actions {
  border: 1px solid rgba(255, 200, 0, 0.24);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 34%),
    rgba(255, 253, 244, 0.92);
}

.help-owner-actions-head {
  display: grid;
  gap: 4px;
}

.help-owner-actions-head strong {
  color: var(--foreground);
  font-size: 0.96rem;
  font-weight: 950;
}

.help-owner-actions-head span {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.42;
}

.help-owner-action-grid {
  display: grid;
  gap: 8px;
}

.help-owner-action-button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border-radius: 15px;
  border: 1px solid rgba(22, 163, 74, 0.18);
  background: rgba(240, 253, 244, 0.86);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.help-owner-action-button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(22, 163, 74, 0.32);
  box-shadow: var(--shadow-card);
}

.help-owner-action-button.is-close {
  border-color: rgba(100, 116, 139, 0.2);
  background: rgba(248, 250, 252, 0.94);
}

.help-owner-action-button strong {
  font-size: 0.9rem;
  font-weight: 950;
}

.help-owner-action-button span {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.38;
}

.help-owner-action-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.help-invite-details,
.help-offer-decision-row {
  display: grid;
  gap: 8px;
}

.help-invite-details summary {
  cursor: pointer;
  font-weight: 850;
}

.help-invite-form {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-offer-decision-row {
  justify-items: start;
  padding-top: 4px;
}

.help-comment-thread {
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.72);
}

.help-comment-thread-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
}

.help-comment-thread-summary::-webkit-details-marker {
  display: none;
}

.help-comment-thread-summary > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.help-thread-live-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.help-thread-live-tools button {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: #ffffff;
  color: var(--foreground-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 850;
  cursor: pointer;
}

.help-thread-live-tools button:hover {
  border-color: rgba(255, 200, 0, 0.48);
  color: var(--foreground);
}

.help-live-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(22, 163, 123, 0.12);
  color: #116c55;
  font-size: 0.76rem;
  font-weight: 900;
  white-space: nowrap;
}

.help-live-sync span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(22, 163, 123, 0.1);
}

.help-live-sync.is-syncing {
  background: rgba(255, 200, 0, 0.22);
  color: #6b5200;
}

.help-live-sync.is-paused {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground-muted);
}

.help-live-sync.is-error {
  background: rgba(255, 119, 91, 0.14);
  color: #b42318;
}

.help-comment-thread-summary small,
.help-comment-empty {
  color: var(--foreground-muted);
  font-size: 0.88rem;
}

.help-thread-open-label {
  padding: 4px 9px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.help-comment-thread[open] .help-thread-open-label {
  background: var(--foreground);
  color: #ffffff;
}

.help-thread-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 2px;
}

.help-thread-actions span {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-comment-thread-panel {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.help-comment-compose-head {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 200, 0, 0.16);
}

.help-comment-compose-head strong {
  font-size: 1rem;
}

.help-comment-compose-head span {
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.4;
}

.help-comment-list {
  display: grid;
  gap: 8px;
}

.help-comment-bubble {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.help-comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--foreground-muted);
  font-size: 0.78rem;
}

.help-comment-meta strong {
  color: var(--foreground);
}

.help-comment-meta span {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.28);
  color: #6b5200;
  font-weight: 850;
}

.help-comment-bubble p,
.help-comment-empty {
  margin: 0;
}

.help-comment-form {
  display: grid;
  gap: 10px;
}

.help-live-footnote {
  margin: -2px 0 0;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.help-draft-status {
  margin: -2px 0 0;
}

.help-sensitive-guide {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 119, 91, 0.18);
  background: rgba(255, 248, 245, 0.88);
  color: #8a2f21;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.45;
}

.help-new-reply-toast {
  justify-self: start;
  min-height: 34px;
  border: 1px solid rgba(86, 207, 174, 0.32);
  border-radius: 999px;
  padding: 0 12px;
  background: rgba(232, 248, 240, 0.94);
  color: #116c55;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(17, 108, 85, 0.08);
}

.help-comment-meta em {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--foreground-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
}

.help-comment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding-top: 2px;
}

.help-comment-actions .button {
  min-height: 30px;
  padding-inline: 9px;
  font-size: 0.76rem;
}

.help-comment-edit-form,
.help-report-form {
  display: grid;
  gap: 8px;
}

.help-comment-edit-form textarea,
.help-report-form textarea {
  width: 100%;
}

.help-report-details {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 17px;
  border: 1px solid rgba(244, 63, 94, 0.14);
  background:
    radial-gradient(circle at top right, rgba(244, 63, 94, 0.08), transparent 34%),
    rgba(255, 251, 252, 0.94);
}

.help-report-details.is-compact {
  padding: 0;
  border: 0;
  background: transparent;
}

.help-report-details summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.help-report-details summary::-webkit-details-marker {
  display: none;
}

.help-report-summary-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 11px;
  background: rgba(244, 63, 94, 0.1);
  color: #be123c;
  font-size: 0.9rem;
  font-weight: 950;
}

.help-report-summary-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.help-report-summary-copy strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 950;
  line-height: 1.2;
}

.help-report-summary-copy small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.help-report-details.is-compact summary {
  display: inline-flex;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.86);
}

.help-report-details.is-compact .help-report-summary-icon {
  width: 20px;
  border-radius: 999px;
  font-size: 0.68rem;
}

.help-report-details.is-compact .help-report-summary-copy strong {
  font-size: 0.76rem;
}

.help-report-details[open].is-compact {
  flex-basis: 100%;
  padding: 10px;
  border: 1px solid rgba(244, 63, 94, 0.14);
  border-radius: 14px;
  background: rgba(255, 251, 252, 0.94);
}

.help-report-details[open].is-compact summary {
  padding: 0;
  border: 0;
  background: transparent;
}

.help-report-submit {
  justify-self: start;
}

.help-invite-manager {
  display: grid;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(11, 105, 183, 0.14);
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 34%),
    rgba(248, 250, 252, 0.9);
}

.help-invite-manager-heading {
  display: grid;
  gap: 5px;
}

.help-invite-kicker {
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.help-invite-manager-heading strong {
  color: var(--foreground);
  font-size: 1rem;
  line-height: 1.2;
}

.help-invite-manager-heading span:not(.help-invite-kicker) {
  color: var(--muted-foreground);
  font-size: 0.84rem;
  line-height: 1.35;
}

.help-invite-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.help-invite-form-grid .field {
  gap: 5px;
}

.help-invite-link-card {
  display: grid;
  gap: 7px;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid rgba(22, 163, 74, 0.22);
  background: rgba(240, 253, 244, 0.88);
}

.help-invite-link-card > span {
  color: #166534;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-invite-link-card a {
  overflow-wrap: anywhere;
  color: var(--foreground);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.38;
}

.help-invite-link-card .button,
.help-invite-submit {
  width: 100%;
}

.help-invite-list {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

.help-invite-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.help-invite-list-heading strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 950;
}

.help-invite-list-heading span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-soft);
  color: var(--muted-foreground);
  font-size: 0.74rem;
  font-weight: 850;
}

.help-invite-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
}

.help-invite-row.is-revoked {
  opacity: 0.62;
}

.help-invite-person {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.help-invite-person small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  line-height: 1.35;
}

.help-invite-status-chip {
  justify-self: end;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.22);
  color: #6b5200;
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.help-invite-status-chip.is-accepted {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
}

.help-invite-status-chip.is-revoked {
  background: rgba(100, 116, 139, 0.12);
  color: #475569;
}

.help-invite-row-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
}

.help-comment-login {
  justify-self: start;
}

.form-status-message {
  margin: 0;
  font-weight: 800;
}

.form-status-message.is-error {
  color: #b42318;
}

.form-status-message.is-success {
  color: #116c55;
}

.help-new-layout {
  max-width: 860px;
}

.help-new-intro {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.help-new-intro .stack-tight {
  display: none;
}

.help-new-intro .page-intro-support {
  display: flex;
  justify-content: flex-end;
}

.help-new-back {
  display: flex;
  justify-content: flex-end;
}

.help-new-side-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.help-helper-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.help-helper-profile-form {
  display: grid;
  gap: 16px;
  padding: clamp(18px, 3vw, 26px);
}

.help-helper-fieldset {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.8);
}

.help-helper-fieldset legend {
  padding: 0 6px;
  margin-bottom: 8px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
}

.help-helper-category-grid,
.help-helper-toggle-grid {
  display: grid;
  gap: 8px;
}

.help-helper-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-helper-category-option,
.help-helper-toggle-grid .checkbox-row {
  align-items: flex-start;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: #ffffff;
}

.help-helper-profile-side {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 10px;
  padding: 18px;
}

.help-helper-profile-side h3,
.help-helper-profile-side p {
  margin: 0;
}

.help-helper-profile-side p {
  color: var(--foreground-muted);
  line-height: 1.55;
}

.help-detail-band {
  padding-top: 18px;
}

.help-detail-container {
  max-width: 1160px;
}

.help-detail-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-card);
}

.help-detail-nav .button {
  min-height: 34px;
  padding-inline: 12px;
  border-radius: 999px;
  box-shadow: none;
}

.help-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
  gap: 18px;
  align-items: start;
}

.help-detail-main,
.help-detail-action-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.help-detail-main {
  gap: 12px;
  padding: clamp(15px, 2.4vw, 22px);
  border-radius: 24px;
}

.help-detail-main.is-urgent {
  border-color: rgba(255, 119, 91, 0.34);
  background:
    radial-gradient(circle at top right, rgba(255, 119, 91, 0.12), transparent 26%),
    #ffffff;
}

.help-detail-title {
  display: grid;
  gap: 6px;
}

.help-detail-title .eyebrow {
  margin: 0;
}

.help-detail-title h1 {
  margin: 0;
  font-size: clamp(1.28rem, 2.2vw, 2rem);
  line-height: 1.12;
}

.help-detail-title p {
  max-width: 68ch;
  margin: 0;
  color: var(--foreground-muted);
  font-size: clamp(0.95rem, 1.25vw, 1.05rem);
  line-height: 1.48;
}

.help-progress-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
}

.help-progress-rail li {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.88);
  color: var(--foreground-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.help-progress-rail li span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
}

.help-progress-rail li.is-complete {
  border-color: rgba(25, 135, 84, 0.24);
  background: rgba(232, 248, 240, 0.86);
  color: #116c55;
}

.help-progress-rail li.is-complete span {
  border-color: #16a37b;
  background:
    linear-gradient(135deg, transparent 45%, #ffffff 45% 55%, transparent 55%),
    #16a37b;
}

.help-progress-rail li.is-next {
  border-color: rgba(255, 200, 0, 0.44);
  background: rgba(255, 250, 226, 0.92);
  color: #6b5200;
}

.help-detail-meta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-detail-meta-grid > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.94);
  color: var(--foreground-muted);
  font-size: 0.86rem;
  font-weight: 850;
}

.help-detail-meta-grid svg {
  width: 16px;
  height: 16px;
}

.help-detail-cat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.help-detail-safety-card,
.help-detail-cat-card,
.help-detail-context-card {
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.9);
}

.help-detail-safety-card,
.help-detail-context-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
}

.help-detail-safety-card {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.16), transparent 30%),
    rgba(248, 250, 252, 0.94);
}

.help-detail-safety-card p,
.help-detail-context-card p {
  margin: 0;
  color: var(--foreground-muted);
  line-height: 1.55;
}

.help-detail-context-card p:last-child {
  white-space: pre-wrap;
}

.help-detail-section-heading {
  display: grid;
  gap: 5px;
}

.help-detail-section-heading h2 {
  margin: 0;
  font-size: 1.22rem;
  line-height: 1.18;
}

.help-detail-private-card,
.help-detail-offer-queue,
.help-detail-timeline-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.82);
}

.help-detail-private-card h2,
.help-detail-private-card p {
  margin: 0;
}

.help-detail-private-card h2 {
  font-size: 1.15rem;
  line-height: 1.2;
}

.help-detail-private-card p:last-child,
.help-detail-empty-note {
  color: var(--foreground-muted);
  line-height: 1.5;
}

.help-detail-offer-list {
  display: grid;
  gap: 9px;
}

.help-detail-offer-card {
  display: grid;
  gap: 7px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.help-detail-offer-card.is-selected {
  border-color: rgba(25, 135, 84, 0.28);
  background: rgba(232, 248, 240, 0.92);
}

.help-detail-offer-card > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.help-detail-offer-card span {
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 200, 0, 0.24);
  color: #6b5200;
  font-size: 0.76rem;
  font-weight: 900;
}

.help-detail-offer-card p,
.help-detail-offer-card small,
.help-detail-empty-note {
  margin: 0;
}

.help-detail-offer-card p {
  color: var(--foreground);
  line-height: 1.48;
}

.help-detail-offer-card small {
  color: var(--foreground-muted);
  line-height: 1.45;
}

.help-detail-helper-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.help-detail-helper-mini span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(22, 163, 123, 0.12);
  color: #116c55;
  font-size: 0.74rem;
  font-weight: 900;
}

.help-detail-timeline {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.help-detail-timeline li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  padding: 0 0 14px;
}

.help-detail-timeline li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: -2px;
  left: 7px;
  width: 2px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.help-detail-timeline li:last-child {
  padding-bottom: 0;
}

.help-detail-timeline-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border-radius: 999px;
  border: 3px solid #ffffff;
  background: #16a37b;
  box-shadow: 0 0 0 1px rgba(22, 163, 123, 0.22);
}

.help-detail-timeline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.help-detail-timeline-meta strong {
  color: #116c55;
}

.help-detail-timeline h3,
.help-detail-timeline p {
  margin: 0;
}

.help-detail-timeline h3 {
  margin-top: 2px;
  font-size: 0.98rem;
  line-height: 1.24;
}

.help-detail-timeline p {
  margin-top: 4px;
  color: var(--foreground-muted);
  line-height: 1.48;
  white-space: pre-wrap;
}

.help-detail-cat-card {
  display: inline-grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  justify-self: start;
  min-width: min(100%, 320px);
  padding: 10px;
  border-radius: 20px;
}

.help-detail-cat-image {
  position: relative;
  width: 74px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface-soft);
}

.help-detail-cat-image img {
  object-fit: cover;
}

.help-detail-cat-card span:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.help-detail-cat-card small {
  color: var(--foreground-muted);
}

.help-detail-action-panel {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 16px;
}

.help-detail-participants-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.help-detail-participants-card p {
  margin: 0;
  color: var(--foreground-muted);
  line-height: 1.5;
}

.help-detail-participant-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.help-detail-participant-stats span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.88);
  color: var(--foreground-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.help-detail-participant-stats strong {
  color: var(--foreground);
  font-size: 1.45rem;
  line-height: 1;
}

.help-detail-action-card {
  padding: 16px;
  border-radius: 20px;
}

.help-detail-action-card h2,
.help-detail-action-card p {
  margin: 0;
}

.help-detail-action-card h2 {
  font-size: 1.35rem;
  line-height: 1.15;
}

.help-detail-action-card p {
  color: var(--foreground-muted);
  line-height: 1.5;
}

.help-detail-action-card.is-room-owner {
  border-color: rgba(255, 200, 0, 0.28);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 30%),
    #ffffff;
}

.help-detail-action-card.is-direct-help {
  border-color: rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.14), transparent 30%),
    #ffffff;
}

.help-direct-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.help-direct-choice-grid span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px;
  border-radius: 15px;
  border: 1px solid var(--border-soft);
  background: rgba(248, 250, 252, 0.86);
}

.help-direct-choice-grid strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 950;
}

.help-direct-choice-grid small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.help-comment-thread.is-room {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-card);
}

.help-comment-thread.is-room .help-comment-thread-summary {
  padding: 15px;
}

.help-comment-thread.is-room .help-comment-thread-panel {
  padding: 0 15px 15px;
}

.help-comment-thread.is-room .help-comment-list {
  gap: 10px;
}

.help-comment-thread.is-room .help-comment-bubble {
  border-radius: 18px;
}

@media (max-width: 900px) {
  .help-network-layout {
    grid-template-columns: 1fr;
  }

  .help-community-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .help-community-primary-actions {
    grid-template-columns: 1fr 1fr;
  }

  .help-community-actions {
    justify-content: flex-start;
  }

  .help-my-rooms-head {
    flex-direction: column;
  }

  .help-my-room-list {
    grid-template-columns: 1fr;
  }

  .help-room-wizard-progress {
    overflow-x: auto;
    justify-content: flex-start;
    padding-inline: 4px;
    background:
      linear-gradient(90deg, rgba(255, 200, 0, 0.8) var(--wizard-progress), rgba(226, 232, 240, 0.95) var(--wizard-progress)) 20px 28px / 420px 3px no-repeat;
  }

  .help-room-wizard-progress button {
    flex: 0 0 112px;
  }

  .ai-copilot-result-grid,
  .donation-route-grid,
  .donation-copilot-context-grid {
    grid-template-columns: 1fr;
  }

  .donation-copilot-top {
    max-width: none;
  }

  .donation-copilot-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .donation-copilot-action-row .button,
  .donation-copilot-options,
  .donation-copilot-options summary {
    width: 100%;
  }

  .donation-copilot-options-panel {
    position: static;
    width: 100%;
  }

  .donation-copilot-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-copilot-result-head {
    grid-template-columns: 1fr;
  }

  .ai-copilot-result-head .button {
    width: 100%;
  }

  .ai-copilot-inline-top {
    grid-template-columns: 1fr;
  }

  .ai-copilot-review-button {
    width: 100%;
  }

  .ai-copilot-feature-row {
    padding-left: 0;
  }

  .help-command-panel {
    grid-template-columns: 1fr;
  }

  .help-community-brief {
    grid-template-columns: 1fr;
  }

  .help-room-urgency-grid {
    grid-template-columns: 1fr;
  }

  .help-helper-profile-layout {
    grid-template-columns: 1fr;
  }

  .help-helper-profile-side {
    position: static;
  }

  .help-progress-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-detail-layout {
    grid-template-columns: 1fr;
  }

  .help-direct-choice-grid {
    grid-template-columns: 1fr;
  }

  .help-detail-action-panel {
    position: static;
  }

  .help-detail-nav {
    width: 100%;
    border-radius: 18px;
  }

  .help-detail-nav .button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 620px) {
  .help-network-stats {
    grid-template-columns: 1fr;
  }

  .help-community-hero {
    padding: 16px;
    border-radius: 20px;
  }

  .help-community-primary-actions {
    grid-template-columns: 1fr;
  }

  .help-community-entry-card {
    min-height: 168px;
  }

  .help-community-gateway.is-production {
    padding: 14px;
  }

  .help-community-gateway-head {
    display: grid;
  }

  .help-community-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .help-community-actions .button {
    justify-content: center;
  }

  .help-progress-rail {
    grid-template-columns: 1fr;
  }

  .help-helper-category-grid {
    grid-template-columns: 1fr;
  }

  .help-visibility-options {
    grid-template-columns: 1fr;
  }

  .help-room-wizard-progress {
    margin-inline: -3px;
  }

  .help-room-form-section {
    padding: 13px;
    border-radius: 18px;
  }

  .help-room-type-grid,
  .help-area-option-grid,
  .help-cat-choice-grid,
  .donation-copilot-choice-grid {
    grid-template-columns: 1fr;
  }

  .help-room-submit-row {
    justify-content: stretch;
  }

  .help-room-submit-row .button {
    width: 100%;
    justify-content: center;
  }

  .help-pet-combobox-control {
    grid-template-columns: 1fr;
  }

  .help-card-header {
    display: grid;
  }

  .help-status-chip {
    justify-self: start;
  }

  .help-channel-topbar {
    display: grid;
  }

  .help-board-body {
    padding: 12px;
  }

  .help-board-tools {
    padding: 12px;
  }

  .help-search-bar {
    align-items: stretch;
  }

  .help-search-bar .button {
    justify-content: center;
  }

  .help-request-thread {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .help-thread-avatar {
    width: 34px;
    border-radius: 12px;
  }
}


@media (min-width: 720px) and (max-width: 1023px) {
  .site-main {
    --site-main-top: 62px;
    padding-top: var(--site-main-top);
  }

  .site-main.site-main-not-home {
    --site-main-top: 50px;
  }

  .site-main.site-main-soft-record {
    --site-main-top: 48px;
  }

  .site-main-not-home > .page-band:first-child,
  .site-main-not-home > .detail-band:first-child {
    padding-top: 14px;
  }

  .site-main-not-home > .loading-page:first-child {
    padding-top: 8px;
  }

  .section,
  .page-band,
  .detail-band {
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .hero-band {
    padding-top: 24px;
    padding-bottom: 30px;
  }

  .home-hero-band {
    padding-top: 12px;
  }

  .help-page-band,
  .help-detail-band {
    padding-top: 14px;
  }

  .cats-page-band {
    padding-top: 20px;
  }
}

html[data-theme="dark"] :where(
  .help-request-meta span,
  .help-status-chip,
  .help-detail-participant-stats span,
  .help-direct-choice-grid span,
  .help-invite-row,
  .help-invite-list-heading span,
  .help-invite-link-card,
  .ai-copilot-suggested-copy,
  .ai-copilot-details,
  .ai-copilot-chip-row span,
  .help-cat-choice,
  .help-room-type-card,
  .help-room-urgency-card,
  .help-visibility-options label
) {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
}

html[data-theme="dark"] :where(.help-status-chip.is-open, .help-status-chip.is-following, .help-invite-status-chip.is-pending) {
  background: rgba(255, 200, 0, 0.16);
  color: var(--brand-soft);
}

html[data-theme="dark"] .recognition-ticker-band {
  border-color: rgba(255, 255, 255, 0.1);
  background: #0b0b0c;
  box-shadow: none;
}

html[data-theme="dark"] .recognition-ticker-label {
  background: rgba(255, 200, 0, 0.92);
  color: #211a00;
  border-right: 0;
}

html[data-theme="dark"] .recognition-ticker-window,
html[data-theme="dark"] .recognition-ticker-item,
html[data-theme="dark"] .recognition-ticker-name {
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .recognition-ticker-item::before {
  color: #ffc800;
  background: #ffc800;
  opacity: 0.6;
}

html[data-theme="dark"] .recognition-ticker-kind {
  border-color: rgba(255, 200, 0, 0.18);
  background: rgba(255, 200, 0, 0.1);
  color: rgba(255, 224, 106, 0.9);
}

html[data-theme="dark"] :where(
  .home-feature-tags .tag,
  .home-content-card .tag,
  .tag,
  .chip-button,
  .detail-preset-card,
  .help-cat-choice,
  .help-comment-card,
  .help-detail-timeline-dot,
  .help-detail-helper-mini span,
  .help-invite-status-chip,
  .help-report-details.is-compact summary,
  .ai-copilot-details summary strong
) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] .help-offer-details summary::after {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .home-feature-date,
  .home-feature-caption,
  .home-card-meta,
  .home-card-description,
  .meta-row,
  .helper-text,
  .help-invite-person small,
  .help-report-summary-copy small,
  .help-offer-details summary small,
  .help-owner-actions-head span,
  .help-owner-action-button span
) {
  color: var(--muted-foreground);
}

html[data-theme="dark"] :where(
  .home-feature-copy,
  .home-feature-note,
  .home-content-card h3,
  .home-feature-card h2,
  .home-project-brief-item strong,
  .help-invite-manager-heading strong,
  .help-report-summary-copy strong,
  .help-offer-details summary strong,
  .help-owner-actions-head strong,
  .help-owner-action-button strong
) {
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .home-feature-kicker,
  .home-feature-linkline a,
  .eyebrow,
  .card-eyebrow,
  .meta-label
) {
  color: var(--brand-soft);
}

html[data-theme="dark"] :where(.home-feature-panel, .home-feature-note) {
  border-color: var(--border-soft);
}

html[data-theme="dark"] :where(.home-feature-tags .tag, .home-content-card .tag) {
  background: rgba(255, 200, 0, 0.12);
  color: var(--brand-soft);
}

html[data-theme="dark"] :where(
  .tag,
  .chip-button,
  .record-meta-pill,
  .meta-row,
  .shorts-cat-mini-item,
  .shorts-episode-cat-pill,
  .shorts-cat-mini-more,
  .shorts-episode-cat-more,
  .shorts-link-card,
  .shorts-episode-rail-item,
  .help-status-chip,
  .help-request-meta span,
  .help-linked-cat,
  .help-card-chip-row .tag,
  .help-thread-live-tools button,
  .help-live-sync,
  .help-new-reply-toast,
  .help-invite-row,
  .help-invite-link-card,
  .help-invite-status-chip
) {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] .story-video-embed,
html[data-theme="dark"] .story-instagram-embed {
  background: #070908;
  border-color: var(--border);
}

html[data-theme="dark"] .button-ghost {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] .button-ghost:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .cats-page-band {
  background: transparent;
}

html[data-theme="dark"] .cats-page-band::before {
  display: none;
}

html[data-theme="dark"] .cats-directory-intro {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.06), transparent 30%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .cats-discovery-panel {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 30%),
    linear-gradient(135deg, rgba(18, 24, 21, 0.98) 0%, rgba(12, 17, 15, 0.98) 100%);
  border-color: var(--border);
}

html[data-theme="dark"] :where(
  .cats-discovery-count,
  .cats-search-shell,
  .cats-results-status,
  .cats-filter-chip,
  .cats-filter-chip-count,
  .cats-feature-body,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-directory-body,
  .cats-directory-need,
  .cats-directory-status-line,
  .cats-empty-state
) {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-search-shell:focus-within {
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .cats-search-shell input {
  color: var(--foreground);
}

html[data-theme="dark"] .cats-feature-card {
  background: rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-feature-card:hover,
html[data-theme="dark"] .cats-directory-card:hover {
  background: rgba(25, 32, 28, 0.98);
  border-color: rgba(255, 200, 0, 0.36);
}

html[data-theme="dark"] :where(.cats-feature-media, .cats-directory-media) {
  background: rgba(7, 10, 9, 0.9);
}

html[data-theme="dark"] .cats-feature-photo-label {
  background: rgba(12, 17, 15, 0.84);
  border-color: rgba(255, 200, 0, 0.28);
  color: var(--brand-soft);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] :where(
  .cats-discovery-copy h1,
  .cats-discovery-count strong,
  .cats-results-status strong,
  .cats-feature-body h3,
  .cats-feature-copy,
  .cats-directory-body h3,
  .cats-directory-copy,
  .cats-directory-status-line,
  .cats-directory-need-line,
  .cats-directory-need p
) {
  color: var(--foreground);
}

html[data-theme="dark"] :where(
  .cats-discovery-copy p:not(.eyebrow),
  .cats-results-status,
  .cats-results-status p,
  .cats-feature-location span:last-child,
  .cats-feature-chip span:last-child,
  .cats-directory-status,
  .cats-directory-status-line span:last-child,
  .cats-directory-need-line span:last-child
) {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="adoptable"],
html[data-theme="dark"] .cats-feature-chip[data-priority="adoptable"],
html[data-theme="dark"] .cats-priority-badge[data-priority="adoptable"] {
  background: rgba(255, 200, 0, 0.17);
  border-color: rgba(255, 200, 0, 0.42);
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="all"] {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="foster"],
html[data-theme="dark"] .cats-feature-chip[data-priority="foster"],
html[data-theme="dark"] .cats-priority-badge[data-priority="foster"] {
  background: rgba(120, 183, 255, 0.14);
  border-color: rgba(120, 183, 255, 0.34);
  color: #b9dcff;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="medical"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="kittens"],
html[data-theme="dark"] .cats-priority-badge[data-priority="medical"] {
  background: rgba(255, 122, 102, 0.13);
  border-color: rgba(255, 160, 134, 0.34);
  color: #ffc1ad;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="pairs"] {
  background: rgba(138, 111, 255, 0.13);
  border-color: rgba(169, 150, 255, 0.34);
  color: #cec4ff;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="support"],
html[data-theme="dark"] .cats-feature-chip[data-priority="support"],
html[data-theme="dark"] .cats-priority-badge[data-priority="support"],
html[data-theme="dark"] .cats-priority-badge[data-priority="recovery"] {
  background: rgba(86, 207, 174, 0.14);
  border-color: rgba(86, 207, 174, 0.34);
  color: #a6f3da;
}

html[data-theme="dark"] .cats-filter-chip-count {
  background: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active .cats-filter-chip-count {
  background: rgba(255, 255, 255, 0.14);
}

html[data-theme="dark"] .recognition-ticker-band,
html[data-theme="dark"] .recognition-ticker-band :where(
  .recognition-ticker-window,
  .recognition-ticker-item,
  .recognition-ticker-name,
  .recognition-ticker-kind
) {
  color: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .recognition-ticker-band .recognition-ticker-kind {
  color: rgba(255, 224, 106, 0.9);
}

html[data-theme="dark"] .home-feature-card-pet,
html[data-theme="dark"] .home-feature-card-video {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.07), transparent 30%),
    linear-gradient(180deg, rgba(18, 24, 21, 0.98) 0%, rgba(11, 15, 13, 0.98) 100%);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .home-feature-card-pet:hover,
html[data-theme="dark"] .home-feature-card-video:hover {
  border-color: rgba(255, 200, 0, 0.36);
  box-shadow: var(--shadow);
}

html[data-theme="dark"] .home-feature-card-pet .home-feature-panel,
html[data-theme="dark"] .home-feature-card-video .home-feature-panel,
html[data-theme="dark"] .home-feature-panel-video {
  background: transparent;
  border-top-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .home-feature-card-pet .home-feature-media,
html[data-theme="dark"] .home-feature-card-video .home-feature-media {
  background: rgba(7, 10, 9, 0.94);
}

html[data-theme="dark"] .home-feature-card-video .home-feature-media-video {
  background:
    radial-gradient(circle at top, rgba(255, 200, 0, 0.08), transparent 34%),
    linear-gradient(180deg, rgba(7, 10, 9, 0.98) 0%, rgba(14, 18, 16, 0.98) 100%);
}

html[data-theme="dark"] .home-feature-video-frame {
  background: transparent;
}

html[data-theme="dark"] .home-feature-card-pet h2,
html[data-theme="dark"] .home-feature-card-video h2,
html[data-theme="dark"] .home-feature-card-pet .home-feature-copy,
html[data-theme="dark"] .home-feature-card-video .home-feature-copy,
html[data-theme="dark"] .home-feature-note {
  color: var(--foreground);
}

html[data-theme="dark"] .home-feature-date,
html[data-theme="dark"] .home-feature-caption {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .home-feature-card-pet .home-feature-tags .tag-chip,
html[data-theme="dark"] .home-feature-card-video .home-feature-tags .tag-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  color: var(--foreground);
}

html[data-theme="dark"] .home-content-card .content-card-body {
  background: transparent;
  border-color: var(--border-soft);
}

html[data-theme="dark"] .home-content-card .home-card-meta {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: var(--muted-foreground);
}

html[data-theme="dark"] .home-content-card .home-card-meta .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .home-content-card .home-card-meta > span:last-child {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .bank-transfer-card {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .bank-transfer-open-label {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .bank-transfer-card[open] .bank-transfer-open-label {
  background: #ffffff;
  border-color: #ffffff;
  color: #111111;
}

html[data-theme="dark"] .bank-transfer-card p,
html[data-theme="dark"] .bank-transfer-details dt {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .bank-transfer-card strong,
html[data-theme="dark"] .bank-transfer-summary-title,
html[data-theme="dark"] .bank-transfer-details dd {
  color: var(--foreground);
}

html[data-theme="dark"] .support-cat-card .content-card-body,
html[data-theme="dark"] .support-cat-card .card-eyebrow,
html[data-theme="dark"] .support-cat-card .tag,
html[data-theme="dark"] .support-cat-card .meta-row {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .support-cat-card .card-eyebrow,
html[data-theme="dark"] .support-cat-card .tag {
  color: var(--foreground);
}

html[data-theme="dark"] .support-cat-card .meta-row {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .support-cat-card .eyebrow-icon,
html[data-theme="dark"] .support-cat-card .tag-icon,
html[data-theme="dark"] .support-cat-card .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .support-project-card .content-card-body,
html[data-theme="dark"] .support-project-card .card-eyebrow,
html[data-theme="dark"] .support-project-card .meta-row,
html[data-theme="dark"] .project-list-card .content-card-body,
html[data-theme="dark"] .project-list-card .card-eyebrow,
html[data-theme="dark"] .project-list-card .tag,
html[data-theme="dark"] .project-list-card .meta-row,
html[data-theme="dark"] .project-intro-feature-card .tag,
html[data-theme="dark"] .project-intro-feature-metric,
html[data-theme="dark"] .project-intro-remaining {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .support-project-card .card-eyebrow,
html[data-theme="dark"] .project-list-card .card-eyebrow,
html[data-theme="dark"] .project-list-card .tag,
html[data-theme="dark"] .project-intro-feature-card .tag,
html[data-theme="dark"] .project-intro-feature-metric strong {
  color: var(--foreground);
}

html[data-theme="dark"] .support-project-card .meta-row,
html[data-theme="dark"] .project-list-card .meta-row,
html[data-theme="dark"] .project-intro-feature-metric span,
html[data-theme="dark"] .project-intro-remaining {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .support-project-card .eyebrow-icon,
html[data-theme="dark"] .support-project-card .meta-row-icon,
html[data-theme="dark"] .project-list-card .eyebrow-icon,
html[data-theme="dark"] .project-list-card .tag-icon,
html[data-theme="dark"] .project-list-card .meta-row-icon,
html[data-theme="dark"] .project-intro-feature-card .tag-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .project-intro-remaining,
html[data-theme="dark"] .project-pet-selection-count {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.2) 0%, rgba(255, 200, 0, 0.1) 100%);
  border-color: rgba(255, 200, 0, 0.32);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 244, 194, 0.07);
}

html[data-theme="dark"] .project-intro-feature-metric,
html[data-theme="dark"] .project-pet-card,
html[data-theme="dark"] .project-pet-pill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.045) 100%);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .project-pet-card.is-selected,
html[data-theme="dark"] .project-pet-pill.is-selected {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.24) 0%, rgba(255, 200, 0, 0.11) 54%, rgba(86, 207, 174, 0.1) 100%);
  border-color: rgba(255, 200, 0, 0.44);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    0 0 0 3px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .project-intro-feature-media {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(16, 22, 19, 0.96) 0%, rgba(9, 13, 11, 0.98) 100%);
}

html[data-theme="dark"] .project-intro-feature-art {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 30%),
    rgba(8, 12, 10, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .shorts-episode-card .content-card-body,
html[data-theme="dark"] .shorts-episode-card .card-eyebrow,
html[data-theme="dark"] .shorts-episode-card .tag,
html[data-theme="dark"] .shorts-episode-card .meta-row,
html[data-theme="dark"] .shorts-season-nav,
html[data-theme="dark"] .shorts-season-nav-link,
html[data-theme="dark"] .shorts-season-disclosure,
html[data-theme="dark"] .shorts-season-summary-toggle .tag,
html[data-theme="dark"] .shorts-linked-card .content-card-body,
html[data-theme="dark"] .shorts-linked-card .card-eyebrow,
html[data-theme="dark"] .shorts-linked-card .tag,
html[data-theme="dark"] .shorts-linked-card .meta-row,
html[data-theme="dark"] .shorts-episode-cat-pill,
html[data-theme="dark"] .shorts-episode-cat-more,
html[data-theme="dark"] .shorts-cat-mini-item,
html[data-theme="dark"] .shorts-cat-mini-more {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .shorts-season-nav {
  background: rgba(10, 15, 13, 0.88);
  border-color: var(--border-soft);
  backdrop-filter: blur(16px);
}

html[data-theme="dark"] .shorts-season-nav-link,
html[data-theme="dark"] .shorts-season-disclosure {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 28%),
    rgba(255, 255, 255, 0.055);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .shorts-season-nav-link:hover,
html[data-theme="dark"] .shorts-season-nav-link:focus-visible,
html[data-theme="dark"] .shorts-season-summary-toggle:hover {
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .shorts-season-disclosure[open] .shorts-season-summary-toggle {
  border-bottom-color: var(--border-soft);
}

html[data-theme="dark"] .shorts-season-toggle-indicator {
  border-color: rgba(255, 200, 0, 0.18);
  background: rgba(255, 200, 0, 0.1);
  color: var(--brand-soft);
}

html[data-theme="dark"] .shorts-cat-mini-rail {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.055), transparent 34%),
    rgba(12, 17, 15, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .cat-detail-mini-card,
html[data-theme="dark"] .shorts-mini-card {
  background: rgba(255, 255, 255, 0.055);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .shorts-cat-mini-head span {
  background: transparent;
  color: var(--muted-foreground);
}

html[data-theme="dark"] .shorts-hero-metric {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .shorts-hero-metric span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .shorts-hero-metric strong {
  color: var(--foreground);
}

html[data-theme="dark"] .shorts-episode-cats {
  border-top-color: var(--border-soft);
}

html[data-theme="dark"] .shorts-episode-card .eyebrow-icon,
html[data-theme="dark"] .shorts-episode-card .tag-icon,
html[data-theme="dark"] .shorts-episode-card .meta-row-icon,
html[data-theme="dark"] .shorts-linked-card .eyebrow-icon,
html[data-theme="dark"] .shorts-linked-card .tag-icon,
html[data-theme="dark"] .shorts-linked-card .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-discovery-count,
html[data-theme="dark"] .cats-results-status {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

html[data-theme="dark"] .cats-search-shell {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

html[data-theme="dark"] .cats-search-shell input {
  background: transparent;
  border: 0;
  box-shadow: none;
}

html[data-theme="dark"] .cats-sticky-toolbar {
  background: rgba(10, 15, 13, 0.9);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .cats-sticky-search {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .cats-sticky-search:focus-within {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.1);
}

html[data-theme="dark"] .cats-sticky-search input {
  color: var(--foreground);
}

html[data-theme="dark"] .cats-quick-tab {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-quick-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .cats-quick-tab span:last-child {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="all"] {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="adoptable"] {
  background: rgba(255, 200, 0, 0.18);
  border-color: rgba(255, 200, 0, 0.46);
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="foster"] {
  background: rgba(120, 183, 255, 0.15);
  border-color: rgba(120, 183, 255, 0.36);
  color: #b9dcff;
}

html[data-theme="dark"] .cats-quick-tab.is-active[data-filter="support"] {
  background: rgba(86, 207, 174, 0.15);
  border-color: rgba(86, 207, 174, 0.36);
  color: #a6f3da;
}

html[data-theme="dark"] .cats-search-shell:focus-within {
  background: rgba(8, 12, 10, 0.34);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.1);
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-mobile-toggle {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .cats-filter-row,
html[data-theme="dark"] .cats-filter-list {
  background: transparent;
}

html[data-theme="dark"] .cats-filter-chip,
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="all"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="adoptable"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="foster"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="support"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="medical"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="kittens"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="pairs"] {
  background: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="all"] {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="adoptable"] {
  border-color: rgba(255, 200, 0, 0.42);
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="foster"] {
  border-color: rgba(120, 183, 255, 0.34);
  color: #b9dcff;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="support"] {
  border-color: rgba(86, 207, 174, 0.34);
  color: #a6f3da;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="medical"],
html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="kittens"] {
  border-color: rgba(255, 160, 134, 0.34);
  color: #ffc1ad;
}

html[data-theme="dark"] .cats-filter-chip.is-active[data-filter="pairs"] {
  border-color: rgba(169, 150, 255, 0.34);
  color: #cec4ff;
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active):disabled {
  color: rgba(247, 245, 234, 0.56);
  border-color: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active) .cats-filter-chip-count {
  background: transparent;
  color: var(--foreground);
}

html[data-theme="dark"] .cats-filter-chip:not(.is-active):disabled .cats-filter-chip-count {
  color: rgba(247, 245, 234, 0.58);
}

html[data-theme="dark"] .cats-filter-chip-count,
html[data-theme="dark"] .cats-filter-chip.is-active .cats-filter-chip-count {
  background: transparent;
  color: inherit;
}

html[data-theme="dark"] .cats-directory-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 34%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
}

html[data-theme="dark"] .cats-directory-body {
  background:
    linear-gradient(180deg, rgba(16, 22, 19, 0.96) 0%, rgba(9, 13, 11, 0.98) 100%);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-directory-status {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

html[data-theme="dark"] .cats-directory-status-line {
  background: transparent;
  border: 0;
  color: var(--foreground);
}

html[data-theme="dark"] .cats-directory-card .tag {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--foreground);
}

html[data-theme="dark"] .cats-directory-card .tag-icon,
html[data-theme="dark"] .cats-status-icon,
html[data-theme="dark"] .cats-need-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-directory-need {
  margin-top: auto;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

html[data-theme="dark"] .cats-directory-need-line {
  background: transparent;
  border: 0;
  color: var(--brand-soft);
}

html[data-theme="dark"] .cats-recent-strip {
  background:
    radial-gradient(circle at top left, rgba(255, 200, 0, 0.08), transparent 30%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .cats-recent-item {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .cats-recent-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 200, 0, 0.32);
}

html[data-theme="dark"] .cats-recent-photo {
  background: rgba(7, 10, 9, 0.9);
}

html[data-theme="dark"] .cats-recent-text strong,
html[data-theme="dark"] .cats-recent-copy strong {
  color: var(--foreground);
}

html[data-theme="dark"] .cats-recent-text small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .recent-media-rail {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 32%),
    rgba(12, 17, 15, 0.98);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .recent-media-thumb {
  background:
    linear-gradient(135deg, rgba(255, 200, 0, 0.1), rgba(86, 207, 174, 0.1)),
    rgba(7, 10, 9, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .recent-media-placeholder {
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 200, 0, 0.18), transparent 24%),
    radial-gradient(circle at 72% 70%, rgba(86, 207, 174, 0.14), transparent 26%),
    rgba(7, 10, 9, 0.9);
}

html[data-theme="dark"] .recent-media-copy strong,
html[data-theme="dark"] .recent-media-text strong {
  color: var(--foreground);
}

html[data-theme="dark"] .recent-media-text small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .cats-directory-need p {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .cats-directory-action-hint {
  background: rgba(255, 200, 0, 0.14);
  color: var(--brand-soft);
}

html[data-theme="dark"] .loading-page {
  background: transparent;
}

html[data-theme="dark"] .loading-hero,
html[data-theme="dark"] .loading-status-card,
html[data-theme="dark"] .loading-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .loading-card-body {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-my-room-card {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 32%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-my-room-card:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
    rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-viewer-pill {
  background: rgba(86, 207, 174, 0.12);
  border-color: rgba(86, 207, 174, 0.24);
  color: #a6f3da;
}

html[data-theme="dark"] .help-viewer-pill.is-compact {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-helper-fieldset {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.04), transparent 30%),
    rgba(8, 12, 10, 0.52);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-helper-category-option,
html[data-theme="dark"] .help-helper-toggle-grid .checkbox-row {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-helper-category-option:has(input:checked),
html[data-theme="dark"] .help-helper-toggle-grid .checkbox-row:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.11), transparent 34%),
    rgba(255, 200, 0, 0.09);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-helper-category-option input,
html[data-theme="dark"] .help-helper-toggle-grid .checkbox-row input {
  accent-color: var(--brand);
}

html[data-theme="dark"] .help-board-tools {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.62);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-channel-tabs {
  background: rgba(8, 12, 10, 0.46);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-channel-tabs a,
html[data-theme="dark"] .help-status-filters a {
  background: rgba(8, 12, 10, 0.72);
  border: 1px solid var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-channel-tabs a:hover,
html[data-theme="dark"] .help-channel-tabs a.is-active,
html[data-theme="dark"] .help-status-filters a:hover,
html[data-theme="dark"] .help-status-filters a.is-active {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.16), transparent 34%),
    rgba(255, 200, 0, 0.12);
  border-color: rgba(255, 200, 0, 0.38);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-board-tools .button-secondary,
html[data-theme="dark"] .help-board-tools .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-board-tools .button-secondary:hover,
html[data-theme="dark"] .help-board-tools .button-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-channel-topbar .button-secondary {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-channel-topbar .button-secondary:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-room-wizard-progress {
  border-color: var(--border-soft);
  background:
    linear-gradient(
      90deg,
      rgba(255, 200, 0, 0.72) var(--wizard-progress),
      rgba(255, 255, 255, 0.12) var(--wizard-progress)
    ) center 28px / calc(100% - 54px) 3px no-repeat;
}

html[data-theme="dark"] .help-room-wizard-progress span {
  border-color: #0f1412;
  background: rgba(255, 255, 255, 0.14);
  color: var(--foreground);
  box-shadow: 0 0 0 1px var(--border-soft);
}

html[data-theme="dark"] .help-room-wizard-progress button.is-current span {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.16);
}

html[data-theme="dark"] .help-room-wizard-progress button.is-complete span {
  background: var(--accent-care);
  color: #06140f;
}

html[data-theme="dark"] .help-room-wizard-progress button:disabled:not(.is-current) span {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-room-topbar > span {
  background: rgba(8, 12, 10, 0.72);
  border: 1px solid var(--border-soft);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-room-topbar > .help-room-draft-status {
  background: rgba(86, 207, 174, 0.12);
  border-color: rgba(86, 207, 174, 0.2);
  color: #9cf0d4;
}

html[data-theme="dark"] .help-room-back-link {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-room-back-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .help-room-form-section,
html[data-theme="dark"] .help-room-form-section.is-private-note {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .help-room-step-heading > span {
  border: 1px solid rgba(255, 200, 0, 0.24);
  background: rgba(255, 200, 0, 0.14);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-room-card-field legend {
  color: var(--foreground);
}

html[data-theme="dark"] .help-room-type-card,
html[data-theme="dark"] .help-room-urgency-card,
html[data-theme="dark"] .help-visibility-options label {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-room-type-card:has(input:checked),
html[data-theme="dark"] .help-room-urgency-card:has(input:checked),
html[data-theme="dark"] .help-visibility-options label:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-room-urgency-card.is-urgent:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 122, 102, 0.14), transparent 34%),
    rgba(255, 122, 102, 0.1);
  border-color: rgba(255, 122, 102, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 122, 102, 0.06);
}

html[data-theme="dark"] .help-room-type-card small,
html[data-theme="dark"] .help-room-urgency-card small,
html[data-theme="dark"] .help-visibility-options small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-area-option-grid {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.58);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-area-option {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-area-option:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-area-option small,
html[data-theme="dark"] .help-area-empty {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-pet-combobox-control button {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-pet-option-list {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.58);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-pet-option {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-pet-option:hover,
html[data-theme="dark"] button.help-cat-choice:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-pet-selected-note,
html[data-theme="dark"] .help-pet-option small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-selected-cat-chip {
  background: rgba(255, 200, 0, 0.13);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-selected-cat-chip button {
  background: rgba(255, 255, 255, 0.1);
  color: var(--foreground);
}

html[data-theme="dark"] .help-cat-choice-field legend {
  color: var(--foreground);
}

html[data-theme="dark"] .help-cat-choice-grid {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.58);
  border-color: var(--border-soft);
}

html[data-theme="dark"] .help-cat-choice {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-cat-choice:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.38);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.06);
}

html[data-theme="dark"] .help-cat-choice small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-cat-choice input {
  accent-color: var(--brand);
}

html[data-theme="dark"] .help-room-submit-row .button-secondary,
html[data-theme="dark"] .help-room-submit-row .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-room-submit-row .button-secondary:hover,
html[data-theme="dark"] .help-room-submit-row .button-ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 200, 0, 0.34);
}

html[data-theme="dark"] .help-room-submit-row .button-primary {
  border-color: rgba(255, 200, 0, 0.7);
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 10px 24px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .help-room-submit-row .button-primary:hover {
  filter: brightness(1.04);
}

html[data-theme="dark"] .ai-copilot-card,
html[data-theme="dark"] .ai-copilot-card-inline {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.08), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.09), transparent 32%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .ai-copilot-heading > span {
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.16), transparent 28%),
    rgba(255, 200, 0, 0.16);
  color: var(--brand-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.16);
}

html[data-theme="dark"] .ai-copilot-heading .eyebrow {
  color: var(--brand-soft);
}

html[data-theme="dark"] .ai-copilot-feature-row span,
html[data-theme="dark"] .ai-copilot-chip-row span {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .ai-copilot-result,
html[data-theme="dark"] .ai-summary-result {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-copilot-result-grid div,
html[data-theme="dark"] .ai-summary-result div {
  background: rgba(15, 20, 18, 0.88);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-summary-result span {
  color: var(--brand-soft);
}

html[data-theme="dark"] .ai-summary-result p,
html[data-theme="dark"] .ai-summary-result ul {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .ai-copilot-result.is-applied {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(86, 207, 174, 0.08);
  border-color: rgba(86, 207, 174, 0.32);
  box-shadow: none;
}

html[data-theme="dark"] .ai-copilot-suggested-copy,
html[data-theme="dark"] .ai-copilot-details {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-copilot-details summary strong {
  background: rgba(8, 12, 10, 0.86);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-copilot-warning-list span {
  background: rgba(255, 200, 0, 0.12);
  color: var(--brand-soft);
}

html[data-theme="dark"] .ai-copilot-warning-list .is-high {
  background: rgba(255, 122, 102, 0.13);
  color: #ffb6aa;
}

html[data-theme="dark"] .ai-copilot-applied-note {
  background: rgba(86, 207, 174, 0.12);
  color: #a8f1dc !important;
}

html[data-theme="dark"] .help-network-stats div {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 32%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-network-stats strong {
  color: var(--foreground);
}

html[data-theme="dark"] .help-network-stats span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .donation-copilot-card {
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.08), transparent 30%),
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.1), transparent 34%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .donation-copilot-result,
html[data-theme="dark"] .donation-copilot-choice,
html[data-theme="dark"] .donation-copilot-amount,
html[data-theme="dark"] .donation-copilot-options summary,
html[data-theme="dark"] .donation-copilot-options-panel,
html[data-theme="dark"] .donation-route-card,
html[data-theme="dark"] .donation-copilot-context-grid a,
html[data-theme="dark"] .donation-copilot-options-panel input {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .donation-copilot-choice.is-selected,
html[data-theme="dark"] .donation-copilot-amount.is-selected,
html[data-theme="dark"] .donation-route-card.is-monthly {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.12), transparent 36%),
    rgba(19, 24, 20, 0.94);
  border-color: rgba(255, 200, 0, 0.4);
  box-shadow: none;
}

html[data-theme="dark"] .donation-copilot-choice-icon {
  background: rgba(86, 207, 174, 0.12);
  color: #a8f1dc;
}

html[data-theme="dark"] .donation-copilot-choice.is-selected .donation-copilot-choice-icon {
  background: var(--brand);
  color: var(--brand-ink);
}

html[data-theme="dark"] .donation-route-card:hover,
html[data-theme="dark"] .donation-copilot-context-grid a:hover {
  background: rgba(17, 24, 20, 0.96);
  border-color: rgba(255, 200, 0, 0.46);
}

html[data-theme="dark"] .donation-copilot-result-head span,
html[data-theme="dark"] .donation-copilot-context-grid > section > span,
html[data-theme="dark"] .donation-route-card span {
  color: var(--brand-soft);
}

html[data-theme="dark"] .donation-copilot-top p,
html[data-theme="dark"] .donation-copilot-choice small,
html[data-theme="dark"] .donation-copilot-result-head p,
html[data-theme="dark"] .donation-route-card p,
html[data-theme="dark"] .donation-copilot-context-grid p,
html[data-theme="dark"] .donation-route-card small,
html[data-theme="dark"] .donation-copilot-context-grid small,
html[data-theme="dark"] .donation-copilot-options summary,
html[data-theme="dark"] .donation-copilot-note {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .donation-copilot-note {
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .help-detail-main.is-urgent,
html[data-theme="dark"] .help-detail-action-card.is-room-owner,
html[data-theme="dark"] .help-detail-action-card.is-direct-help {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .help-detail-nav {
  background: rgba(15, 20, 18, 0.9);
  border-color: var(--border);
  box-shadow: none;
}

html[data-theme="dark"] .help-detail-nav .button-ghost,
html[data-theme="dark"] .help-detail-nav .button-secondary {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-detail-nav .button-ghost:hover,
html[data-theme="dark"] .help-detail-nav .button-secondary:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-progress-rail li,
html[data-theme="dark"] .help-detail-meta-grid > span,
html[data-theme="dark"] .help-detail-safety-card,
html[data-theme="dark"] .help-detail-context-card,
html[data-theme="dark"] .help-detail-cat-card {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-progress-rail li.is-complete {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.13), transparent 34%),
    rgba(86, 207, 174, 0.08);
  border-color: rgba(86, 207, 174, 0.32);
  color: #a8f1dc;
}

html[data-theme="dark"] .help-progress-rail li.is-next {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.09);
  border-color: rgba(255, 200, 0, 0.36);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-progress-rail li span {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}

html[data-theme="dark"] .help-progress-rail li.is-complete span {
  border-color: rgba(86, 207, 174, 0.64);
  background:
    linear-gradient(135deg, transparent 45%, #06140f 45% 55%, transparent 55%),
    var(--accent-care);
}

html[data-theme="dark"] .help-progress-rail li.is-next span {
  border-color: rgba(255, 200, 0, 0.64);
  background: rgba(255, 200, 0, 0.22);
}

html[data-theme="dark"] .help-detail-cat-image {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .help-detail-cat-card small {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-detail-timeline li:not(:last-child)::before {
  background: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .ai-room-summary-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 200, 0, 0.08), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.1), transparent 32%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
}

html[data-theme="dark"] .ai-room-summary-card .button-secondary,
html[data-theme="dark"] .ai-room-summary-card .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .ai-room-summary-card .button-secondary:hover,
html[data-theme="dark"] .ai-room-summary-card .button-ghost:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-comment-thread,
html[data-theme="dark"] .help-comment-thread.is-room {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 30%),
    rgba(15, 20, 18, 0.98);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-comment-thread-summary {
  background: transparent;
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-thread-summary small,
html[data-theme="dark"] .help-live-footnote,
html[data-theme="dark"] .help-comment-empty {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-thread-live-tools button,
html[data-theme="dark"] .help-thread-open-label {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-thread[open] .help-thread-open-label {
  background: rgba(255, 200, 0, 0.16);
  border: 1px solid rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-live-sync {
  background: rgba(86, 207, 174, 0.13);
  color: #a8f1dc;
}

html[data-theme="dark"] .help-live-sync.is-syncing {
  background: rgba(255, 200, 0, 0.14);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-live-sync.is-paused {
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-live-sync.is-error {
  background: rgba(255, 122, 102, 0.13);
  color: #ffb6aa;
}

html[data-theme="dark"] .help-comment-bubble,
html[data-theme="dark"] .help-comment-form,
html[data-theme="dark"] .help-comment-edit-form {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-meta {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .help-comment-meta span,
html[data-theme="dark"] .help-comment-meta em {
  background: rgba(255, 200, 0, 0.13);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-comment-actions .button-ghost {
  background: rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-comment-actions .button-ghost:hover {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.13), transparent 34%),
    rgba(255, 200, 0, 0.1);
  border-color: rgba(255, 200, 0, 0.34);
  color: var(--brand-soft);
}

html[data-theme="dark"] .help-owner-actions,
html[data-theme="dark"] .help-offer-locked,
html[data-theme="dark"] .help-offer-closed {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.055), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--foreground);
}

html[data-theme="dark"] .help-owner-action-button,
html[data-theme="dark"] .help-owner-action-button.is-close {
  background: rgba(15, 20, 18, 0.88);
  border-color: var(--border-soft);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .help-owner-action-button:hover:not(:disabled) {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.12), transparent 34%),
    rgba(86, 207, 174, 0.08);
  border-color: rgba(86, 207, 174, 0.32);
  box-shadow: none;
}

html[data-theme="dark"] .help-owner-action-button.is-close:hover:not(:disabled) {
  background:
    radial-gradient(circle at top right, rgba(255, 122, 102, 0.12), transparent 34%),
    rgba(255, 122, 102, 0.08);
  border-color: rgba(255, 122, 102, 0.32);
}

html[data-theme="dark"] .help-owner-actions-head span,
html[data-theme="dark"] .help-owner-action-button span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .paypal-card .chip-button {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.035), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .paypal-card .chip-button strong {
  color: var(--foreground);
}

html[data-theme="dark"] .paypal-card .chip-button span {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .paypal-card .chip-button.is-selected {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 200, 0, 0.11);
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .paypal-card .chip-button.is-selected strong,
html[data-theme="dark"] .paypal-card .chip-button.is-selected span {
  color: var(--brand-soft);
}

html[data-theme="dark"] .support-donation-paypal .chip-button {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

html[data-theme="dark"] .support-donation-paypal .chip-button:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.09);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected {
  border-color: var(--brand);
  background: var(--brand);
}

html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected strong,
html[data-theme="dark"] .support-donation-paypal .chip-button.is-selected span {
  color: #111111;
}

html[data-theme="dark"] .inline-note,
html[data-theme="dark"] .info-note {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  color: var(--muted-foreground);
  box-shadow: none;
}

html[data-theme="dark"] .story-series-route-card,
html[data-theme="dark"] .story-series-route-card.is-latest,
html[data-theme="dark"] .story-series-episode-card,
html[data-theme="dark"] .story-series-episode-card.is-latest,
html[data-theme="dark"] .story-series-library .inline-note,
html[data-theme="dark"] .story-series-more summary {
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.045), transparent 30%),
    rgba(8, 12, 10, 0.72);
  border-color: var(--border-soft);
  box-shadow: none;
}

html[data-theme="dark"] .story-series-route-card.is-latest,
html[data-theme="dark"] .story-series-episode-card.is-latest,
html[data-theme="dark"] .story-series-episode-badge {
  border-color: rgba(255, 200, 0, 0.3);
  background:
    radial-gradient(circle at top right, rgba(255, 200, 0, 0.08), transparent 32%),
    rgba(255, 200, 0, 0.1);
}

html[data-theme="dark"] .story-series-episode-media {
  background: rgba(8, 12, 10, 0.9);
}

html[data-theme="dark"] .story-series-route-label,
html[data-theme="dark"] .story-series-episode-kicker,
html[data-theme="dark"] .story-series-episode-badge {
  color: var(--brand-soft);
}

html[data-theme="dark"] .story-series-library .inline-note p,
html[data-theme="dark"] .story-series-route-card p,
html[data-theme="dark"] .story-series-episode-meta {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .story-record-card .content-card-body,
html[data-theme="dark"] .story-record-card .card-eyebrow,
html[data-theme="dark"] .story-record-card .tag,
html[data-theme="dark"] .story-record-card .meta-row,
html[data-theme="dark"] #stories-live-context .content-card-body,
html[data-theme="dark"] #stories-live-context .card-eyebrow,
html[data-theme="dark"] #stories-live-context .tag,
html[data-theme="dark"] #stories-live-context .meta-row,
html[data-theme="dark"] .instagram-record-preview .content-card-body,
html[data-theme="dark"] .instagram-record-preview .card-eyebrow,
html[data-theme="dark"] .instagram-record-preview .tag,
html[data-theme="dark"] .instagram-record-preview .meta-row {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .story-record-card .card-eyebrow,
html[data-theme="dark"] .story-record-card .tag,
html[data-theme="dark"] #stories-live-context .card-eyebrow,
html[data-theme="dark"] #stories-live-context .tag,
html[data-theme="dark"] .instagram-record-preview .card-eyebrow,
html[data-theme="dark"] .instagram-record-preview .tag {
  color: var(--foreground);
}

html[data-theme="dark"] .story-record-card .meta-row,
html[data-theme="dark"] #stories-live-context .meta-row,
html[data-theme="dark"] .instagram-record-preview .meta-row {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .story-record-card .eyebrow-icon,
html[data-theme="dark"] .story-record-card .tag-icon,
html[data-theme="dark"] .story-record-card .meta-row-icon,
html[data-theme="dark"] #stories-live-context .eyebrow-icon,
html[data-theme="dark"] #stories-live-context .tag-icon,
html[data-theme="dark"] #stories-live-context .meta-row-icon,
html[data-theme="dark"] .instagram-record-preview .eyebrow-icon,
html[data-theme="dark"] .instagram-record-preview .tag-icon,
html[data-theme="dark"] .instagram-record-preview .meta-row-icon {
  color: var(--brand-soft);
}

html[data-theme="dark"] .instagram-record-visual {
  border-bottom-color: var(--border-soft);
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 200, 0, 0.12), transparent 20%),
    linear-gradient(135deg, rgba(17, 23, 20, 0.98) 0%, rgba(9, 13, 11, 0.98) 52%, rgba(15, 31, 25, 0.98) 100%);
}

html[data-theme="dark"] .instagram-record-phone,
html[data-theme="dark"] .instagram-record-floating-badge,
html[data-theme="dark"] .instagram-record-title-chip {
  background: rgba(8, 12, 10, 0.72);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .instagram-record-floating-badge svg {
  color: var(--brand-soft);
}

html[data-theme="dark"] :where(
  .loading-thumb,
  .loading-pill,
  .loading-line,
  .loading-dot,
  .loading-chip
) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.065) 100%);
}

html[data-theme="dark"] .loading-thumb {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 200, 0, 0.12), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.105) 0%, rgba(255, 255, 255, 0.05) 100%);
}

html[data-theme="dark"] :where(
  .loading-shimmer::after,
  .loading-line::after,
  .loading-dot::after,
  .loading-pill::after,
  .loading-chip::after,
  .loading-thumb::after
) {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 200, 0, 0.14) 42%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(86, 207, 174, 0.1) 58%,
    transparent 100%
  );
}

@media (max-width: 860px) {
  .report-source-grid,
  .monthly-report-metrics {
    grid-template-columns: 1fr;
  }

  .monthly-report-trend-chart {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-share-row,
  .report-share-create-form {
    display: grid;
    justify-content: stretch;
  }

  .monthly-report-header {
    display: grid;
  }

  .monthly-report-proof-grid {
    grid-template-columns: 1fr;
  }

  .monthly-report-funnel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-report-short-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monthly-report-funnel-stage i {
    display: none;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm 11mm;
  }

  html,
  body {
    width: auto !important;
    background: #ffffff !important;
  }

  body * {
    visibility: hidden;
  }

  #monthly-report-print,
  #monthly-report-print * {
    visibility: visible;
  }

  #monthly-report-print {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #ffffff !important;
  }

  .monthly-report-document {
    color: #111827;
    gap: 12px;
    font-size: 9.4pt;
    line-height: 1.45;
  }

  .monthly-report-header {
    gap: 14px;
    padding-bottom: 10px;
    border-bottom-width: 3px;
    break-inside: avoid;
  }

  .monthly-report-header h2 {
    font-size: 26pt;
  }

  .monthly-report-linkline {
    gap: 0 3px;
    font-size: 8.2pt;
  }

  .monthly-report-mark {
    width: 58px;
    min-width: 58px;
    height: 50px;
    padding: 8px;
    border-radius: 10px;
  }

  .monthly-report-section {
    gap: 5px;
  }

  .monthly-report-section h3 {
    font-size: 12.5pt;
  }

  .monthly-report-section p,
  .monthly-report-section li {
    line-height: 1.42;
  }

  .monthly-report-section ul {
    gap: 3px;
    padding-left: 16px;
  }

  .monthly-report-metrics {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    break-inside: avoid;
  }

  .monthly-report-metrics div {
    padding: 9px 8px;
    border-radius: 9px;
  }

  .monthly-report-metrics span {
    font-size: 6.8pt;
  }

  .monthly-report-metrics strong {
    font-size: 13.5pt;
  }

  .monthly-report-split-head p {
    font-size: 7.6pt;
    line-height: 1.35;
  }

  .monthly-report-impact-snapshot,
  .monthly-report-proof-section {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-impact-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .monthly-report-impact-grid div {
    padding: 7px;
    border-radius: 8px;
  }

  .monthly-report-impact-grid span,
  .monthly-report-proof-card span {
    font-size: 5.9pt;
  }

  .monthly-report-impact-grid strong {
    font-size: 10.4pt;
  }

  .monthly-report-impact-grid small {
    font-size: 6.2pt;
    line-height: 1.25;
  }

  .monthly-report-cat-wall {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-cat-wall-head {
    gap: 8px;
  }

  .monthly-report-cat-wall-head p {
    font-size: 7.6pt;
    line-height: 1.35;
  }

  .monthly-report-cat-wall-head strong {
    min-height: 22px;
    padding-inline: 7px;
    font-size: 7pt;
  }

  .monthly-report-cat-badges {
    gap: 4px;
  }

  .monthly-report-cat-badge {
    max-width: 124px;
    min-height: 24px;
    gap: 4px;
    padding: 2px 6px 2px 2px;
    font-size: 6.7pt;
  }

  .monthly-report-cat-badge img {
    width: 20px;
    height: 20px;
    border-width: 1px;
  }

  .monthly-report-proof-grid {
    gap: 6px;
  }

  .monthly-report-proof-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px;
    padding: 7px;
    border-radius: 8px;
  }

  .monthly-report-proof-card > img {
    width: 38px;
    height: 38px;
    border-radius: 9px;
  }

  .monthly-report-proof-card div {
    gap: 3px;
  }

  .monthly-report-proof-card h4 {
    font-size: 8.8pt;
  }

  .monthly-report-proof-card p {
    font-size: 6.7pt;
    line-height: 1.25;
    -webkit-line-clamp: 1;
  }

  .monthly-report-funnel-section {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-funnel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .monthly-report-funnel-stage {
    gap: 3px;
    min-height: 112px;
    padding: 7px 6px;
    border-radius: 8px;
  }

  .monthly-report-funnel-stage-top {
    gap: 3px;
  }

  .monthly-report-funnel-stage span {
    min-height: 15px;
    padding: 2px 4px;
    font-size: 4.9pt;
  }

  .monthly-report-funnel-stage em {
    font-size: 4.8pt;
  }

  .monthly-report-funnel-stage strong {
    font-size: 10pt;
  }

  .monthly-report-funnel-stage small {
    font-size: 5.8pt;
    line-height: 1.2;
  }

  .monthly-report-funnel-stage p {
    font-size: 5.5pt;
    line-height: 1.18;
  }

  .monthly-report-shorts-appendix {
    gap: 7px;
    padding: 9px;
    border-radius: 9px;
  }

  .monthly-report-short-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .monthly-report-short-card {
    gap: 3px;
    padding: 5px;
    border-radius: 8px;
  }

  .monthly-report-short-card img {
    border-radius: 6px;
  }

  .monthly-report-short-card span,
  .monthly-report-short-card small {
    font-size: 5.5pt;
  }

  .monthly-report-short-card strong {
    font-size: 6.7pt;
    line-height: 1.18;
  }

  .monthly-report-funnel-stage i {
    right: -7px;
    width: 6px;
    height: 1px;
  }

  .monthly-report-funnel-stage i::after {
    width: 3px;
    height: 3px;
    border-width: 1px;
  }

  .monthly-report-trend-chart {
    min-height: 122px;
    padding: 10px 8px 8px;
    gap: 8px;
    break-inside: avoid;
  }

  .monthly-report-trend-bar-shell {
    min-height: 78px;
  }

  .monthly-report-trend-value,
  .monthly-report-trend-label {
    font-size: 6.8pt;
  }

  .monthly-report-audience-line-card {
    padding: 9px;
    break-inside: avoid;
  }

  .monthly-report-audience-line-chart {
    min-height: 126px;
  }

  .monthly-report-audience-axis-value,
  .monthly-report-audience-axis-label,
  .monthly-report-audience-point-label {
    font-size: 7px;
  }

  .monthly-report-audience-line {
    stroke-width: 3;
  }

  .monthly-report-table-wrap {
    overflow: visible;
  }

  .monthly-report-trend-table {
    min-width: 0;
    font-size: 0.72rem;
  }

  .monthly-report-trend-table th,
  .monthly-report-trend-table td {
    padding: 5px 6px;
  }

  .monthly-report-section,
  .monthly-report-audience-line-card,
  .monthly-report-trend-chart,
  .monthly-report-table-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .monthly-report-note {
    font-size: 7.8pt;
  }

  .monthly-report-linkline a {
    color: inherit;
    text-decoration: none;
  }
}

.missing-pet-page-band {
  background:
    #f6f8fb;
}

.site-main > .missing-pet-page-band:first-child {
  margin-top: calc(var(--site-main-top) * -1);
  padding-top: calc(var(--site-main-top) + 34px);
}

@media (min-width: 1024px) {
  .site-main > .missing-pet-page-band:first-child {
    margin-top: calc(var(--site-main-top) * -1);
    padding-top: calc(var(--site-main-top) + 42px);
  }
}

@media (max-width: 719px) {
  .site-main > .missing-pet-page-band:first-child {
    margin-top: calc(var(--site-main-top) * -1);
    padding-top: calc(var(--site-main-top) + 20px);
  }
}

@media (max-width: 389px) {
  .site-main > .missing-pet-page-band:first-child {
    margin-top: calc(var(--site-main-top) * -1);
    padding-top: calc(var(--site-main-top) + 16px);
  }
}

.missing-pet-create-page,
.cat-sitting-create-page {
  min-height: calc(100vh - 88px);
  padding-block: clamp(24px, 5vw, 56px);
  background:
    radial-gradient(circle at 16% 4%, rgba(255, 200, 0, 0.16), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(86, 207, 174, 0.14), transparent 30%),
    var(--surface);
}

.missing-pet-create-container,
.cat-sitting-create-container {
  display: grid;
  gap: 14px;
  justify-items: center;
}

.missing-pet-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: max(18px, calc(env(safe-area-inset-top) + 18px)) 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 252, 242, 0.96), rgba(255, 252, 242, 0.72) 42%, rgba(255, 252, 242, 0.46)),
    radial-gradient(circle at 16% 0%, rgba(255, 200, 0, 0.28), transparent 34%);
  backdrop-filter: blur(10px);
}

.missing-pet-submit-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  width: min(560px, 100%);
  padding: 18px;
  border: 1px solid rgba(255, 200, 0, 0.36);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.missing-pet-submit-spinner {
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 200, 0, 0.2);
  color: #7a540f;
}

.missing-pet-submit-spinner svg,
.missing-pet-form-actions button svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.missing-pet-submit-card strong {
  color: var(--foreground);
  font-size: 1.06rem;
  font-weight: 960;
}

.missing-pet-submit-card p {
  margin: 4px 0 0;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  font-weight: 730;
  line-height: 1.45;
}

.missing-pet-submit-card ol {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.missing-pet-submit-card li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted-foreground);
  font-size: 0.8rem;
  font-weight: 820;
}

.missing-pet-submit-card li span {
  display: grid;
  width: 22px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
}

.missing-pet-submit-card li.is-active {
  border-color: rgba(255, 200, 0, 0.4);
  background: rgba(255, 248, 224, 0.76);
  color: var(--foreground);
}

.missing-pet-submit-card li.is-active span {
  background: rgba(255, 200, 0, 0.2);
  color: #7a540f;
}

.missing-pet-submit-card li.is-active span svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.missing-pet-submit-card li.is-done {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #1f6f58;
}

.missing-pet-submit-card li.is-done span {
  background: rgba(86, 207, 174, 0.18);
  color: #1f6f58;
}

.missing-pet-owner-note-field textarea {
  min-height: 240px;
  line-height: 1.5;
}

.missing-pet-special-note-field textarea {
  min-height: 138px;
  line-height: 1.5;
}

.missing-pet-last-seen-field {
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 18px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.88));
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-last-seen-field input {
  min-height: 52px;
  font-size: 1rem;
  font-weight: 820;
}

.missing-pet-last-seen-field small {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-last-seen-field > span:first-child,
.missing-pet-special-note-field > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.missing-pet-owner-note-field small {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.45;
}

.missing-pet-special-note-field small,
.missing-pet-money-field small {
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 720;
  line-height: 1.45;
}

.missing-pet-money-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.missing-pet-money-input > span {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid rgba(17, 24, 39, 0.08);
  color: var(--muted-foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-money-input input {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.missing-pet-writing-help {
  display: grid;
  gap: 10px;
}

.missing-pet-guidance-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(255, 200, 0, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.17), transparent 34%),
    rgba(255, 255, 255, 0.72);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  cursor: pointer;
  text-align: left;
}

.missing-pet-guidance-toggle svg {
  color: #8a6110;
}

.missing-pet-guidance-toggle span {
  font-size: 0.9rem;
  font-weight: 920;
}

.missing-pet-guidance-toggle small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 820;
}

.missing-pet-guidance-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.missing-pet-guidance-panel > div {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.missing-pet-guidance-panel strong {
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 930;
}

.missing-pet-guidance-panel ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.missing-pet-guidance-panel li {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 720;
  line-height: 1.42;
}

.missing-pet-option-button {
  justify-items: start;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  text-align: left;
}

.missing-pet-option-button span {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 950;
}

.missing-pet-option-button small {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.35;
}

.missing-pet-optional-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 200, 0, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-optional-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
}

.missing-pet-optional-card-head .eyebrow {
  margin: 0 0 3px;
}

.missing-pet-optional-card-head strong {
  display: block;
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 960;
  letter-spacing: 0;
}

.missing-pet-optional-card-head > span {
  display: inline-flex;
  max-width: 220px;
  min-height: 32px;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  border-radius: 999px;
  background: rgba(86, 207, 174, 0.12);
  color: #2f6656;
  font-size: 0.74rem;
  font-weight: 900;
  line-height: 1.2;
}

.missing-pet-optional-card > .missing-pet-option-button {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.1), transparent 34%),
    rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.missing-pet-time-panel {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(86, 207, 174, 0.22);
  border-radius: 22px;
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.68);
}

.missing-pet-time-panel > p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 740;
  line-height: 1.4;
}

.missing-pet-time-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-time-shortcuts button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 920;
  cursor: pointer;
}

.missing-pet-time-shortcuts button.is-active {
  border-color: rgba(86, 207, 174, 0.5);
  background: rgba(86, 207, 174, 0.16);
  color: #1f6f58;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.12);
}

.missing-pet-time-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  gap: 10px;
}

.missing-pet-hero,
.missing-pet-detail-hero,
.missing-pet-manage-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-block: 28px 12px;
}

.missing-pet-hero h1,
.missing-pet-detail-copy h1,
.missing-pet-manage-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
}

.missing-pet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-tabs a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 14px;
  color: var(--text-muted);
  text-decoration: none;
  background: var(--surface-raised);
}

.missing-pet-tabs a.is-active {
  border-color: var(--text);
  color: var(--text);
  font-weight: 800;
}

.missing-pet-directory-tools {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: clamp(14px, 2vw, 18px);
  background: #ffffff;
  box-shadow:
    0 18px 44px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-directory-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.missing-pet-directory-head > div {
  display: grid;
  gap: 3px;
}

.missing-pet-directory-head strong {
  color: var(--text);
  font-size: 1.1rem;
}

.missing-pet-directory-head span {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 780;
  line-height: 1.35;
}

.missing-pet-directory-search {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.missing-pet-directory-search label {
  display: grid;
  gap: 7px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-directory-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  padding: 0 12px;
  background: #ffffff;
  color: var(--text);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.missing-pet-directory-count {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 820;
}

.missing-pet-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.missing-pet-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 220px));
  gap: 12px;
  justify-content: flex-start;
}

.missing-pet-card {
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-decoration: none;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.missing-pet-card:hover,
.missing-pet-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(249, 115, 22, 0.34);
  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.1),
    0 0 0 3px rgba(249, 115, 22, 0.08);
}

.missing-pet-card-image {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  padding: 6px;
  background: #f1f5f9;
}

.missing-pet-card-image.has-secondary {
  grid-template-columns: minmax(0, 1fr) minmax(54px, 0.42fr);
  gap: 5px;
}

.missing-pet-card-image img,
.missing-pet-detail-photo figure img,
.missing-pet-photo-strip img,
.missing-pet-sighting-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.missing-pet-card-image img {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  object-fit: cover;
}

.missing-pet-card-image .is-secondary {
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.62);
}

.missing-pet-card-image-empty {
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--text-muted);
}

.missing-pet-card-image .missing-pet-status {
  position: absolute;
  left: 9px;
  top: 9px;
  min-height: 22px;
  padding-inline: 8px;
  font-size: 0.68rem;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.missing-pet-card-photo-count {
  position: absolute;
  right: 9px;
  bottom: 9px;
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
}

.missing-pet-card-body {
  display: grid;
  gap: 7px;
  padding: 10px;
  background: #ffffff;
}

.missing-pet-card-title-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-card-title-row strong {
  min-width: 0;
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missing-pet-card-title-row > span {
  display: inline-flex;
  min-height: 22px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 999px;
  padding: 0 7px;
  background: #f1f5f9;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 900;
}

.missing-pet-card-meta,
.missing-pet-card-footer,
.missing-pet-card-footer span {
  display: flex;
  gap: 6px;
  align-items: center;
}

.missing-pet-card-meta {
  align-items: flex-start;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.missing-pet-card-meta > span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.missing-pet-card-meta svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #f97316;
}

.missing-pet-card-body small,
.missing-pet-card-body span:last-child,
.missing-pet-card-body em {
  color: var(--text-muted);
}

.missing-pet-card-body em {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.74rem;
  font-style: normal;
  line-height: 1.3;
}

.missing-pet-card-footer {
  justify-content: space-between;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 8px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 850;
}

.missing-pet-card-footer > span:last-child {
  color: var(--text);
}

.missing-pet-status {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  border: 1px solid rgba(153, 27, 27, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.78rem;
  font-weight: 900;
}

.missing-pet-status.is-found {
  background: #ecfdf5;
  color: #047857;
}

.missing-pet-status.is-sighting_reported {
  background: #eff6ff;
  color: #1d4ed8;
}

.missing-pet-form,
.missing-pet-sighting-form,
.missing-pet-owner-edit-form {
  display: grid;
  gap: 18px;
}

.missing-pet-bilingual-copy {
  display: inline-grid;
  gap: 2px;
  vertical-align: middle;
}

.button .missing-pet-bilingual-copy,
.missing-pet-sighting-methods .missing-pet-bilingual-copy,
.missing-pet-public-actions .missing-pet-bilingual-copy,
.missing-pet-responder-actions .missing-pet-bilingual-copy,
.missing-pet-download-details .missing-pet-bilingual-copy {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 4px;
  align-items: center;
}

.button .missing-pet-bilingual-copy span + span::before,
.missing-pet-sighting-methods .missing-pet-bilingual-copy span + span::before,
.missing-pet-public-actions .missing-pet-bilingual-copy span + span::before,
.missing-pet-responder-actions .missing-pet-bilingual-copy span + span::before,
.missing-pet-download-details .missing-pet-bilingual-copy span + span::before {
  content: "/";
  margin-right: 4px;
  opacity: 0.55;
}

.missing-pet-bilingual-copy [data-role="secondary"] {
  color: var(--text-muted);
  font-size: 0.88em;
  font-weight: 760;
}

.button-primary .missing-pet-bilingual-copy [data-role="secondary"] {
  color: rgba(255, 255, 255, 0.78);
}

.missing-pet-language-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.missing-pet-language-switch > span {
  padding-inline: 8px 4px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.missing-pet-language-switch a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.missing-pet-language-switch a:hover {
  color: var(--text-primary);
  background: rgba(248, 250, 252, 0.92);
}

.missing-pet-language-switch a.is-active {
  color: #ffffff;
  background: #111827;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.missing-pet-quick-form {
  max-width: 920px;
  margin-inline: auto;
}

.missing-pet-quick-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-raised);
}

.missing-pet-quick-intro h2 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  line-height: 1.02;
}

.missing-pet-quick-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.missing-pet-quick-points span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.missing-pet-quick-section {
  gap: 14px;
}

.missing-pet-photo-dropzone {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 148px;
  border: 1.5px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 18px;
  background: var(--surface);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.missing-pet-photo-dropzone.is-dragging {
  border-color: #0f766e;
  background: rgba(20, 184, 166, 0.08);
}

.missing-pet-photo-dropzone div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.missing-pet-photo-dropzone strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-photo-dropzone span,
.missing-pet-photo-note {
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.45;
}

.missing-pet-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.missing-pet-photo-note {
  margin: 0;
}

.missing-pet-photo-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-photo-selected span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  max-width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.missing-pet-form-section,
.missing-pet-login-panel,
.missing-pet-inline-entry,
.missing-pet-instructions,
.missing-pet-sighting-panel,
.missing-pet-manage-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--surface-raised);
}

.missing-pet-instructions {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: start;
}

.missing-pet-instructions > p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 760;
  line-height: 1.5;
}

.missing-pet-inline-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.missing-pet-form-section h2,
.missing-pet-inline-entry h2,
.missing-pet-instructions h2,
.missing-pet-sighting-panel h2,
.missing-pet-manage-panel h2 {
  margin: 0;
  font-size: 1.15rem;
}

.missing-pet-manage-hero.is-dashboard {
  grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) auto;
  align-items: stretch;
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 84% 0%, rgba(249, 115, 22, 0.15), transparent 34%),
    radial-gradient(circle at 16% 12%, rgba(86, 207, 174, 0.12), transparent 32%),
    var(--surface-raised);
  box-shadow: var(--shadow-card);
}

.missing-pet-manage-hero.is-dashboard.is-simple {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  background: var(--surface-raised);
}

.missing-pet-manage-hero-thumb {
  display: grid;
  width: clamp(78px, 9vw, 108px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  align-self: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
  color: var(--text-muted);
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.missing-pet-manage-hero-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.missing-pet-manage-hero-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
}

.missing-pet-manage-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-manage-kicker span,
.missing-pet-manage-panel-heading > span {
  display: inline-flex;
  width: fit-content;
  min-height: 30px;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 920;
  white-space: nowrap;
}

.missing-pet-manage-status.is-active,
.missing-pet-manage-status.is-sighting-reported,
.missing-pet-owner-command-topline > span.is-alert,
.missing-pet-manage-panel-heading > span.is-alert {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #9a3412;
}

.missing-pet-manage-status.is-found {
  border-color: rgba(4, 120, 87, 0.25);
  background: #ecfdf5;
  color: #047857;
}

.missing-pet-manage-location {
  display: inline-flex;
  max-width: 760px;
  gap: 7px;
  align-items: flex-start;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.missing-pet-manage-location svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #f97316;
}

.missing-pet-manage-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-manage-quick-actions .button {
  gap: 7px;
}

.missing-pet-public-alert-button {
  box-shadow:
    0 12px 28px rgba(47, 107, 95, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.missing-pet-manage-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-manage-stat-row div {
  display: grid;
  min-width: 96px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.64);
}

.missing-pet-manage-stat-row strong {
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.missing-pet-manage-stat-row span {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 860;
  text-transform: uppercase;
}

.missing-pet-manage-preview {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-muted);
}

.missing-pet-manage-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: contain;
  padding: 8px;
}

.missing-pet-manage-preview figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
}

.missing-pet-manage-hero.is-dashboard .help-community-actions {
  align-content: start;
  justify-content: end;
}

.missing-pet-manage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-manage-nav a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 12px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 880;
  text-decoration: none;
}

.missing-pet-manage-nav a:hover {
  border-color: rgba(249, 115, 22, 0.32);
  color: var(--text);
}

.missing-pet-form label,
.missing-pet-sighting-form label,
.missing-pet-owner-edit-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.missing-pet-form label small,
.missing-pet-sighting-form label small,
.missing-pet-owner-edit-form label small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.38;
}

.missing-pet-form input,
.missing-pet-form textarea,
.missing-pet-form select,
.missing-pet-sighting-form input,
.missing-pet-sighting-form textarea,
.missing-pet-owner-edit-form input,
.missing-pet-owner-edit-form textarea,
.missing-pet-owner-edit-form select {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.missing-pet-form textarea,
.missing-pet-sighting-form textarea,
.missing-pet-owner-edit-form textarea {
  resize: vertical;
}

.missing-pet-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.missing-pet-owner-edit-form small svg {
  flex: 0 0 auto;
}

.missing-pet-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
}

.missing-pet-radio-group legend {
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 900;
}

.missing-pet-radio-group label {
  display: inline-flex;
  width: fit-content;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 7px;
}

.missing-pet-advanced-options {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}

.missing-pet-advanced-options summary {
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 900;
}

.missing-pet-advanced-options .missing-pet-form-grid {
  margin-top: 14px;
}

.missing-pet-language-options {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
}

.missing-pet-language-options legend {
  padding: 0 6px;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-language-options p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.42;
}

.missing-pet-language-options div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-language-options label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.82rem;
}

.missing-pet-language-options input {
  width: 14px;
  min-height: auto;
  padding: 0;
}

html[data-theme="dark"] .missing-pet-create-page {
  background:
    radial-gradient(circle at 16% 4%, rgba(255, 200, 0, 0.1), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(86, 207, 174, 0.08), transparent 30%),
    var(--surface);
}

html[data-theme="dark"] .missing-pet-language-switch {
  border-color: var(--border-soft);
  background: rgba(18, 24, 22, 0.86);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .missing-pet-language-switch a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-language-switch a.is-active {
  background: #ffe48a;
  color: #241a00;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .missing-pet-submit-overlay {
  background:
    linear-gradient(180deg, rgba(15, 18, 17, 0.96), rgba(15, 18, 17, 0.76) 42%, rgba(15, 18, 17, 0.48)),
    radial-gradient(circle at 16% 0%, rgba(255, 200, 0, 0.14), transparent 34%);
}

html[data-theme="dark"] .missing-pet-submit-card {
  border-color: var(--border-soft);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.09), transparent 34%),
    rgba(23, 29, 26, 0.94);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .missing-pet-submit-spinner,
html[data-theme="dark"] .missing-pet-submit-card li.is-active span {
  background: rgba(255, 200, 0, 0.14);
  color: #ffe48a;
}

html[data-theme="dark"] .missing-pet-submit-card li {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-submit-card li span {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-submit-card li.is-active {
  border-color: rgba(255, 200, 0, 0.34);
  background: rgba(255, 200, 0, 0.08);
}

html[data-theme="dark"] .missing-pet-submit-card li.is-done {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-submit-card li.is-done span {
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-optional-card,
html[data-theme="dark"] .missing-pet-option-button,
html[data-theme="dark"] .missing-pet-time-panel,
html[data-theme="dark"] .missing-pet-last-seen-field,
html[data-theme="dark"] .missing-pet-money-input,
html[data-theme="dark"] .missing-pet-guidance-toggle,
html[data-theme="dark"] .missing-pet-guidance-panel > div,
html[data-theme="dark"] .missing-pet-language-options,
html[data-theme="dark"] .missing-pet-language-options label {
  border-color: var(--border-soft);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.055);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .missing-pet-money-input > span {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-guidance-toggle svg {
  color: #ffe48a;
}

html[data-theme="dark"] .missing-pet-optional-card {
  background:
    radial-gradient(circle at 96% 0%, rgba(255, 200, 0, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .missing-pet-optional-card-head > span {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-time-panel {
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.09), transparent 34%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-optional-card-head strong,
html[data-theme="dark"] .missing-pet-option-button span,
html[data-theme="dark"] .missing-pet-language-options legend {
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-option-button small,
html[data-theme="dark"] .missing-pet-time-panel > p,
html[data-theme="dark"] .missing-pet-language-options p,
html[data-theme="dark"] .missing-pet-language-options label {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-time-shortcuts button {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-time-shortcuts button.is-active {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.11);
  color: #b9f1d9;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.08);
}

html[data-theme="dark"] .missing-pet-alert-location,
html[data-theme="dark"] .missing-pet-directory-tools,
html[data-theme="dark"] .missing-pet-sighting-main-field {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-theme="dark"] .missing-pet-card {
  border-color: var(--border);
  background: rgba(23, 29, 26, 0.94);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .missing-pet-card-body {
  background: rgba(18, 24, 21, 0.96);
}

html[data-theme="dark"] .missing-pet-card-title-row strong,
html[data-theme="dark"] .missing-pet-card-footer > span:last-child {
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-card-footer {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-card:hover,
html[data-theme="dark"] .missing-pet-card:focus-visible {
  border-color: rgba(249, 115, 22, 0.34);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    0 0 0 3px rgba(249, 115, 22, 0.1);
}

html[data-theme="dark"] .missing-pet-card-image {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    var(--surface-muted);
}

html[data-theme="dark"] .missing-pet-card-image img,
html[data-theme="dark"] .missing-pet-card-image-empty,
html[data-theme="dark"] .missing-pet-card-title-row > span {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-status {
  border-color: rgba(248, 113, 113, 0.24);
  background: rgba(248, 113, 113, 0.12);
  color: #fecaca;
}

html[data-theme="dark"] .missing-pet-status.is-found {
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-status.is-sighting_reported {
  background: rgba(120, 183, 255, 0.14);
  color: #bfdbfe;
}

.missing-pet-form-actions,
.missing-pet-manage-actions,
.missing-pet-public-actions,
.missing-pet-sighting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.missing-pet-public-actions .button,
.missing-pet-responder-actions .button,
.missing-pet-generate-button,
.missing-pet-found-button {
  gap: 8px;
}

.missing-pet-form-actions button {
  gap: 8px;
}

.missing-pet-photo-replace-form {
  display: grid;
  gap: 12px;
  max-width: 620px;
}

.missing-pet-share-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-share-button {
  gap: 8px;
}

.missing-pet-share-controls span {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 760;
}

.missing-pet-responder-actions .missing-pet-share-controls {
  display: flex;
  flex: 0 1 auto;
}

.missing-pet-download-details {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.missing-pet-download-details summary {
  display: flex;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 900;
  list-style: none;
}

.missing-pet-download-details summary::-webkit-details-marker {
  display: none;
}

.missing-pet-download-details summary small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.missing-pet-download-details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.missing-pet-owner-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 780;
}

.missing-pet-owner-tools span {
  flex-basis: 100%;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 0.72rem;
  font-weight: 900;
}

.missing-pet-owner-tools a {
  gap: 7px;
}

.missing-pet-owner-tools a:hover {
  text-decoration: none;
}

.missing-pet-sighting-action-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(11, 105, 183, 0.055), rgba(255, 255, 255, 0)),
    var(--surface-raised);
}

.missing-pet-sighting-action-panel.is-new {
  border-color: rgba(249, 115, 22, 0.24);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.07), rgba(255, 255, 255, 0)),
    var(--surface-raised);
}

.missing-pet-sighting-action-panel.is-owner-contacted,
.missing-pet-sighting-action-panel.is-reviewed {
  border-color: rgba(86, 207, 174, 0.25);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.08), rgba(255, 255, 255, 0)),
    var(--surface-raised);
}

.missing-pet-sighting-action-copy {
  display: grid;
  gap: 3px;
}

.missing-pet-sighting-action-copy span {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 920;
}

.missing-pet-sighting-action-copy small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-sighting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}

.missing-pet-sighting-actions .button {
  justify-content: center;
  min-height: 36px;
  gap: 6px;
  padding-inline: 11px;
}

.missing-pet-sighting-more-actions {
  position: relative;
}

.missing-pet-sighting-more-actions > summary {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 999px;
  padding: 0 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 247, 238, 0.82));
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
  list-style: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.missing-pet-sighting-more-actions > summary:hover,
.missing-pet-sighting-more-actions[open] > summary {
  border-color: rgba(11, 105, 183, 0.18);
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.86));
}

.missing-pet-sighting-more-actions > summary svg {
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.missing-pet-sighting-more-actions[open] > summary svg {
  transform: rotate(90deg);
}

.missing-pet-sighting-more-actions > summary::-webkit-details-marker,
.missing-pet-sighting-danger-actions > summary::-webkit-details-marker {
  display: none;
}

.missing-pet-sighting-more-actions > div {
  display: grid;
  width: min(100%, 340px);
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 247, 238, 0.88));
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-sighting-more-actions[open] {
  display: grid;
  gap: 8px;
}

.missing-pet-sighting-more-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.missing-pet-sighting-more-copy strong {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 920;
  line-height: 1.25;
}

.missing-pet-sighting-more-actions small,
.missing-pet-sighting-danger-actions p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 740;
  line-height: 1.4;
}

.missing-pet-sighting-more-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
}

.missing-pet-sighting-hide-button {
  width: fit-content;
  align-self: center;
  border-color: rgba(100, 116, 139, 0.18);
  color: var(--text-muted);
}

.missing-pet-sighting-danger-actions {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 8px;
}

.missing-pet-sighting-danger-actions > summary {
  width: fit-content;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  list-style: none;
}

.missing-pet-sighting-main-field {
  gap: 12px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  padding: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 252, 239, 0.9) 100%);
  box-shadow:
    0 10px 24px rgba(78, 58, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-main-field > span:first-child,
.missing-pet-sighting-extra label > span:first-child {
  color: var(--foreground);
  font-size: 0.88rem;
  font-weight: 940;
}

.missing-pet-sighting-main-field > span:first-child {
  display: flex;
  gap: 8px;
  align-items: center;
}

.missing-pet-sighting-main-field > span:first-child > span[aria-hidden="true"] {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: rgba(11, 105, 183, 0.1);
  color: var(--accent-strong);
}

.missing-pet-sighting-main-field > span:first-child .missing-pet-bilingual-copy {
  display: inline;
  min-width: 0;
  line-height: 1.25;
}

.missing-pet-sighting-main-field.is-ready {
  border-color: rgba(86, 207, 174, 0.36);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.95));
}

.missing-pet-sighting-main-field.is-error {
  border-color: rgba(248, 113, 113, 0.28);
  background:
    linear-gradient(180deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.94));
}

.missing-pet-sighting-location-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 12px;
  padding: 10px;
  background: rgba(239, 246, 255, 0.62);
}

.missing-pet-sighting-location-inline strong,
.missing-pet-sighting-location-inline small {
  display: block;
  min-width: 0;
}

.missing-pet-sighting-location-inline strong {
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 920;
}

.missing-pet-sighting-location-inline small {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-sighting-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.missing-pet-sighting-methods article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-height: 58px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 16px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 252, 239, 0.86) 100%);
  color: var(--foreground);
  box-shadow: 0 8px 18px rgba(78, 58, 24, 0.05);
  line-height: 1.2;
}

.missing-pet-sighting-methods article > span {
  display: grid;
  width: 34px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 200, 0, 0.18);
  color: #7a540f;
}

.missing-pet-sighting-methods article strong {
  font-size: 0.78rem;
  font-weight: 910;
}

.missing-pet-sighting-step-arrow {
  color: rgba(122, 84, 15, 0.58);
}

.missing-pet-sighting-location-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.94));
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.missing-pet-sighting-location-card > div {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.missing-pet-sighting-location-card > div > span {
  display: inline-grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.1);
  color: var(--accent-strong);
}

.missing-pet-sighting-location-card strong,
.missing-pet-sighting-location-card small {
  display: block;
  min-width: 0;
}

.missing-pet-sighting-location-card strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 940;
}

.missing-pet-sighting-location-card small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-sighting-location-card.is-ready {
  border-color: rgba(86, 207, 174, 0.36);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.95));
}

.missing-pet-sighting-location-card.is-error {
  border-color: rgba(248, 113, 113, 0.28);
  background:
    linear-gradient(180deg, rgba(254, 242, 242, 0.9), rgba(255, 255, 255, 0.94));
}

.missing-pet-sighting-quick-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
}

.missing-pet-sighting-upload-card {
  position: relative;
  min-height: 108px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 12px;
  border: 1.5px dashed rgba(15, 23, 42, 0.18);
  border-radius: 14px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.missing-pet-sighting-upload-card:hover,
.missing-pet-sighting-upload-card.is-dragging {
  border-color: rgba(249, 115, 22, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
  box-shadow:
    0 16px 34px rgba(249, 115, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.missing-pet-sighting-upload-card.is-dragging {
  transform: translateY(-1px);
}

.missing-pet-sighting-upload-card.has-photo {
  border-style: solid;
  border-color: rgba(86, 207, 174, 0.36);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.missing-pet-sighting-upload-card input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.missing-pet-sighting-upload-icon {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(249, 115, 22, 0.11);
  color: #c2410c;
}

.missing-pet-sighting-upload-card.has-photo .missing-pet-sighting-upload-icon {
  background: rgba(86, 207, 174, 0.15);
  color: #047857;
}

.missing-pet-sighting-upload-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.missing-pet-sighting-upload-copy strong,
.missing-pet-sighting-upload-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-upload-copy strong {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 940;
}

.missing-pet-sighting-upload-copy small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 780;
}

.missing-pet-sighting-upload-card em {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 920;
  white-space: nowrap;
}

.missing-pet-sighting-quick-row .button {
  gap: 8px;
  min-height: 44px;
  align-self: center;
}

.missing-pet-sighting-submit-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(11, 105, 183, 0.18);
  border-radius: 12px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98));
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.missing-pet-sighting-submit-button {
  width: 100%;
  min-height: 58px;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  font-size: 0.98rem;
  font-weight: 960;
  box-shadow: 0 14px 28px rgba(11, 105, 183, 0.18);
}

.missing-pet-sighting-submit-button:disabled {
  opacity: 1;
  cursor: default;
}

.missing-pet-sighting-submit-panel small {
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.35;
  text-align: center;
}

.missing-pet-sighting-submit-panel.is-sending {
  border-color: rgba(11, 105, 183, 0.32);
  background: #eff6ff;
}

.missing-pet-sighting-submit-panel.is-sent {
  border-color: rgba(86, 207, 174, 0.4);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(255, 255, 255, 0.98));
}

.missing-pet-sighting-submit-panel.is-sent .missing-pet-sighting-submit-button {
  border-color: #047857;
  background: #047857;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(4, 120, 87, 0.2);
}

.missing-pet-sighting-submit-panel.is-sent small {
  color: #047857;
}

.missing-pet-sighting-send-status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  padding: 12px;
  background: #ffffff;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.missing-pet-sighting-send-status > span {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.missing-pet-sighting-send-status.is-sending {
  border-color: rgba(249, 115, 22, 0.28);
  background: #fff7ed;
}

.missing-pet-sighting-send-status.is-sending > span {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.missing-pet-sighting-send-status.is-sending svg,
.missing-pet-sighting-location-card.is-locating svg,
.missing-pet-sighting-form button[type="submit"]:disabled svg {
  animation: spin 900ms linear infinite;
}

.missing-pet-sighting-send-status.is-sent {
  border-color: rgba(86, 207, 174, 0.36);
  background: #ecfdf5;
  box-shadow:
    0 16px 34px rgba(4, 120, 87, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.missing-pet-sighting-send-status.is-sent > span {
  background: rgba(86, 207, 174, 0.14);
  color: #047857;
}

.missing-pet-sighting-send-status.is-error {
  border-color: rgba(248, 113, 113, 0.3);
  background: #fef2f2;
}

.missing-pet-sighting-send-status.is-error > span {
  background: rgba(248, 113, 113, 0.12);
  color: #b91c1c;
}

.missing-pet-sighting-send-status strong,
.missing-pet-sighting-send-status small {
  display: block;
  min-width: 0;
}

.missing-pet-sighting-send-status strong {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 940;
}

.missing-pet-sighting-send-status small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-clear-photo {
  width: 42px;
  padding-inline: 0;
}

.missing-pet-sighting-extra {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  padding: 8px;
  background: rgba(248, 250, 252, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-extra summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--foreground);
  font-weight: 940;
  list-style: none;
  border-radius: 10px;
  padding: 8px 10px;
}

.missing-pet-sighting-extra summary::-webkit-details-marker {
  display: none;
}

.missing-pet-sighting-extra summary small {
  display: inline-flex;
  min-height: 28px;
  flex: 0 0 auto;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 999px;
  background: #ffffff;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 900;
}

.missing-pet-sighting-extra-summary-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.missing-pet-sighting-extra-summary-copy strong {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.2;
}

.missing-pet-sighting-extra-summary-copy em {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.3;
}

.missing-pet-sighting-extra > div,
.missing-pet-sighting-extra > label {
  margin-top: 0;
}

.missing-pet-sighting-extra[open] {
  gap: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98));
  border-color: rgba(15, 23, 42, 0.1);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.missing-pet-sighting-extra.is-followup {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(248, 250, 252, 0.72);
}

.missing-pet-sighting-extra.is-followup[open] {
  border-color: rgba(15, 23, 42, 0.1);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.missing-pet-sighting-extra.is-followup summary small {
  border-color: rgba(15, 23, 42, 0.09);
  background: #ffffff;
  color: var(--text-muted);
}

.missing-pet-sighting-extra.is-followup[open] summary small {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(241, 245, 249, 0.9);
  color: var(--text-muted);
}

.missing-pet-sighting-followup-note {
  margin: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(241, 245, 249, 0.74);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 790;
  line-height: 1.42;
}

.missing-pet-sighting-followup-note + .missing-pet-sighting-extra-grid {
  margin-top: 6px;
}

.missing-pet-sighting-extra-grid label,
.missing-pet-sighting-context-field {
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.92));
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-sighting-extra-grid {
  gap: 14px;
}

.missing-pet-sighting-extra.is-followup .missing-pet-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  row-gap: 14px;
}

.missing-pet-date-picker {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.missing-pet-date-picker button,
.missing-pet-date-shortcuts button {
  border: 1px solid rgba(17, 24, 39, 0.1);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}

.missing-pet-date-picker button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: var(--accent-strong);
  background:
    linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.missing-pet-date-picker input {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  min-height: 44px;
  color: transparent;
  caret-color: transparent;
  cursor: pointer;
}

.missing-pet-date-picker input::-webkit-datetime-edit,
.missing-pet-date-picker input::-webkit-datetime-edit-fields-wrapper,
.missing-pet-date-picker input::-webkit-datetime-edit-text,
.missing-pet-date-picker input::-webkit-datetime-edit-month-field,
.missing-pet-date-picker input::-webkit-datetime-edit-day-field,
.missing-pet-date-picker input::-webkit-datetime-edit-year-field,
.missing-pet-date-picker input::-webkit-datetime-edit-hour-field,
.missing-pet-date-picker input::-webkit-datetime-edit-minute-field,
.missing-pet-date-picker input::-webkit-datetime-edit-ampm-field {
  color: transparent;
}

.missing-pet-date-display {
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 0 42px 0 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 820;
  line-height: 1.2;
  pointer-events: none;
}

.missing-pet-date-picker.is-empty .missing-pet-date-display {
  color: var(--text-muted);
  font-weight: 760;
}

.missing-pet-date-picker button:hover,
.missing-pet-date-shortcuts button:hover {
  border-color: rgba(11, 105, 183, 0.32);
  background: #eff6ff;
  transform: translateY(-1px);
}

.missing-pet-date-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.missing-pet-date-shortcuts button {
  min-height: 30px;
  border-radius: 999px;
  padding: 0 10px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 900;
}

.missing-pet-sighting-extra-grid label:focus-within,
.missing-pet-sighting-context-field:focus-within,
.missing-pet-sighting-main-field:focus-within {
  border-color: rgba(20, 184, 166, 0.36);
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, 0.09),
    0 10px 24px rgba(15, 23, 42, 0.07);
}

.missing-pet-sighting-extra .missing-pet-form-grid {
  gap: 14px;
}

.missing-pet-sighting-extra.is-followup .missing-pet-sighting-date-field {
  grid-column: 1 / -1;
}

.missing-pet-sighting-extra.is-followup .missing-pet-sighting-context-field {
  margin-top: 8px;
}

.missing-pet-sighting-form input,
.missing-pet-sighting-form textarea {
  border-color: rgba(17, 24, 39, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-extra input,
.missing-pet-sighting-extra textarea {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.missing-pet-sighting-form input:focus,
.missing-pet-sighting-form textarea:focus {
  border-color: rgba(255, 200, 0, 0.56);
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 200, 0, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.missing-pet-sighting-extra input:focus,
.missing-pet-sighting-extra textarea:focus {
  border-color: rgba(20, 184, 166, 0.5);
  box-shadow:
    0 0 0 3px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

.form-status {
  margin: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface-muted);
  color: var(--text);
}

.form-status.is-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.missing-pet-detail-hero {
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
}

.missing-pet-detail-photo {
  position: relative;
  display: grid;
  gap: 12px;
  min-height: 0;
  align-self: start;
  align-content: start;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  padding: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.missing-pet-detail-photo-topline,
.missing-pet-detail-photo-summary {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.missing-pet-detail-photo-topline span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 920;
  line-height: 1;
  white-space: nowrap;
}

.missing-pet-detail-photo-topline span:first-child {
  border-color: rgba(17, 24, 39, 0.1);
  background: #f8fafc;
  color: var(--text);
  line-height: 1.2;
  white-space: normal;
}

.missing-pet-detail-photo-frame {
  position: relative;
  display: grid;
  min-height: 320px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: #f1f5f9;
}

.missing-pet-detail-photo-frame.has-secondary {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 10px;
  padding: 10px;
}

.missing-pet-detail-photo figure {
  position: relative;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-muted);
}

.missing-pet-detail-photo .is-primary {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  background: transparent;
}

.missing-pet-detail-photo-frame.has-secondary .is-primary {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.48);
}

.missing-pet-detail-photo .is-primary img {
  object-fit: cover;
  padding: 0;
}

.missing-pet-detail-photo .is-secondary {
  display: grid;
  min-height: 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.58);
}

.missing-pet-detail-photo .is-secondary img {
  object-fit: cover;
  padding: 0;
}

.missing-pet-detail-photo figcaption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}

.missing-pet-detail-photo-placeholder {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--text-muted);
  text-align: center;
}

.missing-pet-detail-photo-placeholder strong {
  color: var(--text);
  font-size: 0.95rem;
}

.missing-pet-detail-photo-summary {
  align-items: end;
}

.missing-pet-detail-photo-summary > div {
  display: grid;
  gap: 3px;
}

.missing-pet-detail-photo-summary span {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 920;
  text-transform: uppercase;
}

.missing-pet-detail-photo-summary strong {
  color: var(--text);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1;
}

.missing-pet-detail-photo-summary small {
  max-width: 56%;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.3;
  text-align: right;
  overflow-wrap: anywhere;
}

.missing-pet-detail-copy {
  display: grid;
  align-content: start;
  gap: 16px;
}

.missing-pet-responder-card {
  display: grid;
  gap: 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-responder-card h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.05;
}

.missing-pet-responder-card p:not(.eyebrow) {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1.45;
}

.missing-pet-responder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.missing-pet-sighting-closed-chip {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(4, 120, 87, 0.22);
  border-radius: 999px;
  padding: 0 12px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.82rem;
  font-weight: 900;
}

.missing-pet-alert-location {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-raised);
}

.missing-pet-alert-location span {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.missing-pet-alert-location strong {
  color: var(--text);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.missing-pet-public-map-clue {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(255, 255, 255, 0.96));
}

.missing-pet-public-map-clue > div:first-child {
  position: relative;
  min-height: 90px;
  overflow: hidden;
  border: 1px solid rgba(11, 105, 183, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 36% 36%, rgba(86, 207, 174, 0.18), transparent 34%),
    #eff6ff;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto;
}

.missing-pet-public-map-clue > div:first-child span {
  position: absolute;
  left: 52%;
  top: 48%;
  display: inline-grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  transform: translate(-50%, -50%);
  box-shadow:
    0 12px 24px rgba(154, 52, 18, 0.2),
    0 0 0 10px rgba(249, 115, 22, 0.14);
}

.missing-pet-public-map-clue > div:last-child {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.missing-pet-public-map-clue span {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 940;
  text-transform: uppercase;
}

.missing-pet-public-map-clue strong {
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.missing-pet-public-map-clue small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-alert-help {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-left: 4px solid #f97316;
  border-radius: 8px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255, 247, 237, 0.86), rgba(255, 255, 255, 0.96));
}

.missing-pet-alert-help strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-alert-help span,
.missing-pet-contact-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-response-steps {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.missing-pet-response-steps div {
  display: grid;
  gap: 5px;
  min-height: 112px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
}

.missing-pet-response-steps svg {
  color: #f97316;
}

.missing-pet-response-steps strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-response-steps span {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-contact-note {
  margin: 0;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface-raised);
}

.missing-pet-facts {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-facts div {
  display: grid;
  gap: 4px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding: 12px 14px;
}

.missing-pet-facts div:first-child {
  border-top: 0;
}

.missing-pet-facts dt {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.missing-pet-facts dd {
  margin: 0;
}

.missing-pet-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.missing-pet-photo-strip img {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-muted);
}

.missing-pet-sighting-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 14px;
}

.missing-pet-sighting-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-sighting-summary-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 880;
}

.missing-pet-sighting-summary-row span.is-alert {
  border-color: rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.1);
  color: #b45309;
}

.missing-pet-sighting-summary-row strong {
  color: var(--text);
  font-size: 0.9rem;
}

.missing-pet-sighting-locked {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid rgba(4, 120, 87, 0.2);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.9), rgba(255, 255, 255, 0.96));
  color: #047857;
}

.missing-pet-sighting-locked strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-sighting-locked p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1.45;
}

.missing-pet-location-history {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: 14px;
  background:
    linear-gradient(180deg, #ffffff, #f8fafc);
}

.missing-pet-location-history-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-location-history-head > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.missing-pet-location-history-head strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-location-history-head small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
}

.missing-pet-location-history-head > span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.14);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(239, 246, 255, 0.86);
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 900;
}

.missing-pet-location-history-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1fr);
  gap: 12px;
}

.missing-pet-duplicate-panel {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(245, 158, 11, 0.22);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 251, 235, 0.82), rgba(255, 255, 255, 0.94));
}

.missing-pet-duplicate-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.missing-pet-duplicate-panel strong {
  color: var(--text);
}

.missing-pet-duplicate-panel small {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 760;
}

.missing-pet-duplicate-panel > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.missing-pet-duplicate-panel > div:last-child span {
  display: inline-flex;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 860;
}

.missing-pet-duplicate-panel > div:last-child strong {
  color: #9a3412;
}

.missing-pet-location-map-board {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 28% 32%, rgba(86, 207, 174, 0.18), transparent 28%),
    radial-gradient(circle at 76% 72%, rgba(255, 200, 0, 0.16), transparent 32%),
    #eff6ff;
  background-size:
    38px 38px,
    38px 38px,
    auto,
    auto,
    auto;
}

.missing-pet-location-map-board.is-empty {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 860;
}

.missing-pet-leaflet-shell {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  background: #eff6ff;
}

.missing-pet-leaflet-shell.is-compact {
  min-height: 118px;
}

.missing-pet-leaflet-map-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.missing-pet-leaflet-empty {
  display: grid;
  min-height: 190px;
  place-items: center;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    #eff6ff;
  background-size: 38px 38px, 38px 38px, auto;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 860;
}

.missing-pet-leaflet-pin {
  display: inline-grid;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  box-shadow:
    0 12px 26px rgba(154, 52, 18, 0.22),
    0 0 0 8px rgba(249, 115, 22, 0.14);
}

.missing-pet-leaflet-pin span {
  font-size: 0.76rem;
  font-weight: 940;
  line-height: 1;
}

.missing-pet-leaflet-shell .leaflet-container {
  width: 100%;
  height: 100%;
  background: #eff6ff;
  font: inherit;
}

.missing-pet-leaflet-shell .leaflet-control-attribution {
  border-top-left-radius: 6px;
  background: rgba(255, 255, 255, 0.84);
  color: #475569;
  font-size: 0.62rem;
  font-weight: 760;
}

.missing-pet-leaflet-shell .leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.missing-pet-leaflet-shell .leaflet-popup-content {
  display: grid;
  gap: 4px;
  margin: 10px 12px;
  min-width: 140px;
  color: #111827;
  font: inherit;
}

.missing-pet-leaflet-shell .leaflet-popup-content strong,
.missing-pet-leaflet-shell .leaflet-popup-content small,
.missing-pet-leaflet-shell .leaflet-popup-content a {
  display: block;
}

.missing-pet-leaflet-shell .leaflet-popup-content small {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 760;
}

.missing-pet-leaflet-shell .leaflet-popup-content a {
  color: #0b69b7;
  font-size: 0.78rem;
  font-weight: 900;
  text-decoration: none;
}

.missing-pet-leaflet-open-link {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(15, 23, 42, 0.74);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  text-decoration: none;
}

.missing-pet-location-map-pin {
  position: absolute;
  display: inline-grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 940;
  line-height: 1;
  text-decoration: none;
  transform: translate(-50%, -50%);
  box-shadow:
    0 12px 26px rgba(154, 52, 18, 0.22),
    0 0 0 8px rgba(249, 115, 22, 0.14);
}

.missing-pet-location-timeline {
  display: grid;
  align-content: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.missing-pet-location-timeline li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
}

.missing-pet-location-timeline li > span {
  display: inline-grid;
  width: 24px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.12);
  color: #9a3412;
  font-size: 0.72rem;
  font-weight: 940;
}

.missing-pet-location-timeline div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.missing-pet-location-timeline strong {
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.missing-pet-location-timeline small {
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 760;
}

.missing-pet-location-timeline a {
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-weight: 900;
  text-decoration: none;
}

.missing-pet-sighting-card {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.missing-pet-sighting-card.is-new {
  border-color: rgba(249, 115, 22, 0.34);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.08) 0%, rgba(255, 255, 255, 0) 42%),
    var(--surface);
}

.missing-pet-sighting-card.is-owner-contacted {
  border-color: rgba(86, 207, 174, 0.34);
}

.missing-pet-sighting-media {
  min-width: 0;
}

.missing-pet-sighting-photo-link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  background: var(--surface-muted);
}

.missing-pet-sighting-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-muted);
  object-fit: cover;
}

.missing-pet-sighting-photo-link span {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 16px);
  min-height: 28px;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 0 9px;
  background: rgba(15, 23, 42, 0.74);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.missing-pet-sighting-photo-link:hover span,
.missing-pet-sighting-photo-link:focus-visible span {
  opacity: 1;
  transform: translateY(0);
}

.missing-pet-sighting-photo-link:focus-visible {
  outline: 3px solid rgba(11, 105, 183, 0.24);
  outline-offset: 3px;
}

.missing-pet-sighting-card-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.missing-pet-sighting-card p {
  margin: 0;
}

.missing-pet-event-list {
  display: grid;
  gap: 8px;
}

.missing-pet-event-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
  color: var(--text-muted);
}

.missing-pet-result-panel,
.missing-pet-owner-command-center,
.cat-sitting-created-panel,
.community-safety-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.14), transparent 34%),
    var(--surface-raised);
}

.missing-pet-owner-command-center {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.missing-pet-owner-command-center.is-dashboard {
  background:
    radial-gradient(circle at 4% 0%, rgba(86, 207, 174, 0.12), transparent 34%),
    var(--surface-raised);
}

.missing-pet-owner-command-center.is-dashboard.is-simple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: var(--surface-raised);
}

.missing-pet-owner-command-center.is-created {
  border-color: rgba(86, 207, 174, 0.36);
}

.missing-pet-owner-command-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface);
}

.missing-pet-top-found-card {
  width: min(100%, 360px);
  align-self: stretch;
  justify-self: end;
  align-content: space-between;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.14), transparent 38%),
    var(--surface);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.missing-pet-top-found-card.is-created {
  border-color: rgba(86, 207, 174, 0.36);
}

.missing-pet-owner-command-center.is-simple .missing-pet-owner-command-card {
  align-content: space-between;
  min-height: 170px;
}

.missing-pet-owner-command-card.is-primary {
  background:
    radial-gradient(circle at 96% 0%, rgba(86, 207, 174, 0.14), transparent 34%),
    var(--surface);
}

.missing-pet-owner-command-card h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.1;
}

.missing-pet-owner-command-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.5;
}

.missing-pet-owner-command-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.missing-pet-owner-command-actions .missing-pet-share-controls {
  display: contents;
}

.missing-pet-owner-command-topline {
  display: flex;
  gap: 10px;
  align-items: center;
}

.missing-pet-owner-command-topline > span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 920;
}

.missing-pet-owner-command-topline > span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-owner-command-topline > span.is-found {
  border-color: rgba(4, 120, 87, 0.25);
  background: #ecfdf5;
  color: #047857;
}

.missing-pet-owner-command-topline strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-manage-panel-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-manage-panel-heading > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.missing-pet-manage-panel-heading > span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-manage-optional-panel {
  display: grid;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  background: var(--surface-raised);
}

.missing-pet-manage-optional-panel > summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  color: var(--text);
}

.missing-pet-manage-optional-panel > summary::-webkit-details-marker {
  display: none;
}

.missing-pet-manage-optional-panel > summary span,
.missing-pet-manage-optional-panel > summary small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.missing-pet-manage-optional-panel > summary span {
  font-size: 0.94rem;
  font-weight: 920;
}

.missing-pet-manage-optional-panel > summary small {
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 5px 9px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 860;
}

.missing-pet-manage-optional-panel > summary::after {
  content: "+";
  display: inline-grid;
  width: 24px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: rgba(11, 105, 183, 0.08);
  color: var(--accent-strong);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.missing-pet-manage-optional-panel[open] > summary::after {
  content: "-";
}

.missing-pet-manage-optional-panel > .missing-pet-manage-panel {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0 0 8px 8px;
  box-shadow: none;
}

.missing-pet-manage-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  gap: 14px;
}

.missing-pet-manage-photo-grid.has-multiple {
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
}

.missing-pet-current-photo-set {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(17, 24, 39, 0.11);
  border-radius: 8px;
  padding: 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
  box-shadow:
    0 16px 34px rgba(66, 44, 10, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.missing-pet-current-photo-set-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
}

.missing-pet-current-photo-set-head strong {
  color: var(--text);
  font-size: 0.98rem;
}

.missing-pet-current-photo-set-head small {
  max-width: 620px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 780;
  line-height: 1.4;
}

.missing-pet-manage-photo-grid figure {
  display: grid;
  gap: 8px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.missing-pet-manage-photo-grid figure.is-primary {
  border-color: rgba(249, 115, 22, 0.32);
  background:
    radial-gradient(circle at 100% 0%, rgba(249, 115, 22, 0.1), transparent 36%),
    var(--surface);
}

.missing-pet-manage-photo-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--surface-muted);
  object-fit: cover;
}

.missing-pet-manage-photo-grid.has-multiple img {
  aspect-ratio: 4 / 3;
}

.missing-pet-manage-photo-grid figcaption {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.missing-pet-manage-photo-grid strong {
  color: var(--text);
  font-size: 0.86rem;
}

.missing-pet-manage-photo-grid small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.missing-pet-photo-workflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.missing-pet-photo-workflow span {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid rgba(249, 115, 22, 0.16);
  border-radius: 8px;
  padding: 0 12px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.78rem;
  font-weight: 860;
  line-height: 1.25;
}

.missing-pet-photo-replace-form {
  display: grid;
  gap: 12px;
  max-width: none;
  border: 1px solid rgba(17, 24, 39, 0.11);
  border-radius: 8px;
  padding: 16px;
  background: #ffffff;
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.missing-pet-photo-replace-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.missing-pet-photo-replace-head > div {
  display: grid;
  gap: 4px;
  max-width: 720px;
}

.missing-pet-photo-replace-head span {
  color: #b45309;
  font-size: 0.72rem;
  font-weight: 940;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-photo-replace-head strong {
  color: var(--text);
  font-size: 1rem;
}

.missing-pet-photo-replace-head small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.45;
}

.missing-pet-replace-upload-field {
  gap: 10px;
}

.missing-pet-replace-summary {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  padding: 11px 12px;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.45;
}

.missing-pet-replace-summary svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--text-muted);
}

.missing-pet-replace-summary.is-ready {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.1);
  color: #1f6f58;
}

.missing-pet-replace-summary.is-ready svg {
  color: #1f6f58;
}

.missing-pet-photo-replace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.missing-pet-photo-replace-actions .button {
  gap: 8px;
}

.missing-pet-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface-muted);
}

.missing-pet-empty-state svg {
  color: #f97316;
}

.missing-pet-empty-state strong {
  color: var(--text);
}

.missing-pet-empty-state p {
  max-width: 680px;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 740;
  line-height: 1.45;
}

.missing-pet-sighting-photo-empty {
  display: grid;
  width: 100%;
  aspect-ratio: 1;
  place-items: center;
  align-content: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
}

.missing-pet-sighting-photo-empty small {
  font-size: 0.72rem;
  font-weight: 850;
}

.missing-pet-sighting-card-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.missing-pet-sighting-card-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-sighting-card-head strong {
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-card-head small {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
}

.missing-pet-sighting-card-head em {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 860;
}

.missing-pet-sighting-card-head em.is-new {
  background: rgba(249, 115, 22, 0.12);
  color: #b45309;
}

.missing-pet-sighting-card-head em.is-owner-contacted {
  background: rgba(86, 207, 174, 0.14);
  color: #1f6f58;
}

.missing-pet-sighting-card-head em.is-reviewed {
  background: rgba(11, 105, 183, 0.1);
  color: var(--accent-strong);
}

.missing-pet-sighting-note-stack {
  display: grid;
  gap: 8px;
}

.missing-pet-sighting-note-stack p {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(33, 33, 33, 0.08);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 740;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-note-stack p span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-sighting-location-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-muted);
}

.missing-pet-sighting-location-card.has-map {
  grid-template-columns: minmax(112px, 0.42fr) minmax(0, 1fr);
  align-items: stretch;
}

.missing-pet-sighting-location-card.has-map.is-map-only {
  grid-template-columns: 1fr;
}

.missing-pet-sighting-location-card.is-map-only {
  padding: 0;
  overflow: hidden;
}

.missing-pet-sighting-location-card.is-map-only .missing-pet-sighting-map-preview {
  border: 0;
  border-radius: 8px;
}

.missing-pet-sighting-map-preview {
  position: relative;
  display: grid;
  min-height: 118px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(11, 105, 183, 0.12);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(11, 105, 183, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 68% 34%, rgba(255, 200, 0, 0.18), transparent 34%),
    #eff6ff;
  background-size:
    28px 28px,
    28px 28px,
    auto,
    auto;
  color: var(--accent-strong);
  text-decoration: none;
}

.missing-pet-sighting-map-preview > span {
  display: inline-grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #f97316;
  color: #ffffff;
  box-shadow:
    0 12px 26px rgba(154, 52, 18, 0.2),
    0 0 0 8px rgba(249, 115, 22, 0.14);
}

.missing-pet-sighting-map-preview em {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  display: inline-flex;
  width: fit-content;
  max-width: calc(100% - 16px);
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

.missing-pet-sighting-location-copy {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.missing-pet-sighting-location-copy > span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-sighting-location-copy strong {
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-location-copy small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-contact {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 30px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.16);
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(11, 105, 183, 0.07);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 860;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.missing-pet-sighting-contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(11, 105, 183, 0.1);
  border-radius: 8px;
  padding: 8px;
  background: rgba(11, 105, 183, 0.045);
}

.missing-pet-sighting-contact-label {
  flex: 1 0 100%;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 920;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.missing-pet-result-panel.is-created {
  border-color: rgba(86, 207, 174, 0.36);
}

.missing-pet-result-panel h2,
.cat-sitting-created-panel h2 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.missing-pet-result-panel p,
.cat-sitting-created-panel p {
  max-width: 760px;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.missing-pet-result-steps,
.missing-pet-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.missing-pet-result-steps span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 900;
}

.missing-pet-result-steps span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-poster-control-panel {
  display: grid;
  gap: 12px;
}

.missing-pet-poster-simple {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(86, 207, 174, 0.26);
  border-radius: 8px;
  padding: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(86, 207, 174, 0.12), transparent 36%),
    var(--surface);
}

.missing-pet-poster-simple-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.missing-pet-poster-simple-copy > span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 920;
  white-space: nowrap;
}

.missing-pet-poster-simple-copy > span.is-ready {
  border-color: rgba(86, 207, 174, 0.34);
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
}

.missing-pet-poster-simple-copy div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-simple-copy strong {
  color: var(--text);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.1;
}

.missing-pet-poster-simple-copy small {
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.4;
}

.missing-pet-poster-simple-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.missing-pet-poster-simple-actions .button {
  gap: 8px;
}

.missing-pet-poster-more-files {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.missing-pet-poster-more-files summary {
  display: flex;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 920;
  list-style: none;
}

.missing-pet-poster-more-files summary::-webkit-details-marker {
  display: none;
}

.missing-pet-poster-more-files summary small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.missing-pet-poster-file-list {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.missing-pet-poster-file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  min-height: 76px;
  padding: 12px;
  background: var(--surface-muted);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

a.missing-pet-poster-file-row:hover {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.missing-pet-poster-file-row.is-ready {
  border-style: solid;
  border-color: rgba(86, 207, 174, 0.3);
  background: rgba(86, 207, 174, 0.08);
}

.missing-pet-poster-file-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.missing-pet-poster-file-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-file-row strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.15;
}

.missing-pet-poster-file-row small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-poster-file-row em {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 11px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.missing-pet-poster-file-row.is-ready em {
  color: #1f6f58;
}

.missing-pet-poster-remake-box {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(249, 115, 22, 0.22);
  border-radius: 8px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(86, 207, 174, 0.07)),
    var(--surface);
}

.missing-pet-poster-remake-box > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-remake-box strong {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.2;
}

.missing-pet-poster-remake-box small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-poster-remake-box .button {
  flex: 0 0 auto;
}

.missing-pet-manage-advanced {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-raised);
}

.missing-pet-manage-advanced summary {
  display: flex;
  cursor: pointer;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 920;
  list-style: none;
}

.missing-pet-manage-advanced summary::-webkit-details-marker {
  display: none;
}

.missing-pet-manage-advanced summary small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
}

.missing-pet-manage-advanced[open] {
  gap: 18px;
}

.missing-pet-poster-control-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border: 1px solid rgba(255, 200, 0, 0.28);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.72);
}

.missing-pet-poster-control-head > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.missing-pet-poster-control-head strong {
  color: var(--foreground);
  font-size: 0.92rem;
  font-weight: 940;
}

.missing-pet-poster-control-head small {
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-generate-button svg {
  flex: 0 0 auto;
}

.missing-pet-generate-button:disabled svg {
  animation: studioPhotoIconSpin 900ms linear infinite;
}

.missing-pet-poster-download-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.missing-pet-poster-control-panel.is-compact .missing-pet-poster-download-grid {
  grid-template-columns: 1fr;
}

.missing-pet-poster-download-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px dashed var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-muted);
  color: inherit;
  text-decoration: none;
}

.missing-pet-poster-download-preview {
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface);
}

.missing-pet-poster-download-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.missing-pet-poster-download-card.is-ready {
  border-style: solid;
  border-color: rgba(86, 207, 174, 0.36);
  background: rgba(86, 207, 174, 0.1);
}

.missing-pet-poster-download-card > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
}

.missing-pet-poster-download-card > .missing-pet-poster-download-preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.missing-pet-poster-download-card strong {
  color: var(--text);
  font-size: 0.94rem;
}

.missing-pet-poster-download-card small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-poster-download-card em {
  display: inline-flex;
  width: fit-content;
  gap: 5px;
  align-items: center;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
}

.missing-pet-poster-download-card.is-ready em {
  color: #1f6f58;
}

.missing-pet-status-control-panel {
  display: grid;
  gap: 9px;
  align-items: start;
}

.missing-pet-status-control-panel small {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.35;
}

.missing-pet-close-report-details {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  padding-top: 8px;
}

.missing-pet-close-report-details > summary {
  width: fit-content;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  list-style: none;
}

.missing-pet-close-report-details > summary::-webkit-details-marker {
  display: none;
}

.missing-pet-close-report-details > div {
  display: grid;
  justify-items: start;
  gap: 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-muted);
}

.missing-pet-close-report-details p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 740;
  line-height: 1.4;
}

.cat-sitting-page-band {
  background: var(--surface);
}

.cat-sitting-hero,
.cat-sitting-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-block: 28px 12px;
}

.cat-sitting-hero h1,
.cat-sitting-detail-copy h1 {
  margin: 0;
  max-width: 860px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.95;
}

.cat-sitting-hero p,
.cat-sitting-detail-copy p {
  max-width: 720px;
  color: var(--text-muted);
}

.cat-sitting-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.cat-sitting-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 0 13px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
}

.cat-sitting-command-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.cat-sitting-command-strip div {
  display: grid;
  min-width: 150px;
  gap: 2px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.cat-sitting-command-strip strong {
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
}

.cat-sitting-command-strip span {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 820;
}

.cat-sitting-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.cat-sitting-card {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-raised);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-card);
}

.cat-sitting-card-image {
  display: block;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 20%, rgba(86, 207, 174, 0.18), transparent 38%),
    var(--surface-muted);
}

.cat-sitting-card-image img,
.cat-sitting-detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-sitting-card-body {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.cat-sitting-card-kicker {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.cat-sitting-card-kicker > span:last-child {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 900;
}

.cat-sitting-card-body strong {
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.15;
}

.cat-sitting-card-body small,
.cat-sitting-card-body span:last-child {
  color: var(--text-muted);
}

.cat-sitting-signal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cat-sitting-signal-row em {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 0 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 820;
}

.cat-sitting-status {
  display: inline-flex;
  width: fit-content;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(86, 207, 174, 0.16);
  color: #1f6f58;
  font-size: 0.76rem;
  font-weight: 920;
}

.cat-sitting-status.is-matched,
.cat-sitting-status.is-completed {
  background: #ecfdf5;
  color: #047857;
}

.cat-sitting-status.is-cancelled,
.cat-sitting-status.is-hidden {
  background: #f3f4f6;
  color: #4b5563;
}

.cat-sitting-create-form {
  width: min(760px, calc(100vw - 32px));
  gap: 18px;
  border-color: rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at 92% 0%, rgba(86, 207, 174, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.94);
}

.cat-sitting-create-form .field {
  display: grid;
  gap: 8px;
}

.cat-sitting-create-form .field > span:first-child {
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 900;
}

.cat-sitting-create-form textarea {
  min-height: 108px;
  resize: vertical;
}

.cat-sitting-form-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.cat-sitting-form-guide span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 840;
  line-height: 1.25;
}

.cat-sitting-type-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cat-sitting-type-toggle label,
.cat-sitting-check-row label {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px 13px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 880;
}

.cat-sitting-type-toggle label {
  min-height: 54px;
  justify-content: center;
  cursor: pointer;
}

.cat-sitting-type-toggle label.is-active {
  border-color: rgba(86, 207, 174, 0.55);
  background: rgba(86, 207, 174, 0.13);
  color: #1f6f58;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.1);
}

.cat-sitting-type-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.cat-sitting-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cat-sitting-check-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-sitting-check-row input {
  width: auto;
}

.cat-sitting-private-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.6);
}

.cat-sitting-private-toggle {
  width: 100%;
  justify-items: start;
  text-align: left;
}

.cat-sitting-private-fields {
  display: grid;
  gap: 12px;
}

.cat-sitting-private-fields > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.45;
}

.cat-sitting-detail-hero {
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  align-items: stretch;
}

.cat-sitting-detail-photo {
  min-height: 420px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 20%, rgba(86, 207, 174, 0.18), transparent 38%),
    var(--surface-muted);
}

.cat-sitting-detail-copy {
  display: grid;
  align-content: center;
  gap: 18px;
}

.cat-sitting-match-panel {
  display: grid;
  gap: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-raised);
}

.cat-sitting-match-panel > div:first-child {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.cat-sitting-match-panel strong {
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
}

.cat-sitting-match-panel span {
  color: var(--text-muted);
  font-weight: 860;
}

.cat-sitting-connection-panel {
  display: grid;
  gap: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(18px, 3vw, 28px);
  background: var(--surface-raised);
}

.cat-sitting-connection-panel h2 {
  margin: 0;
}

.cat-sitting-connection-form,
.cat-sitting-photo-replace-form {
  display: grid;
  gap: 12px;
  max-width: 660px;
}

.cat-sitting-connection-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 840;
}

.cat-sitting-connection-form input,
.cat-sitting-connection-form textarea {
  width: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 11px 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.cat-sitting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cat-sitting-private-dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.cat-sitting-private-dl div,
.cat-sitting-connection-card {
  display: grid;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
}

.cat-sitting-private-dl dt {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.cat-sitting-private-dl dd {
  margin: 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.cat-sitting-connection-list {
  display: grid;
  gap: 12px;
}

.cat-sitting-connection-card p {
  margin: 0;
}

.cat-sitting-connection-card small {
  color: var(--text-muted);
}

.community-dashboard-page {
  background: var(--surface);
}

.community-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-block: 28px 12px;
}

.community-dashboard-hero h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.96;
}

.community-dashboard-hero p {
  max-width: 760px;
  color: var(--text-muted);
}

.community-dashboard-actions,
.community-dashboard-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.community-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.community-dashboard-stats div,
.community-dashboard-section {
  display: grid;
  gap: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: clamp(16px, 2.5vw, 22px);
  background: var(--surface-raised);
}

.community-dashboard-stats strong {
  color: var(--text);
  font-size: 1.8rem;
  line-height: 1;
}

.community-dashboard-stats span {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 820;
}

.community-dashboard-section h2 {
  margin: 0;
  font-size: 1.2rem;
}

.community-dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.community-dashboard-card,
.community-dashboard-room-list a {
  color: inherit;
  text-decoration: none;
}

.community-dashboard-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface);
}

.community-dashboard-thumb {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--surface-muted);
}

.community-dashboard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-dashboard-card span:last-child,
.community-dashboard-room-list a {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.community-dashboard-card strong,
.community-dashboard-room-list strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.community-dashboard-card small,
.community-dashboard-room-list small {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.community-dashboard-card em,
.community-dashboard-room-list em {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(86, 207, 174, 0.12);
  color: #1f6f58;
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 900;
}

.community-dashboard-room-list {
  display: grid;
  gap: 8px;
}

.community-dashboard-room-list a {
  border-top: 1px solid var(--border-subtle);
  padding-top: 10px;
}

html[data-theme="dark"] .cat-sitting-create-page {
  background:
    radial-gradient(circle at 16% 4%, rgba(255, 200, 0, 0.08), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(86, 207, 174, 0.08), transparent 30%),
    var(--surface);
}

html[data-theme="dark"] .missing-pet-page-band {
  background: var(--surface);
}

html[data-theme="dark"] .site-main-shell:has(.missing-pet-page-band),
html[data-theme="dark"] .site-main:has(.missing-pet-page-band) {
  background: var(--surface);
}

html[data-theme="dark"] .missing-pet-owner-tools {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    rgba(12, 18, 16, 0.94);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-owner-tools span {
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-owner-tools .button-secondary {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
  box-shadow: none;
}

html[data-theme="dark"] .missing-pet-owner-tools .button-ghost {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
  box-shadow: none;
}

html[data-theme="dark"] .missing-pet-owner-tools .button-secondary:hover,
html[data-theme="dark"] .missing-pet-owner-tools .button-ghost:hover {
  border-color: rgba(86, 207, 174, 0.36);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .cat-sitting-create-form,
html[data-theme="dark"] .cat-sitting-card,
html[data-theme="dark"] .cat-sitting-connection-panel,
html[data-theme="dark"] .missing-pet-manage-hero.is-dashboard,
html[data-theme="dark"] .missing-pet-result-panel,
html[data-theme="dark"] .missing-pet-owner-command-center,
html[data-theme="dark"] .cat-sitting-created-panel,
html[data-theme="dark"] .community-safety-panel,
html[data-theme="dark"] .community-dashboard-stats div,
html[data-theme="dark"] .community-dashboard-section {
  border-color: var(--border);
  background:
    radial-gradient(circle at 92% 0%, rgba(86, 207, 174, 0.08), transparent 34%),
    var(--surface);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .cat-sitting-type-toggle label,
html[data-theme="dark"] .cat-sitting-check-row label,
html[data-theme="dark"] .cat-sitting-form-guide span,
html[data-theme="dark"] .help-community-gateway.is-production,
html[data-theme="dark"] .help-community-entry-card,
html[data-theme="dark"] .help-community-entry-card em,
html[data-theme="dark"] .cat-sitting-private-panel,
html[data-theme="dark"] .cat-sitting-private-dl div,
html[data-theme="dark"] .cat-sitting-connection-card,
html[data-theme="dark"] .cat-sitting-search input,
html[data-theme="dark"] .cat-sitting-command-strip div,
html[data-theme="dark"] .cat-sitting-card-kicker > span:last-child,
html[data-theme="dark"] .cat-sitting-signal-row em,
html[data-theme="dark"] .cat-sitting-match-panel,
html[data-theme="dark"] .cat-sitting-connection-form input,
html[data-theme="dark"] .cat-sitting-connection-form textarea,
html[data-theme="dark"] .community-dashboard-card,
html[data-theme="dark"] .community-dashboard-thumb,
html[data-theme="dark"] .missing-pet-result-steps span,
html[data-theme="dark"] .missing-pet-manage-kicker span,
html[data-theme="dark"] .missing-pet-manage-nav a,
html[data-theme="dark"] .missing-pet-manage-hero-thumb,
html[data-theme="dark"] .missing-pet-manage-optional-panel,
html[data-theme="dark"] .missing-pet-manage-stat-row div,
html[data-theme="dark"] .missing-pet-manage-preview,
html[data-theme="dark"] .missing-pet-manage-panel-heading > span,
html[data-theme="dark"] .missing-pet-manage-advanced,
html[data-theme="dark"] .missing-pet-current-photo-set,
html[data-theme="dark"] .missing-pet-photo-workflow span,
html[data-theme="dark"] .missing-pet-photo-replace-form,
html[data-theme="dark"] .missing-pet-manage-photo-grid figure,
html[data-theme="dark"] .missing-pet-empty-state,
html[data-theme="dark"] .missing-pet-replace-summary,
html[data-theme="dark"] .missing-pet-sighting-summary-row span,
html[data-theme="dark"] .missing-pet-location-history,
html[data-theme="dark"] .missing-pet-location-timeline li,
html[data-theme="dark"] .missing-pet-duplicate-panel,
html[data-theme="dark"] .missing-pet-sighting-card,
html[data-theme="dark"] .missing-pet-sighting-photo-empty,
html[data-theme="dark"] .missing-pet-sighting-card-head em,
html[data-theme="dark"] .missing-pet-sighting-note-stack p,
html[data-theme="dark"] .missing-pet-sighting-contact,
html[data-theme="dark"] .missing-pet-sighting-upload-card,
html[data-theme="dark"] .missing-pet-sighting-methods article,
html[data-theme="dark"] .missing-pet-sighting-methods article > span,
html[data-theme="dark"] .missing-pet-sighting-extra,
html[data-theme="dark"] .missing-pet-sighting-location-card,
html[data-theme="dark"] .missing-pet-sighting-send-status,
html[data-theme="dark"] .missing-pet-sighting-extra-grid label,
html[data-theme="dark"] .missing-pet-sighting-context-field,
html[data-theme="dark"] .missing-pet-public-map-clue,
html[data-theme="dark"] .missing-pet-sighting-locked,
html[data-theme="dark"] .missing-pet-owner-command-card,
html[data-theme="dark"] .missing-pet-owner-command-topline > span,
html[data-theme="dark"] .missing-pet-poster-simple,
html[data-theme="dark"] .missing-pet-poster-simple-copy > span,
html[data-theme="dark"] .missing-pet-poster-more-files,
html[data-theme="dark"] .missing-pet-poster-file-row,
html[data-theme="dark"] .missing-pet-poster-file-icon,
html[data-theme="dark"] .missing-pet-poster-file-row em,
html[data-theme="dark"] .missing-pet-poster-remake-box,
html[data-theme="dark"] .missing-pet-poster-download-card,
html[data-theme="dark"] .missing-pet-poster-control-head,
html[data-theme="dark"] .missing-pet-poster-download-card > span,
html[data-theme="dark"] .missing-pet-poster-download-preview,
html[data-theme="dark"] .missing-pet-response-steps div,
html[data-theme="dark"] .missing-pet-responder-card {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-sighting-location-card {
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.08), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-location-history-head > span {
  border-color: rgba(120, 183, 255, 0.28);
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-location-map-board,
html[data-theme="dark"] .missing-pet-public-map-clue > div:first-child,
html[data-theme="dark"] .missing-pet-sighting-map-preview {
  border-color: rgba(120, 183, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(120, 183, 255, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(120, 183, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 28% 32%, rgba(86, 207, 174, 0.12), transparent 28%),
    radial-gradient(circle at 76% 72%, rgba(255, 200, 0, 0.1), transparent 32%),
    rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-leaflet-shell,
html[data-theme="dark"] .missing-pet-leaflet-empty {
  border-color: rgba(120, 183, 255, 0.18);
  background: rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-leaflet-shell .leaflet-control-attribution {
  background: rgba(7, 10, 9, 0.72);
  color: #cbd5e1;
}

html[data-theme="dark"] .missing-pet-leaflet-shell .leaflet-control-attribution a {
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-location-card > div > span {
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-public-map-clue span,
html[data-theme="dark"] .missing-pet-duplicate-panel > div:last-child strong {
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-closed-chip {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-duplicate-panel > div:last-child span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-location-card.is-ready {
  border-color: rgba(86, 207, 174, 0.3);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-location-card.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-main-field > span:first-child > span[aria-hidden="true"] {
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-main-field.is-ready {
  border-color: rgba(86, 207, 174, 0.3);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-main-field.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-location-inline {
  border-color: rgba(120, 183, 255, 0.18);
  background: rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-sighting-upload-card {
  border-color: rgba(255, 255, 255, 0.15);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-upload-card:hover,
html[data-theme="dark"] .missing-pet-sighting-upload-card.is-dragging {
  border-color: rgba(249, 115, 22, 0.42);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-upload-card.has-photo {
  border-color: rgba(86, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-upload-icon {
  background: rgba(249, 115, 22, 0.16);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-upload-card.has-photo .missing-pet-sighting-upload-icon {
  background: rgba(86, 207, 174, 0.16);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-upload-card em {
  border-color: rgba(249, 115, 22, 0.28);
  background: rgba(249, 115, 22, 0.12);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.1), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-manage-optional-panel > summary small {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground-muted);
}

html[data-theme="dark"] .missing-pet-manage-optional-panel > summary::after {
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel small {
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel.is-sent {
  border-color: rgba(86, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel.is-sent .missing-pet-sighting-submit-button {
  border-color: rgba(86, 207, 174, 0.7);
  background: #168464;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

html[data-theme="dark"] .missing-pet-sighting-submit-panel.is-sent small {
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup[open] {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup summary small,
html[data-theme="dark"] .missing-pet-sighting-followup-note {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-sighting-extra.is-followup[open] summary small,
html[data-theme="dark"] .missing-pet-sighting-extra.is-followup[open] .missing-pet-sighting-followup-note {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-sighting-extra-summary-copy strong {
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-sighting-extra-summary-copy em {
  color: var(--muted-foreground);
}

html[data-theme="dark"] .missing-pet-sighting-send-status > span {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-muted);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sending {
  border-color: rgba(249, 115, 22, 0.34);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sending > span {
  background: rgba(249, 115, 22, 0.14);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sent {
  border-color: rgba(86, 207, 174, 0.34);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.14), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-sent > span {
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-error {
  border-color: rgba(248, 113, 113, 0.34);
  background:
    linear-gradient(180deg, rgba(248, 113, 113, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-send-status.is-error > span {
  background: rgba(248, 113, 113, 0.14);
  color: #fecaca;
}

html[data-theme="dark"] .missing-pet-sighting-more-actions > summary,
html[data-theme="dark"] .missing-pet-sighting-more-actions > div {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.04)),
    rgba(22, 28, 25, 0.98);
}

html[data-theme="dark"] .missing-pet-sighting-more-actions > summary:hover,
html[data-theme="dark"] .missing-pet-sighting-more-actions[open] > summary {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.1), rgba(255, 255, 255, 0.045)),
    rgba(22, 28, 25, 0.98);
}

html[data-theme="dark"] .missing-pet-sighting-more-actions > div {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .missing-pet-sighting-more-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

html[data-theme="dark"] .missing-pet-sighting-hide-button {
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--text-muted);
}

html[data-theme="dark"] .missing-pet-sighting-danger-actions {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-sighting-danger-actions > summary {
  color: #fecaca;
}

html[data-theme="dark"] .missing-pet-sighting-action-panel {
  border-color: rgba(120, 183, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-action-panel.is-new {
  border-color: rgba(249, 115, 22, 0.3);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.13), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-action-panel.is-owner-contacted,
html[data-theme="dark"] .missing-pet-sighting-action-panel.is-reviewed {
  border-color: rgba(86, 207, 174, 0.28);
  background:
    linear-gradient(180deg, rgba(86, 207, 174, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-contact-list {
  border-color: rgba(120, 183, 255, 0.16);
  background: rgba(120, 183, 255, 0.08);
}

html[data-theme="dark"] .missing-pet-close-report-details {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-close-report-details > div {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-sighting-card.is-new {
  border-color: rgba(249, 115, 22, 0.36);
  background:
    linear-gradient(180deg, rgba(249, 115, 22, 0.14) 0%, rgba(255, 255, 255, 0.045) 46%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-current-photo-set {
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.08) 0%, rgba(255, 255, 255, 0.045) 100%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-replace-summary.is-ready {
  border-color: rgba(86, 207, 174, 0.3);
  background: rgba(86, 207, 174, 0.13);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-replace-summary.is-ready svg {
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-summary-row span.is-alert,
html[data-theme="dark"] .missing-pet-sighting-card-head em.is-new {
  border-color: rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.14);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-sighting-card-head em.is-owner-contacted {
  background: rgba(86, 207, 174, 0.14);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-card-head em.is-reviewed,
html[data-theme="dark"] .missing-pet-sighting-contact {
  background: rgba(120, 183, 255, 0.13);
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-sighting-main-field,
html[data-theme="dark"] .missing-pet-sighting-extra[open] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.045) 100%);
  border-color: rgba(255, 255, 255, 0.13);
}

html[data-theme="dark"] .missing-pet-sighting-step-arrow {
  color: rgba(255, 232, 137, 0.52);
}

html[data-theme="dark"] .missing-pet-sighting-methods article > span {
  background: rgba(255, 200, 0, 0.14);
  color: #ffe48a;
}

html[data-theme="dark"] .missing-pet-sighting-extra summary small {
  border-color: rgba(86, 207, 174, 0.3);
  background: rgba(86, 207, 174, 0.12);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-sighting-form input,
html[data-theme="dark"] .missing-pet-sighting-form textarea {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(7, 10, 9, 0.38);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

html[data-theme="dark"] .missing-pet-sighting-extra-grid label,
html[data-theme="dark"] .missing-pet-sighting-context-field {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.045));
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .missing-pet-date-picker button,
html[data-theme="dark"] .missing-pet-date-shortcuts button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-date-picker button {
  color: #ffe48a;
  background:
    linear-gradient(180deg, rgba(255, 200, 0, 0.14) 0%, rgba(255, 255, 255, 0.055) 100%);
}

html[data-theme="dark"] .missing-pet-date-picker button:hover,
html[data-theme="dark"] .missing-pet-date-shortcuts button:hover {
  border-color: rgba(255, 200, 0, 0.42);
  background: rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] .missing-pet-manage-status.is-active,
html[data-theme="dark"] .missing-pet-manage-status.is-sighting-reported,
html[data-theme="dark"] .missing-pet-owner-command-topline > span.is-alert,
html[data-theme="dark"] .missing-pet-manage-panel-heading > span.is-alert {
  border-color: rgba(249, 115, 22, 0.34);
  background: rgba(249, 115, 22, 0.13);
  color: #fed7aa;
}

html[data-theme="dark"] .missing-pet-manage-status.is-found {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .missing-pet-detail-photo {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    var(--surface-raised);
}

html[data-theme="dark"] .missing-pet-detail-photo-frame {
  border-color: rgba(255, 255, 255, 0.11);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    var(--surface-muted);
}

html[data-theme="dark"] .missing-pet-detail-photo-topline span {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-detail-photo-topline span:first-child {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .missing-pet-alert-help,
html[data-theme="dark"] .missing-pet-facts,
html[data-theme="dark"] .missing-pet-download-details,
html[data-theme="dark"] .missing-pet-contact-note {
  border-color: var(--border-soft);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .missing-pet-alert-help {
  border-left-color: #fbbf24;
}

html[data-theme="dark"] .missing-pet-facts div {
  border-color: var(--border-soft);
}

html[data-theme="dark"] .missing-pet-detail-photo .is-secondary {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: none;
}

html[data-theme="dark"] .cat-sitting-type-toggle label.is-active {
  border-color: rgba(86, 207, 174, 0.42);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
  box-shadow: 0 0 0 3px rgba(86, 207, 174, 0.08);
}

html[data-theme="dark"] .cat-sitting-status {
  color: #b9f1d9;
}

html[data-theme="dark"] .help-community-gateway.is-production {
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 200, 0, 0.12), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(86, 207, 174, 0.1), transparent 30%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .help-community-entry-card.is-primary {
  border-color: rgba(255, 200, 0, 0.28);
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 200, 0, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-panel,
html[data-theme="dark"] .community-my-missing-card,
html[data-theme="dark"] .community-my-missing-thumb {
  border-color: var(--border-soft);
  background: rgba(255, 255, 255, 0.055);
  color: var(--foreground);
}

html[data-theme="dark"] .community-my-missing-panel {
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-panel.is-account-summary {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(120, 183, 255, 0.1), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-head-actions {
  border-color: rgba(120, 183, 255, 0.2);
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .community-my-missing-head-actions > span,
html[data-theme="dark"] .community-my-missing-owner-chip {
  border-color: rgba(120, 183, 255, 0.28);
  background: rgba(120, 183, 255, 0.12);
  color: #bfdbfe;
}

html[data-theme="dark"] .community-my-missing-status {
  border-color: rgba(249, 115, 22, 0.32);
  background: rgba(249, 115, 22, 0.13);
  color: #fed7aa;
}

html[data-theme="dark"] .community-my-missing-status.is-sighting-reported {
  border-color: rgba(120, 183, 255, 0.28);
  background: rgba(120, 183, 255, 0.13);
  color: #bfdbfe;
}

html[data-theme="dark"] .community-my-missing-status.is-found {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

html[data-theme="dark"] .community-my-missing-status.is-closed {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.1);
  color: #cbd5e1;
}

html[data-theme="dark"] .help-community-card-label,
html[data-theme="dark"] .help-community-entry-card.is-primary .help-community-card-label {
  background: rgba(255, 200, 0, 0.12);
  color: #ffe48a;
}

html[data-theme="dark"] .help-community-card-icon {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .help-community-card-icon::after {
  background: rgba(255, 255, 255, 0.055);
}

html[data-theme="dark"] .help-community-card-icon-badge {
  border-color: rgba(23, 23, 23, 0.85);
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .help-community-card-icon.is-lost-pet {
  border-color: rgba(255, 200, 0, 0.24);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(135deg, rgba(255, 200, 0, 0.16), rgba(249, 115, 22, 0.08));
  color: #ffe48a;
}

html[data-theme="dark"] .help-community-card-icon.is-cat-sitting {
  border-color: rgba(86, 207, 174, 0.24);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(135deg, rgba(86, 207, 174, 0.14), rgba(120, 183, 255, 0.06));
  color: #b9f1d9;
}

html[data-theme="dark"] .help-community-card-icon.is-rescue-help {
  border-color: rgba(120, 183, 255, 0.24);
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.1), transparent 36%),
    linear-gradient(135deg, rgba(120, 183, 255, 0.14), rgba(86, 207, 174, 0.06));
  color: #bfdbfe;
}

html[data-theme="dark"] .missing-pet-result-steps span.is-ready,
html[data-theme="dark"] .missing-pet-owner-command-topline > span.is-ready,
html[data-theme="dark"] .missing-pet-manage-panel-heading > span.is-ready,
html[data-theme="dark"] .missing-pet-poster-simple-copy > span.is-ready,
html[data-theme="dark"] .missing-pet-poster-file-row.is-ready,
html[data-theme="dark"] .missing-pet-poster-download-card.is-ready,
html[data-theme="dark"] .community-dashboard-card em,
html[data-theme="dark"] .community-dashboard-room-list em {
  border-color: rgba(86, 207, 174, 0.24);
  background: rgba(86, 207, 174, 0.1);
  color: #b9f1d9;
}

@media (max-width: 820px) {
  .missing-pet-hero,
  .missing-pet-detail-hero,
  .missing-pet-manage-hero,
  .missing-pet-instructions,
  .missing-pet-owner-command-center,
  .cat-sitting-hero,
  .cat-sitting-detail-hero,
  .community-dashboard-hero,
  .missing-pet-inline-entry {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .cat-sitting-detail-photo {
    min-height: 320px;
  }

  .missing-pet-detail-photo-frame,
  .missing-pet-detail-photo .is-primary,
  .missing-pet-detail-photo .is-secondary,
  .missing-pet-detail-photo-placeholder {
    min-height: 300px;
  }

  .missing-pet-detail-photo-frame.has-secondary {
    grid-template-columns: 1fr;
  }

  .missing-pet-manage-hero.is-dashboard {
    grid-template-columns: 1fr;
  }

  .missing-pet-top-found-card {
    width: 100%;
    justify-self: stretch;
  }

  .missing-pet-manage-hero.is-dashboard .help-community-actions {
    justify-content: flex-start;
  }

  .missing-pet-quick-intro {
    grid-template-columns: 1fr;
  }

  .missing-pet-quick-points {
    justify-content: flex-start;
  }

  .missing-pet-photo-dropzone {
    grid-template-columns: 1fr;
  }

  .missing-pet-photo-dropzone .button {
    justify-content: center;
    width: 100%;
  }

  .missing-pet-directory-search {
    grid-template-columns: 1fr;
  }

  .missing-pet-guidance-panel,
  .missing-pet-time-grid,
  .missing-pet-public-map-clue,
  .missing-pet-sighting-extra.is-followup .missing-pet-form-grid,
  .missing-pet-sighting-location-inline,
  .missing-pet-sighting-quick-row,
  .missing-pet-sighting-methods,
  .missing-pet-response-steps,
  .missing-pet-poster-simple,
  .missing-pet-poster-simple-copy,
  .missing-pet-poster-file-row,
  .missing-pet-poster-remake-box,
  .missing-pet-poster-download-grid,
  .missing-pet-photo-workflow,
  .missing-pet-location-history-grid,
  .cat-sitting-type-toggle,
  .cat-sitting-form-grid,
  .cat-sitting-form-guide,
  .cat-sitting-search,
  .cat-sitting-private-dl,
  .community-dashboard-stats {
    grid-template-columns: 1fr;
  }

  .missing-pet-form-grid {
    grid-template-columns: 1fr;
  }

  .missing-pet-sighting-step-arrow {
    display: none;
  }

  .missing-pet-sighting-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .missing-pet-poster-simple-actions {
    justify-content: flex-start;
  }

  .missing-pet-poster-file-row em {
    justify-content: flex-start;
  }

  .missing-pet-poster-remake-box .button {
    width: 100%;
    justify-content: center;
  }

  .missing-pet-sighting-location-card.has-map {
    grid-template-columns: 1fr;
  }

  .missing-pet-sighting-map-preview {
    min-height: 140px;
  }

}

@media (max-width: 560px) {
  .missing-pet-detail-photo {
    padding: 10px;
  }

  .missing-pet-detail-photo-topline,
  .missing-pet-detail-photo-summary {
    align-items: start;
  }

  .missing-pet-detail-photo-topline {
    flex-wrap: wrap;
  }

  .missing-pet-detail-photo-summary {
    display: grid;
  }

  .missing-pet-detail-photo-summary small {
    max-width: none;
    text-align: left;
  }

  .missing-pet-detail-photo-frame,
  .missing-pet-detail-photo .is-primary,
  .missing-pet-detail-photo .is-secondary,
  .missing-pet-detail-photo-placeholder {
    min-height: 260px;
  }

  .missing-pet-manage-stat-row div {
    flex: 1 1 86px;
    min-width: 0;
  }

  .missing-pet-manage-panel-heading {
    display: grid;
  }

  .missing-pet-manage-photo-grid.has-multiple {
    grid-template-columns: 1fr;
  }

  .missing-pet-manage-photo-grid.has-multiple img {
    aspect-ratio: 4 / 3;
  }

  .missing-pet-sighting-card {
    grid-template-columns: 1fr;
  }

  .missing-pet-sighting-card img,
  .missing-pet-sighting-photo-empty {
    width: 100%;
    aspect-ratio: 16 / 10;
    max-height: 220px;
    object-fit: cover;
  }
}

.press-page {
  overflow-x: clip;
  padding-top: 14px;
  background: var(--background);
}

.press-page :where(.container, .press-section, .section-header, .press-language-control, .press-language-switch, .press-language-dropdown, .press-hero-card, .press-hero-copy, .press-hero-actions, .press-hero-panel, .press-hero-pitch, .press-cat-badge-expand, .press-all-cats-disclosure, .press-opener-card, .press-action-card, .press-angle-card, .press-topic-card, .press-coverage-card, .press-video-record-card, .press-fact-card, .press-case-card, .press-feature-cat-card, .press-short-card, .press-copy-card, .press-asset-card, .press-field-photo-asset) {
  min-width: 0;
}

.press-language-control {
  grid-column: 1 / -1;
  justify-self: end;
  margin-bottom: -10px;
  z-index: 2;
}

.press-language-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 22px rgba(26, 37, 54, 0.06);
}

.press-language-switch a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--muted-foreground);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.press-language-switch a {
  color: var(--foreground);
  transition:
    background 120ms ease,
    box-shadow 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
}

.press-language-switch a.is-active {
  background: rgba(15, 23, 42, 0.08);
  color: var(--foreground);
}

.press-language-switch a.is-pending,
.press-language-dropdown a.is-pending {
  background: rgba(86, 207, 174, 0.18);
  box-shadow: inset 0 0 0 1px rgba(86, 207, 174, 0.28);
  color: var(--foreground);
}

.press-language-switch a.is-dimmed,
.press-language-dropdown a.is-dimmed {
  opacity: 0.58;
}

.press-language-spinner {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.72;
  animation: press-language-spin 720ms linear infinite;
}

@keyframes press-language-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .press-language-spinner {
    animation: none;
  }
}

.press-language-dropdown {
  display: none;
  position: relative;
}

.press-language-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 10px 22px rgba(26, 37, 54, 0.06);
  cursor: pointer;
  list-style: none;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.press-language-dropdown summary::-webkit-details-marker {
  display: none;
}

.press-language-dropdown summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.62;
  transition: transform 120ms ease;
}

.press-language-dropdown[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.press-language-dropdown summary.is-loading {
  border-color: rgba(86, 207, 174, 0.28);
  background: rgba(86, 207, 174, 0.12);
}

.press-language-dropdown summary.is-loading::after {
  display: none;
}

.press-language-dropdown div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: min(190px, calc(100vw - 44px));
  padding: 6px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 34px rgba(26, 37, 54, 0.12);
}

.press-language-dropdown a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 13px;
  color: var(--foreground);
  font-size: 0.86rem;
  font-weight: 900;
  transition:
    background 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease;
}

.press-language-dropdown a.is-active {
  background: rgba(15, 23, 42, 0.08);
}

.site-main:has(.press-page) {
  background: var(--background);
}

.press-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.7fr);
  align-items: stretch;
  gap: 22px;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(11, 105, 183, 0.08), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
}

.press-hero-copy {
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
}

.press-hero-copy h1 {
  max-width: 18ch;
  font-size: clamp(2.6rem, 4.45vw, 4.35rem);
  line-height: 1;
  white-space: pre-line;
}

.press-hero-ask {
  max-width: 62ch;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.82));
  color: var(--foreground);
  font-size: 0.98rem;
  font-weight: 780;
  line-height: 1.55;
  box-shadow: 0 12px 24px rgba(26, 37, 54, 0.06);
}

.press-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.press-hero-actions .button {
  min-height: 42px;
}

.press-page:lang(ko) .press-hero-copy h1,
.press-page:lang(ja) .press-hero-copy h1,
.press-page:lang(zh) .press-hero-copy h1 {
  max-width: 13ch;
  font-size: clamp(2.35rem, 4.3vw, 4.2rem);
  line-height: 1.04;
}

.press-page:lang(ko) h1,
.press-page:lang(ko) h2,
.press-page:lang(ko) h3,
.press-page:lang(ja) h1,
.press-page:lang(ja) h2,
.press-page:lang(ja) h3,
.press-page:lang(zh) h1,
.press-page:lang(zh) h2,
.press-page:lang(zh) h3 {
  line-break: loose;
}

.press-page .section-header {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.press-page .section-header h2 {
  max-width: none;
  text-wrap: normal;
}

.press-page .section-header > div:first-child {
  display: grid;
  gap: 8px;
}

.press-page .section-header + :where(.press-angle-grid, .press-topics-layout, .press-feature-cat-grid, .press-short-grid, .press-copy-grid, .press-asset-grid, .press-coverage-card, .press-fact-grid, .press-case-grid) {
  margin-top: 4px;
}

.press-hero-panel {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.94));
  box-shadow: 0 16px 34px rgba(26, 37, 54, 0.08);
}

.press-hero-image {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: var(--surface-soft);
}

.press-hero-image img,
.press-hero-carousel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-hero-carousel {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.press-hero-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 520ms ease, transform 1800ms ease;
}

.press-hero-carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.press-hero-carousel-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.press-hero-carousel-controls button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.58);
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
  backdrop-filter: blur(12px);
}

.press-hero-carousel-controls button:hover,
.press-hero-carousel-controls button:focus-visible {
  background: rgba(15, 23, 42, 0.74);
}

.press-hero-carousel-dots {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  max-width: calc(100% - 120px);
  flex-wrap: wrap;
  gap: 6px;
}

.press-hero-carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
}

.press-hero-carousel-dots button[aria-current="true"] {
  width: 18px;
  background: #fff;
}

.press-hero-mark {
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 32px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(26, 37, 54, 0.08);
}

.press-hero-mark img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.press-hero-facts {
  display: grid;
  gap: 8px;
}

.press-hero-facts span {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.1;
}

.press-hero-pitch {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(46, 64, 87, 0.1);
}

.press-hero-pitch small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
}

.press-hero-pitch strong {
  color: var(--foreground);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  font-weight: 950;
  line-height: 1.18;
}

.press-hero-pitch ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.press-hero-pitch li {
  position: relative;
  padding-left: 14px;
  color: var(--muted-foreground);
  font-size: 0.83rem;
  font-weight: 760;
  line-height: 1.35;
}

.press-hero-pitch li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #0b69b7;
  content: "";
}

.press-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
  display: grid;
  gap: 18px;
}

.press-opener-section {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: stretch;
}

.press-opener-card,
.press-action-card,
.press-angle-card {
  min-width: 0;
  border: 1px solid rgba(46, 64, 87, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-card);
}

.press-opener-card {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: clamp(22px, 4vw, 34px);
  border-radius: 28px;
}

.press-opener-card h2 {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.press-opener-card p:last-child {
  max-width: 66ch;
  color: var(--muted-foreground);
  font-size: 1rem;
  line-height: 1.65;
}

.press-action-grid {
  display: grid;
  gap: 12px;
}

.press-action-card {
  display: grid;
  gap: 7px;
  padding: 18px;
  border-radius: 22px;
}

.press-action-card strong {
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
}

.press-action-card p {
  color: var(--muted-foreground);
  font-size: 0.91rem;
  line-height: 1.52;
}

.press-reporter-section {
  gap: 18px;
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(86, 207, 174, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.94));
  box-shadow: var(--shadow-soft);
}

.press-fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.press-fact-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 10px;
  min-height: 100%;
  padding: 17px 16px 16px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(26, 37, 54, 0.055);
  text-align: center;
}

.press-fact-card span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
  text-wrap: balance;
}

.press-fact-card strong {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.98;
  text-align: center;
}

.press-fact-card p {
  max-width: 28ch;
  margin: 0 auto;
  color: var(--muted-foreground);
  font-size: 0.86rem;
  line-height: 1.48;
  text-align: center;
}

.press-case-section {
  display: grid;
  gap: 14px;
  padding-top: 6px;
}

.press-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.press-case-card {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  color: var(--foreground);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-case-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-case-image {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--surface-soft);
}

.press-case-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-case-copy {
  display: grid;
  align-content: center;
  gap: 12px;
  min-width: 0;
  padding: clamp(18px, 3vw, 26px);
}

.press-case-kicker {
  width: fit-content;
  padding: 6px 9px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--foreground);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.1;
}

.press-case-copy > strong {
  color: var(--foreground);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 950;
  line-height: 1.08;
}

.press-case-line {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding-top: 12px;
  border-top: 1px solid rgba(46, 64, 87, 0.1);
}

.press-case-line em {
  color: var(--foreground);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.press-case-line span {
  color: var(--muted-foreground);
  font-size: 0.95rem;
  line-height: 1.55;
}

.press-angle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.press-angle-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
}

.press-angle-card span,
.press-angle-card small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.press-angle-card h3 {
  font-size: 1.06rem;
  line-height: 1.16;
}

.press-angle-card p {
  color: var(--muted-foreground);
  font-size: 0.91rem;
  line-height: 1.52;
}

.press-angle-card small {
  align-self: end;
  min-height: 28px;
  padding-top: 8px;
  border-top: 1px solid rgba(46, 64, 87, 0.1);
  text-transform: none;
}

.press-topic-grid,
.press-copy-grid,
.press-asset-grid,
.press-short-grid {
  display: grid;
  gap: 14px;
}

.press-topic-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.press-topics-layout {
  display: grid;
  gap: 18px;
}

.press-topics-section > .section-header {
  grid-template-columns: minmax(0, 1fr);
}

.press-topic-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
}

.press-topic-icon {
  position: relative;
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.78), transparent 32%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.46));
  color: var(--foreground);
  box-shadow: 0 14px 30px rgba(46, 64, 87, 0.1);
}

.press-topic-icon::after {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  opacity: 0.18;
}

.press-topic-icon-field {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.8), transparent 34%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(11, 105, 183, 0.14));
  color: #2f7f68;
}

.press-topic-icon-care {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(135deg, rgba(240, 122, 117, 0.18), rgba(185, 79, 73, 0.12));
  color: #b84f49;
}

.press-topic-icon-community {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
    linear-gradient(135deg, rgba(102, 154, 214, 0.2), rgba(137, 203, 188, 0.3));
  color: #3f6f9f;
}

.press-topic-icon svg {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
}

.press-topic-card h3 {
  font-size: 1.04rem;
  line-height: 1.16;
}

.press-topic-card p {
  font-size: 0.92rem;
  line-height: 1.55;
}

.press-coverage-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
}

.press-coverage-image {
  position: relative;
  display: block;
  min-height: 100%;
  background: var(--surface-soft);
}

.press-coverage-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-coverage-copy {
  display: grid;
  align-content: center;
  gap: 16px;
  min-width: 0;
  padding: clamp(22px, 4vw, 34px);
}

.press-coverage-copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.06;
}

.press-secondary-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.press-secondary-link {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 26px rgba(26, 37, 54, 0.06);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-secondary-link:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-card);
}

.press-secondary-link span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.press-secondary-link strong {
  color: var(--foreground);
  font-size: 0.96rem;
  line-height: 1.24;
}

.press-video-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.press-video-record-card {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-soft);
}

.press-video-embed {
  width: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.press-video-embed .lazy-embed-overlay {
  justify-content: center;
}

.press-video-record-meta {
  position: absolute;
  inset: 12px 12px auto;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  pointer-events: none;
}

.press-video-record-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(12, 16, 24, 0.58);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(12px);
}

.press-cat-badge-expand {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.13);
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.96));
  box-shadow: var(--shadow-soft);
}

.press-all-cats-disclosure {
  border: 0;
  background: transparent;
}

.press-all-cats-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  padding: 10px clamp(18px, 3vw, 24px) clamp(18px, 3vw, 24px);
  cursor: pointer;
  list-style: none;
}

.press-all-cats-disclosure summary::-webkit-details-marker {
  display: none;
}

.press-disclosure-action {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 9px 14px;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--foreground);
  font-size: 0.78rem;
  font-weight: 950;
  line-height: 1.1;
  box-shadow: 0 8px 18px rgba(26, 37, 54, 0.06);
  transition:
    border-color 120ms ease,
    background 120ms ease,
    transform 120ms ease;
}

.press-all-cats-disclosure summary:hover .press-disclosure-action {
  transform: translateY(-1px);
  border-color: rgba(86, 207, 174, 0.38);
  background: rgba(240, 255, 249, 0.96);
}

.press-disclosure-close {
  display: none;
}

.press-all-cats-disclosure[open] .press-disclosure-open {
  display: none;
}

.press-all-cats-disclosure[open] .press-disclosure-close {
  display: inline;
}

.press-cat-badge-expand:has(.press-all-cats-disclosure[open]) .press-cat-badge-grid-preview {
  display: none;
}

.press-all-cats-body {
  display: grid;
  gap: 14px;
  padding: clamp(16px, 2vw, 20px) clamp(18px, 3vw, 24px) clamp(22px, 3vw, 28px);
  border-top: 1px solid rgba(46, 64, 87, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.16));
}

.press-cat-badge-grid-all {
  padding: 2px 0;
}

.press-cat-badge-grid-preview {
  max-height: 202px;
  overflow: hidden;
  padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 24px) 4px;
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}

.press-cat-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.press-cat-badge {
  display: inline-flex;
  max-width: 214px;
  min-width: min(100%, 166px);
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 6px;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--foreground);
  cursor: default;
  box-shadow: 0 10px 22px rgba(26, 37, 54, 0.055);
}

.press-cat-badge:hover {
  transform: none;
}

.press-cat-badge-static {
  cursor: default;
}

.press-cat-badge-static:hover {
  transform: none;
}

.press-cat-badge-image {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--surface-soft);
  box-shadow: 0 0 0 1px rgba(46, 64, 87, 0.13);
}

.press-cat-badge-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-cat-badge > span:last-child {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.press-cat-badge strong,
.press-cat-badge small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.press-cat-badge strong {
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 900;
}

.press-cat-badge small {
  color: var(--muted-foreground);
  font-size: 0.68rem;
  font-weight: 800;
}

.press-feature-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.press-feature-cat-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.13);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-feature-cat-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-feature-cat-image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: var(--surface-soft);
}

.press-feature-cat-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-feature-cat-copy {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.press-feature-cat-copy small {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.press-feature-cat-copy strong {
  color: var(--foreground);
  font-size: 1.05rem;
  font-weight: 950;
}

.press-feature-cat-copy span {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.45;
}

.press-short-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.press-short-card {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-card);
  color: var(--foreground);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-short-card-featured {
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.05),
    var(--shadow-soft);
}

.press-short-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-short-image {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-soft);
}

.press-short-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.press-short-copy {
  display: grid;
  gap: 7px;
  padding: 16px;
}

.press-short-copy small,
.press-short-copy span {
  color: var(--muted-foreground);
  font-size: 0.72rem;
  font-weight: 850;
}

.press-short-copy strong {
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.18;
}

.press-copy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.press-copy-card {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.92));
  box-shadow: var(--shadow-card);
}

.press-copy-card blockquote {
  margin: 0;
  color: var(--foreground);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 850;
  line-height: 1.38;
}

.press-asset-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.press-asset-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  align-items: center;
  gap: 18px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-card);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-asset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-asset-card span {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.press-asset-card strong {
  display: block;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.press-asset-card small {
  display: block;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

.press-asset-card em {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--foreground);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.1;
  white-space: nowrap;
}

.press-field-photo-asset {
  grid-column: 1 / -1;
}

.press-field-photo-asset summary {
  cursor: pointer;
  list-style: none;
}

.press-field-photo-asset summary::-webkit-details-marker {
  display: none;
}

.press-asset-card em .press-field-photo-open,
.press-asset-card em .press-field-photo-close {
  display: inline;
}

.press-asset-card em .press-field-photo-close {
  display: none;
}

.press-field-photo-asset[open] .press-asset-card em .press-field-photo-open {
  display: none;
}

.press-field-photo-asset[open] .press-asset-card em .press-field-photo-close {
  display: inline;
}

.press-image-asset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.press-image-asset-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(46, 64, 87, 0.12);
  border-radius: 18px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-card);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.press-image-asset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: var(--shadow-soft);
}

.press-image-asset-card img {
  object-fit: cover;
}

.press-image-asset-card span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 950;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.press-contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgba(46, 64, 87, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(11, 105, 183, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow: var(--shadow-soft);
}

.press-contact-card > div:first-child {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.press-contact-card h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.4rem);
  line-height: 1.08;
}

.press-contact-card .button-row {
  justify-content: flex-end;
}

html[data-theme="dark"] .press-hero-card {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.1), transparent 35%),
    linear-gradient(135deg, rgba(23, 29, 26, 0.96), rgba(27, 34, 29, 0.96));
}

html[data-theme="dark"] .press-page {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 28rem),
    linear-gradient(180deg, #111714 0%, #151916 48%, #101411 100%);
}

html[data-theme="dark"] .site-main:has(.press-page) {
  background:
    radial-gradient(circle at top right, rgba(86, 207, 174, 0.08), transparent 28rem),
    linear-gradient(180deg, #111714 0%, #151916 48%, #101411 100%);
}

html[data-theme="dark"] .press-hero-panel,
html[data-theme="dark"] .press-language-dropdown summary,
html[data-theme="dark"] .press-language-dropdown div,
html[data-theme="dark"] .press-language-switch,
html[data-theme="dark"] .press-cat-badge-expand,
html[data-theme="dark"] .press-opener-card,
html[data-theme="dark"] .press-action-card,
html[data-theme="dark"] .press-angle-card,
html[data-theme="dark"] .press-topic-card,
html[data-theme="dark"] .press-coverage-card,
html[data-theme="dark"] .press-video-record-card,
html[data-theme="dark"] .press-reporter-section,
html[data-theme="dark"] .press-fact-card,
html[data-theme="dark"] .press-case-card,
html[data-theme="dark"] .press-secondary-link,
html[data-theme="dark"] .press-cat-badge,
html[data-theme="dark"] .press-feature-cat-card,
html[data-theme="dark"] .press-short-card,
html[data-theme="dark"] .press-copy-card,
html[data-theme="dark"] .press-asset-card,
html[data-theme="dark"] .press-image-asset-card,
html[data-theme="dark"] .press-contact-card {
  border-color: var(--border);
  background: rgba(23, 29, 26, 0.92);
  box-shadow: var(--shadow-card);
}

html[data-theme="dark"] .press-language-switch a.is-pending,
html[data-theme="dark"] .press-language-dropdown a.is-pending,
html[data-theme="dark"] .press-language-dropdown summary.is-loading {
  background: rgba(86, 207, 174, 0.16);
  box-shadow: inset 0 0 0 1px rgba(86, 207, 174, 0.24);
}

html[data-theme="dark"] .press-short-card-featured {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(23, 29, 26, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    var(--shadow-card);
}

html[data-theme="dark"] .press-hero-ask {
  border-color: var(--border);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035));
}

html[data-theme="dark"] .press-all-cats-disclosure {
  background: transparent;
}

html[data-theme="dark"] .press-all-cats-body {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}

html[data-theme="dark"] .press-all-cats-disclosure summary:hover .press-disclosure-action {
  border-color: rgba(86, 207, 174, 0.32);
  background: rgba(86, 207, 174, 0.1);
}

html[data-theme="dark"] .press-hero-mark {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .press-disclosure-action {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .press-hero-image,
html[data-theme="dark"] .press-case-image,
html[data-theme="dark"] .press-feature-cat-image,
html[data-theme="dark"] .press-short-image {
  background: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .press-hero-facts span,
html[data-theme="dark"] .press-topic-icon,
html[data-theme="dark"] .press-asset-card em {
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.07);
  color: var(--foreground);
}

html[data-theme="dark"] .press-hero-pitch {
  border-top-color: var(--border);
}

html[data-theme="dark"] .press-hero-pitch li::before {
  background: #56cfae;
}

html[data-theme="dark"] .press-topic-icon {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .press-topic-icon-field {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(93, 168, 132, 0.22), rgba(59, 130, 246, 0.13));
  color: #96d6bc;
}

html[data-theme="dark"] .press-topic-icon-care {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(255, 139, 130, 0.18), rgba(185, 79, 73, 0.12));
  color: #ffb6ad;
}

html[data-theme="dark"] .press-topic-icon-community {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(119, 169, 234, 0.2), rgba(120, 210, 190, 0.13));
  color: #a9cfff;
}

html[data-theme="dark"] .press-page :where(.eyebrow, .meta-label) {
  color: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .press-cat-badge-image {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px var(--border);
}

@media (max-width: 1080px) {
  .press-angle-grid,
  .press-feature-cat-grid,
  .press-fact-grid,
  .press-topic-grid,
  .press-short-grid,
  .press-video-record-grid,
  .press-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-contact-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-contact-card .button-row {
    justify-content: flex-start;
  }

  .press-hero-actions .button {
    flex: 1 1 180px;
  }
}

@media (max-width: 820px) {
  .press-hero-card,
  .press-opener-section,
  .press-coverage-card,
  .press-case-card,
  .press-secondary-coverage,
  .press-video-record-grid,
  .press-action-grid,
  .press-angle-grid,
  .press-fact-grid,
  .press-feature-cat-grid,
  .press-copy-grid,
  .press-topic-grid,
  .press-short-grid,
  .press-asset-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .press-hero-copy h1 {
    max-width: 100%;
  }

  .press-hero-card {
    gap: 16px;
  }

  .press-language-control {
    justify-self: start;
    margin-bottom: -6px;
  }

  .press-hero-panel {
    align-content: start;
  }

  .press-hero-image {
    min-height: 220px;
  }

  .press-coverage-image {
    aspect-ratio: 4 / 3;
    min-height: 230px;
  }
}

@media (max-width: 520px) {
  .press-page {
    padding-top: 6px;
  }

  .press-page .container {
    width: min(var(--content-max), calc(100% - 20px));
    gap: 14px;
  }

  .press-hero-copy h1 {
    max-width: 100%;
  }

  .press-hero-card,
  .press-opener-card,
  .press-action-card,
  .press-angle-card,
  .press-fact-card,
  .press-topic-card,
  .press-copy-card,
  .press-asset-card,
  .press-contact-card {
    padding: 14px;
  }

  .press-hero-card {
    border-radius: 24px;
  }

  .press-hero-copy {
    gap: 10px;
  }

  .press-hero-copy h1 {
    font-size: clamp(2.18rem, 11.4vw, 2.86rem);
    line-height: 0.98;
  }

  .press-hero-card .hero-lead {
    font-size: 0.9rem;
    line-height: 1.42;
  }

  .press-hero-ask {
    display: none;
  }

  .press-hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .press-hero-panel {
    gap: 9px;
    padding: 10px;
    border-radius: 20px;
  }

  .press-hero-image {
    min-height: 0;
    aspect-ratio: 16 / 7;
    border-radius: 18px;
  }

  .press-hero-facts,
  .press-hero-pitch ul {
    display: none;
  }

  .press-hero-pitch {
    padding-top: 0;
    border-top: 0;
  }

  .press-hero-pitch small {
    font-size: 0.6rem;
    line-height: 1.18;
  }

  .press-hero-pitch strong {
    font-size: 0.88rem;
    line-height: 1.22;
  }

  .press-hero-carousel-controls {
    right: 10px;
    bottom: 10px;
  }

  .press-hero-carousel-controls button {
    width: 32px;
    height: 32px;
  }

  .press-hero-carousel-dots {
    bottom: 14px;
    left: 12px;
    max-width: calc(100% - 106px);
  }

  .press-language-control {
    justify-self: stretch;
    margin-bottom: -4px;
  }

  .press-language-switch {
    display: none;
  }

  .press-language-dropdown {
    display: block;
  }

  .press-all-cats-disclosure summary {
    justify-content: stretch;
  }

  .press-disclosure-action {
    width: 100%;
  }

  .press-page:lang(ko) .press-hero-copy h1,
  .press-page:lang(ja) .press-hero-copy h1,
  .press-page:lang(zh) .press-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(2.18rem, 10.5vw, 2.9rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
  }

  .press-page:lang(ko) .section-header h2,
  .press-page:lang(ko) .press-opener-card h2,
  .press-page:lang(ko) .press-contact-card h2,
  .press-page:lang(ja) .section-header h2,
  .press-page:lang(ja) .press-opener-card h2,
  .press-page:lang(ja) .press-contact-card h2,
  .press-page:lang(zh) .section-header h2,
  .press-page:lang(zh) .press-opener-card h2,
  .press-page:lang(zh) .press-contact-card h2 {
    font-size: clamp(1.75rem, 7.4vw, 2.22rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  .press-disclosure-action {
    width: 100%;
  }

  .press-page h1,
  .press-page h2,
  .press-page h3,
  .press-page p,
  .press-page strong,
  .press-page span,
  .press-page small,
  .press-page blockquote {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .press-page .button {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.18;
  }

  .press-hero-facts span {
    width: 100%;
    white-space: normal;
  }

  .press-section {
    gap: 14px;
  }

  .press-page .section-header {
    gap: 10px;
  }

  .press-page .section-header > div:first-child {
    gap: 6px;
  }

  .press-page .section-header + :where(.press-angle-grid, .press-topics-layout, .press-feature-cat-grid, .press-short-grid, .press-video-record-grid, .press-copy-grid, .press-asset-grid, .press-coverage-card, .press-fact-grid, .press-case-grid) {
    margin-top: 2px;
  }

  .press-coverage-card {
    border-radius: 22px;
  }

  .press-coverage-copy {
    gap: 12px;
    padding: 18px;
  }

  .press-coverage-copy h2 {
    font-size: clamp(1.48rem, 8vw, 2rem);
    line-height: 1.08;
  }

  .press-coverage-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .press-reporter-section {
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
  }

  .press-case-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .press-case-copy {
    padding: 16px;
  }

  .press-case-line {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }

  .press-cat-badge {
    flex: 1 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-width: 0;
    gap: 7px;
    padding: 5px 8px 5px 5px;
  }

  .press-cat-badge-image {
    width: 36px;
    height: 36px;
  }

  .press-cat-badge strong {
    font-size: 0.78rem;
  }

  .press-cat-badge small {
    font-size: 0.62rem;
  }

  .press-cat-badge-grid-preview {
    max-height: 164px;
    padding-top: 16px;
    mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  }

  .press-all-cats-body {
    padding-inline: 14px;
  }

  .press-feature-cat-card,
  .press-short-card {
    padding: 0;
    border-radius: 20px;
  }

  .press-feature-cat-copy,
  .press-short-copy {
    padding: 13px;
  }

  .press-feature-cat-copy span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .press-short-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .press-short-image {
    aspect-ratio: 3 / 4;
  }

  .press-short-copy {
    gap: 5px;
  }

  .press-short-copy strong {
    font-size: 0.82rem;
    line-height: 1.15;
  }

  .press-short-copy small,
  .press-short-copy span {
    font-size: 0.66rem;
  }

  .lazy-embed-overlay {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }

  .lazy-embed-play {
    min-height: 44px;
    padding-right: 14px;
  }

  .lazy-embed-play-icon {
    width: 30px;
    height: 30px;
  }

  .lazy-embed-link {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 0.74rem;
  }

  .press-copy-card blockquote {
    font-size: 0.98rem;
    line-height: 1.42;
  }

  .press-asset-card {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 14px;
  }

  .press-asset-card em {
    align-self: flex-start;
  }

  .press-image-asset-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .press-contact-card {
    border-radius: 24px;
  }

  .press-contact-card .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .press-contact-card .button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 360px) {
  .press-cat-badge {
    flex-basis: 100%;
    max-width: 100%;
  }

  .press-short-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes admin-studio-card-sheen {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}

@keyframes admin-studio-looks-good-sweep {
  0%,
  44% {
    transform: translateX(-30%) skewX(-12deg);
    opacity: 0;
  }
  55% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(345%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes admin-studio-card-working-sweep {
  0% {
    transform: translateX(0) skewX(-12deg);
    opacity: 0;
  }
  18% {
    opacity: 0.72;
  }
  72% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(420%) skewX(-12deg);
    opacity: 0;
  }
}

@keyframes admin-studio-character-card-working-sweep {
  0% {
    transform: translateX(-86%);
    opacity: 0;
  }
  15% {
    opacity: 0.72;
  }
  70% {
    opacity: 0.72;
  }
  100% {
    transform: translateX(86%);
    opacity: 0;
  }
}

@keyframes admin-studio-card-working-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 80%, transparent),
      0 12px 28px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 7%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--studio-admin-surface-strong, #ffffff) 80%, transparent),
      0 15px 34px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent);
  }
}

@keyframes studio-mini-card-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes admin-studio-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes admin-studio-selected-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 10%, transparent),
      0 16px 34px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 13%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 15%, transparent),
      0 21px 44px color-mix(in srgb, var(--studio-admin-accent, #2563eb) 18%, transparent);
  }
}

@keyframes admin-studio-selected-sheen {
  0% {
    transform: translateX(-78%);
    opacity: 0;
  }
  18% {
    opacity: 0.52;
  }
  62% {
    opacity: 0.52;
  }
  100% {
    transform: translateX(78%);
    opacity: 0;
  }
}

@keyframes admin-studio-ready-action-pulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.025);
  }
}

@keyframes admin-studio-ready-arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
}

@keyframes admin-studio-working-dot {
  0%,
  80%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }
  36% {
    opacity: 0.9;
    transform: translateY(-5px);
  }
}

@keyframes admin-studio-working-sweep {
  0% {
    transform: translateX(-45%);
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(45%);
    opacity: 0.35;
  }
}

@keyframes studio-episode-finish-card-progress {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 180% 50%;
  }
}

@keyframes studio-command-shimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 220% 50%;
  }
}

.is-spinning {
  animation: studio-spin 850ms linear infinite;
}

@keyframes studio-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes studio-card-sweep {
  0% {
    transform: translateX(-45%) skewX(-10deg);
    opacity: 0;
  }
  16% {
    opacity: 0.95;
  }
  100% {
    transform: translateX(350%) skewX(-10deg);
    opacity: 0;
  }
}

@keyframes studio-card-processing-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(96, 165, 250, 0.2),
      0 22px 70px rgba(37, 99, 235, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(147, 197, 253, 0.44),
      0 26px 80px rgba(37, 99, 235, 0.3);
  }
}

@keyframes studio-mini-loading-sweep {
  to {
    transform: translateX(100%);
  }
}

@keyframes memoryHallEnterPulse {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.96) rotate(0deg);
  }
  50% {
    opacity: 0.76;
    transform: scale(1.04) rotate(8deg);
  }
}

@keyframes memorial-route-state-breathe {
  0%,
  100% {
    opacity: 0.32;
  }

  50% {
    opacity: 1;
  }
}

@keyframes memorialRoomArrivalCopy {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes memorialRoomArrivalBreath {
  0%,
  100% {
    opacity: 0.32;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-1px);
  }
}

@keyframes memorialPhotoHallBridgeVeil {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  72% {
    opacity: 0.96;
  }

  100% {
    opacity: 0;
  }
}

@keyframes memorialPhotoHallBridgeCard {
  0% {
    opacity: 0;
    filter: blur(12px) saturate(1.22) brightness(1.24);
    transform:
      translateY(34px)
      scale(0.68)
      rotate(-4deg);
  }

  30% {
    opacity: 1;
    filter: blur(0) saturate(1.18) brightness(1.22);
    transform:
      translateY(-12px)
      scale(1.08)
      rotate(0deg);
  }

  66% {
    opacity: 1;
    filter: blur(0) saturate(1.06) brightness(1.08);
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }

  100% {
    opacity: 0;
    filter: blur(10px) saturate(0.98) brightness(0.92);
    transform:
      translateY(-26px)
      scale(1.3)
      rotate(0deg);
  }
}

@keyframes memorialPhotoHallBridgePath {
  0% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(0.18);
  }

  30% {
    opacity: 0.74;
    transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(0.88);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) rotate(var(--memorial-photo-hall-bridge-path-rotate)) scaleX(1.16);
  }
}

@keyframes memorialPhotoHallBridgeEcho {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(0.92) brightness(0.72);
    transform:
      translate(-50%, -50%)
      rotate(var(--memorial-photo-hall-bridge-echo-rotate))
      scale(calc(var(--memorial-photo-hall-bridge-echo-scale) * 0.32));
  }

  30% {
    opacity: 0.78;
    filter: blur(0.5px) saturate(1.16) brightness(1.12);
    transform:
      translate(-50%, -50%)
      rotate(var(--memorial-photo-hall-bridge-echo-rotate))
      scale(var(--memorial-photo-hall-bridge-echo-scale));
  }

  70% {
    opacity: 0.38;
    filter: blur(0.2px) saturate(1.04) brightness(1);
    transform:
      translate(-50%, -54%)
      rotate(calc(var(--memorial-photo-hall-bridge-echo-rotate) * 0.5))
      scale(calc(var(--memorial-photo-hall-bridge-echo-scale) * 0.88));
  }

  100% {
    opacity: 0;
    filter: blur(7px) saturate(0.86) brightness(0.82);
    transform:
      translate(-50%, -68%)
      rotate(0deg)
      scale(calc(var(--memorial-photo-hall-bridge-echo-scale) * 0.56));
  }
}

@keyframes memorialPhotoRoomArrivalCompanionSettle {
  0% {
    opacity: 0;
    filter: blur(9px) saturate(0.86) brightness(0.68);
    transform:
      translate(-50%, -32%)
      rotate(calc(var(--memorial-photo-arrival-companion-rotate) * 1.5))
      scale(calc(var(--memorial-photo-arrival-companion-scale) * 0.24));
  }

  28% {
    opacity: 0.62;
    filter: blur(0.6px) saturate(1.12) brightness(1.04);
    transform:
      translate(-50%, -50%)
      rotate(var(--memorial-photo-arrival-companion-rotate))
      scale(var(--memorial-photo-arrival-companion-scale));
  }

  66% {
    opacity: 0.34;
    filter: blur(0.3px) saturate(1.02) brightness(0.96);
    transform:
      translate(-50%, -52%)
      rotate(calc(var(--memorial-photo-arrival-companion-rotate) * 0.6))
      scale(calc(var(--memorial-photo-arrival-companion-scale) * 0.92));
  }

  100% {
    opacity: 0;
    filter: blur(6px) saturate(0.88) brightness(0.78);
    transform:
      translate(-50%, -62%)
      rotate(0deg)
      scale(calc(var(--memorial-photo-arrival-companion-scale) * 0.56));
  }
}

@keyframes memorialPhotoHallBridgeCoverReceive {
  0% {
    filter: saturate(1.08) contrast(1.04) brightness(0.48);
    transform: scale(1.13);
  }

  52% {
    filter: saturate(1.02) contrast(1.05) brightness(0.68);
    transform: scale(1.07);
  }

  100% {
    filter: saturate(0.96) contrast(1.03) brightness(0.74);
    transform: scale(1.03);
  }
}

@keyframes memorial-photo-object-breathe {
  0% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 24px 76px rgba(0, 0, 0, 0.34),
      0 0 0 0 rgba(255, 236, 182, 0);
    transform: scale(1);
  }
  45% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 30px 82px rgba(0, 0, 0, 0.38),
      0 0 0 7px rgba(255, 236, 182, 0.08);
    transform: scale(1.012);
  }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 24px 76px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(255, 236, 182, 0.08);
    transform: scale(1);
  }
}

@keyframes memorial-photo-object-heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  45% {
    border-color: rgba(255, 236, 182, 0.34);
    background: rgba(255, 236, 182, 0.12);
    transform: scale(1.12);
  }
}

@keyframes memorial-photo-object-ceremony-glow {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      0 24px 76px rgba(0, 0, 0, 0.34),
      0 0 0 0 rgba(255, 236, 182, 0);
  }

  42% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 30px 82px rgba(0, 0, 0, 0.38),
      0 0 0 8px rgba(255, 236, 182, 0.08);
  }
}

@keyframes memorial-photo-object-petal-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(16deg) scale(0.72);
  }

  22% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
    transform: translate3d(-15px, -56px, 0) rotate(-18deg) scale(1);
  }
}

@keyframes memorial-photo-kept-token-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    border-color: rgba(255, 236, 182, 0.34);
    transform: translateY(-1px);
  }
}

@keyframes memorial-photo-quiet-stage-breathe {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 28px 84px rgba(0, 0, 0, 0.32),
      0 0 0 0 rgba(255, 236, 182, 0);
    transform: translateY(0);
  }
  45% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 34px 92px rgba(0, 0, 0, 0.36),
      0 0 0 8px rgba(255, 236, 182, 0.08);
    transform: translateY(-2px);
  }
}

@keyframes memorial-flower-prepared-glow {
  0%,
  100% {
    box-shadow: none;
    transform: translateY(0);
  }
  42% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 0 6px rgba(255, 236, 182, 0.07);
    transform: translateY(-1px);
  }
}

@keyframes memorial-flower-prepared-button {
  0%,
  100% {
    box-shadow: none;
    transform: translateY(0);
  }
  42% {
    box-shadow: 0 0 0 7px rgba(255, 236, 182, 0.08);
    transform: translateY(-1px);
  }
}

@keyframes memorial-flower-selected-light {
  0%,
  100% {
    filter: blur(2px);
    transform: scale(1);
  }
  44% {
    filter: blur(3px);
    transform: scale(1.045);
  }
}

@keyframes memorial-flower-selected-petal {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) rotate(var(--petal-rotation, 18deg)) scale(0.82);
  }
  20% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) rotate(var(--petal-rotation, 18deg)) scale(1);
  }
}

@keyframes memorial-flower-newly-placed-bloom {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  38% {
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes memorial-flower-newly-placed-card {
  0%,
  100% {
    transform: translateY(0);
  }
  38% {
    transform: translateY(-2px);
  }
}

@keyframes memorialFlowerCeremonyBloom {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.86);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes memorialFlowerCeremonyLine {
  from {
    opacity: 0;
    transform: scaleX(0.28);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes memorial-photo-letter-reply-prepared {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 18px 54px rgba(0, 0, 0, 0.18),
      0 0 0 0 rgba(255, 236, 182, 0);
    transform: translateY(0);
  }

  42% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 22px 58px rgba(0, 0, 0, 0.22),
      0 0 0 7px rgba(255, 236, 182, 0.07);
    transform: translateY(-1px);
  }
}

@keyframes memorial-photo-letter-reply-kept {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.045),
      0 18px 54px rgba(0, 0, 0, 0.18),
      0 0 0 0 rgba(182, 234, 195, 0);
  }

  45% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      0 24px 62px rgba(0, 0, 0, 0.22),
      0 0 0 8px rgba(182, 234, 195, 0.07);
  }
}

@keyframes memorial-photo-letter-reply-petal-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(18deg) scale(0.72);
  }

  22% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: translate3d(-16px, -54px, 0) rotate(-16deg) scale(1);
  }
}

@keyframes memorialPhotoViewerFrameIn {
  from {
    opacity: 0;
    transform: scale(0.985);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes memorialPhotoViewerFrameInNext {
  from {
    opacity: 0;
    transform: translateX(18px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes memorialPhotoViewerFrameInPrev {
  from {
    opacity: 0;
    transform: translateX(-18px) scale(0.992);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes memorialPhotoViewerAmbientIn {
  from {
    transform: scale(1.08);
  }

  to {
    transform: scale(1.04);
  }
}

@keyframes memorialPhotoViewerTrailIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes memorialPhotoViewerMemoryTurn {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(-50%) translateY(8px) scale(0.985);
  }

  18%,
  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateX(-50%) translateY(-5px) scale(0.99);
  }
}

@keyframes memorialPhotoViewerMemoryTurnNext {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(calc(-50% + 18px)) translateY(6px) scale(0.985);
  }

  18%,
  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateX(calc(-50% - 8px)) translateY(-4px) scale(0.99);
  }
}

@keyframes memorialPhotoViewerMemoryTurnPrev {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translateX(calc(-50% - 18px)) translateY(6px) scale(0.985);
  }

  18%,
  64% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(1px);
    transform: translateX(calc(-50% + 8px)) translateY(-4px) scale(0.99);
  }
}

@keyframes memorialPhotoViewerImageSettle {
  from {
    filter: saturate(0.88) contrast(1.02) brightness(0.88);
    transform: scale(1.012);
  }

  to {
    filter: saturate(0.96) contrast(1.035) brightness(1);
    transform: scale(1);
  }
}

@keyframes memorialPhotoViewerMemoryIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes memoryHallDistantFieldBreath {
  from {
    opacity: 0.34;
    transform: scale(0.992) translateY(2px);
  }

  to {
    opacity: 0.48;
    transform: scale(1.006) translateY(-2px);
  }
}

@keyframes memoryHallDistantLightPulse {
  0%,
  100% {
    opacity: 0.46;
    filter: brightness(0.86);
  }

  48% {
    opacity: 0.86;
    filter: brightness(1.14);
  }
}

@keyframes memoryHallCompanionCardFieldBreath {
  from {
    opacity: 0.28;
    transform: perspective(1200px) rotateX(0deg) scale(0.996) translateY(3px);
  }

  to {
    opacity: 0.42;
    transform: perspective(1200px) rotateX(0deg) scale(1.008) translateY(-3px);
  }
}

@keyframes memoryHallWatsonRibbonPulse {
  0%,
  100% {
    opacity: 0.32;
    filter: blur(0.35px) brightness(0.9);
  }

  50% {
    opacity: 0.76;
    filter: blur(0.2px) brightness(1.14);
  }
}

@keyframes memoryHallRoomOpeningIn {
  from {
    transform: translateY(16px) scale(0.96);
  }

  to {
    transform: translateY(0) scale(1);
  }
}

@keyframes memoryHallConstellationFocusIn {
  from {
    opacity: 0;
    transform: translate(-50%, 16px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes memoryHallConstellationFocusCardIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(22px, 18px, 80px) scale(0.86);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 120px) scale(1);
  }
}

@keyframes memoryHallConstellationRoomAuraRing {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }

  24% {
    opacity: 0.62;
  }

  58% {
    opacity: 0.28;
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes memoryHallConstellationFocusSanctuary {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate(-50%, 34%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
      scale(calc(var(--memory-hall-constellation-scale) + 0.06));
  }

  56% {
    opacity: 0.78;
    filter: blur(0);
    transform:
      translate(-50%, 27%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.36));
  }

  100% {
    opacity: 0.58;
    filter: blur(0);
    transform:
      translate(-50%, 28%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.28));
  }
}

@keyframes memoryHallConstellationFocusSanctuaryBreathe {
  0%,
  100% {
    opacity: 0.54;
    filter: blur(0.2px);
    box-shadow:
      0 0 0 1px rgba(255, 248, 232, 0.05),
      0 0 38px rgba(255, 236, 182, 0.16),
      0 0 84px rgba(255, 248, 232, 0.07);
  }

  48% {
    opacity: 0.68;
    filter: blur(0);
    box-shadow:
      0 0 0 1px rgba(255, 248, 232, 0.075),
      0 0 58px rgba(255, 236, 182, 0.23),
      0 0 124px rgba(255, 248, 232, 0.105);
  }
}

@keyframes memoryHallConstellationFocusHush {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.985);
  }

  48% {
    opacity: 0.82;
    filter: blur(0.2px);
    transform: scale(1.006);
  }

  100% {
    opacity: 0.58;
    filter: blur(0.1px);
    transform: scale(1);
  }
}

@keyframes memoryHallConstellationFocusHushNode {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(0.38) rotate(-18deg);
  }

  54% {
    opacity: 0.9;
    filter: blur(0.2px);
    transform: translate(-50%, -50%) scale(1.08) rotate(4deg);
  }

  100% {
    opacity: 0.64;
    filter: blur(0.6px);
    transform: translate(-50%, -50%) scale(0.86) rotate(0deg);
  }
}

@keyframes memoryHallConstellationFocusHushNodeBreathe {
  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.84) rotate(0deg);
  }

  50% {
    opacity: 0.78;
    transform: translate(-50%, -50%) scale(0.92) rotate(5deg);
  }
}

@keyframes memoryHallConstellationFocusHushCard {
  0% {
    opacity: 0;
    filter: blur(26px);
    transform: translate3d(18px, 26px, 0) scale(0.74);
  }

  58% {
    opacity: 0.82;
    filter: blur(14px);
    transform: translate3d(-2px, 2px, 0) scale(0.98);
  }

  100% {
    opacity: 0.64;
    filter: blur(16px);
    transform: translate3d(4px, 10px, 0) scale(0.86);
  }
}

@keyframes memoryHallConstellationFocusWitnesses {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform:
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.1), calc(var(--memory-hall-pointer-card-y) * -0.1), 0)
      scale(0.82);
  }

  62% {
    opacity: 0.92;
    filter: blur(0.2px);
    transform:
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.18), calc(var(--memory-hall-pointer-card-y) * -0.18), 0)
      scale(1.02);
  }

  100% {
    opacity: 0.74;
    filter: blur(0.3px);
    transform:
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.18), calc(var(--memory-hall-pointer-card-y) * -0.18), 0)
      scale(0.96);
  }
}

@keyframes memoryHallConstellationFocusWitnessCard {
  0% {
    opacity: 0;
    filter: blur(7px) saturate(0.7) brightness(0.62);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-witness-rotate) - 10deg))
      scale(calc(var(--memory-hall-witness-scale) * 0.36));
  }

  68% {
    opacity: 0.86;
    filter: blur(0) saturate(1.04) brightness(1.04);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-witness-rotate) + 3deg))
      scale(calc(var(--memory-hall-witness-scale) * 1.08));
  }

  100% {
    opacity: 0.58;
    filter: blur(0.3px) saturate(0.92) brightness(0.9);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-witness-rotate))
      scale(var(--memory-hall-witness-scale));
  }
}

@keyframes memoryHallConstellationFocusWitnessBreathe {
  0%,
  100% {
    opacity: 0.48;
    filter: blur(0.4px) brightness(0.88);
  }

  48% {
    opacity: 0.72;
    filter: blur(0) brightness(1.08);
  }
}

@keyframes memoryHallConstellationFocusDust {
  0% {
    opacity: 0;
    filter: blur(3px);
    transform: translate(-50%, -50%) scale(0.36);
  }

  28% {
    opacity: 0.78;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 0.32;
    filter: blur(0.4px);
    transform: translate(-50%, -50%) scale(0.84);
  }
}

@keyframes memoryHallConstellationCompanionHalo {
  0% {
    opacity: 0;
    filter: blur(10px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * -0.06))
      scale(calc(var(--memory-hall-constellation-scale) + 0.02));
  }

  62% {
    opacity: 0.78;
    filter: blur(0);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.06))
      scale(calc(var(--memory-hall-constellation-scale) + 0.28));
  }

  100% {
    opacity: 0.64;
    filter: blur(0.4px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
      scale(calc(var(--memory-hall-constellation-scale) + 0.22));
  }
}

@keyframes memoryHallConstellationCompanionHaloBreathe {
  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 0.82;
  }
}

@keyframes memoryHallConstellationCompanionThreads {
  0%,
  100% {
    opacity: 0.22;
    transform: rotate(-2deg) scale(0.98);
  }

  48% {
    opacity: 0.52;
    transform: rotate(3deg) scale(1.015);
  }
}

@keyframes memoryHallConstellationCompanionHaloCard {
  0% {
    opacity: 0;
    filter: blur(6px) saturate(0.76) brightness(0.62);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-companion-halo-rotate))
      translateY(calc(var(--memory-hall-companion-halo-radius) * -0.58))
      rotate(var(--memory-hall-companion-halo-counter-rotate))
      scale(calc(var(--memory-hall-companion-halo-scale) * 0.52));
  }

  68% {
    opacity: 0.76;
    filter: blur(0) saturate(0.98) brightness(0.94);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-companion-halo-rotate))
      translateY(calc(var(--memory-hall-companion-halo-radius) * -1.04))
      rotate(var(--memory-hall-companion-halo-counter-rotate))
      scale(calc(var(--memory-hall-companion-halo-scale) * 1.04));
  }

  100% {
    opacity: 0.64;
    filter: blur(0.4px) saturate(0.9) brightness(0.86);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-companion-halo-rotate))
      translateY(calc(var(--memory-hall-companion-halo-radius) * -1))
      rotate(var(--memory-hall-companion-halo-counter-rotate))
      scale(var(--memory-hall-companion-halo-scale));
  }
}

@keyframes memoryHallConstellationCompanionHaloCardLight {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.08) 66%, rgba(0, 0, 0, 0.28) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.06), transparent 34% 70%, rgba(0, 0, 0, 0.42));
  }

  46% {
    opacity: 0.9;
    background:
      radial-gradient(circle at 50% 26%, rgba(255, 248, 232, 0.06), transparent 34%, rgba(255, 248, 232, 0.14) 68%, rgba(0, 0, 0, 0.22) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.13), transparent 38% 70%, rgba(0, 0, 0, 0.34));
  }
}

@keyframes memoryHallConstellationFocusBeacon {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.1))
      scale(calc(var(--memory-hall-constellation-scale) + 0.1));
  }

  28% {
    opacity: 0.96;
  }

  100% {
    opacity: 0.34;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.16))
      scale(calc(var(--memory-hall-constellation-scale) + 0.52));
  }
}

@keyframes memoryHallConstellationDepthLens {
  0% {
    opacity: 0;
    filter: blur(14px) saturate(0.76) brightness(0.62);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * -0.03))
      scale(calc(var(--memory-hall-constellation-scale) - 0.02));
  }

  46% {
    opacity: 0.82;
    filter: blur(0.2px) saturate(1.1) brightness(1.08);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.58));
  }

  100% {
    opacity: 0.44;
    filter: blur(1px) saturate(0.96) brightness(0.9);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.05))
      scale(calc(var(--memory-hall-constellation-scale) + 0.36));
  }
}

@keyframes memoryHallConstellationDepthLensBreathe {
  0%,
  100% {
    opacity: 0.38;
    filter: blur(1.2px) saturate(0.96) brightness(0.88);
  }

  48% {
    opacity: 0.54;
    filter: blur(0.4px) saturate(1.04) brightness(1.02);
  }
}

@keyframes memoryHallConstellationDepthLensRing {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-depth-lens-rotate)) scale(0.48);
  }

  42% {
    opacity: 0.62;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-depth-lens-rotate) + 5deg)) scale(1.02);
  }

  100% {
    opacity: 0.22;
    filter: blur(1.1px);
    transform: rotate(calc(var(--memory-hall-depth-lens-rotate) + 9deg)) scale(0.94);
  }
}

@keyframes memoryHallConstellationApproachAperture {
  0% {
    opacity: 0;
    filter: blur(18px) saturate(0.74) brightness(0.58);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * -0.04))
      scale(calc(var(--memory-hall-constellation-scale) + 0.04));
  }

  42% {
    opacity: 0.86;
    filter: blur(0.2px) saturate(1.12) brightness(1.08);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.1))
      scale(calc(var(--memory-hall-constellation-scale) + 0.92));
  }

  100% {
    opacity: 0.22;
    filter: blur(3px) saturate(0.92) brightness(0.86);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.62));
  }
}

@keyframes memoryHallConstellationApproachApertureArc {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-aperture-rotate)) scale(0.54);
  }

  44% {
    opacity: 0.74;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-aperture-rotate) + 6deg)) scale(1.03);
  }

  100% {
    opacity: 0.14;
    filter: blur(1.6px);
    transform: rotate(calc(var(--memory-hall-aperture-rotate) + 12deg)) scale(1.22);
  }
}

@keyframes memoryHallConstellationApproach {
  0% {
    opacity: 0;
    filter: blur(16px) saturate(0.64) brightness(0.5);
    transform:
      translate3d(-50%, -50%, 0)
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.42), calc(var(--memory-hall-pointer-card-y) * -0.42), 0)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.04));
  }

  56% {
    opacity: 0.48;
    filter: blur(1.2px) saturate(0.96) brightness(0.92);
    transform:
      translate3d(-50%, -50%, 0)
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.5), calc(var(--memory-hall-pointer-card-y) * -0.5), 0)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.15))
      scale(calc(var(--memory-hall-constellation-scale) + 0.54));
  }

  100% {
    opacity: 0.36;
    filter: blur(2.2px) saturate(0.9) brightness(0.82);
    transform:
      translate3d(-50%, -50%, 0)
      translate3d(calc(var(--memory-hall-pointer-card-x) * -0.46), calc(var(--memory-hall-pointer-card-y) * -0.46), 0)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.14))
      scale(calc(var(--memory-hall-constellation-scale) + 0.44));
  }
}

@keyframes memoryHallConstellationApproachRing {
  0% {
    opacity: 0;
    filter: blur(6px);
    transform: rotate(var(--memory-hall-approach-ring-rotate)) scale(0.72);
  }

  42% {
    opacity: 0.54;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-approach-ring-rotate) + 7deg)) scale(1.02);
  }

  100% {
    opacity: 0.2;
    filter: blur(1.2px);
    transform: rotate(calc(var(--memory-hall-approach-ring-rotate) + 12deg)) scale(0.94);
  }
}

@keyframes memoryHallConstellationFocusCardArrive {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: translate3d(24px, 24px, 90px) scale(0.86);
  }

  64% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-4px, -18px, 210px) scale(1.09);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, -12px, 190px) scale(1.065);
  }
}

@keyframes memoryHallConstellationDepthApproach {
  0% {
    opacity: 0.18;
    transform:
      translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.18), calc(var(--memory-hall-pointer-depth-y) * 0.18), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.18), calc(var(--memory-hall-orbit-pan-y) * 0.18), 0)
      scale(0.98);
  }

  46% {
    opacity: 0.48;
    transform:
      translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.38), calc(var(--memory-hall-pointer-depth-y) * 0.38), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.76), calc(var(--memory-hall-orbit-pan-y) * 0.76), 0)
      scale(1.14);
  }

  100% {
    opacity: 0.34;
    transform:
      translate3d(calc(var(--memory-hall-pointer-depth-x) * 0.45), calc(var(--memory-hall-pointer-depth-y) * 0.45), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.58), calc(var(--memory-hall-orbit-pan-y) * 0.58), 0)
      scale(1.08);
  }
}

@keyframes memoryHallConstellationFloorApproach {
  0% {
    opacity: 0.12;
    filter: blur(1.4px);
    transform:
      perspective(1200px)
      rotateX(75deg)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.04), calc(var(--memory-hall-orbit-pan-y) * 0.04), 0)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(0.92);
  }

  48% {
    opacity: 0.34;
    filter: blur(0);
    transform:
      perspective(1200px)
      rotateX(72deg)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.28), calc(var(--memory-hall-orbit-pan-y) * 0.28), 0)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(1.16);
  }

  100% {
    opacity: 0.24;
    filter: blur(0.2px);
    transform:
      perspective(1200px)
      rotateX(73deg)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.18), calc(var(--memory-hall-orbit-pan-y) * 0.2), 0)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(1.08);
  }
}

@keyframes memoryHallConstellationVistaApproach {
  0% {
    filter: saturate(1.04) contrast(1.06) brightness(0.74);
    opacity: 0.94;
    transform:
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.34), calc(var(--memory-hall-orbit-pan-y) * 0.34), 0)
      scale(1.08);
  }

  52% {
    filter: saturate(1.22) contrast(1.12) brightness(0.98);
    opacity: 1;
    transform:
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 1.06), calc(var(--memory-hall-orbit-pan-y) * 1.06), 0)
      scale(1.36);
  }

  100% {
    filter: saturate(1.18) contrast(1.1) brightness(0.88);
    opacity: 0.98;
    transform:
      translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
      scale(1.28);
  }
}

@keyframes memoryHallConstellationSkyApproach {
  0% {
    filter: blur(2.2px) saturate(0.68) brightness(0.58);
    transform:
      translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 0.26), calc(var(--memory-hall-orbit-pan-y) * 0.26), 0)
      scale(1.06);
  }

  52% {
    filter: blur(0.1px) saturate(1.1) brightness(1.04);
    transform:
      translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
      translate3d(calc(var(--memory-hall-orbit-pan-x) * 1.06), calc(var(--memory-hall-orbit-pan-y) * 1.06), 0)
      scale(1.42);
  }

  100% {
    filter: blur(0) saturate(1) brightness(1);
    transform:
      translate3d(var(--memory-hall-pointer-drift-x), var(--memory-hall-pointer-drift-y), 0)
      translate3d(var(--memory-hall-orbit-pan-x), var(--memory-hall-orbit-pan-y), 0)
      scale(1.28);
  }
}

@keyframes memoryHallConstellationActiveNodeApproach {
  0% {
    opacity: 0.5;
    filter: blur(4px) saturate(0.68) brightness(0.58);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.64))
      scale(calc(var(--memory-hall-constellation-scale) + 0.12));
  }

  50% {
    opacity: 1;
    filter: blur(0) brightness(1.34) saturate(1.2);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(calc(var(--memory-hall-constellation-scale) + 1.02));
  }

  100% {
    opacity: 1;
    filter: brightness(1.22) saturate(1.12);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(calc(var(--memory-hall-constellation-scale) + 0.82));
  }
}

@keyframes memoryHallConstellationFocusCardDeepArrive {
  0% {
    opacity: 0;
    filter: blur(14px) saturate(0.72) brightness(0.62);
    transform: translate3d(-36px, 28px, 54px) rotate(-2deg) scale(0.74);
  }

  48% {
    opacity: 1;
    filter: blur(0.2px) saturate(1.12) brightness(1.08);
    transform: translate3d(-8px, -24px, 238px) rotate(0.4deg) scale(1.13);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1) brightness(1);
    transform: translate3d(0, -12px, 190px) rotate(0deg) scale(1.065);
  }
}

@keyframes memoryHallConstellationFocusCardHaloBreathe {
  0%,
  100% {
    opacity: 0.82;
    filter: blur(0.8px);
  }

  48% {
    opacity: 1;
    filter: blur(0.2px);
  }
}

@keyframes memoryHallConstellationFocusCardFrameBreathe {
  0%,
  100% {
    opacity: 0.82;
    filter: blur(0.1px);
  }

  50% {
    opacity: 0.98;
    filter: blur(0);
  }
}

@keyframes memoryHallConstellationFocusCardImageLight {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.09) 66%, rgba(0, 0, 0, 0.24) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.08), transparent 34% 70%, rgba(0, 0, 0, 0.44));
  }

  46% {
    opacity: 0.92;
    background:
      radial-gradient(circle at 50% 26%, rgba(255, 248, 232, 0.07), transparent 36%, rgba(255, 248, 232, 0.16) 68%, rgba(0, 0, 0, 0.2) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.16), transparent 40% 70%, rgba(0, 0, 0, 0.34));
  }
}

@keyframes memoryHallConstellationFocusPull {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform:
      rotate(var(--memory-hall-focus-pull-angle))
      scaleX(0.04);
  }

  42% {
    opacity: 0.82;
    filter: blur(0);
    transform:
      rotate(var(--memory-hall-focus-pull-angle))
      scaleX(0.88);
  }

  100% {
    opacity: 0.58;
    filter: blur(0.2px);
    transform:
      rotate(var(--memory-hall-focus-pull-angle))
      scaleX(1);
  }
}

@keyframes memoryHallConstellationFocusPullSpark {
  0%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  26% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(1);
  }

  62% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.76);
  }
}

@keyframes memoryHallConstellationFocusTrail {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(0.74) brightness(0.66);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-focus-trail-angle))
      scaleX(0.08)
      scaleY(0.58);
  }

  48% {
    opacity: 0.88;
    filter: blur(0.2px) saturate(1.06) brightness(1.08);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-focus-trail-angle))
      scaleX(0.96)
      scaleY(1.02);
  }

  100% {
    opacity: 0.58;
    filter: blur(0.4px) saturate(0.94) brightness(0.9);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-focus-trail-angle))
      scaleX(1)
      scaleY(0.84);
  }
}

@keyframes memoryHallConstellationFocusTrailCard {
  0% {
    opacity: 0;
    filter: blur(5px) saturate(0.68) brightness(0.56);
    transform:
      translate(-80%, -50%)
      rotate(var(--memory-hall-focus-trail-counter-angle))
      scale(0.34);
  }

  58% {
    opacity: 0.84;
    filter: blur(0) saturate(1.04) brightness(1.06);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-focus-trail-counter-angle) + 2deg))
      scale(1.06);
  }

  100% {
    opacity: 0.48;
    filter: blur(0.3px) saturate(0.9) brightness(0.86);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-focus-trail-counter-angle))
      scale(0.86);
  }
}

@keyframes memoryHallConstellationFocusMotesIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.04))
      scale(calc(var(--memory-hall-constellation-scale) - 0.08));
  }

  62% {
    opacity: 0.86;
    filter: blur(0);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.14))
      scale(calc(var(--memory-hall-constellation-scale) + 0.2));
  }

  to {
    opacity: 0.72;
    filter: blur(0.2px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.12))
      scale(calc(var(--memory-hall-constellation-scale) + 0.16));
  }
}

@keyframes memoryHallConstellationFocusMote {
  0%,
  100% {
    opacity: 0.16;
    transform:
      translate(-50%, -50%)
      translate(calc(var(--memory-hall-focus-mote-dx) * 0.22), calc(var(--memory-hall-focus-mote-dy) * 0.22))
      scale(0.54);
  }

  34% {
    opacity: 0.9;
    transform:
      translate(-50%, -50%)
      translate(var(--memory-hall-focus-mote-dx), var(--memory-hall-focus-mote-dy))
      scale(1);
  }

  72% {
    opacity: 0.34;
    transform:
      translate(-50%, -50%)
      translate(calc(var(--memory-hall-focus-mote-dx) * 0.58), calc(var(--memory-hall-focus-mote-dy) * 0.58))
      scale(0.74);
  }
}

@keyframes memoryHallConstellationCardLightBreath {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.09) 66%, rgba(0, 0, 0, 0.25) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.07), transparent 36% 70%, rgba(0, 0, 0, 0.36));
  }

  46% {
    opacity: 0.88;
    background:
      radial-gradient(circle at 50% 28%, rgba(255, 248, 232, 0.07), transparent 38%, rgba(255, 248, 232, 0.14) 70%, rgba(0, 0, 0, 0.18) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.14), transparent 40% 70%, rgba(0, 0, 0, 0.28));
  }
}

@keyframes memoryHallConstellationActiveCardBreath {
  0%,
  100% {
    filter: brightness(1) saturate(1);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 18px 46px rgba(0, 0, 0, 0.6),
      0 0 38px rgba(255, 236, 182, 0.24);
  }

  48% {
    filter: brightness(1.08) saturate(1.04);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.06),
      0 22px 58px rgba(0, 0, 0, 0.62),
      0 0 58px rgba(255, 236, 182, 0.36);
  }
}

@keyframes memoryHallConstellationOpenReadyDoor {
  0%,
  100% {
    opacity: 0.42;
    filter: blur(0.8px) saturate(0.96) brightness(0.9);
    transform: translate3d(5px, 7px, 18px) scale(0.7);
  }

  45% {
    opacity: 0.94;
    filter: blur(0) saturate(1.12) brightness(1.16);
    transform: translate3d(0, 0, 32px) scale(1.05);
  }
}

@keyframes memoryHallConstellationOpenReadyHalo {
  0%,
  100% {
    opacity: 0.58;
    filter: blur(0.6px) saturate(0.96) brightness(0.92);
    transform: scale(0.96) rotate(-2deg);
  }

  46% {
    opacity: 0.92;
    filter: blur(0) saturate(1.08) brightness(1.08);
    transform: scale(1.08) rotate(5deg);
  }
}

@keyframes memoryHallConstellationOpenReadyFrame {
  0%,
  100% {
    border-color: rgba(255, 248, 232, 0.2);
    box-shadow:
      0 0 22px rgba(255, 236, 182, 0.14),
      inset 0 0 18px rgba(255, 248, 232, 0.04);
    opacity: 0.68;
    transform: rotate(10deg) scale(0.98);
  }

  48% {
    border-color: rgba(255, 248, 232, 0.46);
    box-shadow:
      0 0 46px rgba(255, 236, 182, 0.34),
      0 0 108px rgba(255, 248, 232, 0.12),
      inset 0 0 28px rgba(255, 248, 232, 0.075);
    opacity: 0.96;
    transform: rotate(0deg) scale(1.06);
  }
}

@keyframes memoryHallConstellationDistantCardBreath {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.94);
  }

  50% {
    opacity: 0.72;
    transform: scale(1.06);
  }
}

@keyframes memoryHallEnterCueArrive {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translate3d(10px, -10px, 20px) scale(0.82);
  }

  68% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-1px, 1px, 52px) scale(1.04);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 42px) scale(1);
  }
}

@keyframes memoryHallEnterCueHalo {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes memoryHallEnterCueGlimmer {
  0% {
    opacity: 0;
    transform: rotate(-18deg) translateX(-32%);
  }

  42% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: rotate(-18deg) translateX(34%);
  }
}

@keyframes memoryHallConstellationGentleTourCard {
  0%,
  100% {
    filter: blur(0) saturate(1.02) brightness(1);
    transform: translate3d(0, -12px, 190px) scale(1.065);
  }

  48% {
    filter: blur(0) saturate(1.1) brightness(1.08);
    transform: translate3d(0, -16px, 206px) scale(1.088);
  }
}

@keyframes memoryHallConstellationGentleTourSanctuary {
  0% {
    opacity: 0.28;
    filter: blur(3px);
    transform: translate(-50%, -50%) scale(0.76);
  }

  42% {
    opacity: 0.62;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1.02);
  }

  100% {
    opacity: 0.38;
    filter: blur(1px);
    transform: translate(-50%, -50%) scale(0.88);
  }
}

@keyframes memoryHallConstellationSideCardArrive {
  0% {
    opacity: 0;
    filter: blur(7px) saturate(0.72) brightness(0.62);
    transform: translate3d(20px, 18px, 76px) scale(0.76);
  }

  70% {
    opacity: 0.82;
    filter: blur(0.2px) saturate(0.96) brightness(0.94);
    transform: translate3d(-2px, -6px, 126px) scale(1.035);
  }

  100% {
    opacity: 0.74;
    filter: blur(0.4px) saturate(0.92) brightness(0.88);
    transform: translate3d(0, 0, 112px) scale(1);
  }
}

@keyframes memoryHallConstellationSideTrace {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: blur(4px);
  }

  40% {
    opacity: 0.78;
    filter: blur(0);
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: 0.46;
    filter: blur(0);
  }
}

@keyframes memoryHallConstellationSideHaloBreathe {
  0%,
  100% {
    opacity: 0.58;
    filter: blur(0.8px);
    transform: scale(0.96);
  }

  48% {
    opacity: 0.82;
    filter: blur(0.2px);
    transform: scale(1.04);
  }
}

@keyframes memoryHallConstellationSideCardLight {
  0%,
  100% {
    opacity: 1;
    background:
      radial-gradient(circle at 50% 34%, transparent 0 36%, rgba(255, 248, 232, 0.08) 66%, rgba(0, 0, 0, 0.26) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.06), transparent 38% 70%, rgba(0, 0, 0, 0.42));
  }

  46% {
    opacity: 0.9;
    background:
      radial-gradient(circle at 50% 26%, rgba(255, 248, 232, 0.06), transparent 36%, rgba(255, 248, 232, 0.14) 68%, rgba(0, 0, 0, 0.22) 100%),
      linear-gradient(180deg, rgba(255, 248, 232, 0.13), transparent 40% 70%, rgba(0, 0, 0, 0.34));
  }
}

@keyframes memoryHallConstellationSideTraceBreathe {
  0%,
  100% {
    opacity: 0.38;
    filter: blur(0.2px);
    box-shadow:
      0 0 14px rgba(255, 236, 182, 0.16),
      0 0 34px rgba(255, 248, 232, 0.06);
  }

  50% {
    opacity: 0.62;
    filter: blur(0);
    box-shadow:
      0 0 24px rgba(255, 236, 182, 0.26),
      0 0 62px rgba(255, 248, 232, 0.12);
  }
}

@keyframes memoryHallConstellationTravelPath {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: blur(5px);
  }

  22% {
    opacity: 0.92;
    filter: blur(0);
  }

  72% {
    clip-path: inset(0 0 0 0);
    opacity: 0.76;
  }

  100% {
    clip-path: inset(0 0 0 88%);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes memoryHallConstellationTravelSpark {
  0% {
    left: 0;
    opacity: 0;
    filter: blur(2px);
    transform: translate(-50%, -50%) scale(0.34);
  }

  18% {
    opacity: 0.92;
    filter: blur(0);
  }

  70% {
    left: var(--memory-hall-travel-spark-end);
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    left: 100%;
    opacity: 0;
    filter: blur(2px);
    transform: translate(-50%, -50%) scale(0.5);
  }
}

@keyframes memoryHallConstellationArrivalBloom {
  0% {
    opacity: 0;
    filter: blur(8px) saturate(1);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) - 0.05));
  }

  28% {
    opacity: 0.92;
    filter: blur(0) saturate(1.1);
  }

  68% {
    opacity: 0.5;
  }

  100% {
    opacity: 0;
    filter: blur(8px) saturate(0.9);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.08))
      scale(calc(var(--memory-hall-constellation-scale) + 0.42));
  }
}

@keyframes memoryHallConstellationArrivalRing {
  0% {
    opacity: 0;
    transform: scale(0.42);
  }

  24% {
    opacity: 0.78;
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@keyframes memoryHallConstellationReturnTrail {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: blur(5px);
  }

  38% {
    opacity: calc(var(--memory-hall-return-trail-opacity) + 0.18);
    filter: blur(var(--memory-hall-return-trail-blur));
  }

  100% {
    clip-path: inset(0 0 0 0);
    opacity: var(--memory-hall-return-trail-opacity);
    filter: blur(var(--memory-hall-return-trail-blur));
  }
}

@keyframes memoryHallConstellationReturnTrailBreathe {
  0%,
  100% {
    opacity: 0.46;
    filter: blur(6px);
  }

  50% {
    opacity: 0.82;
    filter: blur(4px);
  }
}

@keyframes memoryHallConstellationReturnEndpointBreathe {
  0%,
  100% {
    opacity: 0.38;
    box-shadow:
      0 0 12px rgba(255, 236, 182, 0.24),
      0 0 26px rgba(196, 224, 211, 0.1);
    transform: translate(-50%, -50%) scale(0.88);
  }

  48% {
    opacity: 0.82;
    box-shadow:
      0 0 18px rgba(255, 236, 182, 0.38),
      0 0 42px rgba(196, 224, 211, 0.18);
    transform: translate(-50%, -50%) scale(1.14);
  }
}

@keyframes memoryHallConstellationVisitedGlow {
  from {
    opacity: 0;
    filter: blur(6px);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.12))
      scale(calc(var(--memory-hall-constellation-scale) - 0.02));
  }

  to {
    opacity: var(--memory-hall-visited-glow-opacity);
    filter: var(--memory-hall-visited-glow-filter);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-visited-glow-rotate))
      scale(var(--memory-hall-visited-glow-scale));
  }
}

@keyframes memoryHallConstellationVisitedGlowBreathe {
  0%,
  100% {
    opacity: 0.34;
    filter: blur(8px);
    transform: scale(0.96);
  }

  50% {
    opacity: 0.62;
    filter: blur(6px);
    transform: scale(1.04);
  }
}

@keyframes memoryHallConstellationReturnGlow {
  from {
    opacity: 0;
    filter: blur(9px) saturate(1.1) brightness(1.12);
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--memory-hall-constellation-rotate) * 0.1))
      scale(calc(var(--memory-hall-constellation-scale) - 0.1));
  }

  58% {
    opacity: 0.68;
    filter: blur(0) saturate(1.12) brightness(1.08);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-visited-glow-rotate))
      scale(calc(var(--memory-hall-visited-glow-scale) + 0.08));
  }

  to {
    opacity: var(--memory-hall-visited-glow-opacity);
    filter: var(--memory-hall-visited-glow-filter);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-visited-glow-rotate))
      scale(var(--memory-hall-visited-glow-scale));
  }
}

@keyframes memoryHallConstellationReturnMemoryBreathe {
  0%,
  100% {
    opacity: 0.52;
    filter: blur(9px);
    transform: scale(0.96);
  }

  50% {
    opacity: 0.84;
    filter: blur(7px);
    transform: scale(1.05);
  }
}

@keyframes memoryHallConstellationReturnPetal {
  0%,
  100% {
    opacity: 0;
    filter: blur(1.4px);
    transform: translate(-50%, -50%) scale(0.48);
  }

  18% {
    opacity: 0.88;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }

  54% {
    opacity: 0.52;
    filter: blur(0.2px);
    transform: translate(-50%, -68%) scale(0.86);
  }

  74% {
    opacity: 0.18;
    filter: blur(0.8px);
    transform: translate(-50%, -78%) scale(0.68);
  }
}

@keyframes memoryHallConstellationThreadAppear {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    opacity: 0.16;
    filter: blur(0);
  }
}

@keyframes memoryHallConstellationThreadPulse {
  0%,
  100% {
    opacity: 0;
    filter: blur(0.8px);
    transform: scaleX(0.12);
  }

  44% {
    opacity: var(--memory-hall-thread-pulse-opacity, 0.28);
    filter: blur(0.2px);
    transform: scaleX(0.78);
  }

  68% {
    opacity: var(--memory-hall-thread-pulse-opacity, 0.28);
    filter: blur(0.4px);
    transform: scaleX(1);
  }
}

@keyframes memoryHallConstellationThreadEndpointPulse {
  0%,
  100% {
    opacity: 0.34;
    box-shadow: 0 0 12px rgba(255, 236, 182, 0.14);
    transform: translateY(-50%) scale(0.84);
  }

  46% {
    opacity: var(--memory-hall-thread-end-opacity, 0.58);
    box-shadow:
      0 0 18px rgba(255, 236, 182, 0.28),
      0 0 36px rgba(255, 248, 232, 0.12);
    transform: translateY(-50%) scale(1.16);
  }
}

@keyframes memoryHallConstellationEchoIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate(-50%, -50%)
      scale(calc(var(--memory-hall-echo-scale) * 0.62));
  }

  to {
    opacity: var(--memory-hall-echo-opacity, 0.74);
    filter: blur(0);
    transform:
      translate(-50%, -50%)
      scale(var(--memory-hall-echo-scale));
  }
}

@keyframes memoryHallConstellationGhostAppear {
  from {
    opacity: 0;
    filter: blur(5px);
  }

  to {
    opacity: 0.6;
    filter: blur(0.15px);
  }
}

@keyframes memoryHallConstellationAppear {
  from {
    opacity: 0;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes memoryHallOpeningSourceAura {
  0% {
    opacity: 0;
    filter: blur(9px);
    transform: scale(0.38) rotate(-8deg);
  }

  36% {
    opacity: 0.86;
    filter: blur(0);
    transform: scale(1.02) rotate(0deg);
  }

  100% {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.68) rotate(12deg);
  }
}

@keyframes memoryHallOpeningSanctuaryVeil {
  0% {
    opacity: 0;
    filter: blur(22px) saturate(0.8);
    transform: translate(-50%, -50%) scale(0.54);
  }

  42% {
    opacity: 0.78;
    filter: blur(5px) saturate(1.14);
    transform: translate(-50%, -50%) scale(1.02);
  }

  72% {
    opacity: 0.58;
    filter: blur(8px) saturate(1.06);
    transform: translate(-50%, -50%) scale(1.12);
  }

  100% {
    opacity: 0;
    filter: blur(24px) saturate(0.92);
    transform: translate(-50%, -50%) scale(1.24);
  }
}

@keyframes memoryHallOpeningSanctuaryArc {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-opening-arc-rotate, 0deg)) scale(0.52);
  }

  38% {
    opacity: 0.72;
    filter: blur(0);
    transform: rotate(var(--memory-hall-opening-arc-rotate, 0deg)) scale(1.04);
  }

  78% {
    opacity: 0.42;
    filter: blur(0.8px);
    transform: rotate(calc(var(--memory-hall-opening-arc-rotate, 0deg) + 5deg)) scale(1.14);
  }

  100% {
    opacity: 0;
    filter: blur(5px);
    transform: rotate(calc(var(--memory-hall-opening-arc-rotate, 0deg) + 10deg)) scale(1.28);
  }
}

@keyframes memoryHallOpeningDepthTunnel {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.06);
  }

  32% {
    opacity: 0.72;
    filter: blur(0);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.84);
  }

  72% {
    opacity: 0.54;
    filter: blur(0.4px);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1.03);
  }

  100% {
    opacity: 0;
    filter: blur(10px);
    transform:
      translateY(-50%)
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1.12);
  }
}

@keyframes memoryHallOpeningHorizon {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translate(-50%, -50%) scaleX(0.16);
  }

  38% {
    opacity: 0.74;
    filter: blur(0);
    transform: translate(-50%, -50%) scaleX(1.02);
  }

  74% {
    opacity: 0.46;
    filter: blur(0.6px);
    transform: translate(-50%, -50%) scaleX(1.16);
  }

  100% {
    opacity: 0;
    filter: blur(7px);
    transform: translate(-50%, -50%) scaleX(1.28);
  }
}

@keyframes memoryHallOpeningHorizonSpark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(12px) scale(0.36);
  }

  36% {
    opacity: 0.94;
    transform: translate(-50%, -50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-26px) scale(1.3);
  }
}

@keyframes memoryHallOpeningTunnelDust {
  0% {
    opacity: 0;
    transform: translate(-120%, -50%) scale(0.28);
  }

  34% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(240%, -50%) scale(1.4);
  }
}

@keyframes memoryHallPublicOpeningNameWhisper {
  0% {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-50%) translateY(12px) scale(0.9);
  }

  48% {
    opacity: 0.78;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(1);
  }

  100% {
    opacity: 0.56;
    filter: blur(0);
    transform: translateX(-50%) translateY(0) scale(0.98);
  }
}

@keyframes memoryHallOpeningPath {
  from {
    opacity: 0;
    transform:
      perspective(1200px)
      rotateX(76deg)
      translate3d(-9%, 20px, 0)
      scaleX(0.86);
  }

  to {
    opacity: 0.5;
    transform:
      perspective(1200px)
      rotateX(74deg)
      translate3d(var(--memory-hall-pointer-card-x), var(--memory-hall-pointer-card-y), 0)
      scaleX(1);
  }
}

@keyframes memoryHallPublicRoomOpeningFromConstellation {
  from {
    top: var(--memory-hall-opening-source-y);
    left: var(--memory-hall-opening-source-x);
    opacity: 0.92;
    filter: saturate(1.12) brightness(1.12);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-opening-source-rotate))
      scale(0.66);
  }

  46% {
    top: 48%;
    left: 50%;
    opacity: 1;
    filter: saturate(1.2) brightness(1.22);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.08);
  }

  76% {
    top: 50%;
    left: 50%;
    opacity: 1;
    filter: saturate(1.08) brightness(1.12);
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  to {
    top: 50%;
    left: 50%;
    opacity: 0.98;
    filter: saturate(1.02) brightness(1.04);
    transform:
      translate(-50%, -50%)
      scale(0.96);
  }
}

@keyframes memoryHallOpeningCardPortal {
  from {
    opacity: 0;
    filter: blur(12px) saturate(1.18) brightness(1.24);
    transform:
      translateY(36px)
      scale(0.68)
      rotate(-4deg);
  }

  42% {
    opacity: 1;
    filter: blur(0) saturate(1.16) brightness(1.18);
    transform:
      translateY(-18px)
      scale(1.16)
      rotate(0deg);
  }

  72% {
    opacity: 1;
    filter: blur(0) saturate(1.08) brightness(1.08);
    transform:
      translateY(-4px)
      scale(1.06)
      rotate(0deg);
  }

  to {
    opacity: 1;
    filter: blur(0) saturate(1.04) brightness(1);
    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }
}

@keyframes memoryHallPublicOpeningCardFromNode {
  from {
    opacity: 0.72;
    filter: blur(5px) saturate(1.18) brightness(1.26);
    transform:
      rotate(var(--memory-hall-opening-source-rotate))
      scale(0.46)
      translateZ(0);
  }

  38% {
    opacity: 1;
    filter: blur(0) saturate(1.24) brightness(1.26);
    transform:
      rotate(0deg)
      scale(1.12)
      translateZ(160px);
  }

  72% {
    opacity: 1;
    filter: blur(0) saturate(1.1) brightness(1.12);
    transform:
      rotate(0deg)
      scale(1.32)
      translateZ(220px);
  }

  to {
    opacity: 0.98;
    filter: blur(0.3px) saturate(1.04) brightness(1.06);
    transform:
      rotate(0deg)
      scale(1.22)
      translateZ(180px);
  }
}

@keyframes memoryHallPublicOpeningCardGate {
  from {
    opacity: 0;
    filter: blur(18px) saturate(0.86) brightness(0.72);
    transform: translate(-50%, -50%) scale(0.36) rotate(var(--memory-hall-opening-source-rotate));
  }

  34% {
    opacity: 0.9;
    filter: blur(1px) saturate(1.16) brightness(1.18);
    transform: translate(-50%, -50%) scale(1.02) rotate(0deg);
  }

  68% {
    opacity: 0.74;
    filter: blur(0.2px) saturate(1.08) brightness(1.08);
    transform: translate(-50%, -50%) scale(1.18) rotate(0deg);
  }

  to {
    opacity: 0;
    filter: blur(16px) saturate(0.92) brightness(0.88);
    transform: translate(-50%, -50%) scale(1.36) rotate(2deg);
  }
}

@keyframes memoryHallPublicOpeningCardGateArc {
  from {
    opacity: 0;
    filter: blur(7px);
    transform: rotate(var(--memory-hall-gate-rotate)) scale(0.46);
  }

  42% {
    opacity: 0.78;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-gate-rotate) + 4deg)) scale(1.02);
  }

  76% {
    opacity: 0.42;
    filter: blur(0.8px);
    transform: rotate(calc(var(--memory-hall-gate-rotate) + 8deg)) scale(1.18);
  }

  to {
    opacity: 0;
    filter: blur(5px);
    transform: rotate(calc(var(--memory-hall-gate-rotate) + 12deg)) scale(1.32);
  }
}

@keyframes memoryHallPublicOpeningMemoryIris {
  from {
    top: var(--memory-hall-opening-source-y);
    left: var(--memory-hall-opening-source-x);
    opacity: 0;
    filter: blur(12px) saturate(1.08) brightness(1.18);
    clip-path: inset(19% 16% round 28px);
    transform:
      translate(-50%, -50%)
      rotate(var(--memory-hall-opening-source-rotate))
      scale(0.28);
  }

  32% {
    top: 49%;
    left: 50%;
    opacity: 0.5;
    filter: blur(1px) saturate(1.22) brightness(1.2);
    clip-path: inset(3% 3% round 30px);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.02);
  }

  64% {
    top: 50%;
    left: 50%;
    opacity: 0.34;
    filter: blur(0) saturate(1.12) brightness(1.12);
    clip-path: inset(0 round 30px);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.36);
  }

  to {
    top: 50%;
    left: 50%;
    opacity: 0;
    filter: blur(9px) saturate(1.02) brightness(0.86);
    clip-path: inset(0 round 34px);
    transform:
      translate(-50%, -50%)
      rotate(0deg)
      scale(1.78);
  }
}

@keyframes memoryHallPublicOpeningMemoryIrisRing {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: rotate(var(--memory-hall-iris-rotate)) scale(0.58);
  }

  42% {
    opacity: 0.76;
    filter: blur(0);
    transform: rotate(calc(var(--memory-hall-iris-rotate) + 3deg)) scale(1.02);
  }

  76% {
    opacity: 0.38;
    filter: blur(0.7px);
    transform: rotate(calc(var(--memory-hall-iris-rotate) + 8deg)) scale(1.16);
  }

  to {
    opacity: 0;
    filter: blur(5px);
    transform: rotate(calc(var(--memory-hall-iris-rotate) + 13deg)) scale(1.32);
  }
}

@keyframes memoryHallOpeningThresholdRing {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.42) rotate(-10deg);
  }

  42% {
    opacity: 0.72;
    filter: blur(0);
    transform: scale(1.03) rotate(0deg);
  }

  to {
    opacity: 0;
    filter: blur(3px);
    transform: scale(1.24) rotate(7deg);
  }
}

@keyframes memoryHallOpeningStarway {
  from {
    opacity: 0;
    filter: blur(8px);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.04);
  }

  34% {
    opacity: 0.92;
    filter: blur(0);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(0.72);
  }

  72% {
    opacity: 0.64;
    filter: blur(0);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1);
  }

  to {
    opacity: 0;
    filter: blur(5px);
    transform:
      rotate(var(--memory-hall-opening-starway-angle, 0deg))
      scaleX(1.08);
  }
}

@keyframes memoryHallOpeningStarwayDust {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.36);
  }

  36% {
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.44);
  }
}

@keyframes memoryHallOpeningSpark {
  from {
    opacity: 0;
    transform:
      rotate(var(--memory-hall-opening-spark-angle))
      translateX(0)
      scale(0.56);
  }

  36% {
    opacity: 0.94;
  }

  to {
    opacity: 0;
    transform:
      rotate(var(--memory-hall-opening-spark-angle))
      translateX(var(--memory-hall-opening-spark-distance))
      scale(1);
  }
}

@keyframes memoryHallOpeningTargetPulse {
  from {
    filter: brightness(1) saturate(1);
    transform: scale(1.03) translateZ(0);
  }

  54% {
    filter: brightness(1.22) saturate(1.12);
    transform: scale(1.18) translateZ(120px);
  }

  to {
    filter: brightness(1.08) saturate(1.04);
    transform: scale(1.12) translateZ(80px);
  }
}

@keyframes memorial-letter-line-wave-down {
  0% {
    color: rgba(166, 171, 178, 0.3);
    opacity: 0.2;
    transform: translate3d(0, -18px, 0) rotateX(12deg) skewY(-0.8deg);
    filter: blur(7px);
  }

  36% {
    color: var(--letter-story-wave-blue);
    opacity: 1;
    transform: translate3d(0, 6px, 0) rotateX(-5deg) skewY(0.45deg);
    filter: blur(0.8px);
  }

  68% {
    color: rgba(39, 64, 105, 0.86);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, -2px, 0) rotateX(2deg);
    filter: blur(0);
  }

  100% {
    color: var(--letter-story-line-final-color);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes memorial-letter-line-wave-up {
  0% {
    color: rgba(166, 171, 178, 0.3);
    opacity: 0.2;
    transform: translate3d(0, 18px, 0) rotateX(-12deg) skewY(0.8deg);
    filter: blur(7px);
  }

  36% {
    color: var(--letter-story-wave-rose);
    opacity: 1;
    transform: translate3d(0, -6px, 0) rotateX(5deg) skewY(-0.45deg);
    filter: blur(0.8px);
  }

  68% {
    color: rgba(112, 54, 47, 0.78);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, 2px, 0) rotateX(-2deg);
    filter: blur(0);
  }

  100% {
    color: var(--letter-story-line-final-color);
    opacity: var(--letter-story-line-focus-opacity);
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
  }
}

@keyframes memorial-letter-story-breath {
  0%,
  100% {
    opacity: 0.32;
    transform: scaleX(0.72);
  }

  45% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes memorial-letter-story-roller-veil-down {
  0% {
    opacity: 0.88;
    background-position:
      var(--letter-story-scroll-wave-x-reverse, 0) -3vh,
      var(--letter-story-scroll-wave-x, 0) 0,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x-reverse, 0), -7px, 0) skewX(var(--letter-story-scroll-wave-tilt-reverse, 0deg)) scaleY(0.965);
    filter: blur(0);
  }

  38% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x, 0) 1vh,
      var(--letter-story-scroll-wave-x-reverse, 0) -1vh,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x, 0), 5px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(1.07);
    filter: blur(0.75px);
  }

  68% {
    opacity: 0.96;
    background-position:
      0 -1vh,
      var(--letter-story-scroll-wave-x, 0) 1vh,
      0 0;
    transform: translate3d(0, 1px, 0) skewX(var(--letter-story-scroll-wave-tilt-reverse, 0deg)) scaleY(1.018);
    filter: blur(0.35px);
  }

  100% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x-reverse, 0) -3vh,
      var(--letter-story-scroll-wave-x, 0) 0,
      0 0;
    transform: translate3d(0, 0, 0) scaleY(1);
    filter: blur(0);
  }
}

@keyframes memorial-letter-story-roller-veil-up {
  0% {
    opacity: 0.88;
    background-position:
      var(--letter-story-scroll-wave-x, 0) 3vh,
      var(--letter-story-scroll-wave-x-reverse, 0) 0,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x, 0), 7px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(0.965);
    filter: blur(0);
  }

  38% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x-reverse, 0) -1vh,
      var(--letter-story-scroll-wave-x, 0) 1vh,
      0 0;
    transform: translate3d(var(--letter-story-scroll-wave-x-reverse, 0), -5px, 0) skewX(var(--letter-story-scroll-wave-tilt-reverse, 0deg)) scaleY(1.07);
    filter: blur(0.75px);
  }

  68% {
    opacity: 0.96;
    background-position:
      0 1vh,
      var(--letter-story-scroll-wave-x-reverse, 0) -1vh,
      0 0;
    transform: translate3d(0, -1px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(1.018);
    filter: blur(0.35px);
  }

  100% {
    opacity: 1;
    background-position:
      var(--letter-story-scroll-wave-x, 0) 3vh,
      var(--letter-story-scroll-wave-x-reverse, 0) 0,
      0 0;
    transform: translate3d(0, 0, 0) scaleY(1);
    filter: blur(0);
  }
}

@keyframes memorial-letter-story-roller-veil-follow {
  0% {
    opacity: 0.9;
    transform: translate3d(0, 0, 0) skewX(0deg) scaleY(1);
    filter: blur(0);
  }

  52% {
    opacity: 1;
    transform: translate3d(var(--letter-story-scroll-wave-x, 0), 4px, 0) skewX(var(--letter-story-scroll-wave-tilt, 0deg)) scaleY(1.035);
    filter: blur(0.5px);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewX(0deg) scaleY(1);
    filter: blur(0);
  }
}

@keyframes memorial-book-voyage-paper-lift {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  34% {
    filter: saturate(0.96) brightness(1.16);
    transform: perspective(1100px) rotateX(0deg) translateY(0) scale(1.005);
  }
  100% {
    opacity: 0.02;
    filter: saturate(0.76) brightness(1.22) blur(0.8px);
    transform: perspective(1100px) rotateX(11deg) translateY(13vh) scale(0.56);
  }
}

@keyframes memorial-book-voyage-wall-becomes-paper {
  0% {
    opacity: 1;
    filter: saturate(1.08) brightness(1.08);
  }
  45% {
    opacity: 0.62;
    filter: saturate(0.94) brightness(1.18);
  }
  100% {
    opacity: 0.18;
    filter: saturate(0.72) brightness(1.22);
  }
}

@keyframes memorial-book-voyage-paper-sheet-contract {
  0% {
    filter: drop-shadow(0 0 0 rgba(65, 45, 28, 0));
    transform: perspective(1500px) translate3d(0, 0, 0) scale(1);
  }
  54% {
    filter: drop-shadow(0 22px 38px rgba(65, 45, 28, 0.12));
    transform: perspective(1500px) translate3d(0, 0, 0) scale(0.98);
  }
  100% {
    filter: drop-shadow(0 32px 42px rgba(65, 45, 28, 0.18));
    transform: perspective(1500px) translate3d(0, 16vh, 0) scale(0.54);
  }
}

@keyframes memorial-book-voyage-paper-grain-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.72;
  }
}

@keyframes memorial-book-voyage-crease-flash {
  0% {
    opacity: 0;
  }
  14% {
    opacity: 0.72;
  }
  58% {
    opacity: 0.38;
  }
  100% {
    opacity: 0;
  }
}

@keyframes memorial-book-voyage-paper-boat-forms {
  0%, 56% {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(22vh) scale(0.52) rotate(-5deg);
  }
  78% {
    opacity: 0.76;
    transform: translate(-50%, -50%) translateY(20vh) scale(0.76) rotate(-2deg);
  }
  100% {
    opacity: 0.98;
    transform: translate(-50%, -50%) translateY(18vh) scale(0.98) rotate(0deg);
  }
}

@keyframes memorial-book-voyage-letter-absorbs {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
  62% {
    opacity: 0.54;
    filter: blur(1px);
    transform: translate(-50%, -49%) scale(0.9);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translate(-50%, -48%) scale(0.72);
  }
}

@keyframes memorial-book-voyage-ink-fade {
  to {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(-6px);
  }
}

@keyframes memorial-book-voyage-memory-stamp {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  70% {
    opacity: 0.72;
    filter: blur(0.4px) saturate(0.78);
    transform: scale(0.72);
  }
  100% {
    opacity: 0;
    filter: blur(2px) saturate(0.62);
    transform: scale(0.46) translateY(20px);
  }
}

@keyframes memorial-book-voyage-water-open {
  0% {
    opacity: 0.24;
    transform: scaleX(0.34) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) translateY(0);
  }
}

@keyframes memorial-book-voyage-sail {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) rotate(-8deg) scale(0.46);
  }
  14% {
    opacity: 1;
    transform: translate3d(9vw, 3px, 0) rotate(-4deg) scale(0.82);
  }
  46% {
    opacity: 1;
    transform: translate3d(28vw, -3vh, 0) rotate(2deg) scale(0.98);
  }
  100% {
    opacity: 0.88;
    transform: translate3d(60vw, -10vh, 0) rotate(5deg) scale(1.04);
  }
}

@keyframes memorial-book-voyage-skip-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes memorial-book-voyage-fold-left {
  0% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.96;
    transform: rotateY(68deg) translate3d(0, 0, 42px) scale(0.98);
  }
  100% {
    opacity: 0.1;
    transform: rotateY(88deg) translate3d(0, 0, 72px) scale(0.34);
  }
}

@keyframes memorial-book-voyage-fold-right {
  0% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateY(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.96;
    transform: rotateY(-68deg) translate3d(0, 0, 42px) scale(0.98);
  }
  100% {
    opacity: 0.1;
    transform: rotateY(-88deg) translate3d(0, 0, 72px) scale(0.34);
  }
}

@keyframes memorial-book-voyage-fold-top {
  0% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.94;
    transform: rotateX(-64deg) translate3d(0, 0, 40px) scale(0.98);
  }
  100% {
    opacity: 0.1;
    transform: rotateX(-86deg) translate3d(0, 0, 70px) scale(0.34);
  }
}

@keyframes memorial-book-voyage-fold-bottom {
  0% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  18% {
    opacity: 1;
    transform: rotateX(0deg) translate3d(0, 0, 0) scale(1);
  }
  52% {
    opacity: 0.96;
    transform: rotateX(66deg) translate3d(0, 0, 42px) scale(0.98);
  }
  100% {
    opacity: 0.12;
    transform: rotateX(88deg) translate3d(0, 0, 74px) scale(0.36);
  }
}

@keyframes memorial-book-voyage-fold-center {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateZ(0deg) scale(0.98);
  }
  18% {
    opacity: 0.96;
  }
  56% {
    opacity: 0.98;
    transform: translate3d(0, 0, 76px) rotateX(30deg) rotateZ(0deg) scale(0.62);
  }
  100% {
    opacity: 0.04;
    transform: translate3d(0, 0, 108px) rotateX(46deg) rotateZ(2deg) scale(0.3);
  }
}

@keyframes memorial-book-voyage-book-in {
  to {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--book-voyage-rotate))
      scale(var(--book-voyage-scale))
      translateY(0)
      rotateY(-10deg);
  }
}

@keyframes memorial-book-voyage-sparkle {
  0%, 100% {
    opacity: 0.36;
    transform: scale(0.72);
  }
  50% {
    opacity: 1;
    transform: scale(1.24);
  }
}

@keyframes memorial-book-voyage-comfort-flow {
  to {
    transform: translateX(-50%);
  }
}

@keyframes memorial-book-voyage-comfort-note-breathe {
  0%, 100% {
    opacity: 0.86;
  }
  50% {
    opacity: 1;
  }
}

@keyframes studio-user-free-preview-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 200, 0, 0.2),
      0 0 18px rgba(255, 200, 0, 0.14);
  }

  50% {
    box-shadow:
      0 0 0 1px rgba(255, 200, 0, 0.42),
      0 0 30px rgba(255, 200, 0, 0.32);
  }
}

@keyframes studio-free-preview-production-sheen {
  0% {
    transform: translateX(-115%);
  }

  46%,
  100% {
    transform: translateX(115%);
  }
}

@keyframes memorialWatsonEntryImagePan {
  from {
    object-position: 55% 36%;
    transform: translateX(-7%) scale(1.07);
  }

  to {
    object-position: 66% 36%;
    transform: translateX(-15%) scale(1.09);
  }
}
html[data-theme="dark"] body:has(.site-shell-rescue-console) {
  --background: #000000;
  --background-deep: #000000;
  --background-soft: rgba(255, 200, 0, 0.1);
  --background-faint: #0b0b0c;
  --surface: #111111;
  --surface-soft: #181818;
  --surface-muted: #141414;
  --surface-row: rgba(255, 255, 255, 0.06);
  --foreground: #ffffff;
  --muted-foreground: rgba(255, 255, 255, 0.6);
  --foreground-muted: var(--muted-foreground);
  --muted: var(--muted-foreground);
  --border: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(255, 255, 255, 0.075);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.36);
  --shadow-card: 0 14px 38px rgba(0, 0, 0, 0.28);
  background: #000000 !important;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :is(
  .site-main-shell,
  .site-main,
  .site-footer,
  .section,
  .hero-band,
  .page-band,
  .detail-band,
  .muted-section
) {
  background: #000000 !important;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console:is(:hover, .is-desktop-expanded, .is-desktop-pinned) {
  border-color: transparent !important;
  background: #000000 !important;
  box-shadow: none !important;
  color: #ffffff;
  backdrop-filter: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-account-popover {
  border-color: rgba(255, 255, 255, 0.1);
  background: #111111;
  color: #ffffff;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar-search input {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar-search input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .content-card-body,
  .cats-discovery-count,
  .cats-search-shell,
  .cats-results-status,
  .cats-filter-chip,
  .cats-filter-chip-count,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-directory-need,
  .cats-directory-status-line,
  .home-feature-tags .tag,
  .home-content-card .tag,
  .tag,
  .tag-chip,
  .chip-button,
  .language-pill,
  .field input,
  .field textarea,
  .field select,
  .detail-age-card,
  .detail-preset-card,
  .record-note,
  .project-intro-metric,
  .project-intro-feature-metric,
  .project-intro-link,
  .project-intro-remaining,
  .story-page-nav-link,
  .recognition-ticker-kind,
  .help-status-chip,
  .help-detail-participant-stats span,
  .help-direct-choice-grid span,
  .help-invite-row,
  .help-invite-link-card,
  .help-cat-choice,
  .help-room-type-card,
  .help-room-urgency-card,
  .help-visibility-options label,
  .ai-copilot-suggested-copy,
  .ai-copilot-details,
  .ai-copilot-chip-row span
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #181818 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  h1,
  h2,
  h3,
  h4,
  strong,
  .home-feature-card h2,
  .home-feature-copy,
  .home-feature-note,
  .home-content-card h3,
  .cats-discovery-copy h1,
  .cats-feature-body h3,
  .cats-feature-copy,
  .cats-directory-body h3,
  .cats-directory-copy,
  .shorts-hero-card h1,
  .shorts-episode-card h3,
  .shorts-linked-card h3
) {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  p,
  li,
  small,
  .hero-lead,
  .home-feature-date,
  .home-feature-caption,
  .home-card-meta,
  .home-card-description,
  .meta-row,
  .helper-text,
  .cats-directory-status-line,
  .cats-directory-need-line,
  .cats-results-status,
  .shorts-episode-card .meta-row,
  .shorts-linked-card p
) {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .eyebrow,
  .card-eyebrow,
  .meta-label,
  .home-feature-kicker,
  .home-feature-linkline a
) {
  color: rgba(255, 224, 106, 0.9);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-feature-media,
  .home-feature-media-video,
  .cats-feature-media,
  .cats-directory-media,
  .shorts-hero-media,
  .shorts-episode-media
) {
  background: #050505 !important;
}

body:has(.site-shell-rescue-console) :where(
  a[class*="-card"]:hover,
  article[class*="-card"]:hover,
  button[class*="-card"]:hover,
  details[class*="-card"]:hover,
  div[class*="-card"]:hover,
  label[class*="-card"]:hover,
  section[class*="-card"]:hover,
  span[class*="-card"]:hover,
  .help-area-option:hover,
  .help-cat-choice:hover,
  .help-pet-option:hover,
  .donation-copilot-context-grid a:hover,
  .press-secondary-link:hover,
  .cats-quick-tab:hover
) {
  border-color: rgba(15, 23, 42, 0.12) !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  a[class*="-card"]:hover,
  article[class*="-card"]:hover,
  button[class*="-card"]:hover,
  details[class*="-card"]:hover,
  div[class*="-card"]:hover,
  label[class*="-card"]:hover,
  section[class*="-card"]:hover,
  span[class*="-card"]:hover,
  .help-area-option:hover,
  .help-cat-choice:hover,
  .help-pet-option:hover,
  .donation-copilot-context-grid a:hover,
  .press-secondary-link:hover,
  .cats-quick-tab:hover
) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #141414 !important;
  box-shadow: var(--shadow-soft) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .eyebrow {
  color: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-hero {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(180deg, #ffcf35 0%, #ffd032 100%) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-hero::after {
  background:
    linear-gradient(135deg, transparent 0 18px, #fff3cf 18px 32px, transparent 32px 42px) 0 0 / 92px 78px repeat-x,
    linear-gradient(24deg, transparent 0 16px, #fff3cf 16px 31px, transparent 31px 45px) 0 10px / 110px 76px repeat-x !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-copy h1 {
  color: #050505 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-copy p:not(.eyebrow) {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button .support-preset-badge,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected .support-preset-badge {
  background: #ffd344 !important;
  color: #050505 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .chip-button.is-selected span {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet {
  border-color: rgba(17, 17, 17, 0.14) !important;
  background: #fffef8 !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-donation-paypal .support-payment-sheet h3,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet-close {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet-close {
  border-color: rgba(17, 17, 17, 0.14) !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-sheet-close:is(:hover, :focus-visible) {
  background: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-option-card {
  border-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-payment-option-paypal {
  border-color: #111111 !important;
  background: #ffffff !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-band {
  background:
    radial-gradient(circle at 88% 14%, rgba(255, 211, 68, 0.22), transparent 28%),
    linear-gradient(135deg, #6f3413 0%, #8d3c14 100%) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-card,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-card:is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 254, 248, 0.96) !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-body small {
  color: rgba(17, 17, 17, 0.58) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-body strong {
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-public-record-body span {
  color: rgba(17, 24, 39, 0.72) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) {
  border-color: var(--brand) !important;
  background: var(--brand) !important;
  color: #111111 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly > span,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly > strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly > small,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) > span,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) > strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-route-card-monthly:is(:hover, :focus-visible) > small {
  color: #111111 !important;
}

body:has(.site-shell-rescue-console) .rescue-shell-topbar :where(.rescue-shell-topbar-avatar, .rescue-shell-account-avatar) {
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .rescue-shell-topbar .rescue-shell-account-menu summary:is(:hover, :focus-visible) :where(.rescue-shell-topbar-avatar, .rescue-shell-account-avatar) {
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console .sidebar-footer {
  gap: 8px;
  padding-top: 0;
  border-top: 0;
}

body:has(.site-shell-rescue-console) .site-sidebar.is-rescue-console .sidebar-more-menu {
  gap: 6px;
  padding: 0;
  border-left: 0;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .recognition-ticker-label,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-shell-topbar-search-submit,
html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(.button-primary, .button-secondary:hover, .button-ghost:hover) {
  border-color: rgba(255, 200, 0, 0.9);
  background: #ffc800;
  color: #211a00;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(.button-secondary, .button-ghost) {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111111;
  color: #ffffff;
}
body:has(.site-shell-rescue-console) .rescue-search-scope-strip,
body:has(.site-shell-rescue-console) .support-impact-strip {
  display: grid;
  gap: 8px;
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(100%, 760px);
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip span {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip strong {
  color: #0f172a;
  font-size: 1rem;
  line-height: 1;
}

body:has(.site-shell-rescue-console) .rescue-search-scope-strip small {
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.74rem;
  font-weight: 850;
}

body:has(.site-shell-rescue-console) .rescue-search-section-stack {
  display: grid;
  gap: 22px;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group {
  display: grid;
  gap: 12px;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding-inline: 2px;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group-head span {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 930;
}

body:has(.site-shell-rescue-console) .rescue-search-result-group-head strong {
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.78rem;
  font-weight: 860;
}

body:has(.site-shell-rescue-console) .rescue-search-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-start;
}

body:has(.site-shell-rescue-console) .rescue-search-suggestions a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 0 12px;
  background: #ffffff;
  color: rgba(15, 23, 42, 0.72);
  font-size: 0.8rem;
  font-weight: 840;
  text-decoration: none;
}

body:has(.site-shell-rescue-console) :where(
  .home-content-card .content-card-body,
  .home-pet-card h3,
  .home-pet-card .home-card-description,
  .home-pet-card .home-card-tags,
  .home-pet-card .tag > span,
  .home-pet-card .home-card-meta > span,
  .home-story-card .content-card-body,
  .story-record-card .content-card-body,
  .instagram-record-preview .content-card-body,
  #stories-live-context .content-card-body,
  .cats-feature-body,
  .cats-directory-body,
  .support-cat-card .content-card-body,
  .support-cat-card .card-eyebrow > span,
  .support-cat-card h3,
  .support-cat-card .content-card-body > p,
  .support-cat-card .meta-row > span,
  .shorts-episode-card .content-card-body,
  .shorts-episode-card .card-eyebrow > span,
  .shorts-episode-card h3,
  .shorts-episode-card .tag-row,
  .shorts-episode-card .tag > span,
  .shorts-linked-card .card-eyebrow > span,
  .shorts-linked-card h3,
  .shorts-linked-card .meta-row > span,
  .shorts-linked-card .content-card-body,
  .story-record-card .card-eyebrow > span,
  .story-record-card h3,
  .story-record-card .content-card-body > p,
  .story-record-card .tag-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .card-eyebrow > span,
  .instagram-record-preview h3,
  .instagram-record-preview .content-card-body > p,
  .instagram-record-preview .tag-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-feature-tags .tag,
  .home-feature-tags .tag-chip,
  .home-content-card .tag,
  .home-story-card .card-eyebrow,
  .home-story-card .meta-row,
  .home-story-card .tag,
  .story-record-card .card-eyebrow,
  .story-record-card .meta-row,
  .story-record-card .tag,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-priority-badge,
  .cats-directory-card .meta-label,
  .cats-directory-card .tag,
  .cats-directory-status,
  .cats-directory-status-line,
  .cats-directory-need,
  .cats-directory-need-line,
  .support-cat-card .card-eyebrow,
  .support-cat-card .meta-row,
  .support-cat-card .tag,
  .shorts-hero-tags .tag,
  .shorts-episode-card .tag,
  .shorts-episode-card .card-eyebrow,
  .shorts-episode-card .meta-row,
  .shorts-season-summary-toggle .tag,
  .shorts-episode-cat-pill,
  .shorts-episode-cat-more,
  .shorts-episode-cat-summary,
  .shorts-cat-mini-item,
  .shorts-cat-mini-more
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(15, 23, 42, 0.7);
}

body:has(.site-shell-rescue-console) :where(
  .home-content-card,
  .home-feature-card-pet,
  .home-feature-card-video,
  .story-record-card,
  .instagram-record-preview,
  .cats-feature-card,
  .cats-directory-card,
  .support-cat-card,
  .shorts-episode-card,
  .shorts-linked-card
):is(:hover, :focus-visible) {
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

body:has(.site-shell-rescue-console) .cats-discovery-deck {
  max-width: 54ch;
  margin: 0;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.96rem;
  font-weight: 720;
  line-height: 1.48;
}

body:has(.site-shell-rescue-console) .cats-directory-first {
  gap: 18px;
}

body:has(.site-shell-rescue-console) .cats-directory-first .cats-results-grid {
  margin-top: 0;
}

body:has(.site-shell-rescue-console) .support-impact-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:has(.site-shell-rescue-console) .support-impact-strip article {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 15px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  background: #ffffff;
}

body:has(.site-shell-rescue-console) .support-impact-strip span {
  color: rgba(15, 23, 42, 0.56);
  font-size: 0.74rem;
  font-weight: 930;
  text-transform: uppercase;
}

body:has(.site-shell-rescue-console) .support-impact-strip strong {
  color: #0f172a;
  font-size: 1.02rem;
  line-height: 1.18;
}

body:has(.site-shell-rescue-console) .support-impact-strip p {
  margin: 0;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.86rem;
  font-weight: 720;
  line-height: 1.44;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-result-group-head span,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-scope-strip strong,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .support-impact-strip strong {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-results-copy h1 {
  color: #ffffff;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-results-copy p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.68);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-page-form input {
  border-color: rgba(255, 255, 255, 0.12);
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-page-form input:focus-visible {
  border-color: rgba(255, 200, 0, 0.42);
  box-shadow: 0 0 0 4px rgba(255, 200, 0, 0.12);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .rescue-search-page-form input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .rescue-search-scope-strip span,
  .rescue-search-suggestions a,
  .support-impact-strip article,
  .help-community-brief div
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #181818 !important;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .rescue-search-result-group-head strong,
  .rescue-search-scope-strip small,
  .cats-discovery-deck,
  .support-impact-strip span,
  .support-impact-strip p,
  .help-community-brief span
) {
  color: rgba(255, 255, 255, 0.62);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-page-nav-link,
  .story-track-link,
  .story-series-route-card,
  .story-series-route-card.is-latest,
  .story-series-episode-card,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge,
  .story-series-library .inline-note,
  .story-series-more summary,
  .story-hub-hero .story-feature-card-public .inline-note,
  .instagram-record-visual,
  .instagram-record-scene,
  .instagram-record-phone,
  .instagram-record-floating-badge,
  .instagram-record-title-chip
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #181818 !important;
  color: #ffffff;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-page-nav-link:hover,
  .story-track-link:hover,
  .story-series-route-card:hover,
  .story-series-episode-card:hover
) {
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: #1d1d1d !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-series-route-card.is-latest,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge
) {
  border-color: rgba(255, 255, 255, 0.14) !important;
  background: #202020 !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .instagram-record-glow-one {
  background: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .instagram-record-sun {
  background: #cbd5e1;
  box-shadow: 0 0 0 10px rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-hub-stack .eyebrow,
  .story-hub-stack .meta-label,
  .story-page-nav-label,
  .story-series-route-label,
  .story-series-episode-kicker,
  .story-series-episode-badge,
  .story-feature-card-public .eyebrow,
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-library-section .eyebrow,
  .story-video-card .eyebrow,
  #stories-live-context .eyebrow,
  #stories-live-context .card-eyebrow,
  #stories-live-context .tag,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag
) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .press-page :where(.eyebrow, .meta-label) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-content-card .content-card-body,
  .home-story-card .content-card-body,
  .story-record-card .content-card-body,
  .instagram-record-preview .content-card-body,
  #stories-live-context .content-card-body,
  .cats-feature-body,
  .cats-directory-body,
  .support-cat-card .content-card-body,
  .support-cat-card .card-eyebrow > span,
  .support-cat-card h3,
  .support-cat-card .content-card-body > p,
  .support-cat-card .meta-row > span,
  .shorts-episode-card .content-card-body,
  .shorts-episode-card .card-eyebrow > span,
  .shorts-episode-card h3,
  .shorts-episode-card .tag-row,
  .shorts-episode-card .tag > span,
  .shorts-linked-card .card-eyebrow > span,
  .shorts-linked-card h3,
  .shorts-linked-card .meta-row > span,
  .shorts-linked-card .content-card-body,
  .story-record-card .card-eyebrow > span,
  .story-record-card h3,
  .story-record-card .content-card-body > p,
  .story-record-card .tag-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .card-eyebrow > span,
  .instagram-record-preview h3,
  .instagram-record-preview .content-card-body > p,
  .instagram-record-preview .tag-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-feature-tags .tag,
  .home-feature-tags .tag-chip,
  .home-content-card .tag,
  .home-story-card .card-eyebrow,
  .home-story-card .meta-row,
  .home-story-card .tag,
  .story-record-card .card-eyebrow,
  .story-record-card .meta-row,
  .story-record-card .tag,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag,
  .cats-feature-location,
  .cats-feature-chip,
  .cats-priority-badge,
  .cats-directory-card .meta-label,
  .cats-directory-card .tag,
  .cats-directory-status,
  .cats-directory-status-line,
  .cats-directory-need,
  .cats-directory-need-line,
  .support-cat-card .card-eyebrow,
  .support-cat-card .meta-row,
  .support-cat-card .tag,
  .shorts-hero-tags .tag,
  .shorts-episode-card .tag,
  .shorts-episode-card .card-eyebrow,
  .shorts-episode-card .meta-row,
  .shorts-season-summary-toggle .tag,
  .shorts-episode-cat-pill,
  .shorts-episode-cat-more,
  .shorts-episode-cat-summary,
  .shorts-cat-mini-item,
  .shorts-cat-mini-more
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-content-card,
  .home-feature-card-pet,
  .home-feature-card-video,
  .story-record-card,
  .instagram-record-preview,
  .cats-feature-card,
  .cats-directory-card,
  .support-cat-card,
  .shorts-episode-card,
  .shorts-linked-card
):is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24) !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
) {
  --home-card-surface: #ffffff;
  background: var(--home-card-surface) !important;
  overflow: hidden;
}

body:has(.site-shell-rescue-console) .home-card-grid .home-content-card :where(
  .content-card-body,
  h3,
  .card-eyebrow,
  .card-eyebrow > span,
  .home-card-description,
  .home-card-tags,
  .tag,
  .tag > span,
  .home-card-meta,
  .home-card-meta > span
) {
  border-color: transparent !important;
  background: var(--home-card-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
):is(:hover, :focus-visible) {
  background: var(--home-card-surface) !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important;
  transform: translateY(-3px) !important;
}

body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
):is(:hover, :focus-visible) :where(
  .content-card-body,
  h3,
  .card-eyebrow,
  .card-eyebrow > span,
  .home-card-description,
  .home-card-tags,
  .tag,
  .tag > span,
  .home-card-meta,
  .home-card-meta > span
) {
  background: var(--home-card-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
) {
  --home-card-surface: #111111;
  background: var(--home-card-surface) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .home-card-grid .home-pet-card,
  .home-card-grid .home-story-card,
  .home-card-grid .home-instagram-story-card
):is(:hover, :focus-visible) {
  background: var(--home-card-surface) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22) !important;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell {
  position: relative;
  isolation: isolate;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  max-width: 100%;
  height: min(calc((100vw - var(--sidebar-rail-width)) * 0.5625), 76svh, 920px);
  min-height: clamp(520px, calc((100vw - var(--sidebar-rail-width)) * 0.54), 760px);
  align-items: end;
  box-sizing: border-box;
  padding: clamp(30px, 5vw, 68px);
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #050506;
  color: #ffffff;
  box-shadow: none;
}

body:has(.site-shell-rescue-console) .site-main:has(.home-hero-video-shell) {
  --site-main-top: var(--rescue-topbar-height) !important;
}

body:has(.site-shell-rescue-console) .home-hero-band:has(.home-hero-video-shell) {
  padding: 0 !important;
}

body:has(.site-shell-rescue-console) .home-hero-band:has(.home-hero-video-shell) > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

body:has(.site-shell-rescue-console) .home-hero-band:has(.home-hero-video-shell) .home-home-stack {
  gap: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell {
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band {
  width: 100%;
  min-height: 42px;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band .recognition-ticker-label {
  min-height: 42px;
  padding-inline: 14px;
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band .recognition-ticker-window {
  align-self: stretch;
  align-items: center;
  padding-left: 4px;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band .recognition-ticker-kind {
  border-radius: 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell + .recognition-ticker-band + .home-home-highlights {
  width: min(calc(100% - 32px), var(--content-max));
  margin: 18px auto 0;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 44%, rgba(0, 0, 0, 0.48) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.14) 32%, transparent 68%);
}

body:has(.site-shell-rescue-console) .home-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #050506;
  filter: none;
  object-fit: cover;
  object-position: center;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-shell-copy {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  max-width: none;
  min-width: 0;
  align-content: end;
  gap: 20px;
  padding: 0 !important;
  color: #ffffff;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header {
  gap: 12px;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header h1 {
  display: grid;
  gap: 0.08em;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: clamp(2.8rem, 5vw, 4.8rem);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.24),
    0 18px 38px rgba(0, 0, 0, 0.46);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header h1 span {
  display: block;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-lead {
  max-width: min(620px, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1.05rem, 1.42vw, 1.26rem);
  font-weight: 760;
  line-height: 1.36;
  text-shadow: 0 12px 28px rgba(0, 0, 0, 0.54);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action {
  width: auto;
  min-height: 42px;
  border-radius: 999px;
  padding-inline: 16px;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action-primary {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.96);
  color: #090909;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action-primary:is(:hover, :focus-visible) {
  background: #ffffff;
  color: #090909;
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action:not(.home-hero-action-primary) {
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)),
    rgba(0, 0, 0, 0.26);
  color: rgba(255, 255, 255, 0.92);
}

body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action:not(.home-hero-action-primary):is(:hover, :focus-visible) {
  border-color: rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)),
    rgba(0, 0, 0, 0.42);
  color: #ffffff;
}

body:has(.site-shell-rescue-console) :where(.card-grid, .home-card-grid) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) :where(.card-grid, .home-card-grid):is(:hover, :focus-within, :active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .home-card-grid .home-content-card :where(
  .content-card-body,
  .content-card-body *,
  .card-eyebrow,
  .card-eyebrow *,
  h3,
  .home-card-description,
  .home-card-description *,
  .home-card-tags,
  .home-card-tags *,
  .tag-row,
  .tag-row *,
  .tag,
  .tag *,
  .home-card-meta,
  .home-card-meta *,
  .meta-row,
  .meta-row *,
  .eyebrow-icon,
  .tag-icon,
  .meta-row-icon
) {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
):is(:hover, :focus-visible, :active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: translateY(-3px) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid :where(
  .home-content-card,
  .home-pet-card,
  .home-story-card,
  .home-instagram-story-card
):is(:hover, :focus-visible, :active) {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .card-grid,
body:has(.site-shell-rescue-console) .card-grid:hover,
body:has(.site-shell-rescue-console) .card-grid:focus-within,
body:has(.site-shell-rescue-console) .card-grid:active,
body:has(.site-shell-rescue-console) .home-card-grid,
body:has(.site-shell-rescue-console) .home-card-grid:hover,
body:has(.site-shell-rescue-console) .home-card-grid:focus-within,
body:has(.site-shell-rescue-console) .home-card-grid:active,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid:hover,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid:focus-within,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .card-grid:active,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid:hover,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid:focus-within,
html[data-theme="dark"] body:has(.site-shell-rescue-console) .home-card-grid:active {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  body:has(.site-shell-rescue-console) .home-hero-video-shell {
    height: min(72svh, 560px);
    min-height: 480px;
    padding: 24px;
    border-radius: 0;
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell::before {
    background:
      linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.54) 100%);
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-shell-copy {
    gap: 16px;
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-header h1 {
    font-size: clamp(2.1rem, 11vw, 3.1rem);
    line-height: 0.98;
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: min(260px, 100%);
  }

  body:has(.site-shell-rescue-console) .home-hero-video-shell .home-hero-action {
    width: 100%;
  }
}

body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-hub-hero-copy-panel,
  .story-page-nav-link,
  .story-track-link,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-route-card,
  .story-series-route-card.is-latest,
  .story-series-episode-card,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note,
  .story-record-card .content-card-body,
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .content-card-body,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span,
  #stories-live-context .content-card-body,
  #stories-live-context .card-eyebrow,
  #stories-live-context .tag,
  #stories-live-context .meta-row
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-route-label,
  .story-series-episode-kicker,
  .story-page-nav-label,
  .story-track-link small,
  .story-page-nav-link small,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note
) {
  color: rgba(15, 23, 42, 0.66) !important;
}

body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-page-nav-link:is(:hover, :focus-visible),
  .story-track-link:is(:hover, :focus-visible),
  .story-series-route-card:is(:hover, :focus-visible),
  .story-series-episode-card:is(:hover, :focus-visible)
) {
  background: rgba(15, 23, 42, 0.055) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-hub-hero-copy-panel,
  .story-page-nav-link,
  .story-track-link,
  .story-series-panel,
  .story-series-action-card,
  .story-series-library,
  .story-series-route-card,
  .story-series-route-card.is-latest,
  .story-series-episode-card,
  .story-series-episode-card.is-latest,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note,
  .story-record-card .content-card-body,
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .story-record-card .tag > span,
  .story-record-card .meta-row > span,
  .instagram-record-preview .content-card-body,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .instagram-record-preview .tag > span,
  .instagram-record-preview .meta-row > span,
  #stories-live-context .content-card-body,
  #stories-live-context .card-eyebrow,
  #stories-live-context .tag,
  #stories-live-context .meta-row
) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-record-card .card-eyebrow,
  .story-record-card .tag,
  .story-record-card .meta-row,
  .instagram-record-preview .card-eyebrow,
  .instagram-record-preview .tag,
  .instagram-record-preview .meta-row,
  .story-series-episode-badge,
  .story-series-more summary,
  .story-series-more summary > span,
  .story-series-more summary > strong,
  .story-series-route-label,
  .story-series-episode-kicker,
  .story-page-nav-label,
  .story-track-link small,
  .story-page-nav-link small,
  .story-series-library .inline-note,
  .story-hub-hero .story-feature-card-public .inline-note
) {
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) .story-hub-stack :where(
  .story-page-nav-link:is(:hover, :focus-visible),
  .story-track-link:is(:hover, :focus-visible),
  .story-series-route-card:is(:hover, :focus-visible),
  .story-series-episode-card:is(:hover, :focus-visible)
) {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.saved-page-intro) :where(
  .saved-page-intro,
  .saved-mobile-card,
  .saved-summary-card,
  .account-nav-shell
) {
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: #111111 !important;
  color: #ffffff;
}

html[data-theme="dark"] body:has(.saved-page-intro) :where(
  .account-nav-link,
  .account-nav-link.is-active,
  .account-nav-count,
  .mobile-companion-disabled-button
) {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background: #181818 !important;
  color: #ffffff !important;
  box-shadow: none;
}

html[data-theme="dark"] body:has(.saved-page-intro) :where(
  .eyebrow,
  .meta-label,
  .card-eyebrow,
  .card-eyebrow span
) {
  color: rgba(255, 255, 255, 0.78) !important;
}

html[data-theme="dark"] body:has(.site-shell-rescue-console) :where(
  .story-record-card .eyebrow-icon,
  .story-record-card .tag-icon,
  .story-record-card .meta-row-icon,
  #stories-live-context .eyebrow-icon,
  #stories-live-context .tag-icon,
  #stories-live-context .meta-row-icon,
  .instagram-record-preview .eyebrow-icon,
  .instagram-record-preview .tag-icon,
  .instagram-record-preview .meta-row-icon,
  .instagram-record-floating-badge svg
) {
  color: rgba(255, 255, 255, 0.62) !important;
}

@media (max-width: 900px) {
  .rescue-search-results-toolbar {
    grid-template-columns: 1fr;
  }

  .rescue-search-page-form.has-clear {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .rescue-search-page-form.has-clear .rescue-search-clear-link {
    order: 3;
    grid-column: 1 / -1;
    justify-self: start;
  }

  body:has(.site-shell-rescue-console) .rescue-search-scope-strip,
  body:has(.site-shell-rescue-console) .support-impact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  body:has(.site-shell-rescue-console) .rescue-search-scope-strip,
  body:has(.site-shell-rescue-console) .support-impact-strip {
    grid-template-columns: 1fr;
  }
}

body:has(.site-shell-rescue-console) .site-main.site-main-not-home:has(> .rescue-page-band-tight) {
  --site-main-top: var(--rescue-topbar-height);
}

body:has(.site-shell-rescue-console) .site-main-not-home > .page-band.rescue-page-band-tight:first-child,
body:has(.site-shell-rescue-console) .rescue-page-band-tight {
  padding-top: 0;
}

body:has(.site-shell-rescue-console) .site-main-not-home > .page-band.cats-page-band.rescue-page-band-tight:first-child,
body:has(.site-shell-rescue-console) .cats-page-band.rescue-page-band-tight {
  padding-top: clamp(20px, 2.3vw, 34px);
}

body:has(.site-shell-rescue-console) .site-main.site-main-not-home:has(> .support-page-band) {
  --site-main-top: 0px;
}

body:has(.site-shell-rescue-console) #rescue-cats .card-grid {
  align-items: start;
  margin-top: 26px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card {
  min-height: auto;
  align-self: start;
  gap: 10px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .media-thumb {
  height: 178px;
  margin-bottom: 12px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .content-card-body {
  gap: 8px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .card-eyebrow {
  min-height: 22px;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card h3 {
  line-height: 1.12;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .content-card-body > p {
  line-height: 1.45;
}

body:has(.site-shell-rescue-console) #rescue-cats .support-cat-card .meta-row {
  margin-top: 2px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  body:has(.site-shell-rescue-console) #rescue-cats .card-grid {
    margin-top: 18px;
  }
}
.story-editorial-card {
  display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
  min-width: 0; height: 100%; color: var(--text, #17212c); text-decoration: none;
  border: 1px solid rgba(25, 45, 40, .12); border-radius: 20px;
  background: #fff; box-shadow: 0 6px 20px rgba(21, 38, 31, .035);
  transition: transform .18s ease, box-shadow .18s ease;
}
.story-editorial-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(21,38,31,.10); }
.story-editorial-card:focus-visible { outline: 3px solid #126c61; outline-offset: 4px; }
.story-cover { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #eef0eb; flex-shrink: 0; }
.story-cover img { margin: 0; }
.story-cover-type { color: #24483f; background: #e6eee7; }
.story-cover-tone-1.story-cover-type { color: #493d2b; background: #f1e9db; }
.story-cover-tone-2.story-cover-type { color: #2d4052; background: #e4ebf1; }
.story-cover-tone-3.story-cover-type { color: #593e3d; background: #f2e6e1; }
.story-cover-lettering { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; height: 100%; padding: clamp(20px, 2.4vw, 32px); }
.story-cover-label { font-size: 10px; line-height: 1.4; letter-spacing: .13em; text-transform: uppercase; font-weight: 650; }
.story-cover-source { font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 2.6vw, 35px); font-weight: 500; line-height: 1.08; max-width: 18ch; overflow-wrap: anywhere; }
.story-cover-rule { height: 2px; width: 42px; background: currentColor; opacity: .55; }
.story-cover-play { position: absolute; bottom: 16px; left: 16px; display: grid; place-items: center; height: 38px; width: 38px; border-radius: 50%; color: white; background: rgba(10,20,15,.8); }
.story-editorial-copy { display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 22px; }
.story-editorial-source { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 4px; margin: 0; font-size: 12px; line-height: 1.5; }
.story-editorial-source > span { font-weight: 700; color: #365c50; }
.story-editorial-source time { color: #69726e; font-size: 11px; white-space: nowrap; }
.story-editorial-card .story-editorial-copy h3 { font-size: clamp(19px, 1.55vw, 24px); line-height: 1.3; letter-spacing: -.025em; margin: 0; }
.story-editorial-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.65; color: #626e69; }
.story-editorial-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(25,45,40,.10); color: #52695f; font-size: 10px; line-height: 1.5; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.story-editorial-footer > span:last-child { font-size: 20px; }
.story-editorial-featured .story-cover { aspect-ratio: 2 / 1; }
.story-editorial-detail { display: flex; flex-direction: column; overflow: hidden; }
.story-editorial-detail .story-cover { min-height: 320px; aspect-ratio: 16 / 10; }
.story-editorial-detail .story-cover-source { font-size: clamp(32px, 4.5vw, 68px); }
.story-cover-credit { display: block; padding: 10px 16px; font-size: 11px; color: #596b62; background: #f2f4ef; }
html[data-theme="dark"] .story-editorial-card { background: #16211e; color: #ecf1ed; border-color: #34443d; }
html[data-theme="dark"] .story-editorial-source > span { color: #bad8c8; }
html[data-theme="dark"] .story-editorial-summary, html[data-theme="dark"] .story-editorial-source time { color: #bdc8c2; }
html[data-theme="dark"] .story-editorial-footer { color: #b7cbbf; border-color: #34443d; }
html[data-theme="dark"] .story-cover-credit { background: #1e2b25; color: #cad7ce; }
@media (max-width: 640px) {
  .story-editorial-copy { padding: 18px; gap: 12px; }
  .story-cover-source { font-size: 30px; }
  .story-editorial-detail .story-cover { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .story-editorial-card { transition: none; } .story-editorial-card:hover { transform: none; } }
.adopted-profile-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.adopted-profile-hero .detail-gallery-stage-media { aspect-ratio: 1; min-height: 0; height: auto; background: #ecece6; }
.adopted-profile-hero .detail-gallery-stage-media img { object-fit: contain; }
@media (max-width: 720px) { .adopted-profile-hero { grid-template-columns: 1fr; gap: 24px; } }
.adopted-cats-grid .media-thumb { aspect-ratio: 4 / 3; height: auto; background: #ecece6; }
.adopted-cats-grid .media-thumb img { object-fit: contain; }