:root {
  color-scheme: light;
  --ink: #18251d;
  --muted: #68746d;
  --line: #e4e8df;
  --paper: #f7f8f4;
  --panel: #ffffff;
  --green: #21724b;
  --green-dark: #144a31;
  --leaf: #edf6e8;
  --sky: #e2eef2;
  --clay: #b85f3d;
  --gold: #c7962f;
  --blue: #376a8f;
  --shadow: 0 22px 70px rgba(24, 37, 29, 0.1);
}

@media (max-width: 980px) {
  .admin-summary-grid,
  .admin-email-grid,
  .admin-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-panel-head,
  .admin-queue-item {
    grid-template-columns: 1fr;
  }

  .admin-panel-head {
    align-items: stretch;
  }

  .admin-queue-actions {
    justify-items: start;
    grid-auto-flow: column;
    justify-content: start;
  }
}

@media (max-width: 640px) {
  .admin-summary-grid,
  .admin-email-grid,
  .admin-settings-grid {
    grid-template-columns: 1fr;
  }

  .admin-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-tabs button {
    width: 100%;
  }

  .admin-queue-actions {
    grid-auto-flow: row;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auth-boot-screen {
  display: none;
}

html.auth-session-pending .auth-boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--paper);
  color: var(--deep-green);
}

html.auth-session-pending .auth-boot-screen img {
  width: min(320px, 72vw);
  height: auto;
}

html.auth-session-pending .auth-boot-screen span {
  font-size: 16px;
  font-weight: 750;
}

html.auth-session-pending .auth-boot-screen i {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(29, 111, 68, 0.18);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: auth-boot-spin 0.75s linear infinite;
}

html.auth-session-pending .app-shell,
html.auth-session-pending .site-chat-widget,
html.auth-session-pending .toast {
  visibility: hidden;
}

@keyframes auth-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.auth-session-pending .auth-boot-screen i {
    animation-duration: 1.5s;
  }
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

[hidden] {
  display: none !important;
}

.app-shell {
  min-height: 100vh;
}

.signed-in:not(.home-mode) .app-shell {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  align-items: start;
}

.signed-in:not(.home-mode) .sidebar,
.signed-in:not(.home-mode) .portal-nav,
.signed-in:not(.home-mode) .site-footer {
  grid-column: 1 / -1;
}

.home-mode .app-shell {
  min-height: 100vh;
}

.home-mode .main {
  padding: 0;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  padding: 12px clamp(16px, 4vw, 40px);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    padding 180ms ease;
}

.home-mode .sidebar {
  background: rgba(255, 255, 255, 0.9);
}

.home-mode .sidebar {
  position: fixed;
  right: 0;
  left: 0;
}

.home-mode:not(.home-header-scrolled) .sidebar {
  border-bottom-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.home-mode.home-header-scrolled .sidebar {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 36px rgba(24, 37, 29, 0.1);
}

.home-mode .portal-nav {
  display: none;
}

.home-mode .topbar {
  display: none;
}

/* The global top navigation replaces the duplicate landing navigation. */
.landing-nav {
  display: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-home {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
}

.brand-logo {
  display: block;
  width: clamp(190px, 21vw, 290px);
  height: auto;
  transition: width 180ms ease, filter 180ms ease;
}

.home-mode:not(.home-header-scrolled) .brand-logo {
  width: clamp(220px, 24vw, 340px);
  filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0, 0, 0, 0.28));
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--green);
  color: white;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand:has(.brand-logo) strong,
.brand:has(.brand-logo) span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.brand span,
.eyebrow,
.profile-panel p,
.section-head span,
.map-caption span,
.card p,
.lead {
  color: var(--muted);
}

.eyebrow {
  display: block;
  margin-bottom: 5px;
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav-item,
.portal-nav-item,
.tier,
.segmented button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  text-align: center;
  padding: 0 12px;
  white-space: nowrap;
}

.home-mode:not(.home-header-scrolled) .nav-item {
  color: rgba(255, 255, 255, 0.86);
}

.home-mode:not(.home-header-scrolled) .nav-item:hover,
.home-mode:not(.home-header-scrolled) .nav-item.active {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.13);
  color: white;
  box-shadow: none;
}

.nav-item.active,
.portal-nav-item.active,
.tier.active,
.segmented button.active {
  border-color: #b6cab8;
  background: white;
  color: var(--green-dark);
  box-shadow: 0 8px 20px rgba(47, 125, 79, 0.08);
}

.portal-nav {
  position: sticky;
  top: 67px;
  z-index: 25;
  display: flex;
  justify-content: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(247, 248, 244, 0.94);
  backdrop-filter: blur(18px);
  padding: 9px clamp(16px, 4vw, 40px);
}

.portal-nav[hidden] {
  display: none;
}

.dashboard-rail {
  position: sticky;
  top: 96px;
  z-index: 0;
  grid-column: 1;
  align-self: start;
  display: grid;
  width: 260px;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 12px;
  margin: 22px 0 42px clamp(16px, 3vw, 34px);
  padding-bottom: 12px;
}

.dashboard-rail[hidden],
.home-mode .dashboard-rail {
  display: none !important;
}

.signed-in:not(.home-mode) .main {
  grid-column: 2;
  min-width: 0;
  padding-left: 0;
  padding-bottom: 40px;
}

.rail-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  box-shadow: 0 10px 32px rgba(24, 37, 29, 0.08);
}

.rail-profile-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0 16px 16px;
  text-align: center;
}

.rail-profile-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.dashboard-menu-toggle {
  display: none;
}

.rail-cover {
  width: calc(100% + 32px);
  height: 66px;
  background: var(--rail-cover-image, url("./assets/about-harvest-hands.png")) center / cover no-repeat;
}

.rail-avatar,
.mini-avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #3e7a4f, #d8e8bd);
  background-position: center;
  background-size: cover;
  color: white;
  font-weight: 900;
}

.rail-avatar {
  width: 78px;
  aspect-ratio: 1;
  border: 4px solid white;
  margin-top: -42px;
  font-size: 2rem;
}

.rail-profile-card span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.rail-nav-card {
  display: grid;
  padding: 8px;
}

.rail-nav-section {
  display: grid;
  gap: 3px;
  min-width: 0;
  border-bottom: 1px solid var(--line);
  padding: 4px 0 8px;
}

.rail-nav-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.rail-nav-section > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  padding: 2px 10px;
  text-transform: uppercase;
}

.rail-nav-card .portal-nav-item {
  justify-content: start;
  width: 100%;
  min-height: 38px;
  border-radius: 7px;
  text-align: left;
}

.rail-nav-card .portal-nav-item.active {
  background: var(--leaf);
}

.portal-nav-item {
  min-height: 38px;
  background: white;
}

.notification-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.notification-nav-item span {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--clay);
  color: white;
  font-size: 0.76rem;
  font-weight: 900;
  padding: 0 6px;
}

.profile-panel,
.panel,
.card,
.modal {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.profile-panel {
  margin-top: auto;
  padding: 16px;
}

.main {
  min-width: 0;
  padding: 22px clamp(16px, 4vw, 40px) 40px;
}

.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  margin: -4px 0 20px;
  padding-bottom: 16px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

h2 {
  margin-bottom: 14px;
  font-size: 1.18rem;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
}

.tier-switch,
.account-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 5px;
  justify-self: end;
}

.account-actions {
  position: relative;
}

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 120;
  display: grid;
  width: min(340px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid #cfd9cd;
  border-radius: 8px;
  background: white;
  box-shadow: 0 22px 54px rgba(24, 37, 29, 0.2);
  padding: 7px;
}

.account-menu[hidden] {
  display: none;
}

.account-menu-heading {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  padding: 9px 10px 11px;
}

.account-menu-heading span,
.account-menu button > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

.account-menu button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.account-menu button:hover,
.account-menu button:focus-visible {
  background: var(--leaf);
  color: var(--green-dark);
}

.account-menu button > strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-menu-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--clay);
  color: white;
  padding: 0 6px;
  font-size: 0.74rem;
}

.home-mode:not(.home-header-scrolled) .account-actions {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
}

.tier {
  min-height: 36px;
  text-align: center;
}

.compact-btn {
  min-height: 38px;
  padding: 0 12px;
}

.portal-return-btn {
  white-space: nowrap;
}

.home-mode:not(.home-header-scrolled) .portal-return-btn {
  border-color: rgba(255, 255, 255, 0.7);
  background: white;
  color: var(--green-dark);
}

.mobile-menu-btn {
  display: none;
}

.home-mode:not(.home-header-scrolled) .icon-action {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.home-mode:not(.home-header-scrolled) .compact-btn.secondary,
.home-mode:not(.home-header-scrolled) .compact-btn.primary {
  border-color: white;
  background: white;
  color: var(--green-dark);
}

.demo-account-panel {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

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

.demo-account-card {
  display: grid;
  gap: 4px;
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.demo-account-card span {
  color: var(--muted);
  font-size: 0.9rem;
}

.demo-account-card.selected {
  border-color: #86ad81;
  background: #f3f7ef;
  box-shadow: 0 10px 24px rgba(47, 125, 79, 0.12);
}

.icon-action {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--green-dark);
  font-size: 1rem;
  font-weight: 900;
  cursor: pointer;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.landing-nav {
  display: none;
}

.landing-brand .brand-mark {
  border-radius: 50%;
}

.landing-menu {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.landing-menu button {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  font-weight: 720;
}

.landing-menu button:hover {
  background: var(--leaf);
  color: var(--green-dark);
}

.landing-actions {
  display: flex;
  gap: 10px;
}

.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(880px, 100vh);
  padding-top: 64px;
  overflow: hidden;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(10, 22, 16, 0.72) 0%, rgba(10, 22, 16, 0.44) 42%, rgba(10, 22, 16, 0.06) 76%),
    var(--home-hero-image, url("./assets/neighborhood-garden-hero.png")) center / cover no-repeat;
  color: white;
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(850px, 100%);
  padding: clamp(56px, 6vw, 86px) clamp(34px, 7vw, 92px);
}

.hero-content .eyebrow,
.hero-content p {
  color: rgba(255, 255, 255, 0.84);
}

.hero-content h2 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: clamp(3.4rem, 7vw, 6.8rem);
  line-height: 0.94;
  letter-spacing: 0;
}

.hero-content p {
  max-width: 650px;
  font-size: clamp(1.02rem, 2vw, 1.24rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.jumbo {
  min-height: 54px;
  border-radius: 999px;
  padding: 0 22px;
}

.secondary.light {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

.home-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  max-width: 1180px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--line);
  margin: -46px auto 48px;
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow);
}

.home-strip article {
  display: grid;
  gap: 6px;
  background: white;
  padding: 28px;
}

.home-strip-link {
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}

.home-strip-link:hover,
.home-strip-link:focus {
  background: #fbfcf8;
  transform: translateY(-2px);
  outline: 2px solid #c9ddc4;
  outline-offset: -2px;
}

.home-strip strong {
  color: var(--green-dark);
}

.home-strip span {
  color: var(--muted);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 64px;
}

.home-search-preview {
  width: min(1180px, calc(100% - 36px));
  border-radius: 22px;
  margin: 0 auto 64px;
  padding: 30px;
}

.home-search-controls {
  display: grid;
  grid-template-columns: 160px minmax(220px, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}

.preview-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
}

.preview-list {
  max-height: 430px;
  overflow: auto;
}

.mini-result {
  cursor: pointer;
}

.home-card {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  border-radius: 22px;
  padding: 28px;
  overflow: hidden;
}

.home-card p {
  color: var(--muted);
}

.home-card button {
  margin-top: auto;
  align-self: start;
}

.home-card-image {
  width: calc(100% + 56px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: -28px -28px 20px;
}

.page-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 260px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--green-dark);
  color: white;
  padding: clamp(28px, 4vw, 46px);
  margin-bottom: 20px;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 22, 16, 0.78), rgba(10, 22, 16, 0.34), rgba(10, 22, 16, 0.08)),
    var(--page-image) center / cover no-repeat;
}

