@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700&family=Nunito:wght@400;600;700;800&display=swap");

:root {
  color-scheme: light;
  font-family: "Nunito", system-ui, sans-serif;
  color: #373447;
  background: #fffaf3;
  font-synthesis: none;
  --ink: #373447;
  --muted: #746f7f;
  --peach: #ff8d6b;
  --peach-dark: #e66e50;
  --cream: #fffaf3;
  --paper: #ffffff;
  --yellow: #ffd76b;
  --mint: #8edcc2;
  --blue: #8fcbe8;
  --lilac: #c4a9e8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 15%, rgb(255 215 107 / 20%) 0 3px, transparent 4px),
    radial-gradient(circle at 92% 26%, rgb(255 141 107 / 17%) 0 4px, transparent 5px),
    var(--cream);
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

.page {
  width: min(1180px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 48px 48px;
}

.topbar {
  min-height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-family: "Baloo 2", cursive;
  font-size: 26px;
  font-weight: 700;
}

.brand-button {
  border: 0;
  background: transparent;
  padding: 0;
}

.brand-paw {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 15px;
  background: var(--peach);
  font-size: 23px;
  box-shadow: 0 6px 0 rgb(230 110 80 / 18%);
}

.paw-feet {
  position: relative;
  display: block;
  width: 27px;
  height: 33px;
  transform: rotate(-18deg);
}

.tiny-paw {
  position: absolute;
  display: block;
  width: 10px;
  height: 9px;
  border-radius: 55% 55% 48% 48%;
  background: #1677c8;
  transform-origin: center bottom;
  animation: foot-walk-forward 1.8s linear infinite;
}

.tiny-paw::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -1px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1677c8;
  box-shadow: 4px -2px 0 #1677c8, 8px 0 0 #1677c8;
}

.paw-left {
  left: 3px;
  bottom: 5px;
  transform: rotate(-8deg);
}

.paw-right {
  right: 3px;
  bottom: 5px;
  animation-delay: -700ms;
  transform: rotate(8deg);
}

.brand:hover .tiny-paw {
  animation: tiny-paws-fall .68s linear infinite;
}

.brand:hover .paw-right {
  animation-delay: 0ms;
}

@keyframes tiny-paws-fall {
  0% {
    opacity: 0;
    translate: 0 -28px;
    scale: 1;
  }
  15% {
    opacity: 1;
    translate: 0 -20px;
  }
  85% {
    opacity: 1;
    translate: 0 15px;
  }
  100% {
    opacity: 0;
    translate: 0 20px;
    scale: 1;
  }
}

@keyframes foot-walk-forward {
  0% {
    filter: drop-shadow(0 4px 2px rgb(25 77 121 / 10%));
    opacity: 0;
    translate: 0 -28px;
    scale: 0.82;
  }
  8% {
    opacity: 0.7;
    translate: 0 -23px;
    scale: 0.88;
  }
  16% {
    opacity: 1;
    translate: 0 -17px;
    scale: 0.92;
  }
  24% {
    filter: drop-shadow(0 1px 0 rgb(25 77 121 / 18%));
    opacity: 1;
    translate: 0 -8px;
    scale: 1.08 0.92;
  }
  34% {
    scale: 1;
  }
  58% {
    filter: drop-shadow(0 1px 0 rgb(25 77 121 / 18%));
    opacity: 1;
    translate: 0 4px;
  }
  78% {
    filter: drop-shadow(0 5px 2px rgb(25 77 121 / 8%));
    opacity: 1;
    translate: 0 13px;
    scale: 0.84;
  }
  90% {
    opacity: 0.9;
    translate: 0 17px;
  }
  100% {
    opacity: 0;
    translate: 0 20px;
    scale: 0.82;
  }
}

.privacy-pill,
.step-pill {
  padding: 9px 14px;
  border: 1px solid #efe7dc;
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  color: #6b6673;
  font-size: 13px;
  font-weight: 700;
}

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

.welcome-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-blog-button,
.group-blog-button,
.agenda-button,
.settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 41px;
  min-height: 39px;
  padding: 0;
  border: 1px solid #e9dfd4;
  border-radius: 13px;
  background: rgb(255 255 255 / 72%);
  color: #625d6a;
  font-size: 17px;
  font-weight: 800;
}

.topbar-blog-button,
.group-blog-button {
  gap: 8px;
  width: auto;
  padding: 0 14px;
  color: var(--peach-dark);
  font-size: 14px;
}

.topbar-blog-button span:last-child,
.group-blog-button span:last-child {
  line-height: 1;
}

.topbar-blog-button:hover,
.topbar-blog-button:focus-visible,
.group-blog-button:hover,
.group-blog-button:focus-visible,
.agenda-button:hover,
.agenda-button:focus-visible,
.settings-button:hover,
.settings-button:focus-visible {
  border-color: #d8ccc0;
  background: white;
}


.admin-account-wrap {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 180px);
}

.admin-account-card {
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid #f0e2d6;
  border-radius: 28px;
  background:
    radial-gradient(circle at top right, rgb(255 215 107 / 26%) 0, transparent 170px),
    #fffdf9;
  box-shadow: 0 18px 40px rgb(145 120 94 / 10%);
}

.admin-account-card h1 {
  margin: 10px 0 10px;
  font-family: "Baloo 2", cursive;
  font-size: 37px;
  line-height: 1;
}

.admin-account-card > p {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.admin-account-form {
  display: grid;
  gap: 12px;
  text-align: left;
}

.admin-account-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-account-form input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #e9dfd4;
  border-radius: 13px;
  color: var(--ink);
}

.account-page {
  min-height: 100vh;
  padding: 36px 24px;
  background:
    radial-gradient(circle at 12% 18%, rgb(255 200 139 / 46%) 0, transparent 260px),
    radial-gradient(circle at 88% 78%, rgb(143 221 198 / 30%) 0, transparent 300px),
    #fffaf4;
}

.account-wrap {
  display: grid;
  grid-template-columns: minmax(250px, 1.1fr) minmax(260px, .8fr) minmax(260px, .8fr);
  gap: 18px;
  width: min(1120px, 100%);
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  align-items: center;
}

.account-intro {
  padding: 34px;
}

.account-paw {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  border-radius: 23px;
  background: #ff8d6b;
  box-shadow: 0 14px 28px rgb(213 111 79 / 24%);
  font-size: 32px;
}

.account-intro h1,
.account-card h2 {
  margin: 9px 0 12px;
  font-family: "Baloo 2", cursive;
  color: var(--ink);
  line-height: 1.03;
}

.account-intro h1 {
  max-width: 440px;
  font-size: clamp(42px, 5vw, 65px);
}

.account-intro p {
  max-width: 410px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.account-card {
  display: grid;
  gap: 20px;
  align-self: center;
  min-height: 350px;
  padding: 30px;
  border: 1px solid #f0e2d6;
  border-radius: 27px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 18px 40px rgb(145 120 94 / 10%);
}

.account-create-card {
  background: linear-gradient(145deg, #fff4d5, #fffdf8 65%);
}

.account-card h2 {
  font-size: 30px;
}

.account-form {
  display: grid;
  gap: 12px;
  align-content: start;
}

.account-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.account-form input {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #e9dfd4;
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
}

.account-form .blog-access-note {
  min-height: 18px;
  margin: 0;
}

.home-button {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--peach-dark);
  font-size: 13px;
  font-weight: 800;
}

.home-button:hover,
.home-button:focus-visible {
  background: #fff0e8;
}

.mobile-menu-toggle {
  display: grid;
  place-content: center;
  width: 42px;
  height: 42px;
  gap: 4px;
  border: 1px solid #e6dcd1;
  border-radius: 13px;
  background: rgb(255 255 255 / 82%);
}

.mobile-menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: var(--ink);
}

.mobile-menu-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: block;
  background: rgb(50 42 55 / 32%);
  backdrop-filter: blur(3px);
}

.mobile-menu-panel {
  width: min(350px, calc(100vw - 42px));
  min-height: 100%;
  margin-left: auto;
  padding: 28px 22px;
  background:
    radial-gradient(circle at top right, rgb(255 218 169 / 58%) 0, transparent 150px),
    #fffdf9;
  box-shadow: -18px 0 45px rgb(63 45 31 / 18%);
  animation: mobile-menu-enter 180ms ease-out both;
}

.mobile-menu-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  color: var(--ink);
  font-family: "Baloo 2", cursive;
  font-size: 29px;
}

.mobile-menu-heading button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #fff0e8;
  color: var(--peach-dark);
  font-size: 27px;
  line-height: 1;
}

.mobile-menu-links {
  display: grid;
  gap: 8px;
}

.mobile-menu-links button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  gap: 13px;
  padding: 0 13px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #514c58;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.mobile-menu-links button:hover,
.mobile-menu-links button:focus-visible {
  background: #fff0e8;
  color: var(--peach-dark);
}

.mobile-menu-links button span {
  display: grid;
  place-items: center;
  width: 29px;
  font-size: 21px;
}

@keyframes mobile-menu-enter {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.birthday-celebration {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 132px;
  gap: 22px;
  padding: 22px 30px;
  overflow: hidden;
  border: 2px solid #ffc76a;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 18%, rgb(255 255 255 / 75%) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 72%, rgb(255 141 107 / 22%) 0 7px, transparent 8px),
    linear-gradient(120deg, #fff2aa, #ffdca0 48%, #ffd0c2);
  box-shadow: 0 15px 38px rgb(171 111 39 / 15%);
}

.birthday-pets {
  display: grid;
  flex: 1;
  gap: 12px;
}

.birthday-pet {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 18px;
}

.birthday-pet-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 5px solid rgb(255 255 255 / 78%);
  border-radius: 24px;
  background: white;
  font-size: 41px;
  transform: rotate(-3deg);
  box-shadow: 0 8px 20px rgb(111 75 37 / 13%);
}

.birthday-pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.birthday-pet > div > span {
  display: block;
  margin-bottom: 1px;
  color: #a65d31;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.birthday-pet strong {
  display: block;
  font-family: "Baloo 2", cursive;
  color: #4a3d45;
  font-size: clamp(27px, 3.5vw, 42px);
  line-height: 1.05;
}

.birthday-ideas-button {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgb(197 123 63 / 22%);
  border-radius: 15px;
  background: rgb(255 255 255 / 48%);
  color: #7b4b36;
  text-align: left;
}

.birthday-ideas-button > span:first-child {
  font-size: 22px;
}

.birthday-ideas-button > span:nth-child(2) {
  display: grid;
  flex: 1;
  gap: 1px;
}

.birthday-ideas-button strong {
  font-size: 12px;
}

.birthday-ideas-button small {
  color: #9b7460;
  font-size: 10px;
}

.birthday-ideas-button > span:last-child {
  font-size: 20px;
}

.birthday-ideas-button:hover,
.birthday-ideas-button:focus-visible {
  background: rgb(255 255 255 / 76%);
  transform: translateX(2px);
}

.birthday-ideas-heading {
  display: flex;
  align-items: center;
  width: min(810px, 100%);
  gap: 24px;
  margin: 48px auto 30px;
}

.birthday-ideas-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 90px;
  height: 90px;
  border-radius: 30px;
  background: #fff0c7;
  box-shadow: 0 14px 28px rgb(175 118 48 / 12%);
  font-size: 46px;
}

.birthday-ideas-heading h1 {
  margin: 8px 0;
  font-size: clamp(35px, 5vw, 55px);
}

.birthday-ideas-heading p {
  margin: 0;
  color: var(--muted);
}

.birthday-idea-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(920px, 100%);
  gap: 22px;
  margin: 0 auto 55px;
}

.birthday-idea-section {
  padding: 24px;
  border-radius: 28px;
  box-shadow: 0 15px 40px rgb(95 75 53 / 8%);
}

.birthday-cat-section { background: #fff3db; }
.birthday-dog-section { background: #eeeaf8; }

.birthday-idea-section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.birthday-idea-section-heading > span { font-size: 35px; }
.birthday-idea-section-heading h2 { margin: 0; font-size: 25px; }
.birthday-idea-section-heading p { margin: 1px 0 0; color: var(--muted); font-size: 12px; }

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

.birthday-idea-list article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border: 1px solid rgb(255 255 255 / 58%);
  border-radius: 16px;
  background: rgb(255 255 255 / 58%);
}

.birthday-idea-list article > span { font-size: 24px; }
.birthday-idea-list h3 { margin: 0 0 3px; font-size: 14px; }
.birthday-idea-list p { margin: 0; color: #716b76; font-size: 12px; line-height: 1.5; }

.birthday-recipes {
  width: min(920px, 100%);
  margin: -24px auto 55px;
  padding: 25px;
  border: 1px solid #f0dfc1;
  border-radius: 28px;
  background: #fffaf0;
}

.birthday-recipes-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
}

.birthday-recipes-heading > span { font-size: 33px; }
.birthday-recipes-heading h2 { margin: 3px 0 0; font-size: 27px; }

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

.birthday-recipe-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: white;
}

.birthday-recipe-card > span { font-size: 29px; }
.birthday-recipe-card h3 { margin: 0 0 7px; font-size: 15px; }
.birthday-recipe-card p { margin: 5px 0 0; color: #716b76; font-size: 12px; line-height: 1.5; }
.birthday-recipe-card strong { color: #554c57; }

.birthday-recipe-note {
  margin: 15px 0 0;
  color: #8b6755;
  font-size: 11px;
  line-height: 1.5;
}

.birthday-cake,
.birthday-balloon {
  flex: 0 0 auto;
  font-size: 55px;
  filter: drop-shadow(0 7px 7px rgb(117 71 35 / 12%));
}

.birthday-balloon {
  animation: birthday-float 2.6s ease-in-out infinite;
}

.birthday-confetti {
  position: absolute;
  color: #ef7e61;
  font-size: 23px;
  animation: birthday-sparkle 1.8s ease-in-out infinite alternate;
}

.birthday-confetti-left {
  top: 10px;
  left: 45%;
}

.birthday-confetti-right {
  right: 18%;
  bottom: 9px;
  animation-delay: -900ms;
}

@keyframes birthday-float {
  50% {
    transform: translateY(-7px) rotate(4deg);
  }
}

@keyframes birthday-sparkle {
  to {
    opacity: 0.35;
    transform: scale(0.72) rotate(18deg);
  }
}

.welcome-page.has-home-message .welcome-grid {
  min-height: 475px;
  padding-top: 20px;
}

.monthly-weight-reminders {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding: 17px 20px;
  border: 1px solid #cce5dc;
  border-radius: 23px;
  background: linear-gradient(125deg, #e8f7f1, #f8fffc);
  box-shadow: 0 11px 30px rgb(71 125 106 / 10%);
}

.monthly-weight-heading,
.monthly-weight-heading > div,
.monthly-weight-list button {
  display: flex;
  align-items: center;
}

.monthly-weight-heading {
  gap: 12px;
}

.monthly-weight-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 49px;
  height: 49px;
  border-radius: 16px;
  background: white;
  font-size: 25px;
  box-shadow: 0 6px 15px rgb(71 125 106 / 10%);
}

.monthly-weight-heading > div {
  align-items: flex-start;
  flex-direction: column;
}

.monthly-weight-heading small {
  color: #4b8d77;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.monthly-weight-heading strong {
  font-family: "Baloo 2", cursive;
  font-size: 18px;
  line-height: 1.1;
}

.monthly-weight-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 9px;
}

.monthly-weight-list button {
  min-width: 0;
  min-height: 62px;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid #dcece6;
  border-radius: 16px;
  background: rgb(255 255 255 / 80%);
  color: var(--ink);
  text-align: left;
}

.monthly-weight-list button:hover,
.monthly-weight-list button:focus-visible {
  border-color: #8dccb7;
  background: white;
  transform: translateY(-1px);
}

.monthly-weight-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 13px;
  background: #fff1e8;
  font-size: 24px;
}

.monthly-weight-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monthly-weight-list button > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.monthly-weight-list button strong,
.monthly-weight-list button small {
  display: block;
}

.monthly-weight-list button strong {
  font-size: 13px;
}

.monthly-weight-list button small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.monthly-weight-arrow {
  color: #4b9b80;
  font-size: 18px;
  font-weight: 900;
}

.appointment-reminders {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 14px;
  padding: 17px 20px;
  border: 1px solid #d9c9ec;
  border-radius: 23px;
  background: linear-gradient(125deg, #f2eafb, #fffaff);
  box-shadow: 0 11px 30px rgb(101 73 137 / 10%);
}

.appointment-reminder-heading,
.appointment-reminder-heading > div,
.appointment-reminder-list button {
  display: flex;
  align-items: center;
}

.appointment-reminder-heading {
  gap: 12px;
}

.appointment-reminder-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 49px;
  height: 49px;
  border-radius: 16px;
  background: white;
  font-size: 25px;
}

.appointment-reminder-heading > div {
  align-items: flex-start;
  flex-direction: column;
}

.appointment-reminder-heading small {
  color: #8260aa;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.appointment-reminder-heading strong {
  font-family: "Baloo 2", cursive;
  font-size: 18px;
  line-height: 1.1;
}

.appointment-reminder-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 9px;
}

.appointment-reminder-list button {
  min-width: 0;
  min-height: 62px;
  gap: 11px;
  padding: 8px 11px;
  border: 1px solid #e7dcf2;
  border-radius: 16px;
  background: rgb(255 255 255 / 82%);
  color: var(--ink);
  text-align: left;
}

.appointment-reminder-list button:hover,
.appointment-reminder-list button:focus-visible {
  border-color: #b89ad8;
  background: white;
}

.appointment-reminder-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 13px;
  background: #fff1e8;
  font-size: 24px;
}

.appointment-reminder-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.appointment-reminder-list button > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.appointment-reminder-list button strong,
.appointment-reminder-list button small {
  display: block;
}

.appointment-reminder-list button strong {
  font-size: 13px;
}

.appointment-reminder-list button small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.appointment-reminder-list button > span:last-child {
  color: #8d69b6;
  font-size: 18px;
  font-weight: 900;
}

.settings-wrap {
  width: min(820px, 100%);
  margin: 35px auto 70px;
}

.settings-heading {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-bottom: 27px;
}

.settings-title-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 30px;
  background: #ffe1d8;
  font-size: 49px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 25px rgb(95 75 53 / 10%);
}

.settings-heading h1 {
  margin: 9px 0 2px;
  font-size: clamp(42px, 6vw, 58px);
}

.settings-heading p {
  max-width: 570px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.settings-card {
  padding: 29px;
  border: 1px solid #eee5da;
  border-radius: 27px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 18px 50px rgb(99 75 50 / 8%);
}

.settings-card h2 {
  margin: 0;
  font-size: 27px;
}

.settings-card-intro {
  margin: 1px 0 21px;
  color: var(--muted);
  font-size: 12px;
}

.setting-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 92px;
  gap: 16px;
  padding: 15px 16px;
  border-top: 1px solid #eee8e0;
  border-radius: 17px;
  cursor: pointer;
}

.setting-row:hover {
  background: #fffcf8;
}

.setting-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  font-size: 28px;
}

.birthday-setting-icon {
  background: #fff1c9;
}

.weight-setting-icon {
  background: #e4f5ef;
}

.admin-setting-icon {
  background: #fff0e8;
}