.page-hero > div {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.page-hero .eyebrow,
.page-hero p {
  color: rgba(255, 255, 255, 0.84);
}

.page-hero h2 {
  margin-bottom: 10px;
  font-size: clamp(2.2rem, 4vw, 4.4rem);
  line-height: 1;
}

.compact-page-hero {
  min-height: 150px;
  padding: clamp(20px, 3vw, 30px);
}

.compact-page-hero h2 {
  max-width: 780px;
  font-size: clamp(1.9rem, 3vw, 3.2rem);
}

.compact-page-hero p {
  max-width: 760px;
  margin-bottom: 0;
}

.page-hero-about { --page-image: url("./assets/about-backyard-meetup.png"); }
.page-hero-discover { --page-image: url("./assets/about-phone-planning.png"); }
.page-hero-profile { --page-image: url("./assets/about-harvest-hands.png"); }
.page-hero-group { --page-image: url("./assets/about-backyard-meetup.png"); }
.page-hero-advisor { --page-image: url("./assets/about-bees-garden.png"); }
.page-hero-partners { --page-image: url("./assets/about-harvest-table.png"); }
.page-hero-community { --page-image: url("./assets/about-backyard-meetup.png"); }
.page-hero-admin { --page-image: url("./assets/about-phone-planning.png"); }

.community-alive-section {
  position: relative;
  overflow: hidden;
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 26px;
  border: 1px solid #bdd3b6;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(11, 31, 19, 0.86), rgba(28, 72, 43, 0.68), rgba(255, 255, 255, 0.12)),
    var(--community-alive-image, url("./assets/about-backyard-meetup.png")) center / cover;
  padding: clamp(22px, 4vw, 34px);
  color: white;
  box-shadow: 0 18px 48px rgba(24, 37, 29, 0.14);
}

.community-alive-section .landing-section-head {
  max-width: 780px;
  margin: 0;
  text-align: left;
}

.community-alive-section .eyebrow,
.community-alive-section .landing-section-head p {
  color: rgba(255, 255, 255, 0.86);
}

.community-alive-section h2 {
  color: white;
}

.community-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.community-feature-grid article {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 14px;
}

.community-feature-grid strong {
  color: var(--green-dark);
}

.community-feature-grid span {
  color: var(--muted);
  font-size: 0.94rem;
}

.planner-feature-band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
  width: 100%;
  margin: 38px 0 64px;
  padding: clamp(42px, 6vw, 78px) max(18px, calc((100vw - 1180px) / 2));
  background: #173f2d;
  color: white;
}

.planner-feature-copy {
  display: grid;
  gap: 16px;
}

.planner-feature-copy .eyebrow,
.planner-feature-copy p {
  color: rgba(255, 255, 255, 0.78);
}

.planner-feature-copy h2 {
  max-width: 700px;
  margin: 0;
  color: white;
}

.planner-feature-copy > p {
  max-width: 660px;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.65;
}

.planner-tier-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.24);
}

.planner-tier-comparison > div {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 138px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.08);
}

.planner-tier-comparison .planner-tier-premium {
  background: #eef6e9;
}

.planner-tier-comparison strong {
  color: white;
}

.planner-tier-comparison span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.92rem;
  line-height: 1.45;
}

.planner-tier-comparison .planner-tier-premium strong {
  color: var(--green-dark);
}

.planner-tier-comparison .planner-tier-premium span {
  color: var(--muted);
}

.planner-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.planner-feature-actions .primary {
  background: white;
  color: var(--green-dark);
}

.planner-feature-actions .secondary {
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
  color: white;
}

.planner-feature-demo {
  min-width: 0;
  border: 1px solid #b7c9ad;
  border-radius: 8px;
  background: #fbfcf8;
  color: var(--text);
  box-shadow: 0 24px 64px rgba(5, 20, 12, 0.34);
  padding: 18px;
}

.planner-demo-toolbar,
.planner-demo-insight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.planner-demo-toolbar > div {
  display: grid;
  gap: 2px;
}

.planner-demo-toolbar strong {
  color: var(--text);
}

.planner-demo-status {
  border: 1px solid #8cb47e;
  border-radius: 999px;
  background: #edf6e9;
  color: var(--green-dark);
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 800;
}

.planner-demo-bed {
  position: relative;
  aspect-ratio: 2 / 1;
  margin: 28px 18px 22px;
  border: 8px solid #8b5f3c;
  border-radius: 5px;
  background:
    linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)),
    repeating-linear-gradient(8deg, #493225 0 8px, #3d2a20 8px 16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.planner-demo-bed::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  border-top: 1px dashed rgba(255, 255, 255, 0.34);
}

.planner-demo-dimension,
.planner-demo-zone {
  position: absolute;
  z-index: 3;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.72rem;
  font-weight: 800;
}

.planner-demo-length { left: 50%; bottom: -26px; transform: translateX(-50%); color: var(--muted); }
.planner-demo-width { left: -34px; top: 50%; transform: translateY(-50%) rotate(-90deg); color: var(--muted); }
.planner-demo-zone.zone-back { top: 7px; left: 10px; }
.planner-demo-zone.zone-front { right: 10px; bottom: 7px; }

.planner-demo-plant {
  position: absolute;
  z-index: 2;
  display: grid;
  place-content: center;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  color: white;
  text-align: center;
  line-height: 1.05;
  box-shadow: 0 5px 12px rgba(11, 22, 15, 0.32);
}

.planner-demo-plant b { font-size: clamp(0.62rem, 1.2vw, 0.82rem); }
.planner-demo-plant small { margin-top: 3px; font-size: 0.62rem; opacity: 0.8; }
.plant-tomato { width: 31%; aspect-ratio: 1; left: 7%; top: 8%; background: #397149; }
.plant-pepper { width: 25%; aspect-ratio: 1; left: 42%; top: 16%; background: #6f8b3d; }
.plant-basil-one { width: 19%; aspect-ratio: 1; left: 21%; bottom: 5%; background: #4d8b63; }
.plant-basil-two { width: 19%; aspect-ratio: 1; left: 54%; bottom: 4%; background: #4d8b63; }
.plant-marigold { width: 17%; aspect-ratio: 1; right: 4%; bottom: 9%; background: #bd742f; }

.planner-demo-insight {
  align-items: flex-start;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.planner-demo-insight strong {
  flex: 0 0 auto;
  color: var(--green-dark);
}

.planner-demo-insight span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 26px;
  align-items: center;
  margin-bottom: 18px;
}

.about-hero img,
.about-story-card img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

.about-hero img {
  aspect-ratio: 16 / 10;
}

.about-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.about-story-card {
  display: grid;
  gap: 16px;
}

.about-story-card img {
  aspect-ratio: 16 / 9;
}

.about-story-card p {
  color: var(--muted);
}

.about-founder-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1fr);
  align-items: stretch;
}

.about-founder-photo {
  display: grid;
  place-items: center;
  min-height: 270px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(26, 58, 39, 0.14), rgba(26, 58, 39, 0.14)),
    var(--about-founder-image, url("./assets/about-backyard-meetup.png")) center / cover;
  color: white;
  text-align: center;
}

.about-founder-photo span,
.about-founder-photo strong {
  display: block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 35, 24, 0.62);
}

.plans-panel {
  width: min(1180px, calc(100% - 36px));
  border-radius: 22px;
  margin: 0 auto 64px;
  padding: 30px;
}

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

.plan-card {
  display: flex;
  flex-direction: column;
  min-height: 310px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fbfcf8;
  padding: 24px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.plan-card.featured {
  border-color: #9fbf96;
  background: #f0f7eb;
}

.plans-panel .plan-card.featured,
.plans-panel .plan-card {
  border-color: var(--line);
  background: #fbfcf8;
}

.plans-panel .plan-card:hover,
.plans-panel .plan-card:focus-within {
  border-color: #8fba8a;
  background: #f0f7eb;
  box-shadow: 0 18px 44px rgba(33, 114, 75, 0.14);
  transform: translateY(-2px);
}

.plans-panel .plan-card:hover button,
.plans-panel .plan-card:focus-within button {
  border-color: var(--green);
  background: var(--green);
  color: white;
}

.plan-card strong {
  display: block;
  margin: 2px 0 12px;
  color: var(--green-dark);
  font-size: 2rem;
}

.plan-card p {
  color: var(--muted);
}

.plan-card button {
  margin-top: auto;
}

.plan-badge,
.mini-badge {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 999px;
  background: #e8f1df;
  color: var(--green-dark);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 850;
  letter-spacing: 0;
  padding: 5px 9px;
  text-transform: uppercase;
}

.plan-badge {
  margin: -4px 0 10px;
}

.landing-section {
  width: min(900px, calc(100% - 36px));
  margin: 0 auto 48px;
  text-align: center;
}

.landing-section-head h2 {
  margin-bottom: 12px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
}

.landing-section-head p {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.6;
}

.bulk-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  width: min(1180px, calc(100% - 36px));
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(20, 74, 49, 0.92), rgba(33, 114, 75, 0.78)),
    var(--bulk-band-image, url("./assets/neighborhood-garden-hero.png")) center 68% / cover no-repeat;
  color: white;
  margin: 0 auto 64px;
  padding: clamp(28px, 5vw, 48px);
}

.bulk-band .eyebrow,
.bulk-band p {
  color: rgba(255, 255, 255, 0.78);
}

.bulk-band h2 {
  max-width: 760px;
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.bulk-band p {
  max-width: 760px;
  margin-bottom: 0;
  line-height: 1.6;
}

.split {
  display: grid;
  grid-template-columns: minmax(380px, 1.08fr) minmax(320px, 0.92fr);
  gap: 18px;
}

.discover-layout {
  display: grid;
  gap: 18px;
}

.discover-layout .search-panel {
  box-shadow: var(--shadow);
}

.map-results-panel {
  min-width: 0;
}

.panel {
  padding: 18px;
  box-shadow: var(--shadow);
}

.section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-head.compact {
  align-items: center;
  margin-bottom: 10px;
}

.search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 12px;
}

.advanced-filters {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(140px, 1fr) minmax(180px, 1.35fr);
  gap: 10px;
  align-items: end;
  margin-bottom: 12px;
  max-width: 100%;
}

.advanced-filters > label,
.discover-checkset {
  min-width: 0;
}

.discover-checkset {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.discover-checkset legend {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
}

.preference-checkset {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.filter-check {
  min-height: 44px;
  min-width: 0;
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  padding: 0 12px;
}

textarea {
  min-height: 116px;
  padding: 12px;
  line-height: 1.45;
  resize: vertical;
}

.field-help {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
  margin-top: 6px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.filter {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--muted);
  padding: 0 12px;
}

.filter.active {
  border-color: var(--green);
  background: var(--leaf);
  color: var(--green-dark);
}

.primary,
.secondary {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 750;
}

.primary {
  border: 1px solid var(--green);
  background: var(--green);
  color: white;
}

.secondary {
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
}

.button-link {
  display: inline-grid;
  place-items: center;
  min-height: 42px;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 750;
  text-decoration: none;
}

.full {
  width: 100%;
}

.map-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f1e7;
}

.google-map-panel,
.compact-map {
  position: relative;
  min-height: 430px;
}

.discover-layout .google-map-panel {
  min-height: 560px;
}

.compact-map {
  min-height: 330px;
}

.fallback-map-surface {
  position: relative;
  min-height: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.48) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(rgba(255, 255, 255, 0.48) 1px, transparent 1px) 0 0 / 64px 64px,
    radial-gradient(circle at 25% 30%, #d4e7c9, transparent 28%),
    radial-gradient(circle at 80% 70%, #dce8ef, transparent 28%),
    #eef2e9;
}

.map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -100%) rotate(-45deg);
  border: 3px solid white;
  border-radius: 50% 50% 50% 0;
  background: var(--pin);
  box-shadow: 0 10px 25px rgba(24, 37, 29, 0.25);
}

.map-pin::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: white;
}

.map-pin.selected {
  width: 32px;
  height: 32px;
  z-index: 3;
  box-shadow: 0 14px 34px rgba(24, 37, 29, 0.34);
}

.map-panel svg {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
}

.map-node circle {
  fill: var(--blue);
  stroke: white;
  stroke-width: 4;
}

.map-node.selected circle {
  fill: var(--clay);
}

.map-node text {
  fill: white;
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
}

.map-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 12px;
  font-size: 0.88rem;
}

.results-column {
  min-width: 0;
}

.categorized-results {
  display: grid;
  gap: 14px;
}

.category-results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.result-category {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 14px;
  box-shadow: var(--shadow);
}

.category-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.category-toggle {
  display: none;
  margin-left: auto;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.88rem;
}

.category-head h3 {
  margin-bottom: 2px;
}

.category-head span:not(.pin-dot) {
  color: var(--muted);
  font-size: 0.86rem;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 5px 12px rgba(24, 37, 29, 0.2);
  transform: rotate(-45deg);
  flex: 0 0 auto;
}