.admin-setting-button {
  width: 100%;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.admin-setting-link {
  color: var(--peach-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.setting-copy strong,
.setting-copy small {
  display: block;
}

.setting-copy strong {
  font-size: 15px;
}

.setting-copy small {
  max-width: 450px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.setting-control {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
}

.setting-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle-switch {
  position: relative;
  display: block;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  background: #d9d5dc;
  transition: background 160ms ease;
}

.toggle-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgb(55 52 71 / 20%);
  transition: transform 160ms ease;
}

.setting-control input:checked + .toggle-switch {
  background: #58b596;
}

.setting-control input:checked + .toggle-switch::after {
  transform: translateX(22px);
}

.setting-control input:focus-visible + .toggle-switch {
  outline: 3px solid rgb(255 141 107 / 28%);
  outline-offset: 3px;
}

.setting-control > small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
}

.settings-save-status {
  min-height: 20px;
  margin: 15px 0 0;
  color: #378d72;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
}

.agenda-wrap {
  width: min(900px, 100%);
  margin: 35px auto 70px;
}

.agenda-heading {
  display: flex;
  align-items: center;
  gap: 23px;
  margin-bottom: 30px;
}

.agenda-heading-copy {
  min-width: 0;
  flex: 1;
}

.agenda-add-button {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 16px;
  font-size: 12px;
}

.agenda-title-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 30px;
  background: #e4f5ef;
  font-size: 49px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 25px rgb(95 75 53 / 10%);
}

.agenda-heading h1 {
  margin: 9px 0 2px;
  font-size: clamp(42px, 6vw, 58px);
}

.agenda-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.week-calendar {
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid #e3dbd2;
  border-radius: 27px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 14px 40px rgb(95 75 53 / 8%);
}

.calendar-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.calendar-toolbar h2 {
  margin: 8px 0 0;
  font-size: 30px;
}

.calendar-navigation {
  display: flex;
  align-items: center;
  gap: 7px;
}

.calendar-navigation button {
  min-width: 42px;
  min-height: 39px;
  padding: 0 12px;
  border: 1px solid #ded6cd;
  border-radius: 12px;
  background: #fffaf5;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.calendar-navigation button:hover,
.calendar-navigation button:focus-visible {
  border-color: #efaa96;
  background: #fff0e8;
}

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.week-day {
  min-width: 0;
  min-height: 245px;
  overflow: hidden;
  border: 1px solid #e4ddd5;
  border-radius: 17px;
  background: #fffdfb;
}

.week-day:nth-child(6),
.week-day:nth-child(7) {
  background: #fff9f3;
}

.week-day > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 8px;
  border-bottom: 1px solid #eee6de;
}

.week-day > header > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.week-day > header time {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 12px;
  background: #f7f1ea;
}

.week-day > header time strong {
  font-size: 14px;
  line-height: 0.9;
}

.week-day > header time small {
  color: var(--muted);
  font-size: 7px;
  font-weight: 900;
  text-transform: uppercase;
}

.week-today {
  border-color: #ef9c83;
  box-shadow: 0 0 0 3px rgb(255 141 107 / 12%);
}

.week-today > header {
  background: #fff0e8;
}

.week-today > header time {
  background: var(--peach);
  color: white;
}

.week-today > header time small {
  color: white;
}

.week-day-appointments {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 7px;
}

.empty-week-day {
  margin: 8px 0 0;
  color: #aaa3ab;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
}

.week-appointment {
  min-width: 0;
  padding: 8px;
  border: 1px solid #d8ebe4;
  border-radius: 12px;
  background: #eaf6f1;
}

.week-appointment-title {
  display: flex;
  align-items: flex-start;
  min-width: 0;
  gap: 5px;
}

.week-appointment-title > span {
  flex: 0 0 auto;
  font-size: 13px;
}

.week-appointment-title > div {
  min-width: 0;
}

.week-appointment-title strong,
.week-appointment-title small {
  display: block;
}

.week-appointment-title strong {
  overflow: hidden;
  font-size: 9px;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.week-appointment-title small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 7px;
  font-weight: 700;
}

.week-appointment > p {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: #625d6a;
  font-size: 8px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.week-appointment-actions {
  display: flex;
  align-items: stretch;
  gap: 4px;
  margin-top: 7px;
}

.week-appointment-actions button {
  min-height: 27px;
  padding: 3px 5px;
  border: 0;
  border-radius: 8px;
  font-size: 7px;
  font-weight: 900;
}

.appointment-check-button {
  min-width: 0;
  flex: 1;
  background: white;
  color: #347d67;
}

.appointment-delete-button {
  flex: 0 0 auto;
  background: #fff0ed;
  color: #a3433d;
}

.week-appointment.completed {
  border-color: #d9d5dc;
  background: #f1eff2;
  opacity: 0.72;
}

.week-appointment.birthday-appointment {
  border-color: #f1d99c;
  background: #fff8dc;
}

.week-appointment.completed .week-appointment-title strong,
.week-appointment.completed > p {
  text-decoration: line-through;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
  padding: 0 1px 7px;
  color: var(--muted);
  text-align: center;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.calendar-grid {
  overflow: hidden;
  border-top: 1px solid #e4ddd5;
  border-left: 1px solid #e4ddd5;
  border-radius: 16px;
}

.calendar-day {
  position: relative;
  min-width: 0;
  min-height: 105px;
  padding: 7px;
  border-right: 1px solid #e4ddd5;
  border-bottom: 1px solid #e4ddd5;
  background: white;
}

.calendar-day:nth-child(7n),
.calendar-day:nth-child(7n - 1) {
  background: #fffaf5;
}

.calendar-day.outside-month {
  background: #f8f5f1;
  color: #aaa3ab;
}

.calendar-day > time {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.calendar-today > time {
  background: var(--peach);
  color: white;
  box-shadow: 0 3px 8px rgb(230 110 80 / 25%);
}

.calendar-day-appointments {
  display: grid;
  gap: 3px;
}

.calendar-day-appointments button {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 24px;
  gap: 3px;
  padding: 3px 5px;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: #e8f5f0;
  color: #397a65;
  text-align: left;
}

.calendar-day-appointments button:hover,
.calendar-day-appointments button:focus-visible {
  background: #d5ede5;
}

.calendar-day-appointments button > span {
  flex: 0 0 auto;
  font-size: 10px;
}

.calendar-day-appointments button > strong {
  min-width: 0;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-day-appointments > small {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
}

.empty-agenda {
  padding: 50px 25px;
  border: 2px dashed #d8d0c7;
  border-radius: 27px;
  background: rgb(255 255 255 / 55%);
  text-align: center;
}

.empty-agenda > span {
  font-size: 56px;
}

.empty-agenda h2 {
  margin: 10px 0 3px;
  font-size: 28px;
}

.empty-agenda p {
  max-width: 500px;
  margin: 0 auto 21px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.agenda-section {
  margin-bottom: 30px;
}

.agenda-section > h2 {
  margin: 0 0 12px;
  font-size: 25px;
}

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

.agenda-item {
  display: grid;
  grid-template-columns: 58px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid #e8e1d9;
  border-radius: 20px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 8px 22px rgb(95 75 53 / 6%);
}

.agenda-date {
  display: grid;
  place-items: center;
  min-height: 57px;
  border-radius: 16px;
  background: #fff0e8;
  color: var(--peach-dark);
}

.agenda-date strong {
  font-family: "Baloo 2", cursive;
  font-size: 24px;
  line-height: 0.9;
}

.agenda-date span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.agenda-pet-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 15px;
  background: #fff6dd;
  font-size: 27px;
}

.agenda-pet-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agenda-item-copy {
  min-width: 0;
}

.agenda-item-copy > span {
  color: #4d9079;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.agenda-item-copy h3 {
  margin: 2px 0 0;
  font-family: "Baloo 2", cursive;
  font-size: 18px;
  line-height: 1.1;
}

.agenda-item-copy p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-item > button {
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  background: #eaf6f1;
  color: #3d8b71;
  font-size: 10px;
  font-weight: 900;
}

.earlier-agenda-section {
  opacity: 0.78;
}

.appointment-dialog {
  width: min(570px, calc(100% - 34px));
  max-height: calc(100vh - 30px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 28px;
  color: var(--ink);
  background: white;
  box-shadow: 0 28px 80px rgb(55 52 71 / 27%);
}

.appointment-dialog::backdrop {
  background: rgb(55 52 71 / 45%);
  backdrop-filter: blur(5px);
}

.appointment-dialog-content {
  position: relative;
  display: grid;
  gap: 15px;
  padding: 31px;
}

.appointment-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f5f1ec;
  color: var(--muted);
  font-size: 24px;
}

.appointment-dialog-icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 20px;
  background: #e4f5ef;
  font-size: 33px;
  transform: rotate(-4deg);
}

.appointment-dialog h2 {
  margin: -6px 0 0;
  font-size: 30px;
}

.appointment-dialog label > span,
.appointment-date-group legend {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 800;
}

.appointment-date-group {
  margin: 0;
}

.appointment-dialog textarea {
  min-height: 100px;
}

.appointment-reminder-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px 12px;
  padding: 13px;
  border: 1px solid #dfd1ee;
  border-radius: 17px;
  background: #faf5ff;
  cursor: pointer;
}

.appointment-reminder-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
}

.appointment-dialog .appointment-reminder-toggle {
  position: relative;
  display: block;
  grid-row: 1;
  width: 50px;
  height: 29px;
  margin: 0;
  border-radius: 999px;
  background: #d7d2dc;
  transition: background 160ms ease;
}

.appointment-reminder-toggle::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgb(55 52 71 / 20%);
  transition: transform 160ms ease;
}

.appointment-reminder-choice input:checked + .appointment-reminder-toggle {
  background: #9c77c6;
}

.appointment-reminder-choice input:checked + .appointment-reminder-toggle::after {
  transform: translateX(21px);
}

.appointment-reminder-choice input:focus-visible + .appointment-reminder-toggle {
  outline: 3px solid rgb(156 119 198 / 25%);
  outline-offset: 3px;
}

.appointment-dialog .appointment-reminder-choice > span:last-child {
  display: block;
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

.appointment-reminder-choice strong,
.appointment-reminder-choice small {
  display: block;
}

.appointment-reminder-choice strong {
  font-size: 12px;
}

.appointment-reminder-choice small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.appointment-error {
  min-height: 18px;
  margin: -4px 0;
  color: #b04c42;
  font-size: 11px;
  font-weight: 800;
}

.appointment-save-button {
  width: 100%;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  min-height: 545px;
  gap: 68px;
  padding: 30px 0 54px;
}

.eyebrow {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: #fff0e8;
  color: var(--peach-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2 {
  font-family: "Baloo 2", cursive;
}

h1 {
  max-width: 650px;
  margin: 20px 0 15px;
  color: var(--ink);
  font-size: clamp(42px, 5vw, 67px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h1 span {
  color: var(--peach);
}

.intro {
  max-width: 560px;
  margin: 0 0 29px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.65;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 18px;
  background: var(--peach);
  color: white;
  font-weight: 800;
  box-shadow: 0 7px 0 #db6c50, 0 13px 30px rgb(230 110 80 / 22%);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.primary-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 9px 0 #db6c50, 0 15px 30px rgb(230 110 80 / 26%);
}

.primary-button:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 #db6c50;
}

.primary-button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.welcome-actions {
  display: flex;
  width: fit-content;
  flex-direction: column;
  gap: 16px;
}

.go-to-pets-button {
  min-height: 50px;
  padding: 0 22px;
  border: 2px solid #f0cabc;
  border-radius: 17px;
  background: rgb(255 255 255 / 72%);
  color: var(--peach-dark);
  font-weight: 800;
  transition: background 150ms ease, transform 150ms ease;
}

.welcome-page .blog-button {
  min-height: 50px;
  padding: 0 22px;
  border: 2px solid #f0cabc;
  border-radius: 17px;
  background: rgb(255 255 255 / 72%);
  color: var(--peach-dark);
  font-size: 13px;
  font-weight: 800;
}

.welcome-page .welcome-group-blog-button {
  min-height: 50px;
  padding: 0 22px;
  border: 2px solid #d9d0ea;
  border-radius: 17px;
  background: rgb(255 255 255 / 72%);
  color: #625d8d;
  font-size: 13px;
  font-weight: 800;
}

.facts-list-button,
.care-tips-button,
.blog-button,
.professional-help-button {
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: #746f7f;
  font-size: 13px;
  font-weight: 800;
}

.care-menu {
  display: grid;
  gap: 8px;
}

.care-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #f0d9c7;
  border-radius: 15px;
  background: #fff8f1;
  color: var(--peach-dark);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.care-menu-toggle::-webkit-details-marker {
  display: none;
}

.care-menu[open] .care-menu-toggle span {
  transform: rotate(180deg);
}

.care-menu-toggle:hover,
.care-menu-toggle:focus-visible {
  border-color: #e6c6ad;
  background: white;
}

.care-menu-options {
  display: grid;
  gap: 7px;
  padding: 8px;
  border-radius: 16px;
  background: rgb(255 248 241 / 76%);
}

.care-menu-options button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: white;
  color: #746f7f;
  font-size: 12px;
  font-weight: 800;
}

.care-menu-options button:hover,
.care-menu-options button:focus-visible {
  background: #fff0e8;
  color: var(--peach-dark);
}

.care-menu-options .professional-help-menu-option {
  background: #fff2ef;
  color: #a44f46;
}

.care-menu-options .professional-help-menu-option:hover,
.care-menu-options .professional-help-menu-option:focus-visible {
  background: #ffe4e0;
  color: #933d35;
}

.care-menu-options .supplies-menu-option {
  background: #f4f3ff;
  color: #625d8d;
}

.care-menu-options .supplies-menu-option:hover,
.care-menu-options .supplies-menu-option:focus-visible {
  background: #eae9ff;
  color: #504a7a;
}

.care-menu-options .food-preferences-menu-option {
  background: #eef8ee;
  color: #4e7b5b;
}

.care-menu-options .food-preferences-menu-option:hover,
.care-menu-options .food-preferences-menu-option:focus-visible {
  background: #dff1e0;
  color: #386642;
}

.go-to-pets-button:hover,
.facts-list-button:hover,
.care-tips-button:hover,
.blog-button:hover,
.professional-help-button:hover {
  background: white;
  transform: translateY(-2px);
}

.professional-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid #f0c8bd;
  border-radius: 15px;
  background: #fff4f1;
  color: #a44f46;
}

.professional-help-button:hover,
.professional-help-button:focus-visible {
  border-color: #df8277;
  background: #fff0ed;
}

.blog-page-heading {
  max-width: 620px;
}

.blog-page-heading h1 {
  margin: 12px 0 12px;
  font-family: "Baloo 2", cursive;
  font-size: clamp(2.9rem, 6vw, 4.8rem);
  line-height: 0.92;
  color: #2f2b3a;
}

.blog-page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}

.blog-category-filter,
.passport-section-bar {
  display: grid;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  margin-top: 18px;
  color: #6c6673;
  font-size: 12px;
  font-weight: 800;
}

.passport-section-bar {
  padding: 13px;
  border: 1px solid #f0dfd0;
  border-radius: 22px;
  background:
    radial-gradient(circle at top left, rgb(255 207 161 / 38%), transparent 150px),
    linear-gradient(135deg, #fffaf4, #fffdf9);
  box-shadow: 0 12px 28px rgb(145 120 94 / 9%);
}

.passport-section-bar > span {
  padding-left: 3px;
  color: var(--peach-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-category-filter-options,
.passport-section-bar-options {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid #f0e2d6;
  border-radius: 17px;
  background: #fffaf4;
  scrollbar-width: thin;
}

.passport-section-bar-options {
  border-color: #f3d8c5;
  background: rgb(255 255 255 / 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
}

.blog-post-search {
  display: grid;
  gap: 6px;
}

.blog-post-search label {
  display: grid;
  gap: 6px;
}

.blog-post-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid #f0d8c8;
  border-radius: 12px;
  background: #fffdf9;
  color: #3c3644;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
}

.blog-post-search input:focus-visible {
  outline: 3px solid rgb(223 130 119 / 32%);
  outline-offset: 2px;
  border-color: #df8277;
}

.blog-category-filter-button,
.passport-section-bar-options button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #6c6673;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.blog-category-filter-button:hover,
.blog-category-filter-button:focus-visible,
.passport-section-bar-options button:hover,
.passport-section-bar-options button:focus-visible {
  background: #fffdf9;
  border-color: #f0d8c8;
}

.blog-category-filter-button.is-active {
  border-color: #df8277;
  background: #fff1e9;
  color: #a44f46;
}

.passport-section-bar-options button {
  border-color: #f1dfd2;
  background: #fffdf9;
  color: #7e514a;
}

.passport-section-bar-options button:hover,
.passport-section-bar-options button:focus-visible {
  border-color: #df8277;
  background: #fff0e8;
  color: #a44f46;
  transform: translateY(-1px);
}

.blog-category-filter-button:focus-visible {
  outline: 3px solid rgb(223 130 119 / 32%);
  outline-offset: 2px;
}

.passport-section-bar-options button:focus-visible {
  outline: 3px solid rgb(223 130 119 / 32%);
  outline-offset: 2px;
}

.blog-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
  margin: 18px 0 30px;
}

.blog-hero-copy {
  display: grid;
  gap: 22px;
  align-content: start;
}

.blog-post-timeline {
  display: grid;
  gap: 20px;
  align-content: start;
}

.featured-blog-post,
.blog-form,
.blog-post {
  border: 1px solid #f0e2d6;
  border-radius: 26px;
  background:
    radial-gradient(circle at top left, rgb(255 215 107 / 18%) 0, transparent 180px),
    #fffdf9;
  box-shadow: 0 18px 40px rgb(145 120 94 / 8%);
}

.featured-blog-post {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 28px;
  background:
    radial-gradient(circle at top right, rgb(255 215 107 / 28%) 0, transparent 180px),
    linear-gradient(135deg, #fffaf0, #fffdf9 58%);
}

.previous-blog-post {
  padding: 24px;
  background: #fffdf9;
}

.previous-blog-post h2 {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
}

.empty-blog-post {
  place-items: center;
  text-align: center;
}

.featured-blog-copy {
  display: grid;
  gap: 14px;
}

.featured-blog-label {
  color: var(--peach-dark);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-post-author {
  display: block;
  margin-top: 5px;
  color: #696273;
  font-size: 12px;
  font-weight: 800;
}

.featured-blog-post h2 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  color: #2f2b3a;
}

.featured-blog-post p {
  margin: 0;
  color: #5f5968;
  font-size: 16px;
  line-height: 1.8;
}

.featured-blog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.featured-blog-meta small,
.blog-form-heading {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.featured-blog-link {
  color: var(--peach-dark);
  font-size: 12px;
  font-weight: 800;
}

.blog-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px);
  justify-content: start;
  gap: 26px;
}

.pootjes-blog-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 285px;
  overflow: hidden;
  border: 1px solid #f0e2d6;
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 22%, rgb(255 218 146 / 70%) 0, transparent 82px),
    radial-gradient(circle at 82% 76%, rgb(195 181 222 / 48%) 0, transparent 105px),
    #fffaf2;
  box-shadow: 0 18px 40px rgb(145 120 94 / 8%);
}

.pootjes-blog-art::before {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: #ffe4a3;
  content: "";
  animation: pootjes-blog-glow 4s ease-in-out infinite;
}

.pootjes-blog-art-book,
.pootjes-blog-art-animal {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 9px 9px rgb(107 79 46 / 13%));
}

.pootjes-blog-art-book {
  position: relative;
  z-index: 3;
  margin-top: 33px;
  width: 142px;
  height: 91px;
  perspective: 500px;
  animation: pootjes-blog-book 3.4s ease-in-out infinite;
}

.pootjes-blog-art-book-cover {
  position: absolute;
  inset: 0;
  border: 2px solid #98513e;
  border-radius: 10px 10px 13px 13px;
  background:
    linear-gradient(90deg, transparent 47%, rgb(100 49 38 / 40%) 48% 52%, transparent 53%),
    #dc8060;
  box-shadow: 0 10px 0 #b55b47, 0 14px 14px rgb(100 58 36 / 20%);
  transform: rotate(-2deg);
}

.pootjes-blog-art-page {
  position: absolute;
  top: 7px;
  width: 63px;
  height: 76px;
  border: 2px solid #cfa86d;
  background:
    repeating-linear-gradient(to bottom, transparent 0 12px, #ead7b8 13px 14px),
    #fffdf5;
  box-shadow: 0 5px 7px rgb(100 68 29 / 17%);
}

.pootjes-blog-art-page-left {
  z-index: 1;
  left: 6px;
  border-radius: 8px 3px 4px 10px;
  transform: perspective(300px) rotateY(7deg) skewY(3deg);
}

.pootjes-blog-art-page-right {
  z-index: 1;
  right: 6px;
  border-radius: 3px 8px 10px 4px;
  transform: perspective(300px) rotateY(-7deg) skewY(-3deg);
}

.pootjes-blog-art-page-turn {
  z-index: 2;
  right: 6px;
  border-radius: 3px 8px 10px 4px;
  transform-origin: left center;
  transform: rotateY(0deg) skewY(-3deg);
  backface-visibility: hidden;
  animation: pootjes-blog-page-turn 3.4s ease-in-out infinite;
}

.pootjes-blog-art-book-spine {
  position: absolute;
  z-index: 3;
  top: 6px;
  bottom: 3px;
  left: calc(50% - 3px);
  width: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, #8b4636, #f2c18a 48%, #8b4636);
  box-shadow: 0 1px 2px rgb(74 37 27 / 35%);
}

.pootjes-blog-art-animal {
  position: absolute;
  z-index: 2;
  bottom: 41px;
  width: auto;
  height: 168px;
  object-fit: contain;
  transform-origin: center bottom;
  will-change: transform;
}

.pootjes-blog-art-cat {
  left: 3px;
  animation: pootjes-blog-cat 3s ease-in-out infinite;
}

.pootjes-blog-art-dog {
  right: -4px;
  bottom: 43px;
  height: 154px;
  animation: pootjes-blog-dog 3s ease-in-out 450ms infinite;
}

.pootjes-blog-art p {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  margin: 0;
  color: #625d6a;
  font-family: "Baloo 2", cursive;
  font-size: 15px;
  font-weight: 700;
}

.pootjes-blog-art-spark {
  position: absolute;
  z-index: 1;
  color: #f4ae26;
  font-size: 24px;
}

.pootjes-blog-art-spark-one {
  top: 32px;
  right: 15%;
  animation: pootjes-blog-spark 2.2s ease-in-out infinite;
}

.pootjes-blog-art-spark-two {
  bottom: 71px;
  left: 14%;
  color: var(--peach);
  font-size: 17px;
  animation: pootjes-blog-spark 2.2s ease-in-out 700ms infinite;
}

@keyframes pootjes-blog-glow {
  0%, 100% { transform: scale(0.96); opacity: 0.78; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes pootjes-blog-book {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

@keyframes pootjes-blog-page-turn {
  0%, 27%, 100% { transform: rotateY(0deg) skewY(-3deg); }
  53% { transform: rotateY(-165deg) skewY(-3deg); }
  76% { transform: rotateY(-165deg) skewY(-3deg); }
}

@keyframes pootjes-blog-cat {
  0%, 100% { transform: translate(0, 0) rotate(-4deg) scale(1); }
  18% { transform: translate(-2px, -2px) rotate(-7deg) scale(1.012, 0.988); }
  37% { transform: translate(1px, -5px) rotate(1deg) scale(0.99, 1.035); }
  48% { transform: translate(3px, -4px) rotate(4deg) scale(1.005, 1.02); }
  67% { transform: translate(2px, -1px) rotate(-5deg) scale(1.018, 0.982); }
  84% { transform: translate(-1px, -3px) rotate(-2deg) scale(0.995, 1.02); }
}

@keyframes pootjes-blog-dog {
  0%, 100% { transform: translate(0, 0) rotate(3deg) scale(1); }
  16% { transform: translate(2px, -1px) rotate(0deg) scale(1.018, 0.982); }
  35% { transform: translate(-1px, -4px) rotate(7deg) scale(0.99, 1.035); }
  52% { transform: translate(-3px, -3px) rotate(9deg) scale(1.005, 1.02); }
  70% { transform: translate(-2px, 0) rotate(2deg) scale(1.02, 0.98); }
  86% { transform: translate(2px, -2px) rotate(5deg) scale(0.995, 1.018); }
}

@keyframes pootjes-blog-spark {
  0%, 100% { opacity: 0.35; transform: scale(0.65) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(35deg); }
}

.blog-form {
  padding: 24px;
}

.blog-editor-gate {
  display: grid;
  gap: 8px;
}

.blog-editor-access-form {
  display: grid;
  gap: 14px;
}

.blog-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.blog-form-heading h2 {
  margin: 8px 0 0;
  font-family: "Baloo 2", cursive;
  font-size: 28px;
}

.blog-editor-intro {
  margin: 0 0 16px;
  color: #6c6673;
  font-size: 14px;
  line-height: 1.65;
}

.blog-access-note {
  min-height: 18px;
  margin: 0;
  color: #9b5d54;
  font-size: 12px;
  font-weight: 700;
}

.blog-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #fff1e3;
  font-size: 24px;
}

.blog-card-category {
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff6ed;
  color: var(--peach-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.blog-card-footer small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.blog-post-media {
  margin-top: 6px;
}

.featured-blog-post .blog-post-media,
.featured-blog-post .diary-entry-media-grid {
  margin-top: 0;
}

.blog-bottom-note {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(700px, 100%);
  margin: 28px auto 0;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgb(255 255 255 / 72%);
  color: #6c6673;
}

.blog-bottom-note p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.blog-read-button {
  align-self: flex-start;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #f1d9ca;
  border-radius: 14px;
  background: #fff8f2;
  color: var(--peach-dark);
  font-weight: 800;
}

.blog-read-button:hover,
.blog-read-button:focus-visible {
  background: white;
  border-color: #eac8b5;
}

.small-note {
  margin: 22px 0 0;
  color: #918b98;
  font-size: 13px;
  font-weight: 600;
}

.hero-art {
  position: relative;
  min-height: 455px;
}

.blob {
  position: absolute;
  inset: 42px 12px 25px 30px;
  border-radius: 49% 51% 45% 55% / 57% 42% 58% 43%;
  background: #ffe4a6;
  transform: rotate(-4deg);
}

.cat-card {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 210px;
  border: 7px solid white;
  border-radius: 46% 46% 36% 36%;
  box-shadow: 0 22px 40px rgb(91 70 47 / 17%);
  font-family: "Baloo 2", cursive;
  font-size: 19px;
}

.cat-one {
  top: 50px;
  left: 42px;
  background: #f7c793;
  transform: rotate(-7deg);
}

.cat-two {
  right: 30px;
  bottom: 35px;
  background: #ada5b9;
  transform: rotate(7deg);
}

.cat-face {
  margin-bottom: 4px;
  font-size: 100px;
  line-height: 1;
  filter: drop-shadow(0 7px 4px rgb(72 59 50 / 12%));
}

.cat-card small {
  margin-top: -5px;
  font-family: "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.heart-bubble,
.paw-bubble {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  border: 5px solid white;
  border-radius: 50%;
  color: white;
  box-shadow: 0 9px 20px rgb(73 55 43 / 16%);
}

.heart-bubble {
  top: 35px;
  right: 23px;
  background: var(--peach);
  transform: rotate(9deg);
}

.paw-bubble {
  bottom: 13px;
  left: 38px;
  background: var(--mint);
  transform: rotate(-9deg);
}

.sparkle {
  position: absolute;
  z-index: 3;
  color: #f0b434;
  font-size: 30px;
}

.sparkle-one {
  top: 3px;
  left: 41%;
}

.sparkle-two {
  right: 0;
  top: 48%;
  color: var(--peach);
  font-size: 20px;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 13px 18px;
  border: 1px solid #f0e8dc;
  border-radius: 25px;
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 15px 35px rgb(95 75 53 / 5%);
}

.feature-row > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  min-width: 0;
  padding: 12px 26px;
}

.feature-row > div + div {
  border-left: 1px solid #eee5da;
}

.feature-row > div > span {
  font-size: 29px;
}

.feature-row p {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-size: 14px;
}

.feature-row small {
  margin-top: 2px;
  color: #918b98;
  font-size: 12px;
}

.form-wrap {
  width: min(680px, 100%);
  margin: 25px auto;
}

.profile-step-wrap {
  width: min(760px, 100%);
}

.form-heading {
  text-align: center;
}

.form-heading h1 {
  margin: 16px auto 8px;
  font-size: clamp(38px, 5vw, 52px);
}

.form-heading p {
  margin: 0 auto 30px;
  color: var(--muted);
}

.pet-form {
  display: grid;
  gap: 22px;
  padding: 32px;
  border: 1px solid #eee5da;
  border-radius: 28px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 20px 60px rgb(99 75 50 / 8%);
}

.choice-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend,
label > span,
.birthday-group legend {
  display: block;
  margin-bottom: 9px;
  color: #4c4757;
  font-size: 14px;
  font-weight: 800;
}

.birthday-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.birthday-fields {
  display: grid;
  grid-template-columns: 0.7fr 1.35fr 1fr;
  gap: 8px;
}

.birthday-fields select {
  min-width: 0;
  padding: 0 9px;
}

label small {
  color: #9b94a2;
  font-weight: 600;
}

.animal-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.choice-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 76px;
  border: 2px solid #eee7df;
  border-radius: 19px;
  background: white;
  color: var(--ink);
}

.choice-card span {
  font-size: 34px;
}

.choice-card.selected {
  border-color: var(--peach);
  background: #fff5ef;
  box-shadow: 0 0 0 4px rgb(255 141 107 / 10%);
}

input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 2px solid #eee7df;
  border-radius: 15px;
  outline: none;
  color: var(--ink);
  background: white;
}

select,
textarea {
  width: 100%;
  border: 2px solid #eee7df;
  border-radius: 15px;
  outline: none;
  color: var(--ink);
  background: white;
}

select {
  min-height: 54px;
  padding: 0 16px;
}

textarea {
  min-height: 145px;
  padding: 14px 16px;
  line-height: 1.55;
  resize: vertical;
}

input:focus {
  border-color: var(--peach);
  box-shadow: 0 0 0 4px rgb(255 141 107 / 12%);
}

select:focus,
textarea:focus {
  border-color: var(--peach);
  box-shadow: 0 0 0 4px rgb(255 141 107 / 12%);
}

input::placeholder {
  color: #b4adb7;
}

.color-options {
  display: flex;
  gap: 13px;
}

.color-dot {
  width: 39px;
  height: 39px;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #ded8d1;
}

.color-dot.selected {
  box-shadow: 0 0 0 3px var(--ink);
  transform: scale(1.08);
}

.color-peach {
  background: var(--peach);
}

.color-yellow {
  background: var(--yellow);
}

.color-mint {
  background: var(--mint);
}

.color-blue {
  background: var(--blue);
}

.color-lilac {
  background: var(--lilac);
}

.submit-button {
  width: 100%;
  margin-top: 4px;
}

.profile-step-pet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 17px;
  border-radius: 18px;
}

.profile-step-pet.color-peach {
  background: #ffd1c2;
}

.profile-step-pet.color-yellow {
  background: #ffe7a6;
}

.profile-step-pet.color-mint {
  background: #bcebdc;
}

.profile-step-pet.color-blue {
  background: #c1e3f3;
}

.profile-step-pet.color-lilac {
  background: #ddcef1;
}

.profile-step-pet > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 15px;
  font-size: 42px;
}

.pet-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-step-pet p {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.profile-step-pet strong {
  font-family: "Baloo 2", cursive;
  font-size: 22px;
}

.profile-step-pet small {
  margin-top: -5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
}

.add-profile-actions {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  align-items: stretch;
  gap: 13px;
}

.add-profile-actions > button {
  min-height: 56px;
}

.back-step-button {
  border-radius: 17px;
  font-weight: 800;
}

.dashboard-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 50px 0 32px;
}

.dashboard-heading h1 {
  margin: 14px 0 0;
  font-size: clamp(39px, 5vw, 56px);
}

.secondary-button {
  min-height: 49px;
  padding: 0 18px;
  border: 2px solid #f1d4c9;
  border-radius: 15px;
  background: #fff7f2;
  color: var(--peach-dark);
  font-weight: 800;
}

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

.pet-profile,
.empty-pet-card {
  min-height: 320px;
  border-radius: 27px;
}

.pet-profile {
  position: relative;
  overflow: hidden;
  padding: 27px;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: center;
  box-shadow: 0 13px 30px rgb(89 69 53 / 8%);
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.pet-profile:hover,
.pet-profile:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgb(89 69 53 / 14%);
  outline: 3px solid rgb(255 141 107 / 28%);
  outline-offset: 3px;
}

.pet-card-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.tile-diary-button {
  position: relative;
  z-index: 1;
  min-height: 38px;
  padding: 0 13px;
  border: 2px solid rgb(255 255 255 / 58%);
  border-radius: 13px;
  background: rgb(255 255 255 / 34%);
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.tile-diary-button:hover,
.tile-diary-button:focus-visible {
  background: rgb(255 255 255 / 68%);
}

.pet-profile::after {
  content: "🐾";
  position: absolute;
  right: -15px;
  bottom: -23px;
  opacity: 0.11;
  font-size: 100px;
  transform: rotate(-20deg);
}

.pet-avatar {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 15px;
  border: 6px solid rgb(255 255 255 / 70%);
  border-radius: 50%;
  background: rgb(255 255 255 / 43%);
  font-size: 66px;
  overflow: hidden;
}

.pet-type {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pet-profile h2 {
  margin: 3px 0 0;
  font-size: 34px;
}

.pet-profile p {
  margin: -5px 0 17px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.68;
}

.detail-hero {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 35px 0 26px;
  padding: 30px 38px;
  border-radius: 30px;
  overflow: hidden;
}

.detail-hero.color-peach {
  background: #ffd1c2;
}

.detail-hero.color-yellow {
  background: #ffe7a6;
}

.detail-hero.color-mint {
  background: #bcebdc;
}

.detail-hero.color-blue {
  background: #c1e3f3;
}

.detail-hero.color-lilac {
  background: #ddcef1;
}

.detail-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 125px;
  height: 125px;
  border: 6px solid rgb(255 255 255 / 62%);
  border-radius: 50%;
  background: rgb(255 255 255 / 38%);
  font-size: 74px;
  overflow: hidden;
}

.detail-hero h1 {
  margin: 4px 0 0;
  font-size: clamp(42px, 6vw, 62px);
}

.detail-hero p {
  margin: -4px 0 0;
  font-weight: 700;
  opacity: 0.65;
}

.detail-form {
  margin-bottom: 40px;
  padding: 34px;
  border: 1px solid #eee5da;
  border-radius: 28px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 20px 60px rgb(99 75 50 / 8%);
}

.detail-form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.detail-form-heading h2 {
  margin: 10px 0 0;
  font-size: 32px;
}

.passport-optional-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.passport-show-missing input:invalid,
.passport-show-missing select:invalid,
.passport-show-missing textarea:invalid {
  border-color: #e87565;
  background: #fff6f3;
  box-shadow: 0 0 0 3px rgb(232 117 101 / 12%);
}

.save-status {
  min-width: 95px;
  color: #378d72;
  font-size: 14px;
  font-weight: 800;
}

.detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 21px;
}

.photo-picker {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 2px dashed #dfd5ca;
  border-radius: 20px;
  background: #fffcf7;
}

.photo-preview {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 5px solid white;
  border-radius: 24px;
  background: #fff0e8;
  font-size: 45px;
  box-shadow: 0 8px 22px rgb(95 75 53 / 10%);
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-picker-copy {
  min-width: 0;
  flex: 1;
}

.photo-picker-copy > strong {
  display: block;
  font-size: 15px;
}

.photo-picker-copy > p {
  margin: 3px 0 11px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

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

.photo-upload-button,
.photo-remove-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 0 12px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 800;
}

.photo-upload-button {
  background: #fff0e8;
  color: var(--peach-dark);
  cursor: pointer;
}

.photo-camera-button {
  background: #eaf6f1;
  color: #378d72;
}

.photo-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.photo-remove-button {
  border: 0;
  background: transparent;
  color: #a75a51;
}

.photo-status {
  display: block;
  min-height: 16px;
  margin-top: 6px;
  color: #378d72;
  font-size: 11px;
  font-weight: 800;
}

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

.kind-questions {
  grid-column: 1 / -1;
  padding: 22px;
  border-radius: 20px;
}

.cat-questions {
  background: #fff3db;
}

.dog-questions {
  background: #eaf6f1;
}

.kind-questions-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.kind-questions-heading > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgb(255 255 255 / 65%);
  font-size: 27px;
}

.kind-questions h3 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: 21px;
  line-height: 1.1;
}

.kind-questions-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.kind-question-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.weight-tracker {
  padding: 24px;
  border: 1px solid #d9ebe4;
  border-radius: 22px;
  background: linear-gradient(145deg, #f2fbf7, #fffdf8);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%);
}

.weight-tracker-heading,
.weight-tracker-heading > div {
  display: flex;
  align-items: center;
}

.weight-tracker-heading {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.weight-tracker-heading > div {
  min-width: 0;
  gap: 12px;
}

.weight-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: white;
  font-size: 25px;
  box-shadow: 0 7px 18px rgb(66 126 105 / 10%);
}

.weight-tracker h3 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: 22px;
  line-height: 1.1;
}

.weight-tracker-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.weight-count {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: #dff3eb;
  color: #347d67;
  font-size: 11px;
  font-weight: 800;
}

.empty-weight-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 132px;
  gap: 13px;
  padding: 20px;
  border: 2px dashed #cfe3dc;
  border-radius: 18px;
  background: rgb(255 255 255 / 55%);
  color: var(--muted);
  text-align: center;
}