.pin-blue { background: #376a8f; }
.pin-red { background: #b85f3d; }

.compact-results {
  align-content: start;
}

.compact-results .card {
  box-shadow: none;
}

.card-list,
.group-grid,
.partner-grid {
  display: grid;
  gap: 12px;
}

.group-grid,
.partner-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.offers-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.offers-layout .partner-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.offers-ad-rail {
  position: sticky;
  top: 132px;
}

.offers-ad-rail .ad-placement {
  margin-top: 0;
}

.ad-stack {
  display: grid;
  gap: 12px;
}

.ad-stack .ad-placement {
  margin: 0;
}

.notifications-side-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.sponsor-action-row {
  display: flex;
  justify-content: flex-start;
  margin: 18px 0;
}

.sponsor-package-grid {
  align-items: stretch;
}

.sponsor-select-card {
  min-height: auto;
}

.package-compare-list {
  display: grid;
  gap: 0;
  margin: 18px 0 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.package-compare-list div {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
  align-items: start;
  padding: 12px;
  background: white;
}

.package-compare-list div + div {
  border-top: 1px solid var(--line);
}

.package-compare-list dt {
  color: var(--green-dark);
  font-weight: 850;
}

.package-compare-list dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.compact-list {
  margin: 16px 0;
  padding-left: 0;
}

.compact-list li {
  font-size: 0.95rem;
}

.advertiser-dashboard {
  display: grid;
  gap: 18px;
}

.advertiser-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 8px;
  box-shadow: var(--shadow);
}

.advertiser-tabs button {
  min-height: 36px;
  border-radius: 7px;
  background: #fbfcf8;
  padding: 0 12px;
}

.advertiser-tabs button.active {
  border-color: #a8c99d;
  background: var(--leaf);
  color: var(--green-dark);
}

.advertiser-dashboard [data-ad-panel] {
  display: none;
}

.advertiser-dashboard [data-ad-panel].active {
  display: grid;
}

.advertiser-profile-panel,
.advertiser-offer-panel,
.advertiser-ad-panel,
.advertiser-placement-panel,
.advertiser-metrics-panel,
.advertiser-admin-panel {
  display: grid;
  gap: 16px;
}

.advertiser-profile-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.logo-uploader {
  display: grid;
  gap: 10px;
}

.advertiser-logo-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid #cfdcc8;
  border-radius: 8px;
  background: linear-gradient(135deg, #f6f8f1, #d9e8cd);
  color: var(--green);
  font-size: 2rem;
  font-weight: 900;
}

.ad-upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.advertiser-ad-preview {
  margin-bottom: 10px;
}

.placement-zone-grid,
.admin-review-list {
  display: grid;
  gap: 10px;
}

.placement-zone-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.placement-zone-card,
.admin-review-item {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.placement-zone-card.unavailable {
  opacity: 0.62;
}

.placement-zone-card strong,
.admin-review-item strong {
  display: block;
}

.placement-zone-card span,
.admin-review-item span {
  color: var(--muted);
}

.placement-status {
  width: fit-content;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--green-dark);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 5px 9px;
  text-transform: uppercase;
}

.placement-zone-card.unavailable .placement-status {
  background: #f3efe3;
  color: #8b6c2b;
}

.admin-review-item {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.review-status {
  border-radius: 999px;
  background: #eef4ec;
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 10px;
}

.review-status.pending {
  background: #fff4d7;
  color: #816112;
}

.review-status.hold {
  background: #fff1ee;
  color: #8e2f1e;
}

.admin-dashboard {
  display: grid;
  gap: 18px;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.admin-summary-grid article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(47, 70, 52, 0.08);
}

.admin-summary-grid span,
.admin-summary-grid small {
  color: var(--muted);
}

.admin-summary-grid span {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-summary-grid strong {
  color: var(--green-dark);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1;
}

.admin-workspace {
  display: grid;
  gap: 16px;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.admin-tabs button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  color: var(--muted);
  padding: 10px 13px;
  font-weight: 800;
}

.admin-tabs button.active {
  border-color: #a8c99d;
  background: var(--leaf);
  color: var(--green-dark);
}

.admin-data-status {
  display: inline-flex;
  width: fit-content;
  margin: 8px 0 0;
  border: 1px solid #dbe8d5;
  border-radius: 999px;
  background: #fbfcf8;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-data-status.is-live {
  border-color: #a8c99d;
  background: var(--leaf);
  color: var(--green-dark);
}

.admin-data-status.is-warning,
.admin-live-warning {
  border-color: #e5c48d;
  background: #fff8e8;
  color: #8e5a16;
}

.admin-tab-panel {
  display: none;
  gap: 14px;
}

.admin-tab-panel.active {
  display: grid;
}

.admin-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
}

.admin-panel-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.35rem;
}

.admin-filter-row {
  display: flex;
  gap: 8px;
}

.admin-table-list {
  display: grid;
  gap: 10px;
}

.admin-queue-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.admin-queue-item strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
}

.admin-queue-item span,
.admin-queue-item small,
.admin-queue-item p {
  color: var(--muted);
}

.admin-queue-item p {
  margin: 6px 0;
}

.admin-queue-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.admin-detail-panel {
  display: block;
}

.admin-detail-panel[hidden] {
  display: none;
}

.admin-detail-empty,
.admin-detail-card {
  border: 1px solid #cfe0c9;
  border-radius: 8px;
  background: #f7fbf4;
  padding: 16px;
}

.admin-detail-empty {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.admin-detail-empty strong {
  color: var(--green-dark);
}

.admin-detail-card {
  display: grid;
  gap: 14px;
}

.admin-detail-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.admin-detail-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
}

.admin-detail-body {
  display: grid;
  gap: 10px;
}

.admin-detail-body p {
  margin: 0;
  color: var(--ink);
}

.admin-detail-body dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.admin-detail-body dl div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 10px;
}

.admin-detail-body dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-detail-body dd {
  margin: 3px 0 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.admin-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-detail-note {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 800;
}

.admin-detail-note textarea {
  min-height: 86px;
}

.admin-save-note-btn {
  justify-self: start;
}

.admin-permission-note {
  display: grid;
  gap: 5px;
  border: 1px solid #cfe0c9;
  border-radius: 8px;
  background: #f2f8ed;
  padding: 14px;
}

.admin-permission-note strong {
  color: var(--green-dark);
}

.admin-permission-note span {
  color: var(--muted);
}

.admin-role-controls {
  display: grid;
  min-width: 240px;
  gap: 8px;
}

.admin-role-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
}

.admin-role-controls select {
  width: 100%;
}

.admin-email-grid,
.admin-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-settings-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.admin-settings-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--green-dark);
}

.admin-settings-grid p {
  margin: 0;
  color: var(--muted);
}

.admin-setting-status {
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--green-dark);
  padding: 5px 9px;
  font-size: 0.76rem;
  font-weight: 800;
}

.admin-setting-status.is-live {
  background: #dff1e5;
  color: #17633e;
}

.admin-setting-status.is-warning {
  background: #fff1d6;
  color: #805619;
}

.ad-placement {
  margin: 18px 0;
}

.ad-placement:empty {
  display: none;
}

.home-sponsored-banner {
  width: min(1180px, calc(100% - 36px));
  margin: -38px auto 54px;
}

.home-bottom-sponsored-banner {
  width: min(1180px, calc(100% - 36px));
  margin: 0 auto 0;
}

.home-grid-ad {
  margin: 0;
}

.home-grid-ad .ad-slot-rectangle {
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 280px;
}

.about-sponsored-ad {
  grid-column: 1 / -1;
  margin: 0;
}

.ad-slot {
  display: grid;
  gap: 8px;
  border: 1px solid #c8d9c3;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(42, 91, 61, 0.88), rgba(42, 91, 61, 0.42)),
    var(--ad-slot-wide-image, url("./assets/about-harvest-table.png")) center / cover;
  color: white;
  overflow: hidden;
  text-decoration: none;
}

.ad-slot span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ad-slot strong {
  color: white;
  font-size: clamp(1.25rem, 2vw, 2rem);
}

.ad-slot p {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.9);
}

.ad-slot-banner {
  min-height: 150px;
  padding: 22px 26px;
  align-content: center;
}

.home-sponsored-banner .ad-slot-banner,
.home-bottom-sponsored-banner .ad-slot-banner,
.about-sponsored-ad .ad-slot-banner {
  min-height: 142px;
}

.site-footer {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.7fr) minmax(280px, 1fr);
  gap: 34px;
  width: 100%;
  margin-top: 42px;
  background: #123b29;
  color: white;
  padding: 48px clamp(18px, 5vw, 72px);
}

.site-footer strong,
.site-footer span,
.site-footer small {
  display: block;
}

.site-footer p,
.site-footer small {
  color: rgba(255, 255, 255, 0.72);
}

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

.footer-logo {
  width: min(260px, 100%);
  height: auto;
  border-radius: 8px;
  background: white;
  padding: 8px;
}

.footer-brand .brand-mark {
  background: rgba(255, 255, 255, 0.14);
}

.footer-links {
  display: grid;
  gap: 8px;
  align-content: start;
}

.footer-links button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.34);
  text-underline-offset: 4px;
}

.footer-links button:hover {
  color: white;
  text-decoration-color: white;
}

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

.footer-email-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.footer-email-row input {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.footer-email-row input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

.footer-email-row button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: white;
  color: #123b29;
  font-weight: 800;
  padding: 0 18px;
}

.footer-copyright {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  margin-top: 4px;
  padding-top: 18px;
}

.ad-slot-rectangle {
  min-height: 170px;
  max-width: 320px;
  aspect-ratio: 6 / 5;
  padding: 16px;
  align-content: end;
  background:
    linear-gradient(180deg, rgba(18, 31, 24, 0.08), rgba(18, 31, 24, 0.82)),
    var(--ad-slot-rectangle-image, url("./assets/about-bees-garden.png")) center / cover;
}

.sponsored-card {
  border-style: dashed;
  border-color: #c5d7bf;
  background: #fbfcf8;
}

.sponsored-card .sponsored-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.sponsored-card .ad-slot {
  border: 0;
  min-height: 165px;
  max-width: none;
}

.advertiser-status-alert {
  display: grid;
  gap: 4px;
  border: 1px solid #d78b7c;
  border-radius: 8px;
  background: #fff1ee;
  color: #8e2f1e;
  padding: 14px;
}

.sponsor-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}

.sponsor-detail-main {
  display: grid;
  gap: 18px;
}

.ad-spec-grid,
.sponsor-benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ad-spec-grid article,
.sponsor-benefit-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.ad-spec-grid span {
  display: block;
  color: var(--green);
  font-weight: 800;
  margin: 4px 0 8px;
}

.sponsor-detail-banner {
  margin: 0;
}

.sponsor-checkout-panel {
  position: sticky;
  top: 118px;
}

.promo-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.card {
  padding: 15px;
}

.card.selected-result {
  border-color: #8fba8a;
  box-shadow: 0 14px 35px rgba(33, 114, 75, 0.12);
}

.card-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.group-search-preview {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 10px;
  margin: 12px 0;
}

.group-search-preview p {
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.group-thumb,
.group-photo-preview {
  display: grid;
  place-items: center;
  min-height: 80px;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  color: white;
  font-weight: 900;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 12px;
}

.tag {
  border-radius: 999px;
  background: #edf3ea;
  color: #395f3d;
  font-size: 0.78rem;
  padding: 5px 8px;
}

.tag.need {
  background: #eef3f7;
  color: #315d76;
}

.tag.closed {
  background: #f4f1ed;
  color: #716355;
}

.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-layout,
.advisor-grid,
.notifications-layout,
.community-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}

.community-builder-layout {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.community-intro-panel {
  min-height: 0;
}

.community-contact-panel {
  grid-column: 1;
  grid-row: auto;
  position: static;
  align-content: start;
}

.community-builder-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-builder-form .wide-field {
  grid-column: 1 / -1;
}

.community-builder-layout .community-package-panel,
.community-builder-layout .community-process-panel {
  grid-column: 1;
}

.community-builder-layout .community-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-builder-layout .sponsorship-steps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-fit-grid,
.community-package-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.community-fit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-fit-grid span,
.community-package-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 12px;
}

.community-fit-grid span {
  color: var(--green-dark);
  font-weight: 800;
}

.community-package-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-package-grid article {
  display: grid;
  gap: 8px;
  align-content: start;
}

.community-package-grid ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.community-package-grid strong {
  color: var(--green-dark);
}

.community-package-grid p {
  color: var(--muted);
}

.community-package-card.selected {
  border-color: var(--leaf);
  background: var(--mint);
  box-shadow: 0 0 0 2px rgba(37, 122, 76, 0.08);
}

.community-package-card button {
  justify-self: start;
}

.community-request-summary {
  display: grid;
  gap: 0.35rem;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(37, 122, 76, 0.28);
  border-radius: 8px;
  background: var(--mint);
}

.community-request-summary strong {
  color: var(--leaf-dark);
}

.community-request-summary span,
.community-request-summary small {
  color: var(--muted);
}

.community-package-panel,
.community-process-panel {
  grid-column: 1 / -1;
}

.notification-list,
.application-status-list {
  display: grid;
  gap: 10px;
}