.empty-weight-chart span {
  font-size: 30px;
}

.empty-weight-chart p {
  max-width: 360px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.weight-chart-wrap {
  padding: 12px 8px 4px;
  overflow-x: auto;
  border: 1px solid #e5eee9;
  border-radius: 18px;
  background: rgb(255 255 255 / 76%);
}

.weight-chart {
  display: block;
  width: 100%;
  min-width: 520px;
  height: auto;
}

.weight-grid-line {
  stroke: #dce9e3;
  stroke-width: 1;
}

.weight-empty-label {
  fill: #5f5966;
  font-family: "Baloo 2", cursive;
  font-size: 18px;
  font-weight: 700;
}

.weight-empty-label-subtitle {
  fill: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

.weight-axis-label,
.weight-date-label {
  fill: #817b87;
  font-family: "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.weight-chart-line {
  fill: none;
  stroke: #ef7e61;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.weight-chart-point {
  fill: #ef7e61;
  stroke: white;
  stroke-width: 4;
}

.weight-point-label {
  fill: #4b4657;
  font-family: "Nunito", sans-serif;
  font-size: 11px;
  font-weight: 900;
}

.new-weight-fields {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(300px, 1.3fr);
  gap: 17px;
  margin-top: 19px;
}

.new-weight-fields .birthday-group {
  margin: 0;
}

.weight-help {
  margin: 10px 0 0;
  color: #5d826f;
  font-size: 11px;
  font-weight: 800;
}

.medication-overview {
  padding: 24px;
  border: 1px solid #e3dcec;
  border-radius: 22px;
  background: linear-gradient(145deg, #fbf9ff, #fffdf8);
}

.medication-heading,
.medication-heading > div {
  display: flex;
  align-items: center;
}

.medication-heading {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 17px;
}

.medication-heading > div {
  gap: 12px;
}

.medication-heading > div > span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: #f0ecfb;
  font-size: 24px;
}

.medication-heading h3 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: 21px;
}

.medication-heading p,
.medication-status {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.medication-status {
  color: #5c7d66;
}

.medication-add-fields {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 10px;
}

.medication-add-fields label {
  display: grid;
  gap: 5px;
}

.medication-add-fields label > span {
  color: #625d6a;
  font-size: 10px;
  font-weight: 800;
}

.medication-add-fields input {
  min-width: 0;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #ded7e9;
  border-radius: 12px;
  background: white;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.medication-add-fields button {
  align-self: end;
  min-height: 42px;
  padding: 0 13px;
  border: 0;
  border-radius: 12px;
  background: #7663a6;
  color: white;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.medication-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.medication-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgb(255 255 255 / 76%);
}

.medication-item > span {
  font-size: 19px;
}

.medication-item > div {
  flex: 1;
  min-width: 0;
}

.medication-item strong {
  display: block;
  font-size: 13px;
}

.medication-item p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.medication-item button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 9px;
  background: #fff0ee;
  color: #b95c52;
  font-size: 20px;
  line-height: 1;
}

.empty-medication-list {
  margin: 0;
  padding: 12px;
  border: 1px dashed #ded7e9;
  border-radius: 13px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.detail-form-actions {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-top: 25px;
}

.detail-form-actions > button {
  height: 56px;
  min-height: 56px;
  margin: 0;
}

.detail-save-button {
  flex: 1;
}

.profile-delete-button {
  min-height: 56px;
  padding: 0 20px;
  border: 2px solid #f1b5aa;
  border-radius: 17px;
  background: #fff0ed;
  color: #a3433d;
  font-size: 13px;
  font-weight: 800;
}

.profile-delete-button:hover,
.profile-delete-button:focus-visible {
  border-color: #e78e7f;
  background: #ffe1db;
}

.diary-heading {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 42px 0 30px;
}

.diary-title-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 30px;
  background: #ffe4a6;
  font-size: 57px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 24px rgb(95 75 53 / 10%);
  overflow: hidden;
}

.diary-heading h1 {
  margin: 12px 0 2px;
  font-size: clamp(38px, 5vw, 55px);
}

.diary-heading p {
  margin: 0;
  color: var(--muted);
}

.diary-menu-heading {
  justify-content: center;
}

.diary-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  width: min(840px, 100%);
  margin: 10px auto 55px;
}

.diary-menu-card {
  min-height: 300px;
  padding: 31px;
  border: 0;
  border-radius: 28px;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 15px 40px rgb(95 75 53 / 9%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.new-story-card {
  background: #fff0e8;
}

.memories-card {
  background: #fff3cf;
}

.diary-menu-card:hover,
.diary-menu-card:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 21px 46px rgb(95 75 53 / 14%);
  outline: 3px solid rgb(255 141 107 / 25%);
  outline-offset: 3px;
}

.diary-menu-icon {
  display: grid;
  place-items: center;
  width: 67px;
  height: 67px;
  margin-bottom: 21px;
  border-radius: 21px;
  background: rgb(255 255 255 / 68%);
  font-size: 35px;
}

.diary-menu-card h2 {
  margin: 0 0 4px;
  font-size: 29px;
}

.diary-menu-card p {
  min-height: 48px;
  margin: 0 0 23px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.diary-menu-card strong {
  color: var(--peach-dark);
  font-size: 12px;
}

.diary-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 25px;
  padding-bottom: 45px;
}

.diary-layout.diary-single-layout {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.diary-form,
.diary-entries {
  border: 1px solid #eee5da;
  border-radius: 27px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 16px 45px rgb(99 75 50 / 7%);
}

.diary-form {
  display: grid;
  gap: 19px;
  padding: 26px;
}

.diary-form-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.diary-form-title > span {
  font-size: 27px;
}

.diary-form-title h2,
.diary-entries-heading h2 {
  margin: 0;
  font-size: 25px;
}

.diary-save-button {
  width: 100%;
  margin-top: 3px;
}

.diary-entries {
  padding: 26px;
}

.diary-entries-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
}

.diary-entries-heading > span {
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff0e8;
  color: var(--peach-dark);
  font-size: 11px;
  font-weight: 800;
}

.empty-diary {
  padding: 54px 20px;
  border: 2px dashed #ded5cc;
  border-radius: 21px;
  color: var(--muted);
  text-align: center;
}

.empty-diary > span {
  font-size: 48px;
}

.empty-diary h3 {
  margin: 10px 0 3px;
  font-family: "Baloo 2", cursive;
  color: var(--ink);
  font-size: 21px;
}

.empty-diary p {
  margin: 0;
  font-size: 13px;
}

.diary-entry {
  position: relative;
  padding: 20px;
  border: 1px solid #eee6dc;
  border-radius: 20px;
  background: #fffdf9;
}

.diary-entry + .diary-entry {
  margin-top: 14px;
}

.pet-fact-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 14px 0;
  padding: 17px;
  border: 1px solid #f0d89a;
  border-radius: 18px;
  background: #fff7d9;
  color: #66562d;
}

.pet-fact-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 13px;
  background: white;
  font-size: 21px;
}