.notification-card,
.application-status-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.notification-card {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.notification-card.unread {
  border-color: #a8c99d;
  background: var(--leaf);
}

.notification-card strong,
.application-status-card strong {
  display: block;
}

.notification-card p,
.notification-card small,
.application-status-card p,
.application-status-card small {
  color: var(--muted);
}

.application-status-card.pending {
  border-color: #dfcf9b;
  background: #fffaf0;
}

.application-status-card.approved {
  border-color: #a8c99d;
  background: var(--leaf);
}

.application-status-card.denied {
  border-color: #dfb4aa;
  background: #fff6f3;
}

.chat-stream {
  display: grid;
  gap: 10px;
  min-height: 410px;
  max-height: 52vh;
  overflow: auto;
  padding-right: 4px;
}

.message {
  border-radius: 8px;
  background: #f5f7f3;
  padding: 12px;
}

.message.bot {
  border: 1px solid #d1e2d1;
  background: #edf6ec;
}

.message strong {
  display: block;
  margin-bottom: 4px;
}

.message span {
  display: block;
  white-space: pre-line;
  line-height: 1.38;
}

.message.bot span {
  color: #203028;
}

.message-inline-strong {
  display: inline;
  color: var(--green-dark);
  font-weight: 900;
}

.message-divider {
  height: 1px;
  border: 0;
  background: #cfe0cb;
  margin: 10px 0;
}

.milo-thinking {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  white-space: normal;
}

.milo-thinking-carrot {
  display: inline-block;
  transform-origin: center;
  animation: milo-carrot-nibble 720ms ease-in-out infinite;
  font-size: 1.1rem;
}

.milo-thinking-copy {
  font-weight: 750;
}

@keyframes milo-carrot-nibble {
  0%, 100% { transform: translateX(0) rotate(-8deg); }
  50% { transform: translateX(-3px) rotate(3deg); }
}

.chat-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 14px;
}

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.segmented button {
  text-align: center;
  padding: 0 8px;
}

.prompt-card,
.advisor-answer {
  border-radius: 8px;
  background: #f4f7ef;
  padding: 14px;
}

.advisor-chat-stream {
  display: grid;
  gap: 10px;
  min-height: 360px;
  max-height: 520px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.advisor-chat-stream .message {
  max-width: 88%;
}

.advisor-chat-stream .message:not(.bot) {
  justify-self: end;
  background: #ffffff;
  border: 1px solid #dfe6dc;
}

.advisor-chat-stream .message.pending span {
  color: var(--muted);
}

.advisor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.advisor-chips span {
  border-radius: 999px;
  background: var(--sky);
  color: #2f536c;
  padding: 7px 10px;
  font-size: 0.86rem;
}

.question-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.question {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  text-align: left;
  padding: 0 12px;
}

.advisor-question-prompts {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 10px;
  padding: 0 2px;
}

.advisor-question-prompts > span {
  color: #657069;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.advisor-question-prompts .question {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green-dark);
  padding: 2px 0;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: #a8bea9;
  text-underline-offset: 3px;
}

.advisor-question-prompts .question:hover,
.advisor-question-prompts .question:focus-visible {
  color: var(--green);
  text-decoration-color: currentColor;
}

.advisor-input {
  margin-top: 14px;
}

#masterGardenerList .list-row {
  grid-template-columns: 1fr;
  align-items: stretch;
}

#masterGardenerList .list-row .secondary {
  width: 100%;
}

.partner-card {
  position: relative;
  overflow: hidden;
}

.partner-logo {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 8px;
  background: var(--leaf);
  color: var(--green-dark);
  font-weight: 900;
  margin-bottom: 12px;
}

.partner-card h3 a {
  color: inherit;
  text-decoration: none;
}

.partner-card h3 a:hover {
  text-decoration: underline;
}

.logo-forward-sponsor {
  gap: 12px;
  align-content: start;
}

.sponsor-logo-link {
  display: inline-grid;
  width: max-content;
  text-decoration: none;
}

.logo-forward-sponsor .partner-logo {
  width: 82px;
  height: 46px;
  margin-bottom: 0;
  border: 1px solid #d6e2d0;
  background: white;
  box-shadow: 0 8px 22px rgba(24, 37, 29, 0.06);
  font-size: 0.98rem;
}

.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.sponsor-offer-card {
  display: grid;
  gap: 6px;
  border: 1px solid #d9e5d4;
  border-radius: 8px;
  background: #fbfcf8;
  padding: 12px;
}

.sponsor-offer-card strong {
  color: var(--green-dark);
  font-size: 0.9rem;
}

.sponsor-offer-card p {
  margin: 0;
  color: var(--muted);
}

.member-offer {
  display: grid;
  gap: 4px;
  border: 1px solid #cfdcc8;
  border-radius: 8px;
  background: #f4f7ef;
  padding: 12px;
  margin: 12px 0;
}

.locked-offer .member-offer {
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
}

.locked-offer::after {
  content: "Upgrade to Master Grower to unlock local offers";
  position: absolute;
  inset: auto 14px 76px 14px;
  display: grid;
  place-items: center;
  min-height: 46px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--green-dark);
  font-weight: 850;
  text-align: center;
}

.check-list {
  display: grid;
  gap: 10px;
  padding-left: 18px;
  color: var(--muted);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.metric-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #f8f8f3;
}

.metric-grid strong {
  display: block;
  color: var(--green-dark);
  font-size: 1.4rem;
}

.wide-community {
  grid-column: 1 / -1;
}

.sponsorship-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sponsorship-steps article {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.sponsorship-steps span {
  color: var(--muted);
}

.metric-grid span {
  color: var(--muted);
  font-size: 0.84rem;
}

.scenario-list p {
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 12px 0;
}

.scenario-list p:last-child {
  border-bottom: 0;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(30, 41, 32, 0.58);
  backdrop-filter: blur(10px);
  padding: 20px;
}

.modal-backdrop[hidden] {
  display: none;
}

body.signup-modal-open .site-chat-widget {
  opacity: 0;
  pointer-events: none;
}

body.signup-modal-open .app-shell {
  pointer-events: none;
  user-select: none;
}

.modal {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 0;
  box-shadow: var(--shadow);
}

.icon-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  color: var(--ink);
  font-size: 1.2rem;
}

.onboarding {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  min-height: 640px;
}

.onboarding-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(20, 74, 49, 0.92), rgba(24, 37, 29, 0.88)),
    var(--onboarding-side-image, url("./assets/neighborhood-garden-hero.png")) center / cover no-repeat;
  color: white;
  padding: 32px;
}

.onboarding-side .eyebrow,
.onboarding-side p {
  color: rgba(255, 255, 255, 0.78);
}

.onboarding-side h2 {
  max-width: 260px;
  margin-bottom: 12px;
  font-size: 2.25rem;
  line-height: 1.02;
}

.onboarding-side p {
  line-height: 1.55;
}

.step-list {
  display: grid;
  gap: 8px;
}

.step-pill {
  display: flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  padding: 0 12px;
  font-weight: 750;
  font-size: 0.86rem;
}

.step-pill.active {
  background: white;
  color: var(--green-dark);
}

.onboarding-main {
  display: flex;
  flex-direction: column;
  padding: 44px;
}

.onboarding-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1e9;
  margin: 0 48px 34px 0;
}

.onboarding-progress span {
  display: block;
  width: 16.66%;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transition: width 180ms ease;
}

.onboarding-step {
  display: none;
}

.onboarding-step.active {
  display: block;
}

.onboarding-step h3 {
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.05;
}

.onboarding-step > p {
  max-width: 680px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 22px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.address-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  align-items: start;
}

.address-field {
  position: relative;
}

.address-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.verification-status {
  color: var(--green-dark);
  font-size: 0.82rem;
  font-weight: 750;
}

.verification-status.pending {
  color: #8a6b20;
}

.address-suggestions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.address-suggestion {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfcf8;
  color: var(--ink);
  text-align: left;
  padding: 9px 12px;
}

.address-suggestion:hover {
  border-color: #9fbf96;
  background: var(--leaf);
}

.label-with-help {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.help-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.help-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #b8c7b4;
  border-radius: 50%;
  background: white;
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 850;
  padding: 0;
}

.privacy-popover {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1100;
  width: min(320px, 70vw);
  transform: translateX(-4px);
  opacity: 0;
  pointer-events: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: var(--ink);
  box-shadow: 0 18px 45px rgba(24, 37, 29, 0.14);
  padding: 12px 14px;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.42;
  transition: opacity 140ms ease, transform 140ms ease;
}

.privacy-popover::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 24px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: white;
}

.privacy-popover.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

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

.plan-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.choice-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  color: var(--ink);
  text-align: left;
  padding: 18px;
}

.choice-card strong {
  font-size: 1.05rem;
}

.choice-card span {
  color: var(--muted);
  line-height: 1.45;
}

.choice-card .price-comparison {
  color: var(--green-dark);
  font-weight: 850;
}

.choice-card .mini-badge {
  margin-top: -2px;
}

.price-comparison s,
.payment-summary s,
.billing-toggle s {
  color: #8b9289;
  margin-right: 6px;
}

.choice-card.selected {
  border-color: #8fba8a;
  background: var(--leaf);
  box-shadow: 0 14px 35px rgba(33, 114, 75, 0.12);
}

.community-code {
  margin-top: 14px;
}

.billing-note {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 14px 0 0;
}

.membership-status-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 16px 0 0;
  padding: 18px;
  border: 1px solid #d9e5d4;
  border-radius: 14px;
  background: #f8fbf5;
}

.membership-status-panel strong {
  display: block;
  margin: 4px 0;
  color: var(--green-dark);
  font-size: 1.45rem;
}

.membership-status-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.form-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: #8a5d1c;
  font-weight: 750;
  line-height: 1.4;
}

.captcha-check input {
  color: var(--ink);
}

.conversion-cta {
  display: grid;
  gap: 9px;
  margin: 16px 0;
  border: 1px solid #bdd2b5;
  border-radius: 14px;
  background: #f0f7eb;
  padding: 14px;
}

.conversion-cta strong {
  color: var(--green-dark);
  font-size: 1.05rem;
}

.conversion-cta span {
  color: var(--muted);
  line-height: 1.35;
}

.profile-upgrade-cta,
.locked-preview-cta {
  border-color: #c8dfc1;
  background: #f4faef;
}

.profile-upgrade-cta .card-actions,
.locked-preview-cta .card-actions {
  margin-top: 12px;
}

.locked-preview-view > :not(.locked-preview-cta) {
  opacity: 0.46;
  filter: grayscale(0.35);
}

.locked-preview-view input,
.locked-preview-view textarea,
.locked-preview-view select,
.locked-preview-view button:not(.preview-upgrade-btn) {
  cursor: not-allowed;
}

.locked-nav-item {
  opacity: 0.62;
}

.locked-nav-item::after {
  content: "Locked";
  display: inline-grid;
  place-items: center;
  min-height: 20px;
  border-radius: 999px;
  background: #edf4e8;
  color: var(--green-dark);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 0 8px;
  margin-left: auto;
}

.upgrade-choice-modal {
  width: min(900px, calc(100vw - 28px));
  padding: 0;
  overflow: hidden;
}

.upgrade-modal-head {
  display: grid;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(244, 250, 239, 0.96), rgba(255, 255, 255, 0.98));
  padding: 30px 34px 22px;
}

.upgrade-modal-head h2 {
  max-width: 680px;
  margin: 3px 0 8px;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.08;
}

.upgrade-modal-head .lead {
  max-width: 740px;
  color: var(--muted);
  font-size: 1rem;
}

.upgrade-tier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px 22px 14px;
}

.upgrade-tier-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: auto;
  border-radius: 14px;
  padding: 24px;
}

.upgrade-tier-card.featured {
  border-color: #8fba8a;
  background: #f3faee;
  box-shadow: inset 0 0 0 1px rgba(33, 114, 75, 0.16);
}

.upgrade-tier-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.upgrade-tier-topline em {
  border-radius: 999px;
  background: #dfeeda;
  color: var(--green-dark);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 900;
  padding: 5px 9px;
}

.upgrade-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
}

.upgrade-price strong {
  font-size: 2rem;
  line-height: 1;
}

.upgrade-price span {
  color: var(--muted);
  font-weight: 850;
}

.upgrade-feature-list {
  display: grid;
  gap: 9px;
  margin: 4px 0 6px;
  padding: 0;
  list-style: none;
}

.upgrade-feature-list li {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-top: 1px solid #e2ebdd;
  padding-top: 9px;
}

.upgrade-feature-list strong {
  color: var(--green-dark);
  font-size: 0.86rem;
  text-transform: uppercase;
}

.upgrade-feature-list span {
  color: var(--muted);
  line-height: 1.3;
}

.upgrade-modal-note {
  margin: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
  padding: 14px 34px 24px;
}

@media (max-width: 760px) {
  .upgrade-modal-head {
    padding: 26px 22px 18px;
  }

  .upgrade-tier-grid {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .upgrade-tier-card {
    padding: 20px;
  }

  .upgrade-feature-list li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .upgrade-modal-note {
    padding: 12px 22px 22px;
  }
}

.bot-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inline-info-button {
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--green-dark);
  font: inherit;
  font-weight: 850;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.inline-info-button:hover,
.inline-info-button:focus {
  color: var(--green);
  outline: none;
}

.billing-toggle,
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  color: var(--ink);
  padding: 13px 14px;
  line-height: 1.35;
}

.billing-toggle input,
.check-row input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
  accent-color: var(--green);
}

.billing-toggle span {
  display: grid;
  gap: 3px;
}

.billing-toggle small {
  color: var(--muted);
  font-weight: 650;
}

.profile-setup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.profile-builder {
  display: grid;
  gap: 24px;
}

.profile-section {
  display: grid;
  gap: 12px;
}

.profile-section h3 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

.profile-social-grid {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.photo-uploader {
  display: grid;
  gap: 10px;
}

.photo-preview {
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #3c7a54, #d3e8bf);
  background-position: center;
  background-size: cover;
  color: white;
  font-size: 3rem;
  font-weight: 900;
}

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

.gallery-photo,
.gallery-placeholder {
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  overflow: hidden;
}

.gallery-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-photo figcaption,
.gallery-placeholder {
  color: var(--muted);
  padding: 12px;
}

.gallery-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
}

.wide-field,
.check-panel {
  grid-column: 1 / -1;
}

.check-panel {
  display: grid;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
}

.check-panel legend {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 750;
  margin-bottom: 6px;
}

.extra-space-row {
  max-width: 420px;
}

.profile-summary,
.payment-summary {
  display: grid;
  gap: 6px;
  border: 1px solid #d7e4d1;
  border-radius: 8px;
  background: var(--leaf);
  padding: 16px;
}

.profile-summary span,
.profile-summary p,
.payment-summary span {
  color: var(--muted);
  line-height: 1.45;
}

.payment-summary small {
  display: block;
  margin-top: 6px;
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.site-chat-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  width: min(380px, calc(100vw - 32px));
}

.site-chat-widget.collapsed {
  width: auto;
}

.site-chat-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  min-height: 56px;
  margin-left: auto;
  border: 1px solid #b9d0b8;
  border-radius: 50%;
  background: var(--green);
  color: white;
  box-shadow: 0 16px 35px rgba(24, 37, 29, 0.22);
  padding: 0;
}

.ai-brand-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.ai-garden-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #f7f3e8;
  border: 1px solid #cbdcbe;
  box-shadow: inset 0 -8px 0 rgba(34, 121, 78, 0.08);
}

.ai-garden-icon::before,
.ai-garden-icon::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 13px;
  height: 30px;
  border-radius: 999px 999px 6px 6px;
  background: #f7f3e8;
  border: 1px solid #cbdcbe;
  box-shadow: inset 0 0 0 4px #eadfc9;
}

.ai-garden-icon::before {
  left: 14px;
  transform: rotate(-14deg);
}

.ai-garden-icon::after {
  right: 14px;
  transform: rotate(14deg);
}

.ai-garden-icon span,
.ai-garden-icon span::before,
.ai-garden-icon span::after {
  display: block;
  border-radius: 50%;
}

.ai-garden-icon span {
  position: relative;
  width: 28px;
  height: 17px;
  background: transparent;
}

.ai-garden-icon span::before,
.ai-garden-icon span::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 5px;
  height: 5px;
  background: var(--green);
}

.ai-garden-icon span::before {
  left: 4px;
}

.ai-garden-icon span::after {
  right: 4px;
}

.site-chat-icon {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.milo-rabbit-icon .rabbit-ear,
.milo-rabbit-icon .rabbit-head {
  fill: #f7f3e8;
  stroke: #e8dec9;
}

.milo-rabbit-icon .rabbit-face,
.milo-rabbit-icon .rabbit-chat {
  fill: none;
  stroke: white;
}

.milo-rabbit-icon .rabbit-head {
  stroke-width: 2.4;
}

.milo-rabbit-icon .rabbit-ear {
  stroke-width: 2.2;
}

.milo-rabbit-icon .rabbit-face {
  stroke: #1f7a50;
  stroke-width: 3.2;
}

.milo-rabbit-icon .rabbit-chat {
  stroke-width: 3;
}

.site-chat-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: white;
  box-shadow: 0 22px 60px rgba(24, 37, 29, 0.2);
  padding: 16px;
  margin-bottom: 12px;
}

.site-chat-widget.collapsed .site-chat-panel {
  display: none;
}

.help-chat-stream {
  min-height: 180px;
  max-height: 300px;
}

.human-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.human-help-note {
  margin: 2px 0 -4px;
  font-size: 0.82rem;
}

.human-help input {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.92rem;
}

.human-help button {
  min-height: 38px;
  padding: 0 12px;
  white-space: nowrap;
}

.payment-wall {
  display: grid;
  gap: 18px;
}

.account-layout,
.group-account {
  display: grid;
  gap: 18px;
}

.group-account {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

.group-main-stack,
.group-side-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.group-activity-list {
  display: grid;
  gap: 8px;
}

.group-activity-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 10px 12px;
}

.group-activity-item span {
  color: var(--muted);
  text-align: right;
}

.group-section-toggle {
  display: none;
  min-height: 32px;
  padding: 0 10px;
}

.member-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.member-ellipsis {
  color: var(--muted);
  font-weight: 900;
}

.alert-icon {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: #b85f3d;
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
  vertical-align: middle;
}

.focus-pulse {
  animation: focusPulse 1.8s ease-out;
}

@keyframes focusPulse {
  0% { box-shadow: 0 0 0 0 rgba(184, 95, 61, 0.35); }
  55% { box-shadow: 0 0 0 10px rgba(184, 95, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 95, 61, 0); }
}

.two-column-workspace {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

.wide-workspace {
  grid-column: auto;
}

.group-management-panel {
  position: static;
}

.account-card {
  display: grid;
  gap: 16px;
  scroll-margin-top: 110px;
}

.account-security-list {
  display: grid;
  border-top: 1px solid var(--line);
}

.account-security-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  min-height: 104px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.account-security-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.account-security-row strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 1rem;
}

.account-security-row > div > span:not(.account-security-label):not(.account-status-line) {
  color: var(--muted);
  line-height: 1.4;
}

.account-security-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.account-status-line {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #376347;
  font-size: 0.84rem;
  font-weight: 700;
}

.status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 999px;
  background: #3f8a56;
}

.status-dot.pending {
  background: #bd7a2c;
}

.account-security-form {
  display: grid;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #f7faf5;
  padding: 18px;
}

.account-security-form[hidden] {
  display: none;
}

.account-password-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-security-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.account-card.account-destination-active,
#notificationsView.account-destination-active .panel:first-child {
  animation: accountDestinationPulse 1.8s ease-out;
}

@keyframes accountDestinationPulse {
  0% {
    border-color: #65a06d;
    box-shadow: 0 0 0 0 rgba(45, 123, 70, 0.28);
  }
  55% {
    border-color: #65a06d;
    box-shadow: 0 0 0 10px rgba(45, 123, 70, 0);
  }
  100% {
    border-color: var(--line);
    box-shadow: none;
  }
}

.danger-account-card {
  border-color: rgba(167, 43, 43, 0.28);
  background: #fffafa;
}

.danger-account-card .eyebrow,
.danger-account-card h2 {
  color: #7f1d1d;
}

.danger-account-card .lead {
  color: #5f4545;
}

.danger-btn {
  border: 1px solid #b91c1c;
  background: #b91c1c;
  color: #fff;
  border-radius: 8px;
  min-height: 48px;
  padding: 12px 18px;
  font-weight: 800;
  cursor: pointer;
  justify-self: start;
}

.danger-btn:hover {
  background: #991b1b;
  border-color: #991b1b;
}

.group-hero-panel {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.group-photo-uploader {
  display: grid;
  gap: 10px;
}

.group-photo-preview {
  width: 170px;
  aspect-ratio: 1.2;
  background: linear-gradient(135deg, #3e7a4f, #d8e8bd);
  font-size: 2rem;
}

.table-list {
  display: grid;
  gap: 10px;
}

.list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 12px;
}

.member-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 12px;
  min-width: 0;
}

.member-row span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.member-row select,
.member-row .tag {
  width: 100%;
}

.applicant-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 12px;
}

.applicant-card span,
.applicant-card p,
.applicant-card small {
  color: var(--muted);
}

.applicant-card small {
  display: block;
  margin-top: 4px;
}

.link-button {
  border: 0;
  background: transparent;
  color: var(--green-dark);
  font: inherit;
  font-weight: 850;
  padding: 0;
  text-align: left;
  text-decoration: underline;
}

.list-row strong,
.list-row span,
.list-row small {
  display: block;
}

.list-row span,
.list-row small,
.list-row p {
  color: var(--muted);
}

.list-row p {
  margin: 0;
}

.compact-chat {
  max-height: 280px;
  overflow: auto;
}

.inline-add {
  align-items: end;
  margin-top: 12px;
}

.garden-bed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.garden-log-layout,
.feed-layout,
.bed-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.garden-record-panel,
.garden-form-panel,
.bed-detail-panel,
.feed-main,
.feed-side {
  min-width: 0;
}

.garden-log-ad-rail {
  position: sticky;
  top: 132px;
}

.garden-log-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.garden-bed-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.garden-bed-card.private-bed {
  background: #fffdf7;
}

.garden-bed-card .secondary {
  margin-top: 8px;
}

.harvest-row span + span {
  margin-top: 4px;
  color: var(--green-dark);
  font-weight: 750;
}

.bed-plot {
  display: grid;
  grid-template-columns: repeat(var(--sections, 1), minmax(0, 1fr));
  gap: 6px;
  min-height: 150px;
  border: 1px solid #cfdcc8;
  border-radius: 8px;
  background: #d8c3a0;
  padding: 8px;
  margin-bottom: 12px;
}

.bed-plot span {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 7px;
  background: var(--leaf);
  color: var(--green-dark);
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  min-width: 0;
  padding: 8px 6px;
  overflow-wrap: anywhere;
}