.pet-fact-card strong {
  color: #9a7218;
  font-family: "Baloo 2", cursive;
  font-size: 16px;
}

.pet-fact-card p {
  margin: 1px 0 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.pet-fact-add {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #9a7218;
  font-size: 11px;
  font-weight: 800;
}

.pet-fact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 9px;
}

.pet-fact-add:hover,
.pet-fact-add:focus-visible {
  text-decoration: underline;
}

.pet-fact-add:disabled {
  cursor: default;
  opacity: 0.7;
}

.facts-page-heading {
  padding: 45px 0 30px;
  text-align: center;
}

.facts-page-heading h1 {
  margin: 16px auto 7px;
  font-size: clamp(42px, 6vw, 59px);
}

.facts-page-heading p {
  margin: 0;
  color: var(--muted);
}

.faq-page-heading {
  max-width: 670px;
  padding: 45px 0 30px;
  margin: 0 auto;
  text-align: center;
}

.faq-page-heading h1 {
  margin: 16px auto 7px;
  font-size: clamp(42px, 6vw, 59px);
}

.faq-page-heading p {
  margin: 0;
  color: var(--muted);
}

.faq-list {
  display: grid;
  width: min(760px, 100%);
  gap: 12px;
  margin: 0 auto 55px;
}

.faq-item {
  overflow: hidden;
  border: 1px solid #eee0d4;
  border-radius: 19px;
  background: rgb(255 255 255 / 74%);
  box-shadow: 0 10px 25px rgb(95 75 53 / 5%);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 0 20px;
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span {
  color: var(--peach-dark);
  font-size: 23px;
  font-weight: 500;
  transition: transform 160ms ease;
}

.faq-item[open] summary {
  background: #fff3ea;
}

.faq-item[open] summary span {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0;
  padding: 17px 20px 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.fact-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 23px;
  padding-bottom: 50px;
}

.fact-list-grid.single-fact-list {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.no-fact-lists {
  width: min(520px, 100%);
  margin: 15px auto 50px;
  padding: 48px 25px;
  border: 2px dashed #ddd3c8;
  border-radius: 27px;
  background: rgb(255 255 255 / 55%);
  color: var(--muted);
  text-align: center;
}

.no-fact-lists > span {
  font-size: 52px;
}

.no-fact-lists h2 {
  margin: 10px 0 3px;
  color: var(--ink);
  font-size: 27px;
}

.no-fact-lists p {
  margin: 0 0 20px;
  font-size: 13px;
}

.care-page-heading {
  padding: 45px 0 30px;
  text-align: center;
}

.care-page-heading h1 {
  margin: 16px auto 7px;
  font-size: clamp(42px, 6vw, 59px);
}

.care-page-heading p {
  margin: 0;
  color: var(--muted);
}

.care-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 23px;
}

.care-sections.single-care-section {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}

.care-section {
  padding: 26px;
  border-radius: 28px;
  box-shadow: 0 15px 40px rgb(95 75 53 / 8%);
}

.cat-care-section {
  background: #fff3db;
}

.dog-care-section {
  background: #eaf6f1;
}

.care-section-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.care-section-heading > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: rgb(255 255 255 / 66%);
  font-size: 39px;
}