.bed-plot small {
  display: block;
  color: rgba(20, 74, 49, 0.68);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.crop-0 { background: #dcefd2; }
.crop-1 { background: #f0e6bd; }
.crop-2 { background: #d8ece8; }
.crop-3 { background: #ead8cc; }
.crop-4 { background: #e2dfef; }
.crop-5 { background: #e6efd7; }

.garden-record-table {
  display: grid;
  gap: 8px;
  overflow-x: auto;
}

.record-row {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1.4fr 1fr 70px;
  gap: 10px;
  min-width: 780px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  padding: 10px;
}

.record-head {
  background: #eef4ea;
  color: var(--green-dark);
  font-weight: 850;
}

.record-row span,
.record-row small {
  display: block;
}

.record-row small {
  color: var(--muted);
  margin-top: 3px;
}

.segmented-field .segmented {
  justify-content: start;
}

.bed-detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  padding-bottom: 8px;
}

.bed-detail-tabs button {
  min-height: 36px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 0 4px 4px;
  font-weight: 850;
}

.bed-detail-tabs button.active {
  border-color: var(--green);
  color: var(--green-dark);
}

.bed-tab-panel {
  display: none;
}

.bed-tab-panel.active {
  display: grid;
  gap: 16px;
}

.bed-detail-preview {
  display: grid;
  gap: 8px;
  border: 1px solid #dce8d5;
  border-radius: 8px;
  background: #fbfcf8;
  padding: 12px;
}

.detail-bed-plot {
  min-height: 180px;
  margin-bottom: 0;
}

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

.crop-planner-editor {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 16px 0;
}

.production-brief {
  border: 1px solid #cfe0c8;
  border-radius: 8px;
  background: #f4f8f0;
  padding: 16px;
}

.production-brief .section-head,
.production-brief h3,
.production-brief p {
  margin-bottom: 10px;
}

.production-brief p {
  color: var(--muted);
  line-height: 1.5;
}

.production-focus-badge {
  border-radius: 999px;
  background: #dfeeda;
  color: var(--green-dark);
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 850;
}

.production-brief-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.production-demand-field {
  grid-column: 1 / -1;
}

.planner-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.crop-planner-editor .section-head {
  margin-bottom: 12px;
}

.crop-planner-editor h3 {
  margin-bottom: 0;
}

.crop-planner-head,
.crop-planner-row {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(95px, 0.9fr) minmax(125px, 1.1fr) 40px 72px 70px 88px 96px;
  gap: 8px;
  align-items: center;
}

.crop-planner-head {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  padding: 0 4px 6px;
}

.crop-planner-rows {
  display: grid;
  gap: 8px;
}

.crop-planner-row {
  border-top: 1px solid #e5ebe0;
  padding-top: 8px;
}

.crop-planner-row input,
.crop-planner-row select {
  min-width: 0;
  padding-inline: 9px;
}

.crop-row-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.crop-row-field > span {
  display: none;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

@media (max-width: 1400px) and (min-width: 681px) {
  .crop-planner-head {
    display: none;
  }

  .crop-planner-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
  }

  .crop-row-field > span {
    display: block;
  }

  .crop-planner-row .remove-bed-crop-btn {
    align-self: end;
    justify-self: end;
  }
}

.spacing-control {
  position: relative;
}

.allocation-control {
  position: relative;
}

.allocation-control input {
  padding-right: 24px;
}

.allocation-control span {
  position: absolute;
  right: 9px;
  top: 50%;
  color: var(--muted);
  font-size: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.bed-allocation-bar,
.bed-plan-allocation {
  display: flex;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  margin-top: 12px;
}

.bed-allocation-bar > span,
.bed-plan-allocation > span {
  flex: var(--allocation) 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  background: color-mix(in srgb, var(--allocation-color) 24%, white);
  border-right: 1px solid rgba(36, 77, 48, 0.14);
  color: var(--green-dark);
  padding: 6px;
  font-size: 0.7rem;
  font-weight: 850;
  text-align: center;
}

.bed-plan-allocation {
  margin-top: 8px;
}

.bed-plan-allocation > span {
  justify-content: space-between;
  gap: 5px;
}

.bed-plan-allocation small {
  color: var(--muted);
  font-size: 0.68rem;
}

.bed-allocation-bar .allocation-empty {
  flex: 1;
  color: var(--muted);
  background: #f7f8f5;
}

.production-guidance {
  margin-top: 10px;
}

.production-guidance-card {
  display: grid;
  gap: 5px;
  border-left: 4px solid #70a36f;
  border-radius: 6px;
  background: #eef6ea;
  padding: 12px 14px;
}

.production-guidance-card.needs-work {
  border-left-color: #b7792b;
  background: #fff6e5;
}

.production-guidance-card span {
  color: var(--muted);
  line-height: 1.4;
}

.bed-milo-workspace {
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.bed-milo-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bed-milo-heading h3 {
  margin: 2px 0 0;
}

.milo-readiness-note {
  display: grid;
  gap: 4px;
  border: 1px solid #cfe0c8;
  border-radius: 8px;
  background: #f4f8f0;
  padding: 13px 14px;
}

.milo-readiness-note span {
  color: var(--muted);
  line-height: 1.45;
}

.milo-readiness-note .milo-readiness-status {
  margin-top: 5px;
  color: var(--green-dark);
  font-weight: 800;
}

.bed-planner-milo-chat {
  min-height: 180px;
  max-height: 340px;
}

.bed-milo-input {
  margin-top: 0;
}

.spacing-control input {
  padding-right: 28px;
}

.spacing-control span {
  position: absolute;
  right: 9px;
  top: 50%;
  color: var(--muted);
  font-size: 0.75rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.icon-button.remove-bed-crop-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: white;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
}

.dimensioned-bed-plan {
  position: relative;
  width: min(100%, 720px);
  margin: 18px auto 28px;
  padding: 0 32px 24px 0;
}

.bed-plan-soil {
  position: relative;
  width: 100%;
  aspect-ratio: var(--bed-ratio, 2) / 1;
  min-height: 190px;
  max-height: 360px;
  overflow: hidden;
  border: 8px solid #8d6745;
  border-radius: 7px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 64%, rgba(42,25,14,0.18) 0 2px, transparent 3px),
    #694a32;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

.bed-plan-soil::before,
.bed-plan-soil::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(255,255,255,0.25);
}

.bed-plan-soil::before { top: 33%; }
.bed-plan-soil::after { top: 66%; }

.bed-zone-guide {
  position: absolute;
  left: 10px;
  z-index: 1;
  color: rgba(255,255,255,0.65);
  font-size: 0.62rem;
  font-weight: 850;
  text-transform: uppercase;
  pointer-events: none;
}

.zone-back { top: 8px; }
.zone-center { top: 50%; transform: translateY(-50%); }
.zone-front { bottom: 8px; }

.planned-crop {
  position: absolute;
  left: var(--crop-x);
  top: var(--crop-y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--crop-size);
  height: auto;
  aspect-ratio: 1;
  min-width: 16px;
  min-height: 16px;
  max-width: 132px;
  border: 2px solid rgba(255,255,255,0.82);
  border-radius: 50%;
  background: color-mix(in srgb, var(--crop-color) 88%, white);
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 10px rgba(23, 43, 26, 0.28);
}

.planned-crop b {
  font-size: 0.88rem;
  line-height: 1;
}

.planned-crop small {
  position: absolute;
  top: calc(100% + 3px);
  max-width: 88px;
  overflow: hidden;
  color: white;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  white-space: nowrap;
}

.empty-bed-plan {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.82);
  font-weight: 800;
  text-align: center;
  padding: 20px;
}

.bed-direction-label,
.bed-dimension {
  position: absolute;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.bed-direction-north { top: -20px; left: 0; }
.bed-dimension-length { left: 50%; bottom: 0; transform: translateX(-50%); }
.bed-dimension-width { right: 0; top: 50%; transform: translateY(-50%) rotate(90deg); }

.bed-plan-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 0.82rem;
}

.bed-plan-summary strong {
  color: var(--green-dark);
}

.garden-bed-card .dimensioned-bed-plan {
  margin: 14px auto 24px;
  padding-right: 24px;
}

.garden-bed-card .bed-plan-soil {
  min-height: 150px;
  border-width: 6px;
}

.garden-bed-card .planned-crop small,
.garden-bed-card .bed-zone-guide,
.garden-bed-card .bed-direction-label {
  display: none;
}

.milo-bed-plan-btn::before {
  content: "M";
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--leaf);
  color: var(--green-dark);
  font-size: 0.68rem;
  font-weight: 900;
}

.bed-planner-disclaimer {
  margin-top: 10px;
}

.planting-history-list {
  display: grid;
  gap: 12px;
}

.history-entry {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.history-entry p {
  margin-bottom: 6px;
}

.empty-history {
  background: #fffdf7;
}

.bed-detail-actions {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 16px;
}

.system-note {
  display: flex;
  align-items: start;
  gap: 8px;
  border: 1px solid #dce8d5;
  border-radius: 8px;
  background: #f6faf2;
  color: var(--muted);
  padding: 10px 12px;
  font-size: 0.92rem;
}

.compact-note {
  margin-top: 10px;
}

.info-dot {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #aac7aa;
  border-radius: 50%;
  background: white;
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 900;
  padding: 0;
}

.post-composer,
.feed-list,
.feed-main {
  display: grid;
  gap: 14px;
}

.composer-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
}

.post-composer textarea {
  min-height: 76px;
}

.mini-avatar {
  width: 44px;
  height: 44px;
}

.composer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.composer-actions .segmented button {
  min-height: 32px;
  border-radius: 999px;
  font-size: 0.9rem;
  padding: 0 10px;
}

.feed-sort-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--muted);
  font-weight: 750;
}

.feed-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.feed-tabs button {
  min-height: auto;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  padding: 2px 0 4px;
  font-weight: 850;
}

.feed-tabs button.active {
  border-color: var(--green);
  background: transparent;
  color: var(--green-dark);
}

.feed-post {
  display: grid;
  gap: 12px;
}

.feed-post-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.feed-post-head span {
  display: block;
  color: var(--muted);
}

.feed-post img {
  width: 100%;
  max-height: 320px;
  border-radius: 8px;
  object-fit: cover;
}

.feed-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-weight: 750;
}

.feed-like-btn {
  min-height: 34px;
  border: 1px solid #cfe0cb;
  border-radius: 999px;
  background: #fbfcf8;
  color: var(--green-dark);
  padding: 0 12px;
  font-weight: 850;
}

.feed-like-btn.liked {
  border-color: #2f7d4f;
  background: #eaf4e4;
  color: #155c36;
}

.feed-comments {
  display: grid;
  gap: 6px;
}

.feed-comments p {
  margin: 0;
  border-radius: 8px;
  background: #f7f9f4;
  padding: 8px 10px;
  color: var(--ink);
}

.feed-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.feed-comment-form input {
  min-height: 38px;
}

.feed-photo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 8px;
  color: var(--muted);
  font-weight: 750;
}

.feed-photo-preview img {
  width: 64px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
}

#feedView .compact-page-hero {
  min-height: 112px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

#feedView .compact-page-hero h2 {
  max-width: 720px;
  margin-bottom: 0;
  font-size: clamp(1.45rem, 2.3vw, 2.5rem);
  line-height: 1.05;
}

#feedView .compact-page-hero p {
  display: none;
}

#feedView .post-composer {
  gap: 10px;
  padding: 14px;
}

#feedView .composer-row {
  grid-template-columns: 36px minmax(0, 1fr);
}

#feedView .mini-avatar {
  width: 36px;
  height: 36px;
}

#feedView .post-composer textarea {
  min-height: 54px;
  padding: 10px;
}

#feedView .composer-actions {
  gap: 8px;
}

#feedView .composer-actions .segmented {
  display: flex;
  flex: 1 1 220px;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

#feedView .composer-actions .segmented::-webkit-scrollbar {
  display: none;
}

#feedView .composer-actions .segmented button {
  min-height: 28px;
  flex: 0 0 auto;
  font-size: 0.8rem;
  padding: 0 9px;
}

#feedView .post-composer .system-note {
  padding: 7px 9px;
  font-size: 0.82rem;
}

#feedView .post-composer .info-dot {
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
}

#profileView:not(.editing) input,
#profileView:not(.editing) select,
#profileView:not(.editing) textarea {
  background: #f8faf5;
  color: var(--ink);
}

#profileView:not(.editing) .profile-builder > .card-actions {
  display: none;
}

body.signed-in #profileView .profile-builder > .card-actions {
  display: flex;
}

body.signed-in #profileView .edit-profile-action {
  display: none;
}

#profileView.editing .edit-profile-action {
  border-color: #9fbf96;
  background: var(--leaf);
}

.vertical-actions {
  display: grid;
}

.link-preview {
  gap: 10px;
}

.click-block {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 18px;
  cursor: pointer;
}

.click-block:hover,
.click-block:focus {
  border-color: #9fbf96;
  background: var(--leaf);
  outline: none;
}

.detail-preview {
  grid-template-columns: 120px minmax(0, 1fr);
}

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

.group-detail-grid article,
.detail-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.group-detail-grid strong,
.group-detail-grid span {
  display: block;
}

.group-detail-grid span,
.detail-section p {
  color: var(--muted);
}

.match-preview {
  display: grid;
  gap: 12px;
}

.match-preview article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fbfcf8;
  padding: 18px;
}

.match-preview span {
  color: var(--muted);
}

.onboarding-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 28px;
}

.onboarding-actions button {
  min-width: 126px;
}

.toast {
  position: fixed;
  top: 18px;
  left: 50%;
  max-width: 360px;
  z-index: 3000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: translate(-50%, -18px);
  opacity: 0;
  pointer-events: none;
  border-radius: 8px;
  background: #243126;
  color: white;
  box-shadow: 0 18px 44px rgba(18, 31, 24, 0.24);
  padding: 12px 16px;
  text-align: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.show {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast.success {
  background: #1f7a4a;
}

.toast.warning {
  background: #8a4b22;
}

.save-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.save-dots span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.42;
  animation: saveDotPulse 900ms ease-in-out infinite;
}

.save-dots span:nth-child(2) {
  animation-delay: 140ms;
}

.save-dots span:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes saveDotPulse {
  0%, 80%, 100% {
    opacity: 0.32;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.legal-notes-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  place-items: center;
  background: rgba(18, 29, 23, 0.48);
  padding: 22px;
}

.legal-notes-modal {
  display: grid;
  gap: 18px;
  width: min(920px, 100%);
  max-height: min(82vh, 780px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  box-shadow: 0 26px 80px rgba(18, 29, 23, 0.28);
  padding: clamp(18px, 3vw, 28px);
}

.legal-notes-modal .icon-action,
.home-mode:not(.home-header-scrolled) .legal-notes-modal .icon-action {
  border-color: var(--line);
  background: white;
  color: var(--green-dark);
}

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

.legal-notes-grid article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcf8;
  padding: 14px;
}

.legal-notes-grid p,
.legal-note-fineprint {
  color: var(--muted);
  line-height: 1.48;
}

.legal-note-fineprint {
  border-top: 1px solid var(--line);
  margin: 0;
  padding-top: 12px;
  font-size: 0.92rem;
}

.moderation-policy-modal {
  width: min(860px, 100%);
}

.moderation-policy-intro {
  max-width: 72ch;
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .planner-feature-band {
    grid-template-columns: 1fr;
  }

  .planner-feature-copy {
    max-width: 820px;
  }

  .planner-feature-demo {
    width: min(820px, 100%);
  }

  .signed-in:not(.home-mode) .app-shell {
    display: block;
  }

  .sidebar {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .nav {
    grid-column: 1 / -1;
    order: 3;
    justify-content: start;
  }

  .portal-nav {
    top: 118px;
    justify-content: start;
    overflow-x: auto;
  }

  .profile-panel {
    margin-top: 0;
  }

  .split,
  .chat-layout,
  .advisor-grid,
  .notifications-layout,
  .community-layout,
  .offers-layout,
  .payment-layout,
  .preview-map-layout,
  .about-hero,
  .about-story-grid,
  .sponsor-detail-layout,
  .group-hero-panel,
  .group-account,
  .two-column-workspace,
  .garden-log-layout,
  .bed-detail-layout,
  .feed-layout,
  .profile-setup {
    grid-template-columns: 1fr;
  }

  .dashboard-rail {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    margin: 16px clamp(16px, 4vw, 40px) 0;
  }

  .signed-in:not(.home-mode) .main {
    padding-left: clamp(16px, 4vw, 40px);
  }

  .rail-nav-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sponsorship-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-results-grid {
    grid-template-columns: 1fr;
  }

  .ad-spec-grid,
  .sponsor-benefit-grid,
  .advertiser-profile-grid,
  .ad-upload-grid,
  .placement-zone-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-checkout-panel {
    position: static;
  }

  .wide-workspace,
  .group-management-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .group-management-panel {
    position: static;
  }

  .advanced-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-grid,
  .home-strip,
  .plan-grid,
  .about-founder-card,
  .bulk-band,
  .site-footer,
  .onboarding,
  .plan-choice-grid {
    grid-template-columns: 1fr;
  }

  .community-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-menu {
    justify-content: start;
    flex-wrap: wrap;
  }

  .landing-actions {
    justify-content: start;
  }

  .onboarding-side {
    min-height: auto;
    padding: 24px;
  }

  .onboarding-side h2 {
    max-width: none;
  }

  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .onboarding-main {
    padding: 28px;
  }

  .group-grid,
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-social-grid {
    grid-template-columns: 1fr;
  }

  .garden-bed-grid {
    grid-template-columns: 1fr;
  }

  .garden-log-grid {
    grid-template-columns: 1fr;
  }

  .photo-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-contact-panel {
    grid-column: auto;
    grid-row: auto;
    position: static;
  }

  .community-builder-layout .community-package-panel,
  .community-builder-layout .community-process-panel {
    grid-column: auto;
  }

  .community-builder-form,
  .community-builder-layout .community-package-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-builder-layout .sponsorship-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .planner-feature-band {
    gap: 28px;
    margin-bottom: 42px;
    padding-top: 38px;
    padding-bottom: 38px;
  }

  .planner-tier-comparison {
    grid-template-columns: 1fr;
  }

  .planner-tier-comparison > div {
    min-height: 0;
  }

  .planner-feature-actions {
    display: grid;
  }

  .planner-feature-actions button {
    width: 100%;
  }

  .planner-feature-demo {
    padding: 14px;
  }

  .planner-demo-toolbar,
  .planner-demo-insight {
    align-items: flex-start;
    flex-direction: column;
  }

  .planner-demo-bed {
    margin-left: 16px;
    margin-right: 8px;
  }

  .planner-demo-plant small {
    display: none;
  }

  .crop-planner-head {
    display: none;
  }

  .crop-planner-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
  }

  .crop-row-field > span {
    display: block;
  }

  .production-brief-grid {
    grid-template-columns: 1fr;
  }

  .production-demand-field {
    grid-column: auto;
  }

  .production-brief .section-head,
  .bed-milo-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .planner-editor-actions,
  .planner-editor-actions button,
  .bed-milo-heading button {
    width: 100%;
  }

  .bed-allocation-bar,
  .bed-plan-allocation {
    overflow-x: auto;
  }

  .crop-row-field:has([data-crop-field="zone"]) {
    grid-column: 1 / -1;
  }

  .crop-planner-row .remove-bed-crop-btn {
    justify-self: end;
  }

  .bed-dimension-fields {
    grid-template-columns: 1fr;
  }

  .dimensioned-bed-plan {
    padding-right: 24px;
  }

  .bed-plan-soil {
    min-height: 220px;
    aspect-ratio: auto;
  }

  .bed-detail-actions {
    align-items: stretch;
  }

  .bed-detail-actions button {
    width: 100%;
  }
  :root {
    --mobile-header-space: 128px;
  }

  html,
  body,
  .app-shell {
    max-width: 100%;
    overflow-x: hidden;
  }

  body:not(.home-mode) .app-shell {
    padding-top: var(--mobile-header-space);
  }

  .main,
  .sidebar {
    padding: 12px;
  }

  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 80;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .sidebar .brand {
    grid-column: 1;
    grid-row: 1;
    order: 1;
  }

  .sidebar .account-actions {
    display: contents;
    order: 2;
  }

  .sidebar .nav {
    grid-column: 1 / -1;
    grid-row: 3;
    order: 3;
    display: none;
  }

  .mobile-menu-open .sidebar .nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    overflow: visible;
  }

  body:not(.home-mode).mobile-menu-open .app-shell {
    padding-top: 284px;
  }

  .mobile-menu-open .sidebar .nav-item {
    width: 100%;
    min-height: 44px;
    border-color: rgba(20, 74, 49, 0.12);
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    white-space: normal;
  }

  .home-mode:not(.home-header-scrolled).mobile-menu-open .sidebar .nav-item {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.16);
    color: white;
  }

  .home-mode .sidebar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .home-mode:not(.home-header-scrolled) .brand-logo {
    width: min(50vw, 225px);
  }

  .home-mode:not(.home-header-scrolled) .nav-item,
  .home-mode:not(.home-header-scrolled) .compact-btn {
    min-height: 42px;
  }

  .account-actions {
    justify-self: start;
    width: 100%;
  }

  .home-mode .account-actions {
    justify-self: start;
  }

  .mobile-menu-btn {
    order: 1;
    grid-column: 1;
    grid-row: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #headerSignupBtn {
    order: 2;
    grid-column: 2;
    grid-row: 2;
  }

  #portalReturnBtn {
    order: 2;
    grid-column: 2;
    grid-row: 2;
  }

  #signOutBtn {
    order: 3;
    grid-column: 2;
    grid-row: 1;
  }

  #settingsBtn {
    order: 4;
    grid-column: 2;
    grid-row: 1;
  }

  button,
  .button-link,
  .compact-btn,
  .primary,
  .secondary,
  .portal-nav-item,
  .nav-item,
  .choice-card,
  .tier,
  select,
  input {
    min-height: 44px;
  }

  .sidebar .account-actions {
    gap: 0;
    padding: 0;
  }

  .sidebar .compact-btn,
  .sidebar .mobile-menu-btn,
  .sidebar .icon-action {
    min-height: 36px;
    padding: 0 9px;
    font-size: 0.9rem;
  }

  .sidebar #headerSignupBtn {
    justify-self: end;
    min-width: 142px;
    border-color: var(--green);
    background: var(--green);
    color: white;
    font-weight: 850;
  }

  .sidebar #settingsBtn {
    display: inline-grid;
    justify-self: end;
    margin-right: 62px;
  }

  .sidebar .account-menu {
    position: fixed;
    top: 64px;
    right: 12px;
    left: auto;
    width: min(340px, calc(100vw - 24px));
  }

  .sidebar #signOutBtn {
    align-self: center;
    justify-self: end;
    min-height: 30px;
    border-color: transparent;
    background: transparent;
    color: var(--ink);
    padding: 2px 4px 0;
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .home-mode:not(.home-header-scrolled) .sidebar #signOutBtn {
    color: rgba(255, 255, 255, 0.9);
  }

  .portal-nav {
    position: static;
    justify-content: start;
    overflow-x: auto;
  }

  .dashboard-rail {
    width: calc(100% - 24px);
    margin: 10px 12px 0;
    gap: 8px;
  }

  .rail-profile-card {
    grid-template-columns: 44px minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    gap: 4px 10px;
    padding: 9px 10px;
    text-align: left;
  }

  .rail-cover {
    display: none;
  }

  .rail-avatar {
    grid-row: 1 / span 2;
    width: 44px;
    border: 0;
    margin-top: 0;
    font-size: 1.2rem;
  }

  .rail-profile-copy {
    width: 100%;
  }

  .rail-profile-card span {
    font-size: 0.82rem;
  }

  .dashboard-menu-toggle {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-top: 6px;
  }

  .rail-nav-card {
    display: none;
    gap: 10px;
    overflow: visible;
    padding: 10px;
  }

  .dashboard-rail.menu-open .rail-nav-card {
    display: grid;
  }

  .rail-nav-card {
    grid-template-columns: 1fr;
  }

  .rail-nav-section {
    gap: 5px;
    width: 100%;
    padding-bottom: 10px;
  }

  .rail-nav-card .portal-nav-item {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    font-size: 0.9rem;
  }

  .group-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  .group-collapsible.collapsed .group-section-body {
    display: none;
  }

  .group-activity-item {
    display: grid;
    gap: 4px;
  }

  .group-activity-item span {
    text-align: left;
  }

  .garden-record-table {
    overflow: visible;
  }

  .record-head {
    display: none;
  }

  .record-row {
    grid-template-columns: 1fr;
    min-width: 0;
    gap: 8px;
  }

  #feedView .compact-page-hero {
    display: none;
  }

  #feedView .post-composer {
    width: 100%;
    max-width: 100%;
    padding: 12px;
  }

  #feedView .composer-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  #feedView .composer-actions .segmented {
    display: grid;
    flex: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  #feedView .composer-actions .segmented button {
    width: 100%;
    min-height: 40px;
    white-space: normal;
  }

  #feedView #addFeedPostBtn {
    width: 100%;
    min-height: 44px;
  }

  .feed-tabs button {
    min-height: 40px;
    padding: 0 2px 4px;
  }

  .inline-info-button,
  .link-button,
  .feed-more-btn,
  .group-activity-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 4px;
  }

  .info-dot,
  .help-dot {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  #feedView .post-composer .system-note {
    display: none;
  }

  .signed-in:not(.home-mode) .main {
    padding-left: 12px;
  }

  .home-hero {
    min-height: 630px;
    padding-top: 64px;
    background-position: 62% center;
  }

  .hero-content {
    padding: 24px;
  }

  .home-mode:not(.home-header-scrolled) .hero-content {
    padding-top: 60px;
  }

  .hero-content h2 {
    font-size: 3.1rem;
  }

  .home-strip {
    margin-top: -22px;
    margin-bottom: 48px;
    width: calc(100% - 28px);
  }

  .home-grid,
  .home-search-preview,
  .home-sponsored-banner,
  .home-bottom-sponsored-banner,
  .plans-panel,
  .bulk-band,
  .landing-section,
  .community-alive-section {
    max-width: calc(100% - 24px);
  }

  .community-feature-grid {
    grid-template-columns: 1fr;
  }

  .home-card {
    max-width: 100%;
    border-radius: 12px;
    padding: 18px;
  }

  .home-card-image {
    width: 100%;
    margin: 0 0 16px;
    border-radius: 8px;
  }

  .home-search-preview,
  .plans-panel {
    padding: 18px;
  }

  .home-search-preview .section-head,
  .plans-panel .section-head {
    gap: 10px;
  }

  .compact-map {
    min-height: 240px;
  }

  .preview-list {
    max-height: none;
  }

  .preview-list > article:nth-of-type(n + 4) {
    display: none;
  }

  .plan-grid {
    gap: 8px;
  }

  .plan-card {
    min-height: auto;
    padding: 18px;
  }

  .plan-card strong {
    margin-bottom: 6px;
    font-size: 1.75rem;
  }

  .plan-card p {
    margin-bottom: 12px;
  }

  .compact-results.collapsed > article:nth-of-type(n + 4) {
    display: none;
  }

  .category-head {
    align-items: start;
  }

  .category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
  }

  .site-chat-widget {
    right: 10px;
    bottom: 8px;
    width: auto;
  }

  .site-chat-toggle {
    width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    box-shadow: 0 10px 24px rgba(24, 37, 29, 0.2);
  }

  .site-chat-icon {
    width: 22px;
    height: 22px;
  }

  .home-grid,
  .home-sponsored-banner,
  .home-bottom-sponsored-banner,
  .plans-panel,
  .bulk-band,
  .landing-section,
  .community-alive-section {
    width: calc(100% - 28px);
    margin-bottom: 42px;
  }

  .ad-placement-rectangle,
  .ad-slot-rectangle {
    min-height: 0;
    height: auto;
    max-width: 100%;
  }

  .ad-placement-rectangle .ad-slot,
  .ad-slot-rectangle {
    aspect-ratio: auto;
    min-height: 132px;
    padding: 14px;
  }

  .ad-slot-rectangle strong,
  .ad-slot-rectangle p {
    max-width: 220px;
  }

  .ad-stack .ad-placement:nth-of-type(n + 3),
  .notifications-side-stack .ad-placement:nth-of-type(n + 3) {
    display: none;
  }

  .advertiser-tabs button {
    min-height: 44px;
  }

  .modal-backdrop {
    align-items: stretch;
    padding: 8px;
  }

  .modal {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 10px;
  }

  .onboarding {
    min-height: auto;
  }

  .onboarding-side {
    padding: 18px;
  }

  .onboarding-side h2 {
    font-size: 1.65rem;
    margin-bottom: 8px;
  }

  .onboarding-side p {
    font-size: 0.92rem;
  }

  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step-pill {
    justify-content: center;
    min-height: 32px;
    padding: 0 8px;
    font-size: 0.76rem;
  }

  .onboarding-main {
    padding: 18px 18px 86px;
  }

  .onboarding-progress {
    margin: 0 44px 18px 0;
  }

  .onboarding-step h3 {
    font-size: 1.7rem;
  }

  .onboarding-step > p {
    margin-bottom: 14px;
  }

  .onboarding-actions {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    padding: 10px 0 0;
    margin-top: 18px;
  }

  .onboarding-actions button {
    width: 100%;
    min-height: 48px;
  }

  .home-sponsored-banner {
    margin-top: -18px;
  }

  .home-bottom-sponsored-banner {
    margin-top: 0;
  }

  .site-footer {
    gap: 18px;
    margin-top: 18px;
    padding: 28px 18px 88px;
  }

  .footer-brand {
    gap: 8px;
  }

  .footer-brand p {
    margin: 0;
    line-height: 1.35;
  }

  .footer-links {
    gap: 4px;
  }

  .footer-links strong,
  .footer-signup strong {
    font-size: 1rem;
  }

  .footer-links button {
    min-height: 0;
    padding: 5px 0;
    font-size: 0.95rem;
    line-height: 1.25;
  }

  .footer-signup {
    gap: 8px;
  }

  .footer-signup p {
    margin: 0;
    line-height: 1.35;
  }

  .footer-email-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .footer-email-row input {
    min-height: 44px;
  }

  .footer-email-row button {
    min-height: 44px;
  }

  .topbar,
  .section-head,
  .map-caption {
    align-items: stretch;
    flex-direction: column;
  }

  .nav,
  .group-grid,
  .partner-grid,
  .metric-grid,
  .list-row,
  .form-grid,
  .choice-grid,
  .step-list {
    grid-template-columns: 1fr;
  }

  .search-row,
  .chat-input,
  .human-help,
  .home-search-controls,
  .advanced-filters,
  .category-results-grid,
  .community-builder-form,
  .community-fit-grid,
  .community-package-grid,
  .group-detail-grid,
  .photo-gallery,
  .sponsorship-steps,
  .address-control {
    grid-template-columns: 1fr;
  }

  .page-hero {
    min-height: 360px;
    padding: 24px;
  }

  .tier-switch,
  .account-actions {
    width: 100%;
  }

  .tier,
  .compact-btn {
    flex: 1;
  }

  .modal-backdrop {
    padding: 10px;
  }

  .modal {
    max-height: calc(100vh - 20px);
  }

  .onboarding-main {
    padding: 22px;
  }

  .onboarding-progress {
    margin-right: 44px;
  }

  .privacy-popover {
    width: calc(100vw - 36px);
    transform: translateY(-4px);
  }

  .privacy-popover::before {
    display: none;
  }

  .privacy-popover.show {
    transform: translateY(0);
  }

  .legal-notes-backdrop {
    align-items: end;
    padding: 12px;
  }

  .legal-notes-modal {
    max-height: 88vh;
  }

  .legal-notes-grid {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    align-items: stretch;
    padding: 8px;
  }

  .modal {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 10px;
  }

  .onboarding-side {
    padding: 18px;
  }

  .onboarding-side h2 {
    font-size: 1.65rem;
  }

  .onboarding-side p {
    font-size: 0.92rem;
  }

  .step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .onboarding-main {
    padding: 18px 18px 86px;
  }

  .onboarding-progress {
    margin: 0 44px 18px 0;
  }

  .onboarding-actions {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.96);
    padding: 10px 0 0;
    margin-top: 18px;
  }

  .onboarding-actions button {
    width: 100%;
    min-height: 48px;
  }
}
.milo-usage-card {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #cfdbc9;
  background: #f5f8f2;
  border-radius: 6px;
  color: #34443a;
}