.care-section-heading h2 {
  margin: 0;
  font-size: 25px;
}

.care-section-heading p {
  margin: -3px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

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

.care-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgb(255 255 255 / 68%);
}

.care-tip > span {
  font-size: 23px;
}

.care-tip h3 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: 16px;
}

.care-tip p {
  margin: 1px 0 0;
  color: #625d6a;
  font-size: 11px;
  line-height: 1.5;
}

.care-source-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--peach-dark);
  font-size: 11px;
  font-weight: 800;
}

.vet-help {
  width: min(760px, 100%);
  margin: 23px auto 50px;
}

.professional-help-page .vet-help {
  margin-top: 36px;
}

.supplies-wrap {
  width: min(680px, 100%);
  margin: 42px auto 70px;
}

.food-preferences-wrap {
  width: min(820px, 100%);
  margin: 42px auto 70px;
}

.food-preferences-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
}

.food-preferences-heading > span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: #eef8ee;
  font-size: 36px;
}

.food-preferences-heading h1 {
  margin: 8px 0 3px;
  font-size: clamp(38px, 6vw, 52px);
}

.food-preferences-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

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

.food-preference-card {
  display: grid;
  gap: 13px;
  padding: 21px;
  border: 1px solid #e7e3db;
  border-radius: 24px;
  background: white;
}

.food-preference-pet {
  display: flex;
  align-items: center;
  gap: 11px;
}

.food-preference-pet > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #f4f2ee;
  font-size: 27px;
}

.food-preference-pet small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.food-preference-pet h2 {
  margin: 1px 0 0;
  font-size: 23px;
}

.food-preference-card label {
  display: grid;
  gap: 6px;
}

.food-preference-card label > span {
  color: #625d6a;
  font-size: 11px;
  font-weight: 800;
}

.food-preference-card input,
.food-preference-card textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #e5dfd8;
  border-radius: 12px;
  background: #fffdf9;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.food-preference-card textarea {
  min-height: 74px;
  resize: vertical;
}

.food-preferences-save {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 20px;
}

.food-preferences-save p {
  margin: 0;
  color: #4e7b5b;
  font-size: 12px;
  font-weight: 800;
}

.empty-food-preferences {
  padding: 42px 25px;
  border: 1px dashed #dcd5cc;
  border-radius: 24px;
  background: rgb(255 255 255 / 62%);
  text-align: center;
}

.empty-food-preferences > span {
  font-size: 37px;
}

.empty-food-preferences h2 {
  margin: 10px 0 4px;
  font-size: 27px;
}

.empty-food-preferences p {
  max-width: 410px;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 13px;
}

.food-schedule {
  margin-top: 30px;
  padding: 23px;
  border: 1px solid #d9eadb;
  border-radius: 25px;
  background: linear-gradient(135deg, #f9fff8, #f0faee);
}

.food-schedule-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 16px;
}

.food-schedule-heading h2 {
  margin: 7px 0 3px;
  font-size: 27px;
}

.food-schedule-heading p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.food-schedule-heading > span {
  font-size: 28px;
}

.food-schedule-table-wrap {
  overflow-x: auto;
  border: 1px solid #dbe8dc;
  border-radius: 16px;
  background: white;
}

.food-schedule-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
}

.food-schedule-table th,
.food-schedule-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf2ed;
  text-align: center;
}

.food-schedule-table thead th {
  color: #57745e;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.food-schedule-table th[scope="row"] {
  min-width: 130px;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
}

.food-schedule-name-input {
  width: 100%;
  min-width: 160px;
  min-height: 37px;
  padding: 0 10px;
  border: 1px solid #cfe0d1;
  border-radius: 10px;
  background: #fbfffb;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.food-schedule-table tbody tr:last-child th,
.food-schedule-table tbody tr:last-child td {
  border-bottom: 0;
}

.food-schedule-choice {
  display: inline-flex;
  gap: 4px;
}

.food-schedule-choice button,
.food-schedule-delete {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 0;
  border-radius: 9px;
  background: #f2f2ef;
  color: #aaa59f;
  font-size: 16px;
  font-weight: 900;
}

.food-schedule-choice button.is-allowed {
  background: #dff3e2;
  color: #347344;
}

.food-schedule-choice button.is-not-allowed {
  background: #fff0ee;
  color: #bd5b52;
}

.food-schedule-delete {
  width: 28px;
  height: 28px;
  background: transparent;
  color: #a99f9a;
}

.food-schedule-add-row {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 11px;
  border: 1px dashed #b6d0b9;
  border-radius: 12px;
  background: rgb(255 255 255 / 65%);
  color: #4e7b5b;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.food-schedule-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #cfe0d1;
  border-radius: 15px;
  color: #6d7e70;
  font-size: 13px;
  text-align: center;
}

.supplies-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 25px;
}

.supplies-heading > span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 24px;
  background: #f0efff;
  font-size: 36px;
}

.supplies-heading h1 {
  margin: 8px 0 3px;
  font-size: clamp(38px, 6vw, 52px);
}

.supplies-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.supply-recommendations {
  margin: 0 0 25px;
  padding: 22px;
  border: 1px solid #e4ddf5;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgb(213 210 255 / 60%) 0, transparent 160px),
    #fbfaff;
}

.supply-recommendations-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.supply-recommendations-heading > span:last-child {
  font-size: 28px;
}

.supply-recommendations h2 {
  margin: 8px 0 0;
  font-size: 25px;
}

.supply-balance {
  margin: 3px 0 0;
  color: #625d8d;
  font-size: 11px;
  font-weight: 800;
}

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

.supply-recommendation-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  padding: 13px;
  border-radius: 16px;
  background: white;
}

.supply-recommendation-card > span {
  grid-row: 1 / span 3;
  font-size: 25px;
}

.supply-category {
  display: block;
  margin-bottom: 2px;
  color: #9a856e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.supply-recommendation-card h3 {
  margin: 0;
  font-family: "Baloo 2", cursive;
  font-size: 17px;
  line-height: 1.05;
}

.supply-recommendation-card h3 span {
  display: block;
  color: #625d8d;
  font-family: "Nunito", sans-serif;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.supply-recommendation-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: #686275;
  font-size: 11px;
  line-height: 1.45;
}

.supply-recommendation-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.supply-recommendation-actions a,
.supply-recommendation-actions button {
  min-height: 31px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  color: #625d8d;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.supply-recommendation-actions a {
  display: inline-flex;
  align-items: center;
  background: #fff4e7;
  color: #a75e38;
}

.supply-recommendation-actions button {
  background: #f0efff;
}

.supply-recommendation-actions button:hover,
.supply-recommendation-actions button:focus-visible {
  background: #e4e2ff;
}

.supply-recommendation-actions a:hover,
.supply-recommendation-actions a:focus-visible {
  background: #ffe8ce;
}

.supply-source-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.supply-source-note a {
  color: #625d8d;
  font-weight: 800;
}

.supplies-add-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 18px;
}

.supplies-add-form input {
  min-width: 0;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #e5dfd8;
  border-radius: 16px;
  background: white;
  color: var(--ink);
  font: inherit;
}

.supplies-add-form .primary-button {
  min-height: 52px;
  box-shadow: 0 5px 0 #db6c50;
}

.supplies-list {
  display: grid;
  gap: 9px;
}

.supply-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #ece6df;
  border-radius: 17px;
  background: white;
}

.supply-item label {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.supply-item input {
  width: 20px;
  height: 20px;
  accent-color: var(--peach);
}

.supply-done label span {
  color: var(--muted);
  text-decoration: line-through;
}

.supply-item > button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 10px;
  background: #fff1ef;
  color: #b65950;
  font-size: 23px;
  line-height: 1;
}

.empty-supplies {
  padding: 36px 22px;
  border: 1px dashed #dcd5cc;
  border-radius: 22px;
  background: rgb(255 255 255 / 62%);
  text-align: center;
}

.empty-supplies > span {
  font-size: 34px;
}

.empty-supplies h2 {
  margin: 10px 0 4px;
  font-size: 25px;
}

.empty-supplies p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.care-warning {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  padding: 16px 19px;
  border: 1px solid #f0c8bd;
  border-radius: 18px;
  background: #fff2ee;
}

.care-warning > span {
  font-size: 29px;
}

.care-warning p {
  margin: 0;
  color: #76554f;
  font-size: 12px;
  line-height: 1.5;
}

.nearby-vet-button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 70px;
  gap: 14px;
  margin-top: 12px;
  padding: 13px 17px;
  border: 2px solid #b7dfd1;
  border-radius: 18px;
  background: #eaf7f2;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 9px 24px rgb(66 126 105 / 10%);
}

.nearby-vet-button:hover,
.nearby-vet-button:focus-visible {
  border-color: #79c2aa;
  background: #ddf3eb;
  transform: translateY(-1px);
}

.nearby-vet-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: white;
  font-size: 24px;
}