.milo-credit-meter {
  display: grid;
  gap: 12px;
  border: 1px solid #9ebd9b;
  border-radius: 7px;
  background: white;
  box-shadow: 0 10px 24px rgba(35, 91, 57, 0.08);
  margin-bottom: 14px;
  padding: 14px;
}

.milo-credit-meter[hidden] {
  display: none;
}

.milo-credit-meter-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #dfe8dc;
  padding-bottom: 10px;
}

.milo-credit-meter-heading > span {
  color: #51645a;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.milo-credit-meter-heading > strong {
  color: var(--green-dark);
  font-size: 1.2rem;
  white-space: nowrap;
}

.milo-credit-meter-heading > strong span {
  font-size: 1.55rem;
}

.milo-credit-meter-row {
  display: grid;
  gap: 7px;
}

.milo-credit-meter-row > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.milo-credit-meter-row > div:first-child > span {
  color: #5f6d65;
  font-size: 0.84rem;
  text-align: right;
}

.milo-credit-meter-row b {
  color: #174f34;
}

.milo-credit-meter-row.additional {
  border-top: 1px solid #e2e9df;
  padding-top: 10px;
}

.milo-credit-progress {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6ece3;
}

.milo-credit-progress > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #2f7d4f;
  transition: width 300ms ease, background 200ms ease;
}

.milo-credit-progress.medium > span {
  background: #c48b2b;
}

.milo-credit-progress.low > span {
  background: #b4543c;
}

.milo-usage-card p,
.public-milo-limit {
  margin: 5px 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.milo-credit-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
}

.milo-credit-options > span {
  flex-basis: 100%;
}

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

.milo-credit-summary article {
  min-height: 76px;
  padding: 11px;
  border: 1px solid #d6dfd1;
  border-radius: 6px;
  background: #f8fbf6;
}

.milo-credit-summary article.total {
  border-color: #9ebd9b;
  background: #edf6e9;
}

.milo-credit-summary span,
.milo-credit-history small {
  display: block;
  color: #657069;
  font-size: 0.78rem;
}

.milo-credit-summary strong {
  display: block;
  margin-top: 5px;
  color: #174f34;
  font-size: 1.2rem;
}

.milo-purchase-status {
  flex-basis: 100%;
  margin: 2px 0;
  color: #526258;
  font-size: 0.86rem;
}

.milo-credit-history {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}

.milo-credit-history h3 {
  margin: 4px 0;
  font-size: 1rem;
}

.milo-credit-history > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #e2e8df;
}

.credit-grant { color: #17663e !important; }
.credit-use { color: #7a5624 !important; }

.milo-credit-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #d6dfd1;
  border-radius: 6px;
  background: #fff;
}

.milo-credit-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  text-align: left;
}

.milo-credit-table caption {
  padding: 10px 12px;
  color: #1d4f35;
  font-weight: 700;
  text-align: left;
}

.milo-credit-table th,
.milo-credit-table td {
  padding: 9px 12px;
  border-top: 1px solid #e2e8df;
  vertical-align: top;
}

.milo-credit-table th {
  background: #f1f6ee;
  color: #304137;
  font-size: 0.84rem;
}

.milo-credit-table td:nth-child(2),
.milo-credit-table th:nth-child(2) {
  width: 74px;
  text-align: center;
  font-weight: 700;
}

.milo-credit-purchase-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  margin-top: 8px;
  padding: 18px;
  border: 1px solid #91b58e;
  border-left: 5px solid var(--green);
  border-radius: 7px;
  background: #eaf5e6;
}

.milo-credit-purchase-copy {
  min-width: 0;
}

.milo-credit-purchase-copy h3 {
  margin: 2px 0 4px;
  color: var(--green-dark);
  font-size: 1.18rem;
}

.milo-credit-purchase-copy p {
  max-width: 720px;
  margin: 0;
  line-height: 1.45;
}

.milo-credit-pack-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.milo-credit-purchase-panel .milo-purchase-status {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(47, 125, 79, 0.2);
}

.milo-credit-fine-print {
  color: #657069;
  font-size: 0.82rem !important;
}

.compact-button {
  min-height: 36px;
  padding: 7px 11px;
}

@media (max-width: 760px) {
  .milo-credit-pack-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.public-milo-limit {
  color: #5d695f;
  padding: 0 2px 10px;
}

.admin-credit-section {
  display: grid;
  gap: 14px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.admin-credit-form {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(110px, 0.45fr) minmax(240px, 1.4fr) auto;
  gap: 10px;
  align-items: end;
}

.admin-credit-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-weight: 700;
}

.admin-credit-ledger-title {
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.admin-credit-ledger {
  display: grid;
  gap: 8px;
}

@media (max-width: 900px) {
  .admin-credit-form { grid-template-columns: 1fr 1fr; }
  .admin-credit-note { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .milo-credit-summary,
  .admin-credit-form { grid-template-columns: 1fr; }
  .admin-credit-note { grid-column: auto; }

  .milo-credit-meter-heading,
  .milo-credit-meter-row > div:first-child {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .milo-credit-meter-heading > strong {
    white-space: normal;
  }

  .milo-credit-meter-row > div:first-child > span {
    text-align: left;
  }
}
.admin-comp-member-panel {
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  background: var(--soft-green);
}

.admin-comp-member-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr) auto;
  gap: 12px;
  align-items: end;
}

.admin-comp-member-form label {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-weight: 700;
}

.admin-comp-member-form input,
.admin-comp-member-form button {
  min-height: 48px;
}

@media (max-width: 980px) {
  .admin-comp-member-form {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .admin-comp-member-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .account-security-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .account-security-row > button {
    width: 100%;
  }

  .account-password-grid {
    grid-template-columns: 1fr;
  }

  .account-security-actions {
    flex-direction: column-reverse;
  }

  .account-security-actions button {
    width: 100%;
  }
}

.admin-member-profile-link {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  line-height: 1.25;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(30, 117, 74, 0.35);
  text-underline-offset: 3px;
  cursor: pointer;
}

.admin-member-profile-link:hover,
.admin-member-profile-link:focus-visible {
  color: var(--green);
  text-decoration-color: currentColor;
}

.member-public-profile-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.member-public-profile-toolbar span {
  color: var(--muted);
  font-weight: 700;
}

.admin-member-public-profile {
  display: grid;
  gap: 22px;
  padding: 26px;
}

.admin-member-profile-loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}

.admin-public-profile-hero {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}

.admin-public-profile-hero h2 {
  margin: 4px 0 6px;
  font-size: clamp(1.8rem, 3vw, 2.7rem);
}

.admin-public-profile-hero p {
  margin: 0;
  color: var(--muted);
}

.admin-public-profile-name {
  margin-bottom: 6px !important;
  color: var(--ink) !important;
  font-weight: 700;
}

.admin-public-profile-avatar {
  width: 132px;
  height: 132px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--soft-green);
  box-shadow: 0 0 0 1px var(--line);
  color: var(--green);
  font-size: 2.2rem;
  font-weight: 800;
}

.admin-public-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-public-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.admin-public-profile-tags span {
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--soft-green);
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-public-profile-privacy {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8faf7;
  color: var(--muted);
  font-size: 0.94rem;
}

.admin-public-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-public-profile-section {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.admin-public-profile-section h3 {
  margin: 4px 0 10px;
}

.admin-public-profile-section p {
  margin: 0;
  color: var(--muted);
  white-space: pre-line;
}

.admin-public-profile-section dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.admin-public-profile-section dl div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
}

.admin-public-profile-section dt {
  color: var(--muted);
  font-weight: 700;
}

.admin-public-profile-section dd {
  margin: 0;
}

.admin-public-profile-gallery-section {
  display: grid;
  gap: 14px;
}

.admin-public-profile-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-public-profile-gallery figure {
  margin: 0;
}

.admin-public-profile-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

.admin-public-profile-gallery figcaption {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.86rem;
}

@media (max-width: 760px) {
  .member-public-profile-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-public-profile-hero {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .admin-public-profile-avatar {
    width: 92px;
    height: 92px;
    font-size: 1.6rem;
  }

  .admin-public-profile-grid {
    grid-template-columns: 1fr;
  }

  .admin-public-profile-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .admin-member-public-profile {
    padding: 18px;
  }

  .admin-public-profile-hero {
    grid-template-columns: 1fr;
  }

  .admin-public-profile-gallery {
    grid-template-columns: 1fr;
  }
}