.nearby-vet-button > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.nearby-vet-button strong,
.nearby-vet-button small {
  display: block;
}

.nearby-vet-button strong {
  font-size: 14px;
}

.nearby-vet-button small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.nearby-vet-arrow {
  color: #3f987a;
  font-size: 22px;
  font-weight: 900;
}

.emergency-vet-button {
  border-color: #f0b8b1;
  background: #fff0ee;
}

.emergency-vet-button:hover,
.emergency-vet-button:focus-visible {
  border-color: #df8277;
  background: #ffe4e0;
}

.emergency-vet-button .nearby-vet-arrow {
  color: #c95f55;
}

.boarding-search-button {
  border-color: #d7caef;
  background: #f6f1ff;
}

.boarding-search-button:hover,
.boarding-search-button:focus-visible {
  border-color: #b9a2dc;
  background: #eee6ff;
}

.boarding-search-button .nearby-vet-arrow {
  color: #8663b7;
}

.fact-list-card {
  padding: 26px;
  border-radius: 27px;
  box-shadow: 0 15px 40px rgb(95 75 53 / 8%);
}

.cat-fact-list {
  background: #fff3db;
}

.dog-fact-list {
  background: #eaf6f1;
}

.fact-list-card-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.fact-list-card-heading > span {
  display: grid;
  place-items: center;
  width: 61px;
  height: 61px;
  border-radius: 19px;
  background: rgb(255 255 255 / 66%);
  font-size: 37px;
}

.fact-list-card h2 {
  margin: 0;
  font-size: 26px;
}

.fact-list-card-heading p {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.fact-list-card ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: facts;
}

.fact-list-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 15px;
  background: rgb(255 255 255 / 65%);
  counter-increment: facts;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.fact-list-card li::before {
  content: counter(facts);
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: white;
  color: var(--peach-dark);
  font-size: 10px;
  font-weight: 800;
}

.fact-list-card li > span {
  flex: 1;
}

.fact-list-card li button {
  flex: 0 0 auto;
  padding: 3px;
  border: 0;
  background: transparent;
  opacity: 0.62;
}

.empty-fact-list {
  padding: 42px 18px;
  border: 2px dashed rgb(117 103 75 / 22%);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.empty-fact-list > span {
  font-size: 39px;
}

.empty-fact-list p {
  margin: 7px 0 0;
  font-size: 12px;
  font-weight: 700;
}

.diary-entry-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.diary-mood {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #fff0e8;
  font-size: 27px;
}

.diary-entry time {
  color: var(--peach-dark);
  font-size: 11px;
  font-weight: 800;
}

.diary-entry h3 {
  margin: 1px 0 0;
  font-family: "Baloo 2", cursive;
  font-size: 20px;
  line-height: 1.15;
}

.diary-entry > p {
  margin: 15px 0;
  color: #625d6a;
  font-size: 14px;
  line-height: 1.6;
}

.diary-entry-media {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.diary-entry-media-grid,
.diary-media-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.diary-entry-photo {
  display: block;
  width: 100%;
  max-height: 360px;
  border-radius: 16px;
  object-fit: cover;
  background: #f7f1ea;
}

.diary-media-loading {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.diary-media-preview-card {
  overflow: hidden;
  border: 1px solid #eee1d6;
  border-radius: 18px;
  background: #fffdf9;
}

.diary-media-preview-card img,
.diary-media-preview-card video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #f7f1ea;
}

.diary-media-preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
}

.diary-media-preview-meta small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.diary-media-preview-meta button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #a75a51;
  font-size: 11px;
  font-weight: 800;
}

.diary-media-picker .photo-picker-copy {
  width: 100%;
}

.diary-entry-delete {
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: #a75a51;
  font-size: 11px;
  font-weight: 800;
  opacity: 0.68;
}

.diary-entry-delete:hover,
.diary-entry-delete:focus-visible {
  opacity: 1;
}

.delete-dialog {
  width: min(430px, calc(100% - 36px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  color: var(--ink);
  background: white;
  box-shadow: 0 28px 80px rgb(55 52 71 / 25%);
}

.install-dialog {
  width: min(410px, calc(100% - 34px));
  padding: 0;
  border: 0;
  border-radius: 29px;
  color: var(--ink);
  background: white;
  box-shadow: 0 28px 80px rgb(55 52 71 / 28%);
}

.install-dialog::backdrop {
  background: rgb(55 52 71 / 44%);
  backdrop-filter: blur(5px);
}

.install-dialog-content {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 35px 30px 27px;
  text-align: center;
}

.install-dialog-content > img {
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  border-radius: 23px;
  box-shadow: 0 10px 25px rgb(230 110 80 / 22%);
}

.install-dialog-close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #f7f2ec;
  color: var(--muted);
  font-size: 23px;
}

.install-dialog h2 {
  margin: 13px 0 5px;
  font-size: 31px;
}

.install-dialog-content > p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.install-now-button {
  width: 100%;
}

.install-later-button {
  margin-top: 17px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ios-install-steps {
  width: 100%;
  margin: 0;
  padding: 16px 16px 16px 38px;
  border-radius: 17px;
  background: #fff7f2;
  color: #625d6a;
  text-align: left;
  font-size: 13px;
  line-height: 1.8;
}

.delete-dialog::backdrop {
  background: rgb(55 52 71 / 42%);
  backdrop-filter: blur(4px);
}

.delete-dialog-content {
  position: relative;
  padding: 38px 34px 30px;
  text-align: center;
}

.delete-dialog-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 16px;
  border-radius: 24px;
  background: #fff0e8;
  font-size: 34px;
  transform: rotate(-5deg);
}

.delete-dialog h2 {
  margin: 14px 0 7px;
  font-size: 30px;
  line-height: 1.1;
}

.delete-dialog p {
  max-width: 340px;
  margin: 0 auto 25px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.delete-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.delete-dialog-actions button {
  min-height: 50px;
  padding: 0 14px;
  border-radius: 15px;
  font-size: 13px;
  font-weight: 800;
}

.recurring-delete-actions .keep-pet-button {
  grid-column: 1 / -1;
}

.delete-one-appointment-button {
  border: 2px solid #e8d499;
  background: #fff8dc;
  color: #80651e;
}

.delete-one-appointment-button:hover,
.delete-one-appointment-button:focus-visible {
  border-color: #d8b95e;
  background: #fff1bd;
}

.unsaved-dialog-icon {
  background: #fff7d9;
}

.incomplete-passport-icon {
  background: #eaf6f1;
}

.continue-passport-button {
  width: 100%;
  min-height: 50px;
}

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

.unsaved-dialog-actions button {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
}

.keep-editing-button {
  border: 2px solid #e9e1d8;
  background: white;
  color: var(--ink);
}

.leave-without-saving-button {
  border: 2px solid #f1b5aa;
  background: #fff0ed;
  color: #a3433d;
}

.save-before-leaving-button {
  grid-column: 1 / -1;
  border: 0;
  background: var(--peach);
  color: white;
  box-shadow: 0 4px 0 #db6c50;
}

.keep-pet-button {
  border: 2px solid #e9e1d8;
  background: white;
  color: var(--ink);
}

.confirm-delete-button {
  border: 2px solid #f1b5aa;
  background: #fff0ed;
  color: #a3433d;
}

.keep-pet-button:hover,
.keep-pet-button:focus-visible {
  background: #f9f5ef;
}

.confirm-delete-button:hover,
.confirm-delete-button:focus-visible {
  border-color: #e78e7f;
  background: #ffe1db;
}

.publish-dialog-icon {
  background: #fff7d9;
}

.publish-blog-button {
  border: 0;
  background: var(--peach);
  color: white;
  box-shadow: 0 4px 0 #db6c50;
}

.publish-blog-button:hover,
.publish-blog-button:focus-visible {
  background: var(--peach-dark);
}

.pet-profile.color-peach {
  background: #ffd1c2;
}

.pet-profile.color-yellow {
  background: #ffe7a6;
}

.pet-profile.color-mint {
  background: #bcebdc;
}

.pet-profile.color-blue {
  background: #c1e3f3;
}

.pet-profile.color-lilac {
  background: #ddcef1;
}

.empty-pet-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #dcd3ca;
  background: rgb(255 255 255 / 45%);
  color: var(--muted);
}

.empty-pet-card > span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: white;
  color: var(--peach);
  font-size: 29px;
  box-shadow: 0 8px 20px rgb(90 70 52 / 8%);
}

.empty-pet-card strong {
  font-size: 17px;
}

.empty-pet-card small {
  margin-top: 3px;
}

.coming-soon {
  margin: 35px 0;
  color: #8b8490;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 800px) {
  .page {
    padding: 0 22px 35px;
  }

  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 45px;
  }

  .hero-copy {
    text-align: center;
  }

  .welcome-actions {
    margin-right: auto;
    margin-left: auto;
  }

  .intro {
    margin-right: auto;
    margin-left: auto;
  }

  .hero-art {
    width: min(470px, 100%);
    margin: 30px auto 5px;
  }

  .feature-row {
    grid-template-columns: 1fr;
  }

  .feature-row > div {
    justify-content: flex-start;
  }

  .feature-row > div + div {
    border-top: 1px solid #eee5da;
    border-left: 0;
  }

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

  .detail-page .detail-hero {
    gap: 16px;
    margin: 20px 0;
    padding: 22px;
    border-radius: 24px;
  }

  .detail-page .detail-avatar {
    width: 92px;
    height: 92px;
    font-size: 56px;
  }

  .detail-page .detail-hero h1 {
    font-size: clamp(34px, 8vw, 48px);
  }

  .detail-page .detail-form {
    width: 100%;
    min-width: 0;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .detail-page .detail-fields {
    grid-template-columns: 1fr;
    gap: 17px;
    min-width: 0;
  }

  .detail-page .wide-field,
  .detail-page .kind-questions,
  .detail-page .weight-tracker,
  .detail-page .medication-overview {
    grid-column: auto;
    min-width: 0;
    max-width: 100%;
  }

  .detail-page label,
  .detail-page fieldset,
  .detail-page input,
  .detail-page select,
  .detail-page textarea {
    min-width: 0;
    max-width: 100%;
  }

  .detail-page h1,
  .detail-page h2,
  .detail-page h3,
  .detail-page p,
  .detail-page strong {
    overflow-wrap: anywhere;
  }

  .blog-hero,
  .blog-layout {
    grid-template-columns: 1fr;
  }

  .blog-form {
    position: static;
  }

  .featured-blog-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .blog-category-filter,
  .blog-category-filter-options,
  .passport-section-bar,
  .passport-section-bar-options,
  .blog-post-search {
    width: 100%;
  }

  .blog-category-filter-options,
  .passport-section-bar-options {
    flex-wrap: wrap;
    overflow: visible;
  }

  .blog-category-filter-button,
  .passport-section-bar-options button {
    flex: 1 1 calc(50% - 4px);
  }

  .blog-post-search input {
    min-height: 46px;
    font-size: 16px;
  }

  .topbar {
    min-height: 77px;
  }

  .blog-hero-copy {
    display: contents;
  }

  .blog-page-heading {
    order: 1;
  }

  .blog-post-timeline,
  .blog-hero > .empty-blog-post {
    order: 3;
  }

  .blog-layout {
    order: 4;
  }

  .pootjes-blog-art {
    order: 2;
  }

  .topbar > .step-pill,
  .topbar > .welcome-topbar-actions {
    display: none;
  }

  .mobile-menu-toggle {
    display: grid;
    place-content: center;
    width: 42px;
    height: 42px;
    gap: 4px;
    border: 1px solid #e6dcd1;
    border-radius: 13px;
    background: rgb(255 255 255 / 82%);
  }

  .mobile-menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: var(--ink);
  }

  .mobile-menu-overlay {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: block;
    background: rgb(50 42 55 / 32%);
    backdrop-filter: blur(3px);
  }

  .mobile-menu-panel {
    width: min(320px, calc(100vw - 42px));
    min-height: 100%;
    margin-left: auto;
    padding: 24px 18px;
    background:
      radial-gradient(circle at top right, rgb(255 218 169 / 58%) 0, transparent 150px),
      #fffdf9;
    box-shadow: -18px 0 45px rgb(63 45 31 / 18%);
    animation: mobile-menu-enter 180ms ease-out both;
  }

  .mobile-menu-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
    color: var(--ink);
    font-family: "Baloo 2", cursive;
    font-size: 29px;
  }

  .mobile-menu-heading button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #fff0e8;
    color: var(--peach-dark);
    font-size: 27px;
    line-height: 1;
  }

  .mobile-menu-links {
    display: grid;
    gap: 8px;
  }

  .mobile-menu-links button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    gap: 13px;
    padding: 0 13px;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: #514c58;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
  }

  .mobile-menu-links button:hover,
  .mobile-menu-links button:focus-visible {
    background: #fff0e8;
    color: var(--peach-dark);
  }

  .mobile-menu-links button span {
    display: grid;
    place-items: center;
    width: 29px;
    font-size: 21px;
  }

  .brand {
    font-size: 22px;
  }

  .brand-paw {
    width: 39px;
    height: 39px;
    border-radius: 13px;
    font-size: 20px;
  }

  .privacy-pill {
    max-width: 130px;
    padding: 7px 10px;
    font-size: 10px;
    text-align: center;
  }

  .topbar-actions .privacy-pill {
    display: none;
  }

  .welcome-topbar-actions .privacy-pill {
    display: none;
  }

  .agenda-button,
  .settings-button {
    width: 41px;
    min-height: 41px;
    padding: 0;
    border-radius: 13px;
    font-size: 17px;
  }

  .settings-wrap {
    margin-top: 22px;
  }

  .admin-account-wrap {
    min-height: 0;
    padding: 18px 0 32px;
  }

  .account-page {
    padding: 22px 16px 32px;
  }

  .account-wrap {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 14px;
  }

  .account-intro {
    padding: 8px 4px 16px;
  }

  .account-paw {
    width: 54px;
    height: 54px;
    margin-bottom: 13px;
    border-radius: 18px;
    font-size: 27px;
  }

  .account-intro h1 {
    font-size: clamp(37px, 12vw, 49px);
  }

  .account-card {
    min-height: 0;
    padding: 24px 18px;
    border-radius: 22px;
  }

  .account-form .primary-button,
  .account-form .secondary-button {
    width: 100%;
  }

  .admin-account-card {
    width: 100%;
    padding: 24px 18px;
    border-radius: 22px;
  }

  .admin-account-card h1 {
    font-size: clamp(31px, 10vw, 37px);
    overflow-wrap: anywhere;
  }

  .admin-account-card > p {
    margin-bottom: 20px;
  }

  .admin-account-form {
    gap: 14px;
  }

  .admin-account-form input,
  .admin-account-form .primary-button,
  .admin-account-card .leave-without-saving-button {
    width: 100%;
  }

  .settings-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .settings-title-icon {
    width: 70px;
    height: 70px;
    border-radius: 23px;
    font-size: 38px;
  }

  .settings-heading h1 {
    font-size: 43px;
  }

  .settings-card {
    padding: 22px 14px 16px;
  }

  .settings-card h2 {
    padding: 0 4px;
    font-size: 23px;
  }

  .settings-card-intro {
    padding: 0 4px;
  }

  .setting-row {
    grid-template-columns: auto 1fr;
    gap: 11px;
    padding: 14px 8px;
  }

  .setting-icon {
    width: 47px;
    height: 47px;
    border-radius: 15px;
    font-size: 25px;
  }

  .setting-control {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: end;
    justify-items: end;
    width: 100%;
    margin-top: -6px;
    gap: 7px;
  }

  .agenda-wrap {
    margin-top: 22px;
  }

  .agenda-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
  }

  .agenda-title-icon {
    width: 70px;
    height: 70px;
    border-radius: 23px;
    font-size: 38px;
  }

  .agenda-heading h1 {
    font-size: 43px;
  }

  .agenda-add-button {
    width: 100%;
  }

  .week-calendar {
    margin-right: -8px;
    margin-left: -8px;
    padding: 13px 8px;
    border-radius: 20px;
  }

  .calendar-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .calendar-toolbar h2 {
    font-size: 25px;
  }

  .calendar-navigation {
    width: 100%;
  }

  .calendar-navigation button:nth-child(2) {
    flex: 1;
  }

  .week-grid {
    grid-template-columns: 1fr;
  }

  .week-day {
    min-height: 0;
  }

  .week-day > header {
    padding: 8px 10px;
  }

  .week-day > header > span {
    font-size: 10px;
  }

  .week-day > header time {
    width: auto;
    height: 29px;
    grid-template-columns: auto auto;
    padding: 0 9px;
    gap: 4px;
  }

  .week-day-appointments {
    padding: 8px;
  }

  .empty-week-day {
    margin: 2px 0;
    text-align: left;
  }

  .week-appointment {
    padding: 10px;
  }

  .week-appointment-title strong {
    font-size: 11px;
  }

  .week-appointment-title small {
    font-size: 9px;
  }

  .week-appointment-actions button {
    min-height: 34px;
    font-size: 9px;
  }

  .agenda-item {
    grid-template-columns: 50px 42px minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  .agenda-date {
    min-height: 52px;
  }

  .agenda-pet-avatar {
    width: 42px;
    height: 42px;
  }

  .agenda-item > button {
    grid-column: 1 / -1;
    min-height: 39px;
  }

  .appointment-dialog-content {
    padding: 27px 18px 20px;
  }

  .appointment-dialog-icon {
    width: 55px;
    height: 55px;
    font-size: 29px;
  }

  .birthday-celebration {
    min-height: 104px;
    gap: 10px;
    padding: 14px;
    border-radius: 21px;
  }

  .birthday-pets {
    gap: 9px;
  }

  .birthday-pet {
    gap: 11px;
  }

  .birthday-pet-avatar {
    width: 57px;
    height: 57px;
    border-width: 4px;
    border-radius: 18px;
    font-size: 30px;
  }

  .birthday-pet > div > span {
    font-size: 9px;
  }

  .birthday-pet strong {
    font-size: 23px;
  }

  .birthday-balloon {
    display: none;
  }

  .birthday-ideas-heading {
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
  }

  .birthday-ideas-heading > span {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    font-size: 32px;
  }

  .birthday-idea-sections {
    grid-template-columns: 1fr;
  }

  .birthday-recipe-list {
    grid-template-columns: 1fr;
  }

  .birthday-cake {
    font-size: 37px;
  }

  .welcome-page.has-home-message .welcome-grid {
    min-height: auto;
    padding-top: 12px;
  }

  .monthly-weight-reminders {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 19px;
  }

  .monthly-weight-heading > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 22px;
  }

  .monthly-weight-heading strong {
    font-size: 17px;
  }

  .monthly-weight-list {
    grid-template-columns: 1fr;
  }

  .monthly-weight-list button {
    min-height: 56px;
  }

  .appointment-reminders {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 19px;
  }

  .appointment-reminder-heading > span {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 22px;
  }

  .appointment-reminder-heading strong {
    font-size: 17px;
  }

  .appointment-reminder-list {
    grid-template-columns: 1fr;
  }

  .appointment-reminder-list button {
    min-height: 56px;
  }

  .welcome-grid {
    min-height: auto;
    padding: 12px 0 22px;
  }

  .welcome-page .hero-copy > .eyebrow {
    display: none;
  }

  .welcome-page h1 {
    margin: 8px 0 10px;
    font-size: 35px;
    line-height: 0.98;
  }

  .welcome-page .intro {
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.4;
  }

  .welcome-page .welcome-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px;
  }

  .welcome-page .primary-button,
  .welcome-page .go-to-pets-button,
  .welcome-page .blog-button,
  .welcome-page .welcome-group-blog-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .welcome-page .primary-button {
    box-shadow: 0 4px 0 #db6c50, 0 8px 18px rgb(230 110 80 / 18%);
  }

  .welcome-page .facts-list-button,
  .welcome-page .care-tips-button,
  .welcome-page .professional-help-button {
    min-height: 55px;
    height: 55px;
    padding: 0 9px;
    border-radius: 14px;
    background: rgb(255 255 255 / 65%);
    font-size: 11px;
    line-height: 1.2;
  }

  .welcome-page .care-menu {
    grid-column: 1 / -1;
    width: 100%;
  }

  .welcome-page .care-menu-toggle {
    min-height: 55px;
    padding: 0 14px;
    border-radius: 14px;
    background: rgb(255 248 241 / 86%);
  }

  .supplies-wrap {
    margin-top: 25px;
  }

  .food-preferences-wrap {
    margin-top: 25px;
  }

  .food-preferences-heading > span {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 30px;
  }

  .food-preference-grid {
    grid-template-columns: 1fr;
  }

  .food-preferences-save {
    align-items: stretch;
    flex-direction: column;
  }

  .food-preferences-save .primary-button {
    width: 100%;
  }

  .food-schedule {
    padding: 17px;
  }

  .supplies-heading > span {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    font-size: 30px;
  }

  .supplies-add-form {
    grid-template-columns: 1fr;
  }

  .supply-recommendation-grid {
    grid-template-columns: 1fr;
  }

  .topbar-blog-button,
  .group-blog-button {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  .welcome-page .small-note {
    display: none;
  }

  .welcome-page .hero-art {
    display: none;
  }

  h1 {
    font-size: 43px;
  }

  .hero-art {
    min-height: 350px;
  }

  .blob {
    inset: 34px 3px 20px;
  }

  .cat-card {
    width: 145px;
    height: 170px;
  }

  .cat-one {
    left: 9px;
  }

  .cat-two {
    right: 8px;
    bottom: 25px;
  }

  .cat-face {
    font-size: 76px;
  }

  .pet-form {
    padding: 22px 17px;
  }

  .delete-dialog-content {
    padding: 31px 20px 22px;
  }

  .delete-dialog-actions,
  .unsaved-dialog-actions {
    grid-template-columns: 1fr;
  }

  .save-before-leaving-button {
    grid-column: auto;
  }

  .dashboard-heading {
    align-items: stretch;
    flex-direction: column;
    padding-top: 30px;
  }

  .pet-grid {
    grid-template-columns: 1fr;
  }

  .detail-hero {
    align-items: center;
    flex-direction: column;
    padding: 26px 20px;
    text-align: center;
  }

  .detail-page .topbar {
    min-height: 68px;
  }

  .detail-page .home-button {
    padding: 0 8px;
    font-size: 12px;
  }

  .detail-page .detail-hero {
    gap: 12px;
    margin: 14px 0 18px;
    padding: 20px 14px;
    border-radius: 22px;
  }

  .detail-page .detail-avatar {
    width: 78px;
    height: 78px;
    font-size: 50px;
  }

  .detail-page .detail-hero h1 {
    font-size: 38px;
  }

  .detail-page .detail-hero p {
    margin-top: 0;
    font-size: 12px;
  }

  .detail-form {
    margin-bottom: 24px;
    padding: 20px 14px;
    border-radius: 22px;
  }

  .photo-picker {
    align-items: flex-start;
    flex-direction: column;
  }

  .photo-preview {
    width: 88px;
    height: 88px;
  }

  .detail-form-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 19px;
  }

  .detail-form-heading h2 {
    font-size: 27px;
  }

  .detail-fields {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .detail-page .birthday-fields {
    grid-template-columns: 0.7fr 1.25fr 0.9fr;
    gap: 5px;
  }

  .detail-page .birthday-fields select {
    min-width: 0;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 12px;
  }

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

  .kind-questions {
    grid-column: auto;
    padding: 18px 14px;
  }

  .kind-question-grid {
    grid-template-columns: 1fr;
  }

  .weight-tracker {
    grid-column: auto;
    padding: 18px 14px;
  }

  .medication-overview {
    grid-column: auto;
    padding: 18px 14px;
  }

  .medication-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .medication-add-fields {
    grid-template-columns: 1fr;
  }

  .medication-add-fields button {
    width: 100%;
  }

  .weight-tracker-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .weight-chart-wrap {
    margin-right: -2px;
    margin-left: -2px;
  }

  .weight-chart {
    min-width: 470px;
  }

  .new-weight-fields {
    grid-template-columns: 1fr;
  }

  .empty-weight-chart {
    align-items: center;
    flex-direction: column;
  }

  .detail-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .add-profile-actions {
    grid-template-columns: 1fr;
  }

  .diary-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .diary-layout {
    grid-template-columns: 1fr;
  }

  .diary-menu-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 4px auto 25px;
  }

  .diary-menu-heading {
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 20px 0 18px;
  }

  .diary-menu-heading .diary-title-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 36px;
  }

  .diary-menu-heading .eyebrow {
    display: none;
  }

  .diary-menu-heading h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1;
  }

  .diary-menu-heading p {
    margin-top: 3px;
    font-size: 11px;
  }

  .diary-menu-card {
    min-height: 215px;
    padding: 15px 13px;
    border-radius: 20px;
  }

  .diary-menu-icon {
    width: 47px;
    height: 47px;
    margin-bottom: 12px;
    border-radius: 15px;
    font-size: 25px;
  }

  .diary-menu-card h2 {
    font-size: 19px;
    line-height: 1.05;
  }

  .diary-menu-card p {
    min-height: 58px;
    margin-bottom: 12px;
    font-size: 10px;
    line-height: 1.35;
  }

  .diary-menu-card strong {
    font-size: 9px;
    line-height: 1.3;
  }

  .fact-list-grid {
    grid-template-columns: 1fr;
  }

  .care-sections {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}