/* ============================================================
   LANDING PAGE — Full redesign
   ============================================================ */

/* ========== PRODUCT LANDING 2026 ========== */
.product-landing {
  min-height: 100vh;
  background: #fbfaf7;
}

/* Verified feed catalog foundation */
.feed-catalog-page {
  min-height: 100vh;
  background: #f6f7f4;
}
.feed-catalog-shell {
  display: grid;
  gap: 18px;
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 120px;
}
.feed-catalog-hero,
.feed-catalog-integrity,
.feed-catalog-controls,
.feed-catalog-results,
.feed-catalog-sources,
.feed-catalog-boundary {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.feed-catalog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 34px;
  background: linear-gradient(135deg, #eaf6ec, #fff8e9);
}
.feed-catalog-hero > div:first-child > span,
.feed-catalog-results > header span,
.feed-catalog-sources > header > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feed-catalog-hero > div:first-child > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.feed-catalog-hero h1 {
  margin: 8px 0;
  font-size: clamp(32px, 5vw, 48px);
}
.feed-catalog-hero p,
.feed-catalog-sources header p,
.feed-catalog-boundary p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.feed-catalog-stats {
  display: grid;
  min-width: 190px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 30px rgb(48 74 55 / 8%);
}
.feed-catalog-stats strong {
  color: var(--color-primary-dark);
  font-size: 44px;
}
.feed-catalog-stats small {
  margin-top: 6px;
  color: var(--color-text-secondary);
}
.feed-catalog-integrity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
}
.feed-catalog-integrity > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: #eaf6ec;
  color: var(--color-primary-dark);
}
.feed-catalog-integrity p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.feed-catalog-integrity > b {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f2eefa;
  color: #6849a7;
  font-size: 10px;
}
.feed-catalog-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px 170px;
  gap: 10px;
  padding: 14px;
}
.feed-catalog-controls label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
}
.feed-catalog-controls input,
.feed-catalog-controls select {
  min-height: 46px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: #fff;
}
.feed-catalog-controls input {
  width: 100%;
  border: 0;
  outline: 0;
}
.feed-catalog-controls select {
  padding: 0 11px;
}
.feed-catalog-results,
.feed-catalog-sources {
  padding: 24px;
}
.feed-catalog-results > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.feed-catalog-results h2,
.feed-catalog-sources h2 {
  margin: 4px 0 0;
}
.feed-catalog-results > header > b {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: #eef5ef;
}
.feed-catalog-results > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.feed-catalog-card {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
}
.feed-catalog-card header,
.feed-catalog-card footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.feed-catalog-card h3 {
  margin: 4px 0;
}
.feed-catalog-card header span,
.feed-catalog-card time,
.feed-catalog-card p {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.feed-catalog-card header > b,
.feed-catalog-tags span,
.feed-catalog-card footer span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef5ef;
  font-size: 10px;
}
.feed-catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.feed-catalog-card footer {
  align-items: end;
  margin-top: 12px;
}
.feed-catalog-card footer > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.feed-catalog-empty,
.feed-catalog-loading {
  display: grid;
  grid-column: 1 / -1;
  justify-items: center;
  gap: 7px;
  padding: 42px 20px;
  color: var(--color-text-secondary);
  text-align: center;
}
.feed-catalog-empty .ui-icon {
  width: 32px;
  color: var(--color-primary-dark);
}
.feed-catalog-empty h3,
.feed-catalog-empty p {
  max-width: 630px;
  margin: 0;
}
.feed-catalog-sources > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.feed-catalog-sources article {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.feed-catalog-sources article div span {
  display: block;
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.feed-catalog-sources article > b {
  justify-self: start;
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff1e7;
  color: #97511d;
  font-size: 10px;
}
.feed-catalog-sources article > b.is-allowed {
  background: #eaf6ec;
  color: var(--color-primary-dark);
}
.feed-catalog-sources article p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.feed-catalog-boundary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--color-border);
}
.feed-catalog-boundary article {
  padding: 18px;
  background: #fff;
}
.feed-catalog-boundary p {
  margin-top: 5px;
  font-size: 12px;
}
@media (max-width: 760px) {
  .feed-catalog-shell {
    width: min(100% - 20px, 1080px);
    padding-top: 18px;
  }
  .feed-catalog-hero,
  .feed-catalog-controls,
  .feed-catalog-results > div,
  .feed-catalog-sources > div,
  .feed-catalog-boundary {
    grid-template-columns: 1fr;
  }
  .feed-catalog-hero {
    padding: 25px 20px;
  }
  .feed-catalog-integrity {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .feed-catalog-integrity > b {
    grid-column: 1 / -1;
    justify-self: stretch;
    text-align: center;
  }
  .feed-catalog-boundary {
    gap: 1px;
  }
}

/* Shared household supplies */
.care-emergency-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid #cfe1d0;
  border-radius: 24px;
  background: linear-gradient(135deg, #f2f8f1 0%, #fff 72%);
}
.care-emergency-card::after {
  position: absolute;
  top: -48px;
  right: -35px;
  width: 150px;
  height: 150px;
  border: 28px solid rgba(91, 168, 108, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.care-emergency-card__icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 9px 24px rgba(61, 123, 76, 0.22);
}
.care-emergency-card__icon .ui-icon {
  width: 25px;
  height: 25px;
}
.care-emergency-card__main {
  min-width: 0;
}
.care-emergency-card__main > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.care-emergency-card h2 {
  margin: 4px 0 6px;
  font-size: 22px;
}
.care-emergency-card__main > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.care-emergency-card__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 17px;
}
.care-emergency-card__facts span {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(91, 168, 108, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}
.care-emergency-card__facts small {
  display: block;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.care-emergency-card__facts strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.care-emergency-card__progress {
  margin-top: 14px;
}
.care-emergency-card__progress > span {
  display: block;
  overflow: hidden;
  height: 6px;
  border-radius: 99px;
  background: #dfe9df;
}
.care-emergency-card__progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}
.care-emergency-card__progress small {
  display: block;
  margin-top: 6px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.care-emergency-card__privacy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px !important;
  font-size: 11px !important;
}
.care-emergency-card__privacy .ui-icon {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.care-emergency-card__actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  min-width: 150px;
}
.care-emergency-card__actions .btn {
  justify-content: center;
}
.care-supplies {
  padding: 28px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface, #fff);
}
.care-supply-list {
  display: grid;
  gap: 12px;
}
.care-supply {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}
.care-supply > i {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.care-supply > i .ui-icon {
  width: 21px;
  height: 21px;
}
.care-supply--warning {
  border-color: #ead7a6;
  background: #fffcf4;
}
.care-supply--danger {
  border-color: #efc7c1;
  background: #fff8f7;
}
.care-supply__copy {
  min-width: 0;
}
.care-supply__copy > span {
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.care-supply__copy strong {
  display: block;
  margin-top: 2px;
}
.care-supply__copy p,
.care-supply__copy small {
  display: block;
  margin: 4px 0 0;
  color: var(--color-text-secondary);
}
.care-supply__copy p {
  font-size: 13px;
}
.care-supply__copy small {
  font-size: 12px;
}
.care-supply__actions {
  grid-column: 2 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.care-supply__actions button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.care-supply__actions button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}
.care-supply__actions button:disabled {
  cursor: wait;
  opacity: 0.55;
}
.care-supply__actions .ui-icon {
  width: 16px;
  height: 16px;
}
.supply-modal {
  width: min(680px, calc(100vw - 24px));
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
}
.supply-modal .modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}
.supply-modal .modal__header span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.supply-modal .modal__header h2 {
  margin: 3px 0 0;
  font: 800 24px/1.15 var(--font-heading);
}
.supply-modal .modal__close {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.supply-modal .modal__close .ui-icon {
  width: 18px;
  height: 18px;
}
.supply-modal__body {
  display: grid;
  gap: 16px;
  max-height: min(62vh, 600px);
  overflow-y: auto;
  padding: 22px 24px;
}
.supply-modal__body .form-group {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 750;
}
.supply-modal__body input,
.supply-modal__body select,
.supply-modal__body textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-weight: 500;
}
.supply-modal__note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.supply-modal__note .ui-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}
@media (max-width: 640px) {
  .care-emergency-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 20px;
  }
  .care-emergency-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }
  .care-emergency-card__main {
    grid-column: 2;
  }
  .care-emergency-card__facts {
    grid-template-columns: 1fr;
  }
  .care-emergency-card__actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
  .care-emergency-card__actions .btn {
    width: 100%;
  }
  .care-supplies {
    padding: 20px;
    border-radius: 20px;
  }
  .care-supply {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 14px;
  }
  .care-supply > i {
    width: 38px;
    height: 38px;
  }
  .care-supply > .care-status {
    grid-column: 2;
    justify-self: start;
  }
  .care-supply__actions {
    grid-column: 1 / -1;
  }
  .supply-modal__body {
    padding: 18px;
  }
}

/* Daily activities, training, games and sound lab */
.activities-page {
  min-height: 100vh;
  background: #f6f4ef;
}
.activities-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 110px;
}
.activities-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 20px;
  align-items: center;
  min-height: 410px;
  overflow: hidden;
  padding: 42px;
  color: #fff;
  border-radius: 32px;
  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(218, 234, 205, 0.22),
      transparent 30%
    ),
    linear-gradient(135deg, #244f42, #3f7763);
  box-shadow: 0 18px 50px rgba(36, 79, 66, 0.18);
}
.activities-hero__copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 670px;
}
.activities-hero span,
.activity-section header span,
.activity-today__main > span,
.sound-lab > div > span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.activities-hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1;
}
.activities-hero p {
  margin: 18px 0 0;
  max-width: 630px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
}
.activities-hero__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.activities-hero__marks b {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.activities-hero__marks .ui-icon {
  width: 17px;
}
.activities-hero__visual {
  position: relative;
  align-self: stretch;
  min-height: 320px;
}
.activities-hero__visual img {
  position: absolute;
  right: -65px;
  bottom: -65px;
  width: min(640px, 130%);
  height: auto;
  filter: drop-shadow(0 22px 28px rgba(12, 34, 27, 0.28));
}
.activities-hero__visual > span {
  position: absolute;
  z-index: 2;
  right: 4px;
  bottom: 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(25, 55, 45, 0.64);
  font-size: 11px;
  letter-spacing: 0;
  backdrop-filter: blur(12px);
}
.activities-hero__visual .ui-icon {
  width: 16px;
}
.activities-pets {
  display: flex;
  gap: 10px;
  padding: 22px 2px 8px;
  overflow-x: auto;
}
.activities-pets button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: max-content;
  padding: 7px 14px 7px 7px;
  border: 1px solid #dedbd3;
  border-radius: 999px;
  background: #fff;
  color: #4f564f;
  font-weight: 700;
  cursor: pointer;
}
.activities-pets button.active {
  border-color: #3f7763;
  box-shadow: 0 0 0 2px rgba(63, 119, 99, 0.12);
  color: #244f42;
}
.activities-pets img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
#activities-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 24px;
  margin-top: 18px;
}
#activities-content > * {
  min-width: 0;
}
.activities-loading {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 20px;
}
.activities-loading .skeleton {
  min-height: 240px;
  border-radius: 28px;
}
.activities-loading .skeleton:first-child {
  grid-row: span 2;
}
.activity-today {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.7fr);
  gap: 28px;
  padding: 32px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 12px 38px rgba(54, 64, 57, 0.08);
}
.activity-today h2 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  color: #27332d;
}
.activity-today p {
  max-width: 690px;
  color: #69716b;
}
.activity-today__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}
.activity-today__meta b {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #f1f5f2;
  color: #416151;
  font-size: 13px;
}
.activity-today__meta .ui-icon {
  width: 16px;
}
.activity-today aside {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  padding: 23px 112px 23px 23px;
  border-radius: 22px;
  background: #eef3e9;
}
.activity-today__pet {
  position: absolute;
  right: -32px;
  top: -12px;
  width: 155px;
  height: 145px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 16px rgba(54, 87, 68, 0.16));
  pointer-events: none;
}
.activity-today aside span {
  display: block;
  color: #66806d;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.activity-today aside strong {
  display: block;
  margin: 8px 0 22px;
  font-size: 20px;
}
.activity-today aside div {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #d5dfd3;
}
.activity-today aside i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #4f8b69;
}
.activity-today aside small {
  display: block;
  margin-top: 12px;
  color: #67736b;
  line-height: 1.45;
}
.activity-today aside > b {
  display: block;
  margin-top: 10px;
  color: #40634f;
  font-size: 12px;
}
.activity-today__hint {
  display: block;
  margin-top: 10px;
  color: #879087;
  font-size: 11px;
}
.activity-access-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.activity-access-badges span {
  margin: 0;
  color: #667269;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.activity-access-badges .is-free,
.activity-free-label {
  display: inline-flex;
  width: max-content;
  margin: 0;
  padding: 6px 9px;
  border-radius: 999px;
  background: #dff0e3;
  color: #2f6b48;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.activity-journey {
  padding: 25px 28px;
  border: 1px solid #e2ded5;
  border-radius: 26px;
  background: #fff;
}
.activity-journey header span {
  color: #63806f;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.activity-journey header h2 {
  margin: 4px 0 18px;
  font-size: 26px;
}
.activity-journey > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.activity-journey article {
  position: relative;
  display: grid;
  grid-template-columns: 58px 38px 1fr;
  gap: 9px;
  align-items: center;
  min-height: 74px;
  padding: 10px 13px 10px 8px;
  border-radius: 17px;
  background: #f5f3ee;
}
.activity-journey article > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(50, 60, 52, 0.11));
}
.activity-journey article:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 50%;
  z-index: 2;
  width: 12px;
  border-top: 2px dotted #b7c5ba;
}
.activity-journey article > b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: #e5e6df;
  color: #69736c;
}
.activity-journey article.is-current {
  background: #eaf3ec;
}
.activity-journey article.is-current > b {
  background: #3f7763;
  color: #fff;
}
.activity-journey strong,
.activity-journey small {
  display: block;
}
.activity-journey small {
  margin-top: 3px;
  color: #737a74;
  line-height: 1.35;
}
.activity-section {
  padding: 30px;
  border: 1px solid #e6e2da;
  border-radius: 28px;
  background: #fff;
}
.activity-section > header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 20px;
}
.activity-section h2 {
  margin: 0;
  font-size: 30px;
}
.activity-section > header p {
  max-width: 660px;
  margin: 7px 0 0;
  color: #707771;
  line-height: 1.5;
}
.activity-section > header > small {
  color: #7b817c;
}
.activity-recommendations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.activity-recommendations > a {
  display: grid;
  grid-template-columns: 44px 1fr 20px;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e6e2da;
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  transition: 0.2s ease;
}
.activity-recommendations > a:hover {
  transform: translateY(-2px);
  border-color: #a9c3b2;
}
.activity-recommendations > a > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #eff5f1;
  color: #397157;
}
.activity-recommendations strong,
.activity-recommendations small,
.activity-recommendations em {
  display: block;
}
.activity-recommendations small {
  margin-top: 3px;
  color: #6d746f;
}
.activity-recommendations em {
  margin-top: 7px;
  color: #8a908b;
  font-size: 11px;
  font-style: normal;
}
.activity-recommendations > a > .ui-icon {
  width: 18px;
  color: #87918b;
}
.activity-programs,
.activity-games {
  display: grid;
  gap: 12px;
}
.activity-programs article {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid #e6e2da;
  border-radius: 18px;
}
.activity-programs article > i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #f4ece0;
  color: #8a6338;
}
.activity-programs h3,
.activity-games h3 {
  margin: 3px 0 5px;
  font-size: 18px;
}
.activity-programs p,
.activity-games p {
  margin: 0;
  color: #707771;
  font-size: 14px;
}
.activity-programs span {
  color: #758078;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.activity-programs button,
.activity-games button {
  border: 0;
  border-radius: 12px;
  padding: 10px 15px;
  background: #e8f2eb;
  color: #2e694c;
  font-weight: 800;
  cursor: pointer;
}
.activity-program-card {
  overflow: hidden;
  border: 1px solid #e4e1d9;
  border-radius: 22px;
}
.activity-program-card.is-locked {
  border-color: #dcd2f2;
  background: #fbf9ff;
}
.activity-program-card__head {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 15px;
  align-items: center;
  padding: 19px;
}
.activity-program-card__head > i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #f4ece0;
  color: #8a6338;
}
.activity-program-card__head > i .ui-icon {
  width: 24px;
}
.activity-program-card__head > .activity-program-art {
  overflow: visible;
  background: #f5eee6;
}
.activity-program-art img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(63, 74, 65, 0.12));
}
.activity-program-card__head span {
  color: #758078;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.activity-program-card__head h3 {
  margin: 4px 0;
  font-size: 22px;
}
.activity-program-card__head p {
  margin: 0;
  color: #707771;
}
.activity-program-card__head > button {
  border: 0;
  border-radius: 12px;
  padding: 11px 14px;
  background: #e8f2eb;
  color: #2e694c;
  font-weight: 800;
}
.activity-program-card__head > .activity-plus-button,
.activity-games .activity-plus-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #6d4bc3;
  color: #fff;
}
.activity-plus-button .ui-icon {
  width: 15px;
}
.activity-program-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: #e6e2da;
}
.activity-program-steps > span {
  min-height: 98px;
  padding: 13px;
  background: #faf9f6;
}
.activity-program-steps b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 9px;
  border-radius: 10px;
  background: #e9e9e3;
  color: #6d766f;
}
.activity-program-steps b .ui-icon {
  width: 17px;
}
.activity-program-steps small {
  display: block;
  color: #69716b;
  line-height: 1.35;
}
.activity-program-steps .is-current {
  background: #eaf3ec;
}
.activity-program-steps .is-current b {
  background: #3f7763;
  color: #fff;
}
.activity-program-steps .is-done b {
  background: #dcecdf;
  color: #34704e;
}
.activity-games {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.activity-game-filters {
  display: grid;
  gap: 10px;
  margin: -4px 0 18px;
}
.activity-game-filters fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}
.activity-game-filters legend {
  float: left;
  min-width: 88px;
  padding: 0;
  color: #7a827c;
  font-size: 11px;
  font-weight: 800;
}
.activity-game-filters button {
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid #dedbd3;
  border-radius: 999px;
  background: #fff;
  color: #505a53;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.activity-game-filters button:hover {
  border-color: #83a58f;
}
.activity-game-filters button.active {
  border-color: #3f7763;
  background: #3f7763;
  color: #fff;
}
.activity-games article {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid #e6e2da;
  border-radius: 20px;
}
.activity-games article.is-locked {
  border-color: #ded5f5;
  background: #faf8ff;
}
.activity-games article[hidden] {
  display: none;
}
.activity-games article small {
  display: block;
  margin-top: 7px;
  color: #8a908b;
  font-size: 11px;
}
.activity-game-mode {
  display: block;
  margin-bottom: 2px;
  color: #63806f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.activity-game-featured {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #cfe0d3;
  border-radius: 24px;
  background: linear-gradient(135deg, #edf6ef, #f7f3e9);
}
.activity-game-featured .activity-game-icon {
  width: 112px;
  height: 112px;
  border-radius: 27px;
}
.activity-game-featured .activity-game-icon img {
  width: 108px;
  height: 108px;
}
.activity-game-featured span {
  color: #4d775f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.activity-game-featured h3 {
  margin: 5px 0;
  font-size: 26px;
}
.activity-game-featured p {
  margin: 0;
  color: #68716b;
}
.activity-game-featured small {
  display: block;
  margin-top: 8px;
  color: #758078;
}
.activity-game-featured button {
  border: 0;
  border-radius: 14px;
  padding: 13px 17px;
  background: #3f7763;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}
.activity-games-empty {
  padding: 24px;
  border-radius: 16px;
  background: #f5f3ee;
  color: #707771;
  text-align: center;
}
.activity-game-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 21px;
  background: #e8f3f2;
  color: #377c77;
}
.activity-game-icon.is-ball {
  background: #f8e9dd;
  color: #cd6e35;
}
.activity-game-icon.is-seed {
  background: #f1edcf;
  color: #8d7a24;
}
.activity-game-icon.is-search {
  background: #e7f0e7;
  color: #3d7653;
}
.activity-game-icon.is-maze {
  background: #eee9f5;
  color: #6d5b8e;
}
.activity-game-icon.is-target {
  background: #f6e8e6;
  color: #b45f56;
}
.activity-game-icon.is-choice {
  background: #e9eff7;
  color: #4d7098;
}
.activity-game-icon.is-sound {
  background: #eee8fb;
  color: #6d4bc3;
}
.activity-game-icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(56, 65, 59, 0.14));
}
.activity-access {
  padding: 32px;
  border-radius: 30px;
  background: #293a34;
  color: #fff;
}
.activity-access > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.activity-access__art {
  display: flex;
  align-items: center;
  min-width: 190px;
  height: 88px;
}
.activity-access__art img {
  width: 82px;
  height: 82px;
  margin-left: -22px;
  object-fit: contain;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.25));
  transform: rotate(-7deg);
}
.activity-access__art img:nth-child(2) {
  transform: translateY(-4px) rotate(6deg);
}
.activity-access__art img:nth-child(3) {
  transform: rotate(9deg);
}
.activity-access header span {
  color: #9fc7ae;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.activity-access h2 {
  margin: 5px 0 22px;
  color: #fff;
  font-size: 32px;
}
.activity-access__plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.activity-access__plans article {
  padding: 22px;
  border-radius: 21px;
  background: #fff;
  color: #29352f;
}
.activity-access__plans article.is-plus {
  background: linear-gradient(145deg, #f4efe2, #e8e0c8);
}
.activity-access__plans article > span {
  color: #4c765f;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.activity-access__plans article > span .ui-icon {
  width: 15px;
  vertical-align: middle;
}
.activity-access__plans h3 {
  margin: 8px 0 14px;
  font-size: 23px;
}
.activity-access__plans ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.activity-access__plans li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #5f6862;
  font-size: 13px;
}
.activity-access__plans li .ui-icon {
  flex: 0 0 16px;
  width: 16px;
  color: #4b8465;
}
.activity-access__plans .is-plus li .ui-icon {
  color: #8a7040;
}
.activity-access__plans a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  color: #6f572d;
  font-weight: 850;
  text-decoration: none;
}
.activity-access__plans a .ui-icon {
  width: 17px;
}
.activity-access > p {
  margin: 17px 0 0;
  color: #bbc7c0;
  font-size: 12px;
}
.activity-disclaimer {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 18px 0 0;
  color: #737b75;
  font-size: 12px;
}
.activity-disclaimer .ui-icon {
  flex: 0 0 auto;
  width: 17px;
}
.sound-lab {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 34px;
  align-items: center;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  background: #25283e;
  color: #fff;
}
.sound-lab__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 230px;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(144, 114, 255, 0.35),
      transparent 55%
    ),
    #1c1e31;
}
.sound-lab__visual i,
.sound-recorder__wave i {
  width: 8px;
  border-radius: 8px;
  background: linear-gradient(#b7a2ff, #71d1bd);
  animation: sound-bars 1.1s ease-in-out infinite alternate;
}
.sound-lab__visual i:nth-child(1),
.sound-lab__visual i:nth-child(7) {
  height: 36px;
}
.sound-lab__visual i:nth-child(2),
.sound-lab__visual i:nth-child(6) {
  height: 72px;
}
.sound-lab__visual i:nth-child(3),
.sound-lab__visual i:nth-child(5) {
  height: 112px;
}
.sound-lab__visual i:nth-child(4) {
  height: 156px;
}
@keyframes sound-bars {
  to {
    transform: scaleY(0.55);
    opacity: 0.65;
  }
}
.sound-lab h2 {
  margin: 0;
  font-size: 34px;
}
.sound-lab p {
  color: #c8c9d5;
  line-height: 1.55;
}
.sound-lab__warning {
  display: flex;
  gap: 8px;
  padding: 12px;
  margin: 18px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  color: #d9dae2;
  font-size: 12px;
}
.sound-lab__warning .ui-icon {
  flex: 0 0 auto;
  width: 17px;
}
.activity-lesson-modal .modal__content,
.sound-modal .modal__content {
  width: min(680px, calc(100% - 24px));
  max-height: calc(100vh - 30px);
  overflow: auto;
  padding: 26px;
}
.activity-lesson-modal .modal__header,
.sound-modal .modal__header,
.offline-game-modal .modal__header,
.sound-result-modal .modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.activity-lesson-modal .modal__header h3,
.sound-modal .modal__header h3,
.offline-game-modal .modal__header h3 {
  margin: 3px 0 0;
}
.activity-lesson-modal .modal__close,
.sound-modal .modal__close,
.offline-game-modal .modal__close,
.sound-result-modal .modal__close {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #deded8;
  border-radius: 12px;
  background: #fff;
  color: #68716b;
  cursor: pointer;
}
.activity-lesson-modal .modal__close .ui-icon,
.sound-modal .modal__close .ui-icon,
.offline-game-modal .modal__close .ui-icon,
.sound-result-modal .modal__close .ui-icon {
  width: 18px;
  height: 18px;
}
.activity-lesson-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}
.activity-lesson-purpose {
  margin-top: 17px;
  padding: 15px;
  border-radius: 16px;
  background: #edf4ef;
  color: #3c5647;
}
.activity-lesson-purpose p {
  margin: 5px 0 8px;
}
.activity-lesson-purpose small {
  color: #68756d;
}
.activity-lesson-tools {
  display: flex;
  gap: 9px;
  margin: 14px 0;
}
.activity-lesson-tools button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 120px;
  min-height: 44px;
  justify-content: center;
  border: 1px solid #d8d8d3;
  border-radius: 13px;
  background: #fff;
  color: #3e6550;
  font-weight: 800;
  cursor: pointer;
}
.activity-lesson-tools button.active {
  border-color: #4b8465;
  background: #dff0e4;
  transform: scale(0.98);
}
.activity-lesson-tools .ui-icon {
  width: 18px;
}
.activity-lesson-steps article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px;
  border-radius: 15px;
  background: #f5f3ee;
}
.activity-lesson-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #3f7763;
  color: #fff;
}
.activity-lesson-steps p {
  margin: 5px 0 0;
}
.activity-lesson-safety {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: 15px;
  background: #fff5df;
  color: #735c2f;
}
.activity-lesson-safety .ui-icon {
  flex: 0 0 auto;
  width: 20px;
}
.activity-lesson-safety p {
  margin: 0;
  font-size: 13px;
}
.activity-lesson-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}
.activity-lesson-details > div {
  padding: 13px;
  border: 1px solid #e5e2db;
  border-radius: 14px;
}
.activity-lesson-details p,
.activity-lesson-details ul {
  margin: 6px 0 0;
  padding-left: 0;
  color: #6a726c;
  font-size: 12px;
  line-height: 1.45;
}
.activity-lesson-details li {
  margin-left: 16px;
}
.activity-lesson-coaching {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}
.activity-lesson-coaching > div {
  padding: 13px;
  border-radius: 14px;
  background: #eef4f8;
}
.activity-lesson-coaching p {
  margin: 6px 0 0;
  color: #65717a;
  font-size: 12px;
  line-height: 1.45;
}
.activity-lesson-modal fieldset {
  margin: 20px 0 10px;
  border: 0;
  padding: 0;
}
.activity-lesson-modal legend {
  margin-bottom: 10px;
  font-weight: 800;
}
.activity-results {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.activity-results button {
  padding: 9px 12px;
  border: 1px solid #d6d7d2;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}
.activity-results button.active {
  border-color: #3f7763;
  background: #e8f2eb;
  color: #2e694c;
}
.pet-screen-game {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #102c35;
  color: #fff;
  touch-action: none;
}
.pet-screen-game.is-ball {
  background: #34213b;
}
.pet-screen-game.is-seed {
  background: #2e3820;
}
.pet-screen-game header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 18px 16px;
  background: rgba(0, 0, 0, 0.18);
}
.pet-screen-game header button {
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  padding: 0 17px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 800;
}
.pet-screen-game header div span {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
.pet-game-stage {
  position: absolute;
  inset: 78px 0 0;
  overflow: hidden;
}
.pet-game-stage > p {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: min(620px, calc(100% - 30px));
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  font-size: 12px;
  pointer-events: none;
}
.pet-game-target {
  position: absolute;
  left: 45%;
  top: 35%;
  display: grid;
  place-items: center;
  width: clamp(108px, 20vw, 180px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.035),
    0 20px 50px rgba(0, 0, 0, 0.22);
  transition:
    left 0.25s ease,
    top 0.25s ease;
}
.pet-game-target img {
  width: 108%;
  height: 108%;
  object-fit: contain;
  filter: drop-shadow(0 16px 13px rgba(0, 0, 0, 0.28));
  pointer-events: none;
}
.pet-game-rating {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(560px, calc(100% - 28px));
  transform: translateX(-50%);
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  color: #28332d;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.pet-game-rating div,
.offline-game-interest div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}
.pet-game-rating button,
.offline-game-interest button {
  padding: 9px 11px;
  border: 1px solid #d9ddd9;
  border-radius: 999px;
  background: #eef5ef;
  color: #315c45;
  font-weight: 750;
}
.sound-game-modal .modal__content {
  width: min(650px, calc(100% - 24px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 25px;
}
.sound-game-modal .modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.sound-game-modal .modal__header h3 {
  margin: 3px 0 0;
}
.sound-game-modal .modal__close {
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #deded8;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.sound-game-intro {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  align-items: center;
  margin: 18px 0;
}
.sound-game-intro p {
  margin: 0 0 6px;
  color: #59635c;
}
.sound-game-intro small {
  color: #7a827c;
}
.sound-game-pulse {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border-radius: 50%;
  background: #eee8fb;
  color: #6d4bc3;
  box-shadow: 0 0 0 10px #f7f3ff;
  animation: sound-game-pulse 1.6s ease-in-out infinite;
}
.sound-game-pulse .ui-icon {
  width: 32px;
  height: 32px;
}
@keyframes sound-game-pulse {
  50% {
    transform: scale(0.94);
    box-shadow: 0 0 0 17px rgba(238, 232, 251, 0.45);
  }
}
.sound-game-steps {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  padding-left: 24px;
  color: #626b65;
  font-size: 13px;
  line-height: 1.45;
}
.sound-game-round {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: #f5f2fb;
  text-align: center;
}
.sound-game-round > span {
  color: #6d4bc3;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.sound-game-round > strong {
  font-size: 16px;
}
.sound-game-round > [data-sound-reaction],
.sound-game-finish > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}
.sound-game-round > [data-sound-reaction][hidden],
.sound-game-finish[hidden] {
  display: none;
}
.sound-game-round > [data-sound-reaction] button,
.sound-game-finish button {
  padding: 9px 11px;
  border: 1px solid #d9d0ed;
  border-radius: 999px;
  background: #fff;
  color: #5b438e;
  font-weight: 750;
  cursor: pointer;
}
.sound-game-finish {
  padding: 20px;
  border-radius: 18px;
  background: #edf5ef;
  text-align: center;
}
.sound-game-finish p {
  color: #637068;
}
.offline-game-modal .modal__content {
  width: min(660px, calc(100% - 24px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  padding: 24px;
}
.offline-game-intro {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 17px;
  align-items: center;
  margin: 18px 0;
}
.offline-game-intro p {
  margin: 0 0 7px;
  color: #545e57;
  font-size: 16px;
}
.offline-game-intro span {
  color: #788079;
  font-size: 12px;
}
.offline-game-modal__visual {
  width: 90px;
  height: 90px;
  margin: 0;
}
.offline-game-modal__visual img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}
.offline-game-steps {
  display: grid;
  gap: 8px;
  margin: 15px 0;
}
.offline-game-steps article {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 11px;
  align-items: start;
  padding: 11px;
  border-radius: 14px;
  background: #f5f3ee;
}
.offline-game-steps b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #3f7763;
  color: #fff;
}
.offline-game-steps p {
  margin: 5px 0 0;
  color: #59625c;
}
.offline-game-success {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #eaf3ec;
  color: #41614f;
}
.offline-game-success .ui-icon {
  flex: 0 0 18px;
  width: 18px;
}
.offline-game-success p {
  margin: 0;
  font-size: 12px;
}
.offline-game-runner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  border-radius: 17px;
  background: #293a34;
  color: #fff;
}
.offline-game-runner > span {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.offline-game-runner > strong {
  min-width: 58px;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.offline-game-runner .btn {
  margin: 0;
}
.offline-game-runner.is-running {
  box-shadow: 0 0 0 3px rgba(63, 119, 99, 0.15);
}
.offline-game-interest {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: #f3f5ef;
}
.sound-modal label {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  font-weight: 700;
}
.sound-modal select {
  width: 100%;
  padding: 12px;
  border: 1px solid #d8d8d3;
  border-radius: 12px;
  background: #fff;
}
.sound-recorder {
  padding: 22px;
  border-radius: 20px;
  background: #25283e;
  color: #fff;
  text-align: center;
}
.sound-recorder__wave {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 80px;
}
.sound-recorder__wave i {
  width: 5px;
  height: 18px;
  animation: none;
  opacity: 0.45;
}
.sound-recorder.is-recording .sound-recorder__wave i {
  animation: sound-bars 0.6s ease-in-out infinite alternate;
  opacity: 1;
}
.sound-recorder.is-recording .sound-recorder__wave i:nth-child(3n) {
  height: 50px;
}
.sound-recorder.is-recording .sound-recorder__wave i:nth-child(2n) {
  height: 34px;
}
.sound-recorder button {
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: #8c76eb;
  color: #fff;
  font-weight: 800;
}
.sound-recorder button .ui-icon {
  width: 18px;
  vertical-align: middle;
}
.sound-recorder p {
  color: #cfd0dc;
  font-size: 12px;
}
.sound-recorder audio {
  width: 100%;
  margin-top: 14px;
}
.sound-consent {
  grid-template-columns: 20px 1fr !important;
  align-items: start;
  font-size: 12px;
  font-weight: 500 !important;
  color: #626863;
}
.sound-consent input[type="checkbox"] {
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-appearance: checkbox;
  appearance: auto;
  accent-color: var(--color-primary);
}
.sound-profile {
  padding: 13px;
  border-radius: 13px;
  background: #eef5ef;
  color: #365543;
}
.sound-profile p {
  margin: 5px 0;
}
.activity-history {
  overflow: hidden;
}
.activity-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.activity-stats > div {
  padding: 16px;
  border-radius: 17px;
  background: #f3f5ef;
}
.activity-stats strong,
.activity-stats span {
  display: block;
}
.activity-stats strong {
  color: #305743;
  font-size: 28px;
}
.activity-stats span {
  color: #707870;
  font-size: 12px;
}
.activity-calendar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.activity-calendar article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid #e5e2db;
  border-radius: 14px;
}
.activity-calendar time {
  color: #50705e;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.activity-calendar strong,
.activity-calendar small {
  display: block;
}
.activity-calendar small {
  margin-top: 3px;
  color: #7a817b;
  font-size: 11px;
}
.activity-history-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 100px;
  margin-top: 14px;
  padding: 12px 20px;
  border-radius: 18px;
  background: #f6f4ef;
  color: #737a74;
}
.activity-history-empty img {
  flex: 0 0 94px;
  width: 94px;
  height: 94px;
  object-fit: contain;
}
.activity-history-empty p {
  margin: 0;
  max-width: 520px;
}
.sound-history {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sound-history > span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #e0e1e8;
  font-size: 12px;
}
.sound-history small {
  color: #9fa1b2;
}
.sound-result-modal .modal__content {
  width: min(480px, calc(100% - 24px));
  padding: 20px;
}
.sound-result-modal .modal__close {
  margin-left: auto;
}
.sound-result-card {
  overflow: hidden;
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(145deg, #282a43, #44426d);
  color: #fff;
  text-align: center;
}
.sound-result-card > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sound-result-card h3 {
  margin: 12px 0 5px;
  color: #fff;
  font-size: 34px;
}
.sound-result-card__wave {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 85px;
  margin: 14px 0;
}
.sound-result-card__wave i {
  width: 5px;
  border-radius: 8px;
  background: linear-gradient(#c3b2ff, #7adbc4);
}
.sound-result-card p {
  margin: 6px 0;
  color: #d6d6e2;
}
.sound-result-card small {
  display: block;
  margin-top: 14px;
  color: #aaaabd;
  font-size: 10px;
}
.sound-result-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.premium-access-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.premium-access-button .ui-icon {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
}
.clinic-booking-modal .modal__content {
  width: min(620px, calc(100vw - 32px));
  max-height: min(820px, calc(100dvh - 32px));
  overflow-y: auto;
}
.clinic-booking-modal .modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #edf3ef;
  color: #263c30;
  cursor: pointer;
}
.clinic-booking-modal .modal__close svg {
  width: 19px;
  height: 19px;
}
.clinic-booking-modal__address {
  margin: 4px 0 20px;
  color: #66756d;
}
.clinic-booking-loading,
.clinic-booking-fallback,
.clinic-booking-login,
.clinic-booking-success {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: 20px;
  background: #f4f8f5;
}
.clinic-booking-loading {
  align-items: center;
}
.clinic-booking-loading i {
  width: 22px;
  height: 22px;
  border: 3px solid #cfddd3;
  border-top-color: #39714e;
  border-radius: 50%;
  animation: audio-recorder-spin 0.8s linear infinite;
}
.clinic-booking-fallback > svg,
.clinic-booking-login > svg,
.clinic-booking-success > svg {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: #39714e;
}
.clinic-booking-fallback p,
.clinic-booking-login p,
.clinic-booking-success p {
  margin: 7px 0 16px;
  color: #55675e;
  line-height: 1.5;
}
.clinic-booking-fallback div div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.clinic-booking-login,
.clinic-booking-success {
  flex-direction: column;
  align-items: flex-start;
}
.clinic-booking-form {
  display: grid;
  gap: 16px;
}
.clinic-booking-form > label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}
.clinic-booking-form select,
.clinic-booking-form input[type="tel"],
.clinic-booking-form textarea {
  width: 100%;
  border: 1px solid #ccd9d0;
  border-radius: 13px;
  padding: 12px 14px;
  background: #fff;
  color: #1f2f27;
  font: inherit;
}
.clinic-booking-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}
.clinic-booking-form legend {
  margin-bottom: 8px;
  font-weight: 800;
}
.clinic-booking-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
}
.clinic-booking-slots label input {
  position: absolute;
  opacity: 0;
}
.clinic-booking-slots label span {
  display: block;
  padding: 11px;
  border: 1px solid #cedbd2;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.clinic-booking-slots input:checked + span {
  border-color: #39714e;
  background: #e8f3eb;
  color: #28583b;
  box-shadow: inset 0 0 0 1px #39714e;
}
.clinic-booking-notice,
.clinic-booking-disclaimer {
  color: #5b6b63;
  line-height: 1.45;
}
.clinic-booking-consent {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 10px !important;
  font-size: 13px;
  font-weight: 500 !important;
  line-height: 1.45;
}
.clinic-booking-consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  appearance: auto;
}
.care-clinic-bookings {
  margin: 18px 0;
  padding: 22px;
  border: 1px solid #dce7df;
  border-radius: 24px;
  background: #fff;
}
.care-clinic-bookings > p {
  margin: 14px 0 0;
  color: #66756d;
  font-size: 13px;
}
.clinic-appointments-list {
  display: grid;
  gap: 10px;
}
.clinic-appointment-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 16px;
  background: #f4f8f5;
}
.clinic-appointment-card > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #dcecdf;
  color: #39714e;
}
.clinic-appointment-card > i svg {
  width: 21px;
  height: 21px;
}
.clinic-appointment-card div {
  min-width: 0;
}
.clinic-appointment-card span,
.clinic-appointment-card small {
  display: block;
  color: #65736b;
  font-size: 12px;
}
.clinic-appointment-card p {
  margin: 3px 0;
  color: #4e6157;
}
.clinic-appointment-card button {
  border: 0;
  background: transparent;
  color: #9b453e;
  font-weight: 700;
  cursor: pointer;
}
#place-booking-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#place-booking-btn[hidden] {
  display: none;
}
@media (max-width: 600px) {
  .clinic-booking-modal h2 {
    max-width: calc(100% - 38px);
    font-size: clamp(24px, 7vw, 32px);
    line-height: 1.08;
  }
  .clinic-booking-slots {
    grid-template-columns: 1fr;
  }
  .clinic-appointment-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .clinic-appointment-card button {
    grid-column: 2;
    justify-self: start;
    padding: 6px 0;
  }
  .care-clinic-bookings {
    padding: 17px;
  }
}
.care-specialists {
  margin: 24px 0;
  padding: 24px;
  border: 1px solid #dce7df;
  border-radius: 26px;
  background: #fff;
}
.care-specialists__notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: 14px;
  background: #f4f8f5;
  color: #56675e;
  font-size: 13px;
  line-height: 1.5;
}
.care-specialists__notice svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #39714e;
}
.specialist-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.specialist-group {
  padding: 18px;
  border: 1px solid #e0e9e3;
  border-radius: 20px;
  background: #fbfcfb;
}
.specialist-group > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.specialist-group > header span {
  display: block;
  color: #77847d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.specialist-group h3 {
  margin: 3px 0 0;
  font-size: 21px;
}
.specialist-group > header button {
  border: 0;
  background: transparent;
  color: #39714e;
  font-weight: 800;
  cursor: pointer;
}
.specialist-cards {
  display: grid;
  gap: 10px;
}
.specialist-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
  border-radius: 15px;
  background: #f2f7f3;
}
.specialist-card__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  overflow: hidden;
  background: #dcecdf;
  color: #39714e;
}
.specialist-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.specialist-card__avatar svg {
  width: 23px;
  height: 23px;
}
.specialist-card div:nth-child(2) > span {
  display: flex;
  gap: 4px;
  align-items: center;
  color: #39714e;
  font-size: 11px;
}
.specialist-card div:nth-child(2) > span svg {
  width: 13px;
  height: 13px;
}
.specialist-card strong {
  display: block;
  margin-top: 3px;
}
.specialist-card p {
  margin: 2px 0;
  color: #5f7067;
  font-size: 13px;
}
.specialist-card small {
  color: #758078;
}
.specialist-card > button,
.specialist-card > a {
  grid-column: 2;
  justify-self: start;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #89938d;
  font-weight: 700;
}
.specialist-card > a {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
.specialist-empty {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 15px;
  background: #f4f7f5;
}
.specialist-empty > svg {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #6e7f75;
}
.specialist-empty p {
  margin: 5px 0 0;
  color: #66756d;
  font-size: 13px;
  line-height: 1.45;
}
.specialist-application-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 15px;
  background: #e8f3eb;
  color: #315d40;
}
.specialist-application-status > svg {
  width: 22px;
  height: 22px;
}
.specialist-application-status div {
  flex: 1;
}
.specialist-application-status strong,
.specialist-application-status span {
  display: block;
}
.specialist-application-status span {
  font-size: 13px;
}
.specialist-application-status a {
  color: inherit;
  font-weight: 800;
}
.specialist-application-modal .modal__content {
  display: grid;
  gap: 14px;
  width: min(600px, calc(100vw - 32px));
  max-height: min(840px, calc(100dvh - 32px));
  overflow-y: auto;
}
.specialist-application-modal .modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #edf3ef;
}
.specialist-application-modal .modal__close svg {
  width: 19px;
  height: 19px;
}
.specialist-application-modal form > label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}
.specialist-application-modal input,
.specialist-application-modal textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccd9d0;
  border-radius: 13px;
  background: #fff;
  font: inherit;
}
.specialist-application-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 10px !important;
  font-size: 13px;
  font-weight: 500 !important;
  line-height: 1.45;
}
.specialist-application-consent input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  appearance: auto;
}
@media (max-width: 760px) {
  .specialist-groups {
    grid-template-columns: 1fr;
  }
  .care-specialists {
    padding: 17px;
  }
  .specialist-group > header {
    flex-direction: column;
  }
  .specialist-application-modal h2 {
    max-width: calc(100% - 40px);
    font-size: 28px;
  }
}
.audio-recorder {
  display: grid;
  gap: 13px;
  padding: 19px;
  border-radius: 20px;
  background: #25283e;
  color: #fff;
}
.audio-recorder__state {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cfd1dd;
  font-size: 11px;
}
.audio-recorder__state > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7f8295;
}
.audio-recorder__state > strong {
  margin-left: auto;
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.audio-recorder[data-state="requesting"] .audio-recorder__state > i,
.audio-recorder[data-state="processing"] .audio-recorder__state > i {
  background: #e4b95f;
  animation: audio-status-pulse 1s ease-in-out infinite;
}
.audio-recorder[data-state="recording"] .audio-recorder__state > i {
  background: #f16f6f;
  box-shadow: 0 0 0 5px rgba(241, 111, 111, 0.15);
  animation: audio-status-pulse 0.8s ease-in-out infinite;
}
.audio-recorder[data-state="ready"] .audio-recorder__state > i {
  background: #71d1a0;
}
.audio-recorder[data-state="error"] .audio-recorder__state > i,
.audio-recorder[data-state="unsupported"] .audio-recorder__state > i {
  background: #f18872;
}
@keyframes audio-status-pulse {
  50% {
    opacity: 0.45;
    transform: scale(0.75);
  }
}
.audio-recorder__wave {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}
.audio-recorder__wave i {
  width: 5px;
  min-height: 6px;
  border-radius: 6px;
  background: linear-gradient(#b7a2ff, #71d1bd);
  opacity: 0.48;
  transition:
    height 90ms linear,
    opacity 0.2s ease;
}
.audio-recorder[data-state="recording"] .audio-recorder__wave i {
  opacity: 1;
}
.audio-recorder > [data-audio-action] {
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: #8c76eb;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.audio-recorder > [data-audio-action] .ui-icon {
  width: 18px;
  vertical-align: middle;
}
.audio-recorder > [data-audio-action]:disabled {
  cursor: wait;
  opacity: 0.65;
}
.audio-recorder > [data-audio-status] {
  margin: 0;
  color: #cfd0dc;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}
.audio-recorder audio {
  width: 100%;
}
.audio-recorder__processing {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.07);
}
.audio-recorder__processing[hidden] {
  display: none;
}
.audio-recorder__processing > i {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: #b8a5ff;
  border-radius: 50%;
  animation: audio-processing-spin 0.7s linear infinite;
}
@keyframes audio-processing-spin {
  to {
    transform: rotate(360deg);
  }
}
.audio-recorder__processing span {
  display: grid;
  gap: 2px;
}
.audio-recorder__processing small {
  color: #cfd0dc;
  font-size: 10px;
}
.audio-recorder__transcript {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(183, 162, 255, 0.25);
  border-radius: 14px;
  background: rgba(183, 162, 255, 0.08);
}
.audio-recorder__transcript[hidden] {
  display: none;
}
.audio-recorder__transcript > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.audio-recorder__transcript span {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #d9d3ef;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.audio-recorder__transcript p {
  margin: 0;
  color: #d4d5df;
  font-size: 10px;
  line-height: 1.5;
}
.activities-empty {
  padding: 50px;
  border-radius: 28px;
  background: #fff;
  text-align: center;
}
.activities-empty > .ui-icon {
  width: 48px;
  color: #538269;
}
.today-activities__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.today-activity-card {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid #e3e1da;
  border-radius: 19px;
  background: #fff;
}
.today-activity-card > img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 17px;
}
.today-activity-card span,
.today-activity-card strong,
.today-activity-card small {
  display: block;
}
.today-activity-card span {
  color: #63806f;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.today-activity-card strong {
  margin: 3px 0;
  color: #2c372f;
}
.today-activity-card small {
  color: #767d77;
}
.today-activity-card > a {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #3f7763;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.today-activity-card > a .ui-icon {
  width: 16px;
}

@media (max-width: 800px) {
  .activities-shell {
    width: min(100% - 24px, 680px);
    padding-top: 16px;
  }
  .activities-hero {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    padding: 27px 22px 0;
    border-radius: 24px;
  }
  .activities-hero > * {
    min-width: 0;
  }
  .activities-hero h1 {
    font-size: 39px;
  }
  .activities-hero p {
    font-size: 15px;
  }
  .activities-hero__marks {
    margin-top: 20px;
  }
  .activities-hero__marks {
    display: grid;
    width: 100%;
    min-width: 0;
    justify-items: start;
  }
  .activities-hero__marks b {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    font-size: 11px;
  }
  .activities-hero__visual {
    min-height: 225px;
  }
  .activities-hero__visual img {
    right: -24px;
    bottom: -32px;
    width: 102%;
  }
  .activities-hero__visual > span {
    right: 0;
    bottom: 13px;
  }
  .activity-journey {
    padding: 21px 16px;
  }
  .activity-journey > div {
    grid-template-columns: 1fr;
  }
  .activity-journey article {
    grid-template-columns: 54px 38px 1fr;
  }
  .activity-journey article > img {
    width: 54px;
    height: 54px;
  }
  .activity-journey article:not(:last-child)::after {
    left: 32px;
    right: auto;
    top: auto;
    bottom: -11px;
    width: 0;
    height: 12px;
    border-top: 0;
    border-left: 2px dotted #b7c5ba;
  }
  .activity-today,
  .sound-lab {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .activity-recommendations,
  .activity-games {
    grid-template-columns: 1fr;
  }
  .today-activities__list {
    grid-template-columns: 1fr;
  }
  .today-activity-card {
    grid-template-columns: 48px 1fr;
  }
  .today-activity-card > img {
    width: 48px;
    height: 48px;
  }
  .today-activity-card > a {
    grid-column: 2;
  }
  .activity-section {
    padding: 22px 16px;
  }
  .activity-section > header {
    align-items: flex-start;
  }
  .activity-section h2 {
    font-size: 26px;
  }
  .activity-program-card__head {
    grid-template-columns: 44px 1fr;
    padding: 15px;
  }
  .activity-program-card__head > i {
    width: 44px;
    height: 44px;
  }
  .activity-program-card__head > button,
  .activity-program-card__head > b {
    grid-column: 2;
    justify-self: start;
  }
  .activity-program-steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .activity-program-steps > span {
    flex: 0 0 138px;
    scroll-snap-align: start;
  }
  .activity-game-featured {
    grid-template-columns: 64px 1fr;
    padding: 16px;
  }
  .activity-game-featured .activity-game-icon {
    width: 64px;
    height: 64px;
    border-radius: 19px;
  }
  .activity-game-featured .activity-game-icon img {
    width: 62px;
    height: 62px;
  }
  .activity-game-featured button {
    grid-column: 1/-1;
    width: 100%;
  }
  .activity-games article {
    grid-template-columns: 68px 1fr;
  }
  .activity-games .activity-game-icon {
    width: 68px;
    height: 68px;
  }
  .activity-games .activity-game-icon img {
    width: 65px;
    height: 65px;
  }
  .activity-games article > button {
    grid-column: 2;
    justify-self: start;
  }
  .activity-game-filters legend {
    width: 100%;
    min-width: 100%;
    margin-bottom: 2px;
  }
  .activity-lesson-details {
    grid-template-columns: 1fr;
  }
  .activity-lesson-coaching {
    grid-template-columns: 1fr;
  }
  .activity-stats {
    grid-template-columns: 1fr 1fr;
  }
  .activity-calendar {
    grid-template-columns: 1fr;
  }
  .activity-access {
    padding: 24px 16px;
  }
  .activity-access > header {
    align-items: flex-start;
  }
  .activity-access__art {
    min-width: 108px;
    height: 64px;
  }
  .activity-access__art img {
    width: 55px;
    height: 55px;
    margin-left: -19px;
  }
  .activity-access h2 {
    font-size: 27px;
  }
  .activity-access__plans {
    grid-template-columns: 1fr;
  }
  .offline-game-intro {
    grid-template-columns: 68px 1fr;
  }
  .offline-game-modal__visual {
    width: 68px;
    height: 68px;
  }
  .offline-game-modal__visual img {
    width: 66px;
    height: 66px;
  }
  .offline-game-runner {
    grid-template-columns: 1fr auto;
  }
  .offline-game-runner .btn {
    grid-column: 1/-1;
    width: 100%;
  }
  .sound-lab__visual {
    min-height: 150px;
  }
  .activities-loading {
    grid-template-columns: 1fr;
  }
  .pet-screen-game header {
    grid-template-columns: 44px 1fr auto;
  }
}
@media (min-width: 1024px) {
  .activities-shell {
    width: min(1180px, calc(100% - 220px));
  }
}

.product-landing__header {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1240px, calc(100% - 32px));
  margin: 14px auto 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(91, 168, 108, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 40px rgba(45, 41, 38, 0.08);
  backdrop-filter: blur(18px);
}

.product-landing__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
}

.product-landing__brand img {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
.product-landing__brand small {
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 600;
}
.product-landing__header nav,
.product-landing__header-actions,
.product-hero__actions,
.product-reality__actions,
.product-plus-section__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.product-landing__header nav {
  gap: 25px;
}
.product-landing__header nav a {
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.product-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 0.9fr);
  align-items: center;
  gap: clamp(40px, 7vw, 90px);
  width: min(1200px, calc(100% - 40px));
  min-height: 710px;
  margin: 0 auto;
  padding: 78px 0 88px;
}

.product-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.product-hero h1 {
  max-width: 720px;
  font-size: clamp(44px, 5.7vw, 74px);
  line-height: 0.98;
}
.product-hero h1 em {
  color: var(--color-primary);
  font-style: normal;
}
.product-hero__copy > p {
  max-width: 650px;
  margin: 25px 0;
  font-size: 18px;
}
.product-hero__actions {
  flex-wrap: wrap;
}
.product-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin-top: 24px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.product-hero__visual {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  margin: 0;
  border: 1px solid rgba(91, 168, 108, 0.18);
  border-radius: 34px;
  background: #e8ead8;
  box-shadow: 0 30px 80px rgba(45, 80, 51, 0.18);
}
.product-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: 68% center;
}
.product-hero__visual figcaption {
  position: absolute;
  right: 22px;
  bottom: 22px;
  left: 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 17px 19px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  background: rgba(250, 248, 245, 0.88);
  box-shadow: 0 10px 30px rgba(42, 107, 69, 0.16);
  backdrop-filter: blur(14px);
}
.product-hero__visual figcaption strong {
  color: var(--color-primary-darker);
  font-family: var(--font-heading);
  font-size: 16px;
}
.product-hero__visual figcaption span {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.product-map-demo {
  overflow: hidden;
  border: 1px solid rgba(91, 168, 108, 0.17);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(45, 80, 51, 0.18);
  transform: rotate(1.5deg);
}

.product-map-demo__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
}
.product-map-demo__top div {
  display: flex;
  flex-direction: column;
}
.product-map-demo__top span {
  color: var(--color-text-tertiary);
  font-size: 11px;
}
.product-map-demo__top strong {
  font-family: var(--font-heading);
  font-size: 20px;
}
.product-plus-pill {
  padding: 6px 10px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9 !important;
  font-weight: 800;
}
.product-map-demo__canvas {
  position: relative;
  height: 310px;
  overflow: hidden;
  background-color: #edf2e9;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  background-size: 42px 42px;
}
.product-map-demo__canvas svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.product-map-demo__road {
  fill: none;
  stroke: #fff;
  stroke-width: 14;
  stroke-linecap: round;
}
.product-map-demo__route {
  fill: none;
  stroke: #6d28d9;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 12 4;
}
.product-map-demo__start {
  fill: var(--color-primary);
  stroke: #fff;
  stroke-width: 5;
}
.product-map-demo__stop {
  fill: #f59e0b;
  stroke: #fff;
  stroke-width: 4;
}
.product-map-demo__park {
  position: absolute;
  border-radius: 50%;
  background: rgba(91, 168, 108, 0.2);
}
.product-map-demo__park--one {
  width: 180px;
  height: 130px;
  top: -20px;
  left: -40px;
  transform: rotate(-15deg);
}
.product-map-demo__park--two {
  width: 170px;
  height: 120px;
  right: -30px;
  bottom: -20px;
}
.product-map-demo__weather {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 6px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-md);
  font-size: 15px;
}
.product-map-demo__weather .ui-icon {
  width: 18px;
  height: 18px;
  color: #4f78a8;
}
.product-map-demo__weather span {
  grid-column: 1 / -1;
  color: var(--color-text-secondary);
  font-size: 9px;
}
.product-map-demo__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 14px;
}
.product-map-demo__metrics div {
  padding: 10px;
  border-radius: 12px;
  background: var(--color-surface-hover);
}
.product-map-demo__metrics strong,
.product-map-demo__metrics span {
  display: block;
}
.product-map-demo__metrics strong {
  font-family: var(--font-heading);
  font-size: 17px;
}
.product-map-demo__metrics span {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.product-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  border-block: 1px solid var(--color-border);
}
.product-trust-strip div {
  padding: 28px 20px;
  text-align: center;
}
.product-trust-strip strong,
.product-trust-strip span {
  display: block;
}
.product-trust-strip strong {
  font-family: var(--font-heading);
  font-size: 26px;
}
.product-trust-strip span {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.product-section {
  padding: 100px 20px;
}
.product-ecosystem {
  width: min(1240px, calc(100% - 40px));
  margin: 38px auto;
  padding: 88px clamp(24px, 5vw, 64px);
  border: 1px solid var(--color-border);
  border-radius: 34px;
  background: #f5f7f2;
}
.product-section--soft {
  background: #f0f5ee;
}
.product-section__heading {
  max-width: 760px;
  margin: 0 auto 45px;
  text-align: center;
}
.product-section__heading h2 {
  font-size: clamp(34px, 4.5vw, 55px);
}
.product-section__heading p {
  margin-top: 14px;
  font-size: 17px;
}
.product-species-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.product-species-cards article {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.product-species-cards img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: #eef4eb;
}
.product-species-cards article > div {
  padding: 20px;
}
.product-species-cards span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.product-species-cards h3 {
  margin: 7px 0;
  font-size: 20px;
}
.product-species-cards p {
  font-size: 13px;
  line-height: 1.5;
}
.product-levels,
.product-flow-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.product-levels article,
.product-flow-cards article {
  position: relative;
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.product-levels__number {
  position: absolute;
  top: 20px;
  right: 22px;
  color: #d9ddd8;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
}
.product-levels article > strong {
  color: var(--color-primary-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.product-levels h3 {
  margin: 35px 0 18px;
}
.product-levels ul {
  min-height: 152px;
  padding-left: 20px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 2;
}
.product-levels article > a {
  display: inline-block;
  margin-top: 20px;
  font-weight: 800;
}
.product-levels__plus {
  border-color: #c4b5fd !important;
  background: linear-gradient(150deg, #fff 35%, #f4f1ff) !important;
  box-shadow: 0 20px 55px rgba(109, 40, 217, 0.12);
}
.product-flow-cards article > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 30px;
  border-radius: 12px;
  background: var(--gradient-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 900;
}
.product-flow-cards p {
  margin-top: 10px;
  font-size: 14px;
}
.product-flow-visual {
  position: relative;
  width: min(1180px, 100%);
  margin: 0 auto 20px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: #fff;
}
.product-flow-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.3;
  object-fit: cover;
}
.product-flow-visual figcaption,
.product-route-visual figcaption {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 12px 15px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text-secondary);
  font-size: 12px;
  backdrop-filter: blur(12px);
}

.product-reality {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  width: min(1100px, 100%);
  margin: 0 auto;
}
.product-reality h2 {
  font-size: clamp(34px, 4.6vw, 56px);
}
.product-reality p {
  margin: 18px 0 24px;
}
.product-reality__actions {
  flex-wrap: wrap;
}
.product-route-factors {
  display: grid;
  gap: 9px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.product-route-factors li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
}
.product-route-factors .ui-icon {
  width: 18px;
  color: var(--color-primary-dark);
}
.product-route-visual {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: #f4eee5;
  box-shadow: 0 24px 70px rgba(45, 80, 51, 0.14);
}
.product-route-visual img {
  width: 100%;
  height: 100%;
  min-height: 480px;
  object-fit: cover;
  object-position: 64% center;
}
.product-reality__roadmap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: 24px;
  background: #283b2d;
  color: #fff;
}
.product-reality__roadmap > strong {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 20px;
}
.product-reality__roadmap span {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.product-reality__roadmap b {
  display: block;
  color: #a7e0b2;
  font-size: 10px;
  text-transform: uppercase;
}

.product-plus-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto 80px;
  padding: 50px;
  border-radius: 30px;
  background: linear-gradient(135deg, #ede9fe, #e8f4eb);
}
.product-plus-section > div:first-child {
  max-width: 720px;
}
.product-plus-section h2 {
  font-size: clamp(32px, 4vw, 48px);
}
.product-plus-section p {
  margin-top: 16px;
}
.product-plus-section__actions {
  flex-shrink: 0;
  flex-direction: column;
  align-items: stretch;
}
.product-plus-section__compare {
  color: #5d3db2;
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}
.app-download-modal .modal__content {
  width: min(680px, calc(100% - 24px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 0 30px 28px;
  text-align: center;
}
.app-download-modal .modal__content > img {
  width: calc(100% + 60px);
  height: 280px;
  margin: 0 -30px 22px;
  object-fit: cover;
}
.app-download-modal .modal__content > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-download-modal h2 {
  margin: 7px 0;
}
.app-download-modal p {
  max-width: 570px;
  margin: 0 auto 20px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.app-download-modal .modal__content > div {
  display: flex;
  justify-content: center;
  gap: 9px;
}
.app-download-modal .modal__content > small {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--color-text-muted);
  font-size: 11px;
}
.app-download-modal .modal__content > small .ui-icon {
  width: 14px;
}
.app-download-modal .modal__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.product-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 30px max(20px, calc((100% - 1180px) / 2));
  background: #263129;
  color: #fff;
}
.product-footer .product-landing__brand {
  color: #fff;
}
.product-footer p {
  color: #aeb8b0;
  font-size: 12px;
}
.product-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.product-footer nav a {
  color: #dbe3dc;
  font-size: 12px;
}

@media (max-width: 900px) {
  .product-landing__header nav {
    display: none;
  }
  .product-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 70px 0;
  }
  .product-hero__copy {
    text-align: center;
  }
  .product-hero__copy > p {
    margin-inline: auto;
  }
  .product-hero__actions,
  .product-hero__proof {
    justify-content: center;
  }
  .product-map-demo {
    width: min(620px, 100%);
    margin: 0 auto;
    transform: none;
  }
  .product-hero__visual {
    width: min(720px, 100%);
    margin: 0 auto;
  }
  .product-levels,
  .product-flow-cards,
  .product-species-cards {
    grid-template-columns: 1fr;
    max-width: 650px;
  }
  .product-species-cards article {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  .product-species-cards img {
    height: 100%;
    min-height: 170px;
  }
  .product-reality {
    grid-template-columns: 1fr;
  }
  .product-ecosystem {
    width: min(100% - 28px, 1240px);
  }
  .product-plus-section {
    align-items: stretch;
    flex-direction: column;
  }
  .product-plus-section__actions {
    flex-direction: row;
  }
  .product-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .product-footer .product-landing__brand,
  .product-footer nav {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .product-landing__header {
    width: calc(100% - 16px);
    margin-top: 8px;
  }
  .product-landing__brand small,
  .product-landing__header-actions .btn--secondary {
    display: none;
  }
  .product-landing__header-actions .btn {
    padding: 10px 12px;
    font-size: 11px;
  }
  .product-hero {
    width: calc(100% - 28px);
    padding: 56px 0 62px;
  }
  .product-hero h1 {
    font-size: clamp(36px, 12vw, 43px);
  }
  .product-hero__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .product-hero__actions .btn {
    width: 100%;
  }
  .product-hero__visual,
  .product-hero__visual img {
    min-height: 390px;
  }
  .product-hero__visual {
    border-radius: 24px;
  }
  .product-hero__visual figcaption {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }
  .product-map-demo__canvas {
    height: 240px;
  }
  .product-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    width: calc(100% - 28px);
  }
  .product-section {
    padding: 70px 14px;
  }
  .product-ecosystem {
    width: calc(100% - 20px);
    margin: 20px auto;
    padding: 62px 14px;
    border-radius: 24px;
  }
  .product-flow-visual img {
    min-height: 330px;
    object-fit: cover;
    object-position: center;
  }
  .product-route-visual,
  .product-route-visual img {
    min-height: 390px;
  }
  .app-download-modal .modal__content > img {
    height: 210px;
  }
  .app-download-modal .modal__content > div {
    flex-direction: column;
  }
  .product-levels article,
  .product-flow-cards article {
    padding: 24px;
  }
  .product-species-cards article {
    grid-template-columns: 105px 1fr;
  }
  .product-species-cards img {
    min-height: 150px;
  }
  .product-species-cards article > div {
    padding: 17px;
  }
  .product-levels ul {
    min-height: 0;
  }
  .product-plus-section {
    width: calc(100% - 28px);
    padding: 28px;
  }
  .product-plus-section__actions {
    flex-direction: column;
  }
}

@media (max-width: 380px) {
  .product-landing__brand span {
    font-size: 16px;
  }
  .product-map-demo__top {
    padding: 16px;
  }
  .product-map-demo__top strong {
    font-size: 17px;
  }
  .product-map-demo__weather {
    top: 10px;
    right: 10px;
  }
  .product-map-demo__metrics {
    gap: 5px;
    padding: 9px;
  }
  .product-map-demo__metrics div {
    padding: 8px 6px;
  }
  .product-map-demo__metrics strong {
    font-size: 14px;
  }
  .product-map-demo__metrics span {
    font-size: 9px;
  }
}

.landing {
  background: var(--color-bg);
}

/* ========== LANDING HEADER ========== */
.header--landing {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(250, 248, 245, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: none;
  border-bottom: 1px solid rgba(232, 229, 224, 0.5);
  transition: all 0.3s var(--ease-out);
}

.header--landing.scrolled {
  background: rgba(250, 248, 245, 0.95);
  box-shadow: 0 1px 0 rgba(45, 41, 38, 0.06);
}

.header__nav {
  display: none;
  gap: var(--space-lg);
}

.header__nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
  font-family: var(--font-heading);
}

.header__nav-link:hover {
  color: var(--color-primary);
}

.header__menu-toggle {
  display: flex;
}

@media (min-width: 768px) {
  .header__nav {
    display: flex;
  }
  .header__menu-toggle {
    display: none !important;
  }
}

/* ========== HERO ========== */
.landing__hero {
  position: relative;
  padding: calc(var(--header-height) + var(--space-xxxl)) var(--space-md)
    var(--space-xxxl);
  text-align: center;
  background: var(--gradient-hero);
  background-size: 200% 200%;
  animation: gradientShift 15s ease infinite;
  color: #fff;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__bg-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  animation: shapeDrift 20s ease-in-out infinite;
}

.hero__shape--1 {
  width: 400px;
  height: 400px;
  top: -10%;
  right: -5%;
  animation-duration: 25s;
}

.hero__shape--2 {
  width: 300px;
  height: 300px;
  bottom: -5%;
  left: -8%;
  animation-duration: 20s;
  animation-delay: -5s;
}

.hero__shape--3 {
  width: 200px;
  height: 200px;
  top: 40%;
  left: 10%;
  animation-duration: 18s;
  animation-delay: -10s;
  background: rgba(255, 255, 255, 0.04);
}

.hero__shape--4 {
  width: 150px;
  height: 150px;
  top: 20%;
  right: 20%;
  animation-duration: 22s;
  animation-delay: -15s;
  background: rgba(255, 255, 255, 0.05);
}

.landing__hero-content {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.landing__hero-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.landing__hero-logo {
  width: 100px;
  height: 100px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-sm);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  animation: float 5s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing__hero-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__overline {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.85;
  margin-bottom: var(--space-md);
}

.landing__hero h1 {
  color: #fff;
  margin-bottom: var(--space-lg);
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.landing__hero h1 .text-gradient {
  background: linear-gradient(135deg, #ffd766, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero__subtitle {
  font-size: 18px;
  opacity: 0.92;
  margin-bottom: var(--space-xl);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.hero__cta-group {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xl);
}

.hero__btn-main {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  font-size: 16px;
}

.hero__btn-main:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.hero__btn-main::after {
  display: none;
}

.hero__btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.hero__btn-ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

.hero__badges {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-xxl);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.hero__badge svg {
  opacity: 0.9;
}

/* Stats ticker */
.hero__stats-ticker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding: var(--space-lg) var(--space-xl);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-ticker__item {
  text-align: center;
}

.stats-ticker__divider {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
}

/* ========== ANIMALS SECTION ========== */
.landing__animals {
  padding: var(--space-xxxl) var(--space-md);
  text-align: center;
}

.animals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--space-md);
  max-width: 800px;
  margin: var(--space-xl) auto 0;
}

/* ========== FEATURES ========== */
.landing__features {
  padding: var(--space-xxxl) var(--space-md);
  background: linear-gradient(
    180deg,
    var(--color-bg) 0%,
    rgba(91, 168, 108, 0.03) 100%
  );
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  max-width: 960px;
  margin: var(--space-xl) auto 0;
}

/* ========== HOW IT WORKS ========== */
.landing__how-it-works {
  padding: var(--space-xxxl) var(--space-md);
  background: var(--color-surface);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  max-width: 960px;
  margin: var(--space-xl) auto 0;
}

/* ========== MAP PREVIEW ========== */
.landing__map-preview {
  padding: var(--space-xxxl) var(--space-md);
  background: linear-gradient(
    180deg,
    rgba(91, 168, 108, 0.03) 0%,
    var(--color-bg) 100%
  );
}

.map-preview__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xxxl);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.map-preview__content {
  max-width: 480px;
}

.map-preview__content .btn {
  margin-top: var(--space-lg);
}

.map-preview__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

.map-preview__feature {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: 15px;
  color: var(--color-text);
}

.map-preview__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-preview__dot--red {
  background: linear-gradient(135deg, #ef4444, #f87171);
}
.map-preview__dot--green {
  background: linear-gradient(135deg, #5ba86c, #7bc67a);
}
.map-preview__dot--orange {
  background: linear-gradient(135deg, #e8734a, #ff9a7a);
}
.map-preview__dot--purple {
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}

.map-preview__visual {
  max-width: 480px;
}

@media (max-width: 768px) {
  .map-preview__layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .map-preview__visual {
    order: -1;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* ========== COMPARISON ========== */
.landing__comparison {
  padding: var(--space-xxxl) var(--space-md);
  background: var(--color-surface);
}

.landing__comparison .container {
  max-width: 800px;
}

/* ========== PRICING ========== */
.landing__pricing {
  padding: var(--space-xxxl) var(--space-md);
  background: linear-gradient(
    180deg,
    var(--color-surface) 0%,
    var(--color-bg) 100%
  );
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  max-width: 960px;
  margin: var(--space-xl) auto 0;
  align-items: start;
}

.plus-pricing {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 110px;
}
.plus-pricing__shell {
  width: min(1240px, calc(100% - 32px));
  margin: 0 auto;
}

.plus-pricing__hero {
  max-width: 1040px;
  min-height: 480px;
  margin: 0 auto 42px;
  display: flex;
  align-items: center;
  padding: 54px;
  overflow: hidden;
  border-radius: 34px;
  color: #fff;
  background:
    linear-gradient(
      90deg,
      rgba(17, 49, 29, 0.96) 0%,
      rgba(27, 74, 43, 0.88) 44%,
      rgba(27, 74, 43, 0.12) 75%
    ),
    var(--pet-visual-image, url("/assets/images/brand-life-hero-v1.jpg")) 72%
      center / cover no-repeat;
  box-shadow: 0 28px 70px rgba(31, 73, 43, 0.18);
}
.plus-pricing__hero-copy {
  max-width: 600px;
}
.plus-pricing__visual {
  width: min(680px, 100%);
  aspect-ratio: 16 / 7;
  display: block;
  margin: 0 auto 24px;
  border-radius: 30px;
  object-fit: cover;
  box-shadow: 0 24px 60px rgba(42, 83, 50, 0.14);
}
.plus-pricing__hero > span {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 11px;
  font-weight: 900;
}
.plus-pricing__hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  color: #fff;
}
.plus-pricing__hero p {
  max-width: 580px;
  margin: 16px 0 22px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 18px;
}
.plus-pricing__hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.plus-pricing__hero-points span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 700;
}
.plus-pricing__free {
  max-width: 930px;
  margin: 0 auto 52px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 8px 26px;
  border-bottom: 1px solid var(--color-border);
}
.plus-pricing__free > span {
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.plus-pricing__free > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.plus-pricing__free b {
  font-size: 12px;
}
.plus-pricing__free a {
  color: var(--color-primary-dark);
  font-weight: 800;
}
.plus-benefits {
  max-width: 1040px;
  margin: 0 auto 50px;
}
.plus-benefits header {
  max-width: 680px;
  margin-bottom: 24px;
}
.plus-benefits header > span,
.plus-pricing__offer-copy > span {
  color: #6d28d9;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.plus-benefits h2 {
  margin-top: 7px;
  font-size: clamp(30px, 5vw, 46px);
}
.plus-benefits > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.plus-benefits article {
  min-height: 230px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  background: #fff;
}
.plus-benefits i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 32px;
  border-radius: 15px;
  color: #6d28d9;
  background: #f1edff;
}
.plus-benefits svg {
  width: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plus-benefits strong {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 19px;
}
.plus-benefits p {
  font-size: 13px;
  line-height: 1.55;
}
.plus-pricing__offer {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 290px;
  gap: 34px;
  padding: 38px;
  border: 2px solid #8b5cf6;
  border-radius: 30px;
  background: linear-gradient(145deg, #fff, #f7f4ff);
  box-shadow: 0 26px 70px rgba(109, 40, 217, 0.16);
}
.plus-pricing__offer-copy h2 {
  margin: 6px 0;
  font-size: 40px;
}
.plus-pricing__offer-copy ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.plus-pricing__offer-copy li {
  position: relative;
  padding-left: 21px;
  font-size: 13px;
}
.plus-pricing__offer-copy li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 900;
}
.plus-pricing__checkout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 25px;
  border-radius: 22px;
  color: #fff;
  background: #50318b;
  text-align: center;
}
.plus-pricing__checkout > strong {
  margin: 4px 0;
  font: 900 45px/1 var(--font-heading);
}
.plus-pricing__checkout > span {
  margin-bottom: 20px;
  color: #ddd2ff;
  font-size: 12px;
}
.plus-pricing__checkout > small:last-child {
  margin-top: 12px;
  color: #ddd2ff;
  font-size: 10px;
}
.plus-pricing__hero > strong {
  display: block;
  color: #6d28d9;
  font-family: var(--font-heading);
  font-size: 34px;
}
.plus-pricing__hero small {
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
}
.plus-pricing__comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 850px;
  margin: 0 auto;
}
.plus-pricing__comparison article {
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.plus-pricing__comparison article > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.plus-pricing__comparison h2 {
  margin: 8px 0;
}
.plus-pricing__comparison p {
  min-height: 46px;
  font-size: 13px;
}
.plus-pricing__comparison ul {
  min-height: 280px;
  margin: 22px 0;
  padding: 0;
  list-style: none;
}
.plus-pricing__comparison li {
  position: relative;
  padding: 8px 0 8px 25px;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
  font-size: 13px;
}
.plus-pricing__comparison li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 900;
}
.plus-pricing__featured {
  border-color: #c4b5fd !important;
  background: linear-gradient(150deg, #fff, #f5f2ff) !important;
  box-shadow: 0 22px 60px rgba(109, 40, 217, 0.12);
}
.plus-pricing__soon {
  color: #6d28d9 !important;
}
.plus-pricing__note {
  max-width: 850px;
  margin: 18px auto 0;
  padding: 18px 22px;
  border-radius: 17px;
  background: #f1f5f0;
}
.plus-pricing__note strong {
  font-size: 13px;
}
.plus-pricing__note p {
  margin-top: 4px;
  font-size: 11px;
}
.plus-pricing__intent {
  max-width: 850px;
  margin: 18px auto 0;
  padding: 20px 22px;
  border: 1px solid #bbf7d0;
  border-radius: 17px;
  background: #f0fdf4;
  color: #166534;
}
.plus-pricing__intent strong {
  font-size: 14px;
}
.plus-pricing__intent p {
  margin: 5px 0 0;
  font-size: 12px;
  color: #3f684b;
}
.plus-billing-toggle {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 20px 0 8px;
  padding: 4px;
  border-radius: 15px;
  background: #eef2ed;
}
.plus-billing-toggle button {
  min-width: 132px;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-secondary);
  font: 800 14px/1 var(--font-heading);
  cursor: pointer;
}
.plus-billing-toggle button.is-active {
  background: #fff;
  color: var(--color-text);
  box-shadow: 0 5px 18px rgba(35, 70, 43, 0.1);
}
.plus-billing-toggle small {
  margin-left: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #6d4bc3;
  color: #fff;
  font-size: 9px;
}
.plus-comparison {
  margin: 24px 0;
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: #fff;
}
.plus-comparison header {
  max-width: 760px;
  margin-bottom: 28px;
}
.plus-comparison header > span {
  color: #6d4bc3;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plus-comparison header h2 {
  margin: 7px 0;
  font-size: clamp(28px, 4vw, 42px);
}
.plus-comparison header p {
  color: var(--color-text-secondary);
}
.plus-comparison__table {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 20px;
}
.plus-comparison__row {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(150px, 0.65fr) minmax(
      170px,
      0.75fr
    );
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid var(--color-border);
}
.plus-comparison__row:last-child {
  border-bottom: 0;
}
.plus-comparison__row > * {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 13px 16px;
  border-right: 1px solid var(--color-border);
  font-size: 13px;
}
.plus-comparison__row > *:last-child {
  border-right: 0;
}
.plus-comparison__row--head {
  min-height: 54px;
  background: #f6f8f5;
}
.plus-comparison__row .ui-icon {
  width: 16px;
  flex: 0 0 16px;
}
.plus-comparison__row .is-included {
  color: var(--color-primary-dark);
}
.plus-comparison__row .is-missing {
  color: var(--color-text-muted);
}
.plus-comparison__row .is-plus {
  background: rgba(109, 75, 195, 0.045);
  color: #5d3db2;
  font-weight: 750;
}
@media (max-width: 760px) {
  .plus-pricing__shell {
    width: min(100% - 20px, 1240px);
  }
  .plus-comparison {
    padding: 18px 12px;
  }
  .plus-comparison__table {
    overflow-x: auto;
  }
  .plus-comparison__row {
    width: 760px;
  }
  .plus-billing-toggle {
    display: grid;
  }
  .plus-billing-toggle button {
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .plus-pricing {
    width: calc(100% - 20px);
    padding-top: 25px;
  }
  .plus-pricing__comparison {
    grid-template-columns: 1fr;
  }
  .plus-pricing__comparison ul {
    min-height: 0;
  }
  .plus-pricing__hero {
    min-height: 520px;
    padding: 30px 22px;
    align-items: flex-end;
    background:
      linear-gradient(0deg, rgba(17, 49, 29, 0.98), rgba(17, 49, 29, 0.28)),
      var(--pet-visual-image, url("/assets/images/brand-life-hero-v1.jpg")) 68%
        center / cover no-repeat;
  }
  .plus-pricing__free {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .plus-benefits > div {
    grid-template-columns: 1fr 1fr;
  }
  .plus-benefits article {
    min-height: 205px;
    padding: 18px;
  }
  .plus-benefits i {
    margin-bottom: 20px;
  }
  .plus-pricing__offer {
    grid-template-columns: 1fr;
    padding: 24px 18px;
  }
  .plus-pricing__offer-copy ul {
    grid-template-columns: 1fr;
  }
}

/* ========== TESTIMONIALS ========== */
.landing__testimonials {
  padding: var(--space-xxxl) var(--space-md);
  background: var(--color-bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  max-width: 960px;
  margin: var(--space-xl) auto 0;
}

/* ========== FINAL CTA ========== */
.landing__final-cta {
  padding: var(--space-xxxl) var(--space-md);
  background: var(--color-bg);
}

.final-cta__box {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-xxxl) var(--space-xl);
  text-align: center;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.final-cta__bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.final-cta__shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.final-cta__shape--1 {
  width: 250px;
  height: 250px;
  top: -30%;
  left: -10%;
  animation: shapeDrift 18s ease-in-out infinite;
}

.final-cta__shape--2 {
  width: 200px;
  height: 200px;
  bottom: -20%;
  right: -5%;
  animation: shapeDrift 22s ease-in-out infinite;
  animation-delay: -8s;
}

.final-cta__content {
  position: relative;
  z-index: 1;
}

.final-cta__content h2 {
  color: #fff;
  font-size: clamp(28px, 5vw, 40px);
  margin-bottom: var(--space-md);
}

.final-cta__content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 17px;
  max-width: 440px;
  margin: 0 auto var(--space-xl);
}

.final-cta__content .btn {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.final-cta__content .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.final-cta__content .btn::after {
  display: none;
}

.final-cta__trust {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

.final-cta__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* ========== LANDING ILLUSTRATIONS ========== */
.hero__phone-image {
  max-width: 320px;
  margin: var(--space-xl) auto 0;
}
.hero__phone-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

.animals__illustration {
  max-width: 520px;
  margin: var(--space-xl) auto 0;
  position: relative;
}
.animals__illustration::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
}
.animals__illustration img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

.how-it-works__illustration {
  max-width: 700px;
  margin: var(--space-xl) auto var(--space-xl);
}
.how-it-works__illustration img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

.map-preview__image {
  width: 100%;
}
.map-preview__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

.final-cta__illustration {
  margin-top: var(--space-xl);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.final-cta__illustration img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl);
}

/* Steps connector paws */
.step-connector {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-sm) 0;
}
.step-connector__paw {
  font-size: 14px;
  opacity: 0.4;
}

@media (min-width: 768px) {
  .landing__hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxxl);
    text-align: left;
    padding: calc(var(--header-height) + var(--space-xxxl)) var(--space-xl)
      var(--space-xxxl);
  }
  .landing__hero-content {
    flex: 0 1 480px;
    margin: 0;
    text-align: left;
  }
  .landing__hero-logo-wrap {
    justify-content: flex-start;
  }
  .landing__hero h1 {
    margin-left: 0;
    margin-right: 0;
  }
  .hero__subtitle {
    margin-left: 0;
    margin-right: 0;
  }
  .hero__cta-group {
    justify-content: flex-start;
  }
  .hero__badges {
    justify-content: flex-start;
    margin-bottom: var(--space-xl);
  }
  .hero__phone-image {
    position: static;
    flex: 0 1 420px;
    max-height: 50vh;
    margin: 0;
    z-index: 1;
  }
  .hero__phone-image img {
    max-height: 50vh;
    width: 100%;
    object-fit: contain;
  }
  .hero__stats-ticker {
    justify-content: flex-start;
  }

  .animals-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxxl);
    align-items: center;
  }
  .animals-layout__visual {
    order: -1;
  }
  .animals-layout__content {
    text-align: left;
  }
  .animals-layout__content .section__title,
  .animals-layout__content .section__subtitle {
    text-align: left;
  }
  .animals__illustration {
    margin: 0;
    max-width: none;
  }
  .animals-grid {
    margin: var(--space-xl) 0 0;
    max-width: none;
  }

  .how-it-works-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxxl);
    align-items: center;
  }
  .how-it-works-layout__content {
    text-align: left;
  }
  .how-it-works-layout__content .section__title,
  .how-it-works-layout__content .section__subtitle {
    text-align: left;
  }
  .how-it-works__illustration {
    margin: 0;
    max-width: none;
  }
  .steps-grid {
    grid-template-columns: 1fr;
    margin: var(--space-xl) auto 0;
    max-width: 480px;
  }
  .step-connector {
    display: flex;
  }

  .map-preview__image {
    transform: scale(1.3);
  }

  .final-cta__box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xxxl);
    text-align: left;
    align-items: center;
    padding: var(--space-xxxl);
  }
  .final-cta__content {
    position: relative;
    z-index: 1;
  }
  .final-cta__content h2,
  .final-cta__content p {
    margin-left: 0;
  }
  .final-cta__trust {
    justify-content: flex-start;
  }
  .final-cta__illustration {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    margin: 0;
    border-radius: 0;
  }
  .final-cta__illustration img {
    border-radius: 0;
    height: 100%;
    object-fit: cover;
  }
}

/* ========== SPECIES & BREEDS ========== */
.species-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-lg);
}

.species-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.species-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.species-card__icon {
  font-size: 48px;
  margin-bottom: var(--space-md);
}

.species-card__name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.species-card__desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.species-detail__header {
  text-align: center;
  padding: var(--space-xl) 0;
}

.species-detail__icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
}

.breeds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.breed-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.breed-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.breed-card__image-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.breed-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.breed-card:hover .breed-card__image {
  transform: scale(1.05);
}

.breed-card__body {
  padding: var(--space-md);
}

.breed-card__name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.breed-card__meta {
  display: flex;
  gap: var(--space-md);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.breed-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.breed-tag--small {
  font-size: 11px;
  padding: 3px 8px;
}

/* ========== MARKETPLACE ========== */
.market-search {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.market-search .form-input {
  flex: 1;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-lg);
}

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  display: block;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.product-card__image-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-card__image {
  transform: scale(1.05);
}

.product-card__body {
  padding: var(--space-md);
}

.product-card__name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: var(--space-sm);
  line-height: 1.3;
}

.product-card__price {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.product-card__price-current {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary);
}

.product-card__price-old {
  font-size: 13px;
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

.product-detail__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-lg);
  background: var(--color-surface-alt);
}

.product-detail__image img {
  width: 100%;
  height: auto;
  display: block;
}

.product-detail__price {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.product-detail__price-current {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-primary);
}

.product-detail__price-old {
  font-size: 18px;
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

.cart-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cart-item__remove {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--space-md);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-top: 2px solid var(--color-border);
  font-size: 18px;
}

.cart-summary__total {
  font-weight: 800;
  color: var(--color-primary);
}

.checkout-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
}

.checkout-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.checkout-item--total {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  font-size: 16px;
  color: var(--color-text);
}

.payment-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.payment-method {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.payment-method--active {
  border-color: var(--color-primary);
}

.payment-method input {
  display: none;
}

/* ========== FOOTER ========== */
.landing__footer {
  background: var(--color-text);
  color: var(--color-surface-alt);
  padding: var(--space-xxxl) var(--space-md) var(--space-xl);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  max-width: var(--max-landing-width);
  margin: 0 auto;
}

.footer__brand p {
  font-size: 14px;
  color: var(--color-text-tertiary);
  margin: var(--space-md) 0;
  max-width: 280px;
  line-height: 1.6;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
}

.footer__logo img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
}

.footer__socials {
  display: flex;
  gap: var(--space-sm);
}

.footer__socials a {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  transition: all 0.2s ease;
}

.footer__socials a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.footer__col h5 {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: var(--space-lg);
  font-family: var(--font-heading);
}

.footer__col a {
  display: block;
  color: var(--color-text-tertiary);
  text-decoration: none;
  margin-bottom: var(--space-sm);
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer__col a:hover {
  color: #fff;
}

.footer__bottom {
  max-width: var(--max-landing-width);
  margin: var(--space-xxl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer__bottom p {
  font-size: 13px;
  color: var(--color-text-tertiary);
  margin: 0;
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl) var(--space-lg);
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================================
   IN-APP HEADER
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(45, 41, 38, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-md);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--color-text);
  text-decoration: none;
}

.header__logo img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
}

.header__logo span {
  color: var(--color-primary-dark);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header__emergency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  background: #b83b35;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.header__emergency:hover {
  background: #982f2a;
  color: #fff;
}

.header__btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s ease;
  position: relative;
  color: var(--color-text-secondary);
}

.header__btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.header__btn .badge-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--color-accent);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-bg);
}

/* ========== TAB BAR ========== */
.tab-bar {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 24px));
  height: var(--tab-bar-height);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid rgba(232, 229, 224, 0.9);
  border-radius: 23px;
  box-shadow:
    0 14px 42px rgba(45, 41, 38, 0.14),
    0 2px 8px rgba(45, 41, 38, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  z-index: 100;
  padding: 6px;
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  height: 100%;
  color: var(--color-text-tertiary);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-heading);
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 17px;
  padding: 5px 3px 4px;
}

.tab-bar__icon {
  width: 34px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s var(--ease-spring);
}

.tab-bar__item .ui-icon {
  width: 21px;
  height: 21px;
}

.tab-bar__item.active,
.tab-bar__item:hover {
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.09);
}

.tab-bar__item.active .tab-bar__icon {
  transform: translateY(-1px);
}

.tab-bar__item--primary .tab-bar__icon {
  color: #fff;
  background: var(--gradient-primary-dark);
  box-shadow: 0 5px 14px rgba(61, 139, 90, 0.25);
}

.tab-bar__item--primary.active {
  background: rgba(91, 168, 108, 0.12);
}

@media (min-width: 760px) {
  .tab-bar {
    bottom: 18px;
  }
}

@media (min-width: 1100px) {
  .tab-bar {
    top: 50%;
    bottom: auto;
    left: 18px;
    width: 82px;
    height: auto;
    padding: 8px;
    transform: translateY(-50%);
    flex-direction: column;
    border-radius: 25px;
  }
  .tab-bar__item {
    width: 100%;
    min-height: 64px;
    flex: 0 0 auto;
  }
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.dashboard {
  padding: var(--space-md);
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.dashboard__header {
  margin-bottom: var(--space-lg);
  padding-top: var(--space-sm);
}

.dashboard__header h2 {
  font-size: 26px;
  margin-bottom: 4px;
}

.dashboard__header p {
  color: var(--color-text-secondary);
  font-size: 16px;
}

/* Pets section */
.dashboard__pets-section {
  margin-bottom: var(--space-xl);
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.section-header h3 {
  font-size: 20px;
}

.header__add-pet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-heading);
}

.header__add-pet:hover {
  color: var(--color-primary-dark);
}

.dashboard__pets {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

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

.pet-card-mini {
  flex-shrink: 0;
  width: 130px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  text-decoration: none;
  color: var(--color-text);
}

.pet-card-mini:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.pet-card-mini .avatar {
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-sm);
  border: 2px solid var(--color-primary-light);
}

.pet-card-mini h4 {
  font-size: 15px;
  margin-bottom: 2px;
}

.pet-card-mini p {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.pet-card-mini--add {
  border-style: dashed;
  border-color: var(--color-text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  min-height: 130px;
}

.pet-card-mini--add:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  border-style: dashed;
}

.pet-card-mini--add svg {
  margin-bottom: var(--space-xs);
}

/* Quick actions */
.dashboard__quick-actions {
  margin-bottom: var(--space-xl);
}

/* Wellness */
.dashboard__wellness {
  margin-bottom: var(--space-xl);
}

/* Events */
.dashboard__events {
  margin-bottom: var(--space-xl);
}

/* ============================================================
   PROFILE PAGE
   ============================================================ */

.account-page {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 calc(var(--tab-bar-height) + 45px);
}

.account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 26px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}

.account-hero__identity {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.account-hero__avatar {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border: 3px solid #dcefdc;
  border-radius: 23px;
  object-fit: cover;
}
.account-hero__identity > div {
  min-width: 0;
}
.account-hero__identity span,
.account-panel__heading span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.account-hero__identity h1 {
  overflow: hidden;
  font-size: clamp(27px, 4vw, 38px);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-hero__identity p {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-visual-guide {
  display: grid;
  grid-template-columns: minmax(220px, 38%) 1fr;
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #f5faf5;
}
.account-visual-guide img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}
.account-visual-guide div {
  padding: 22px 26px 22px 0;
}
.account-visual-guide span {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.account-visual-guide strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.18;
}
.account-visual-guide p {
  margin-top: 8px;
  font-size: 13px;
}

.account-subscription {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 24px;
  background: linear-gradient(135deg, #eef8f0, #f8faf7);
}

.account-subscription--active {
  background: linear-gradient(135deg, #ede9fe, #eef8f0);
}
.account-subscription__eyebrow {
  color: #6d28d9;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.account-subscription h2 {
  margin: 3px 0;
}
.account-subscription p {
  font-size: 13px;
}

.billing-page {
  min-height: 100vh;
  background: var(--color-bg);
}

.billing-shell {
  display: grid;
  gap: 18px;
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 120px;
}

.billing-hero,
.billing-current,
.billing-notice,
.billing-history {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}

.billing-hero {
  padding: 34px;
  background: linear-gradient(135deg, #eef8f0, #f7f2ff);
}

.billing-hero > span,
.billing-current > div > span,
.billing-history > header span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.billing-hero > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.billing-hero .ui-icon,
.billing-notice > .ui-icon,
.billing-empty > .ui-icon {
  width: 22px;
  height: 22px;
}

.billing-hero h1 {
  margin: 8px 0;
  font-size: clamp(30px, 5vw, 46px);
}

.billing-hero p {
  max-width: 700px;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.billing-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 28px;
  border-color: #cfe3d2;
  background: #f5faf5;
}

.billing-current--free {
  border-color: var(--color-border);
  background: #fff;
}

.billing-current h2 {
  margin: 5px 0;
  font-size: 28px;
}

.billing-current p,
.billing-current small {
  display: block;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.billing-current small {
  margin-top: 7px;
}

.billing-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  border-color: #ead7a8;
  background: #fff9e9;
}

.billing-notice > .ui-icon {
  color: #8a641a;
}

.billing-notice p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.billing-history {
  padding: 26px;
}

.billing-history > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.billing-history > header h2 {
  margin: 4px 0 0;
}

.billing-history > header > strong {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #edf5ed;
  color: var(--color-primary-dark);
}

.billing-history > div {
  display: grid;
  gap: 10px;
}

.billing-payment {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  padding: 16px 18px;
  border: 1px solid #e4e9e4;
  border-radius: 16px;
  background: #fafcf9;
}

.billing-payment > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.billing-payment > div:nth-child(2) {
  justify-content: flex-end;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.billing-payment b {
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff1d7;
  color: #765719;
  font-size: 11px;
}

.billing-payment b[data-status="succeeded"] {
  background: #e5f3e9;
  color: #245d35;
}

.billing-payment b[data-status="canceled"] {
  background: #f2e7e6;
  color: #86443e;
}

.billing-empty,
.billing-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 38px 20px;
  color: var(--color-text-secondary);
  text-align: center;
}

.billing-empty p {
  margin: 0;
}

.sound-library-page {
  min-height: 100vh;
  background: var(--color-bg);
}
.sound-library-shell {
  display: grid;
  gap: 18px;
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 120px;
}
.sound-library-hero,
.sound-library-warning,
.sound-library-toolbar,
.sound-library-list {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.sound-library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 34px;
  background: linear-gradient(135deg, #eef8f0, #f7f2ff);
}
.sound-library-hero span,
.sound-library-list > header span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sound-library-hero span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.sound-library-hero h1 {
  margin: 8px 0;
  font-size: clamp(30px, 5vw, 46px);
}
.sound-library-hero p,
.sound-library-warning p,
.sound-library-empty p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.sound-library-hero__wave {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 150px;
  height: 88px;
  padding: 0 20px;
  border-radius: 22px;
  background: rgb(255 255 255 / 70%);
}
.sound-library-hero__wave i {
  width: 7px;
  border-radius: 999px;
  background: linear-gradient(#7ab586, #7f6ec7);
}
.sound-library-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 18px 20px;
  border-color: #ead7a8;
  background: #fff9e9;
}
.sound-library-warning > .ui-icon {
  width: 22px;
  color: #8a641a;
}
.sound-library-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
}
.sound-library-toolbar label,
.sound-library-modal label {
  display: grid;
  gap: 7px;
  font-weight: 750;
}
.sound-library-toolbar select,
.sound-library-modal select {
  min-width: 240px;
  min-height: 46px;
  padding: 0 42px 0 13px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
}
.sound-library-list {
  padding: 26px;
}
.sound-library-list > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.sound-library-list > header h2 {
  margin: 4px 0 0;
}
.sound-library-list > header > strong {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #edf5ed;
  color: var(--color-primary-dark);
}
.sound-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sound-session-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid #e4e9e4;
  border-radius: 18px;
  background: #fafcf9;
}
.sound-session-card > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.sound-session-card > header img {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  object-fit: cover;
}
.sound-session-card > header div,
.sound-session-card__analysis {
  display: grid;
  gap: 3px;
}
.sound-session-card > header span,
.sound-session-card__meta,
.sound-session-card__analysis span {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.sound-session-card > header > b {
  padding: 5px 8px;
  border-radius: 999px;
  background: #e5f3e9;
  color: #245d35;
  font-size: 10px;
}
.sound-session-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.sound-session-card__analysis {
  padding: 11px 12px;
  border-radius: 12px;
  background: #f1eef9;
}
.sound-session-card audio {
  width: 100%;
  height: 42px;
}
.sound-library-empty,
.sound-library-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 42px 20px;
  color: var(--color-text-secondary);
  text-align: center;
}
.sound-library-empty > .ui-icon {
  width: 34px;
  height: 34px;
}
.sound-library-modal .modal__content {
  display: grid;
  gap: 16px;
  width: min(620px, calc(100vw - 24px));
}
.sound-library-consent {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  font-weight: 500 !important;
  line-height: 1.45;
}
.sound-library-consent input {
  margin-top: 3px;
}
.sound-lab__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.account-verification {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid #ead7a8;
  border-radius: 18px;
  background: #fff9e9;
}
.account-verification > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: #8a641a;
  background: #fff0c9;
}
.account-verification > span .ui-icon {
  width: 20px;
  height: 20px;
}
.account-verification strong {
  font-size: 13px;
}
.account-verification p {
  font-size: 11px;
  line-height: 1.45;
}

.account-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.account-stats div {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}
.account-stats strong,
.account-stats span {
  display: block;
}
.account-stats strong {
  font-family: var(--font-heading);
  font-size: 22px;
}
.account-stats span {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.account-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  margin-bottom: 18px;
}
.account-panel {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.account-panel__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.account-panel__heading h2 {
  font-size: 24px;
}
.account-panel__heading > a {
  font-size: 12px;
  font-weight: 800;
}

.account-pets__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-pet-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: 15px;
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.account-pet-card:hover {
  background: #eef8f0;
}
.account-pet-card img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
}
.account-pet-card strong,
.account-pet-card span {
  display: block;
}
.account-pet-card span {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.account-pet-card b,
.account-settings__grid b {
  color: var(--color-text-tertiary);
  font-size: 22px;
}
.account-pet-card b .ui-icon,
.account-settings__grid b .ui-icon {
  width: 17px;
  height: 17px;
}
.account-empty {
  padding: 20px;
  border-radius: 15px;
  background: var(--color-surface-hover);
  text-align: center;
}
.account-empty p {
  margin: 6px 0 13px;
  font-size: 12px;
}

.account-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.account-services a {
  min-height: 116px;
  padding: 15px;
  border-radius: 16px;
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.account-services i,
.account-services strong,
.account-services span {
  display: block;
}
.account-services i {
  margin-bottom: 12px;
  font-size: 23px;
  font-style: normal;
}
.account-service-icon {
  width: 38px;
  height: 38px;
  display: grid !important;
  place-items: center;
  border-radius: 13px;
}
.account-service-icon .ui-icon {
  width: 21px;
  height: 21px;
}
.account-service-icon--map {
  color: #3d8b5a;
  background: rgba(91, 168, 108, 0.13);
}
.account-service-icon--health {
  color: #d4574a;
  background: rgba(212, 87, 74, 0.11);
}
.account-service-icon--food {
  color: #c65a35;
  background: rgba(232, 115, 74, 0.12);
}
.account-service-icon--knowledge {
  color: #367d84;
  background: rgba(74, 155, 155, 0.12);
}
.account-services strong {
  font-size: 13px;
}
.account-services span {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.account-settings {
  margin-bottom: 18px;
}
.account-settings__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.account-settings__grid > a,
.account-settings__grid > button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 15px;
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.account-settings__grid > a > span,
.account-settings__grid > button > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
}
.account-settings__grid > a > span .ui-icon,
.account-settings__grid > button > span .ui-icon {
  width: 19px;
  height: 19px;
  color: var(--color-primary-dark);
}
.account-settings__grid strong,
.account-settings__grid small {
  display: block;
}
.account-settings__grid strong {
  font-size: 12px;
}
.account-plus-label {
  display: inline-flex;
  margin-left: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eee8fb;
  color: #6849a7;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  vertical-align: 2px;
}
.account-settings__grid small {
  color: var(--color-text-secondary);
  font-size: 9px;
}
.account-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.account-footer-actions span {
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.account-add-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.account-add-link .ui-icon {
  width: 15px;
  height: 15px;
}

.ui-icon {
  display: block;
  width: 1em;
  height: 1em;
}
.header__btn > .ui-icon {
  width: 20px;
  height: 20px;
}
.avatar-dropdown__item .ui-icon {
  width: 17px;
  height: 17px;
}
.sidebar__close .ui-icon,
.notification-panel__close .ui-icon {
  width: 20px;
  height: 20px;
}
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidebar__link > .ui-icon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-primary-dark);
}
.notification-panel__header h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.notification-panel__header h4 .ui-icon {
  width: 19px;
  height: 19px;
  color: var(--color-primary-dark);
}
.notification-item__empty-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-sm);
  border-radius: 16px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.11);
}
.notification-item__empty-icon .ui-icon {
  width: 24px;
  height: 24px;
}
.notification-item__icon .ui-icon {
  width: 20px;
  height: 20px;
}
.dashboard-action__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-sm);
  border-radius: 15px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.11);
}
.dashboard-action__icon .ui-icon {
  width: 24px;
  height: 24px;
}
.premium-banner h3,
.section-heading-with-icon {
  display: flex;
  align-items: center;
  gap: 8px;
}
.premium-banner h3 .ui-icon,
.section-heading-with-icon .ui-icon {
  width: 20px;
  height: 20px;
}
.dashboard-empty-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto var(--space-md);
  border-radius: 17px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.1);
}
.dashboard-empty-icon .ui-icon {
  width: 27px;
  height: 27px;
}

/* ========== TODAY — PERSONAL DAILY HUB ========== */
.today-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #f4f7f1 0, #fbfaf7 460px);
}
.today-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 90px;
}
.today-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 38px;
  border-radius: 30px;
  min-height: 330px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      rgba(250, 248, 245, 0.98) 0%,
      rgba(250, 248, 245, 0.92) 42%,
      rgba(250, 248, 245, 0.08) 68%
    ),
    var(--pet-visual-image, url("/assets/media/dashboard/today-hero-v1.jpg"))
      66% center / cover no-repeat;
  color: var(--color-primary-dark);
  box-shadow: 0 24px 60px rgba(39, 61, 45, 0.18);
}
.today-hero h1 {
  margin: 8px 0;
  color: var(--color-primary-dark);
  font-size: clamp(34px, 5vw, 56px);
}
.today-hero p {
  max-width: 620px;
  color: #526257;
}
.today-hero__eyebrow,
.today-section-heading > div > span {
  color: #77a781;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.today-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 52px 0 18px;
}
.today-section-heading h2 {
  margin-top: 3px;
  font-size: 30px;
}
.today-section-heading > a {
  font-size: 14px;
  font-weight: 800;
}
.today-pets__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.today-pet-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.today-pet-card__main {
  display: grid;
  grid-template-columns: 58px 1fr 22px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: inherit;
}
.today-pet-card__main img {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  object-fit: cover;
  background: #eef4eb;
}
.today-pet-card__main span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.today-pet-card__main strong {
  font: 800 18px/1.2 var(--font-heading);
}
.today-pet-card__main small {
  margin-top: 5px;
  overflow: hidden;
  color: var(--color-text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-pet-card__main > .ui-icon {
  width: 19px;
  color: var(--color-text-tertiary);
}
.today-pet-card__notice,
.today-pet-card__ready {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 18px;
  border-top: 1px solid var(--color-border);
  background: #fff8e8;
  color: #855d13;
  font-size: 12px;
  font-weight: 700;
}
.today-pet-card__ready {
  gap: 7px;
  background: #eef7ef;
  color: #397145;
}
.today-pet-card__ready .ui-icon {
  width: 16px;
}
.today-priorities__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.today-priority {
  display: grid;
  grid-template-columns: 48px 1fr 20px;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #fff;
  color: inherit;
}
.today-priority i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #edf5ee;
  color: var(--color-primary-dark);
}
.today-priority i .ui-icon {
  width: 24px;
}
.today-priority > span {
  display: flex;
  flex-direction: column;
}
.today-priority strong {
  font: 800 15px/1.3 var(--font-heading);
}
.today-priority small {
  margin-top: 6px;
  color: var(--color-text-secondary);
  line-height: 1.35;
}
.today-priority > .ui-icon {
  width: 17px;
  color: var(--color-text-tertiary);
}
.today-priority--action {
  display: flex;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.today-priority__main {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 48px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: inherit;
}
.today-priority__main i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #edf5ee;
  color: var(--color-primary-dark);
}
.today-priority__main i .ui-icon {
  width: 24px;
}
.today-priority__main > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.today-priority__main > .ui-icon {
  width: 17px;
  color: var(--color-text-tertiary);
}
.today-priority--action > button {
  display: flex;
  flex: 0 0 184px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.today-priority--action > button .ui-icon {
  width: 15px;
}
.today-weather {
  margin-top: 18px;
}
.today-weather__card {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: linear-gradient(120deg, #f1f7ef, #fff);
}
.today-weather__card > i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: #dfeede;
  color: var(--color-primary-dark);
}
.today-weather__card > i .ui-icon {
  width: 27px;
}
.today-weather__card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.today-weather__card span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.today-weather__card strong {
  margin: 4px 0;
  font: 800 19px/1.25 var(--font-heading);
}
.today-weather__card p,
.today-weather__card small {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.today-weather__card > a {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.today-priority--warning i {
  background: #fff1cf;
  color: #9a6909;
}
.today-priority--success i {
  background: #e8f6eb;
  color: #397145;
}
.today-priority--celebration {
  border-color: #efcf82;
  background: linear-gradient(135deg, #fffaf0, #fff1f3);
  box-shadow: 0 12px 30px rgba(171, 113, 38, 0.1);
}
.today-priority--celebration i,
.today-priority--celebration .today-priority__main i {
  background: #ffe8a7;
  color: #9a5d08;
}
.today-services {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.today-places__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.today-places__list > a {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 88px;
  padding: 14px;
  border: 1px solid #e1e7e1;
  border-radius: 18px;
  background: #fff;
  color: #30483a;
  text-decoration: none;
}
.today-places__list > a > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #eef5ef;
  color: #3f7763;
}
.today-places__list > a > i .ui-icon {
  width: 21px;
}
.today-places__list span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.today-places__list strong {
  font-size: 13px;
}
.today-places__list small {
  color: #758078;
  font-size: 11px;
  line-height: 1.35;
}
.today-places__list > a > .ui-icon {
  width: 16px;
  color: #91a096;
}
.today-services > a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px;
  border-radius: 18px;
  background: #283b2d;
  color: #fff;
}
.today-services > a > .ui-icon {
  width: 25px;
  flex: 0 0 auto;
  color: #a9dbb2;
}
.today-services span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.today-services strong {
  font-size: 14px;
}
.today-services small {
  overflow: hidden;
  color: #c9d7cc;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-feed__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.today-section-action {
  padding: 10px 15px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.today-section-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.today-routines__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.today-routines__list--summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.today-routine-summary {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 19px;
  background: #fff;
}
.today-routine-summary > img {
  width: 52px;
  height: 52px;
  border-radius: 17px;
  object-fit: cover;
  background: var(--color-background);
}
.today-routine-summary > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.today-routine-summary strong {
  font: 800 15px/1.25 var(--font-heading);
}
.today-routine-summary small {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}
.today-routine-summary > button {
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.today-routine {
  display: grid;
  grid-template-columns: 44px 1fr 38px;
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid var(--color-border);
  border-radius: 19px;
  background: #fff;
}
.today-routine > i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #edf5ee;
  color: var(--color-primary-dark);
}
.today-routine > i .ui-icon {
  width: 22px;
}
.today-routine > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.today-routine > div span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.today-routine > div strong {
  margin: 3px 0;
  font: 800 15px/1.25 var(--font-heading);
}
.today-routine > div small {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.today-routine > button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 12px;
  background: #e8f6eb;
  color: #397145;
  cursor: pointer;
}
.today-routine > button .ui-icon {
  width: 19px;
}
.today-routine-empty {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px dashed #a7cbae;
  border-radius: 22px;
  background: #f5faf5;
}
.today-routine-empty > div {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 16px;
  background: #dfeede;
  color: var(--color-primary-dark);
}
.today-routine-empty span {
  display: flex;
  flex-direction: column;
}
.today-routine-empty p {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.today-routine-empty button {
  padding: 11px 15px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.routine-setup {
  width: min(620px, calc(100% - 24px));
  max-height: min(780px, calc(100vh - 30px));
  overflow: auto;
  padding: 26px;
}
.routine-setup header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.routine-setup header span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.routine-setup header h2 {
  margin-top: 3px;
}
.routine-setup header p {
  max-width: 430px;
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}
.routine-setup header button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}
.routine-setup__pet {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  font-size: 13px;
  font-weight: 800;
}
.routine-setup__pet select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
}
.routine-automation {
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid #cfe1d2;
  border-radius: 17px;
  background: linear-gradient(145deg, #f3faf4, #fff);
}
.routine-automation > div > span {
  display: block;
  margin-bottom: 3px;
  color: var(--color-primary-dark);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.routine-automation > div > strong {
  display: block;
  font-size: 14px;
}
.routine-automation p {
  margin: 5px 0 0;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}
.routine-automation details {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid #dce9de;
}
.routine-automation summary {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.routine-automation ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.routine-automation li {
  display: grid;
  grid-template-columns: minmax(70px, 0.45fr) minmax(90px, 0.65fr) 1.6fr;
  gap: 8px;
  align-items: baseline;
  font-size: 10px;
}
.routine-automation li span,
.routine-automation li small {
  color: var(--color-text-secondary);
}
.routine-automation footer {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}
.routine-automation footer span {
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7f3e9;
  color: var(--color-primary-dark);
  font-size: 9px;
  font-weight: 900;
}
.routine-automation footer span + span {
  background: #eee8fb;
  color: #6d4bc3;
}
.routine-template {
  display: grid;
  grid-template-columns: 48px 42px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 9px;
  padding: 13px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
}
.routine-template > input {
  appearance: none;
  position: relative;
  display: block;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 1px solid #b9c9bb;
  border-radius: 999px;
  background: #dce3dd;
  transition:
    background 0.18s ease,
    border-color 0.18s ease;
  cursor: pointer;
}
.routine-template > input::after {
  content: "✓";
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: transparent;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(26, 49, 32, 0.18);
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}
.routine-template > input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.routine-template > input:checked::after {
  color: var(--color-primary-dark);
  transform: translateX(20px);
}
.routine-template > input:focus-visible {
  outline: 3px solid rgba(91, 168, 108, 0.25);
  outline-offset: 2px;
}
.routine-template > input:disabled {
  opacity: 0.7;
  cursor: wait;
}
.routine-template > i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: #edf5ee;
  color: var(--color-primary-dark);
}
.routine-template > span {
  display: flex;
  flex-direction: column;
}
.routine-template strong {
  font-size: 13px;
}
.routine-template small {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.35;
}
.routine-template .routine-template__reason {
  color: #58715d;
}
.routine-template > em {
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
}
.routine-template--active {
  border-color: #b6d6bd;
  background: #f4faf5;
}
.routine-template--locked {
  border-color: #ded5f5;
  background: #faf8ff;
  cursor: pointer;
}
.routine-template--locked > input,
.routine-template--locked > input:disabled {
  opacity: 0.55;
  cursor: pointer;
}
.routine-template--locked > i {
  background: #eee8fb;
  color: #6d4bc3;
}
.routine-template--locked > em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #6d4bc3;
  color: #fff;
}
.routine-setup__note {
  margin: 14px 0;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.routine-setup__actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
}
.routine-setup__actions .btn {
  min-width: 0;
}
.routine-setup__actions .btn span {
  margin-left: 4px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #6d4bc3;
  color: #fff;
  font-size: 9px;
}
.premium-visual-modal .modal__content {
  width: min(520px, calc(100% - 24px));
  overflow: hidden;
  padding: 0 28px 28px;
  text-align: center;
}
.premium-visual-modal .modal__content > img {
  width: calc(100% + 56px);
  height: 230px;
  margin: 0 -28px 22px;
  object-fit: cover;
}
.premium-visual-modal .modal__content > span {
  color: #6d4bc3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.premium-visual-modal .modal__content h2 {
  margin: 8px 0;
}
.premium-visual-modal .modal__content p {
  margin: 0 0 20px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.premium-visual-modal .modal__close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.92);
}
.settings-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-color: #efc7c2;
  background: #fffafa;
}
.settings-danger-zone > div {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.settings-danger-zone > div > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: #fff0ee;
  color: #b94339;
}
.settings-danger-zone h2 {
  margin: 0 0 4px;
  font-size: 18px;
}
.settings-danger-zone p {
  max-width: 650px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.pet-delete-modal {
  position: relative;
  width: min(520px, calc(100% - 24px));
  padding: 30px;
  text-align: center;
}
.pet-delete-modal__icon {
  display: grid;
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 20px;
  background: #fff0ee;
  color: #b94339;
}
.pet-delete-modal__icon .ui-icon {
  width: 30px;
}
.pet-delete-modal > small {
  color: #b94339;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pet-delete-modal h2 {
  margin: 7px 0 9px;
}
.pet-delete-modal > p {
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.pet-delete-modal label {
  display: grid;
  gap: 7px;
  margin: 20px 0;
  text-align: left;
  font-size: 12px;
  font-weight: 750;
}
.pet-delete-modal label input {
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
}
.pet-delete-modal > div:last-child {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
@media (max-width: 640px) {
  .routine-setup__actions {
    grid-template-columns: 1fr;
  }
  .premium-visual-modal .modal__content > img {
    height: 190px;
  }
  .settings-danger-zone {
    align-items: stretch;
    flex-direction: column;
  }
  .pet-delete-modal > div:last-child {
    flex-direction: column-reverse;
  }
}
.today-article {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: #fff;
}
.today-article > a {
  display: grid;
  grid-template-columns: 180px 1fr;
  min-height: 190px;
  color: inherit;
}
.today-article img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #eef4eb;
}
.today-article a > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 20px;
}
.today-article div > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.today-article h3 {
  display: -webkit-box;
  margin: 8px 0;
  overflow: hidden;
  font-size: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.today-article p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.today-article b {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 12px;
  color: var(--color-primary-dark);
  font-size: 11px;
}
.today-article b .ui-icon {
  width: 14px;
}
.today-feed__more {
  display: block;
  min-width: 180px;
  margin: 24px auto 0;
  padding: 12px 20px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  color: var(--color-primary-dark);
  font-weight: 800;
  cursor: pointer;
}
.today-feed__more[hidden] {
  display: none;
}
.today-empty {
  grid-column: 1/-1;
  padding: 36px;
  border: 1px dashed var(--color-border);
  border-radius: 22px;
  background: #fff;
  text-align: center;
}
.today-empty > div {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: #edf5ee;
  color: var(--color-primary-dark);
}
.today-empty__illustration {
  width: min(230px, 68vw);
  height: 180px;
  object-fit: contain;
  margin: -18px auto 0;
}
.today-empty .ui-icon {
  width: 26px;
}
.today-empty p {
  margin: 8px auto 16px;
  color: var(--color-text-secondary);
}

@media (max-width: 800px) {
  .today-shell {
    width: min(100% - 28px, 680px);
    padding-top: 22px;
  }
  .today-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 28px;
    min-height: 420px;
    background:
      linear-gradient(
        180deg,
        rgba(250, 248, 245, 0.98) 0%,
        rgba(250, 248, 245, 0.9) 46%,
        rgba(250, 248, 245, 0.06) 72%
      ),
      var(--pet-visual-image, url("/assets/media/dashboard/today-hero-v1.jpg"))
        70% center / cover no-repeat;
  }
  .today-pets__list,
  .today-priorities__grid,
  .today-routines__list,
  .today-feed__list {
    grid-template-columns: 1fr;
  }
  .today-services {
    grid-template-columns: 1fr;
  }
  .today-places__list {
    grid-template-columns: 1fr;
  }
  .today-priority--action {
    align-items: stretch;
    flex-direction: column;
  }
  .today-priority--action > button {
    flex-basis: auto;
    min-height: 48px;
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }
  .today-weather__card {
    grid-template-columns: 46px 1fr;
  }
  .today-weather__card > i {
    width: 46px;
    height: 46px;
  }
  .today-weather__card > a {
    grid-column: 2;
  }
}
@media (max-width: 520px) {
  .today-shell {
    width: calc(100% - 20px);
  }
  .today-hero {
    padding: 24px 20px;
    border-radius: 24px;
  }
  .today-section-heading {
    margin-top: 38px;
  }
  .today-section-heading h2 {
    font-size: 26px;
  }
  .today-article > a {
    grid-template-columns: 110px 1fr;
    min-height: 170px;
  }
  .today-article a > div {
    padding: 15px;
  }
  .today-article p {
    display: none;
  }
  .today-routine-empty {
    grid-template-columns: 44px 1fr;
  }
  .today-routine-empty > button {
    grid-column: 1/-1;
  }
  .routine-template {
    grid-template-columns: 48px 38px 1fr;
  }
  .routine-template > em {
    grid-column: 3;
    justify-self: start;
  }
  .today-routine-summary {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .today-routine-summary > img {
    width: 48px;
    height: 48px;
  }
  .today-routine-summary > button,
  .today-routine-summary > .today-routine__readonly {
    grid-column: 1/-1;
    width: 100%;
  }
  .today-routine-summary > button {
    min-height: 44px;
  }
}

/* ========== ADMIN PLATFORM ========== */
.admin-page {
  min-height: 100vh;
  background: #f3f5f2;
}
.admin-shell {
  width: min(1280px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 90px;
}
.admin-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 34px;
  border-radius: 28px;
  background: #1f3024;
  color: #fff;
}
.admin-hero h1 {
  margin: 8px 0;
  color: #fff;
  font-size: clamp(34px, 5vw, 54px);
}
.admin-hero p {
  color: #c9d6cc;
}
.admin-hero > div:first-child > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a9d7b1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-hero span .ui-icon {
  width: 18px;
}
.admin-role {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 800;
}
.admin-tabs {
  display: flex;
  gap: 7px;
  margin: 20px 0;
  padding: 7px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}
.admin-tabs button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.admin-tabs button.active {
  background: #263b2c;
  color: #fff;
}
.admin-tabs b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: #eef4eb;
  color: #416f4a;
  font-size: 10px;
}
.admin-tabs button.active b {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.admin-panel {
  min-height: 420px;
}
.admin-loading,
.admin-error,
.admin-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 30px;
  border: 1px dashed var(--color-border);
  border-radius: 22px;
  background: #fff;
  text-align: center;
}
.admin-error .ui-icon,
.admin-empty .ui-icon {
  width: 34px;
  color: var(--color-primary-dark);
}
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.admin-metrics article {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 21px;
  background: #fff;
}
.admin-metrics span {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.admin-metrics strong {
  margin-top: 12px;
  font: 900 38px/1 var(--font-heading);
}
.admin-metrics small {
  margin-top: auto;
  color: var(--color-text-tertiary);
}
.admin-overview-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 16px;
  margin-top: 16px;
}
.admin-overview-grid > section {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: #fff;
}
.admin-overview-grid h2 {
  margin-bottom: 18px;
  font-size: 22px;
}
.admin-overview-grid button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
}
.admin-overview-grid button strong {
  color: var(--color-primary-dark);
}
.admin-event-stats {
  display: grid;
  gap: 9px;
}
.admin-event-stats div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #f4f7f2;
}
.admin-event-stats span {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-muted {
  color: var(--color-text-secondary);
}
.admin-panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 30px 0 16px;
}
.admin-panel-heading span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-panel-heading h2 {
  font-size: 28px;
}
.admin-panel-heading > strong {
  font: 900 30px/1 var(--font-heading);
}
.admin-queue {
  display: grid;
  gap: 12px;
}
.admin-queue-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 21px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #fff;
}
.admin-queue-item > div:first-child > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-queue-item h3 {
  margin: 5px 0;
  font-size: 18px;
}
.admin-queue-item p {
  max-width: 720px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.admin-queue-item small {
  display: block;
  margin-top: 8px;
  color: var(--color-text-tertiary);
}
.admin-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.admin-actions label {
  width: 100%;
  color: var(--color-text-secondary);
  font-size: 11px;
  text-align: right;
}
.admin-actions button {
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}
.admin-actions .approve {
  border-color: #b8dabb;
  background: #edf7ee;
  color: #34703e;
}
.admin-actions .reject {
  border-color: #edc5c1;
  background: #fff1ef;
  color: #9b3029;
}
.admin-audit {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #fff;
}
.admin-audit article {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--color-border);
}
.admin-audit time,
.admin-audit small,
.admin-audit span {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.admin-audit article > div {
  display: flex;
  flex-direction: column;
}
.admin-user-metrics,
.admin-user-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.admin-user-metrics article,
.admin-user-stat-grid > div {
  display: grid;
  gap: 4px;
  padding: 17px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
}
.admin-user-metrics span,
.admin-user-stat-grid span {
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.admin-user-metrics strong,
.admin-user-stat-grid strong {
  font-size: 24px;
}
.admin-user-metrics small {
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.admin-user-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 170px 170px auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
}
.admin-user-filters label,
.admin-user-plan-form label {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.admin-user-filters input,
.admin-user-filters select,
.admin-user-plan-form input,
.admin-user-plan-form select {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: #fff;
  color: var(--color-text-primary);
  font: inherit;
}
.admin-users-table {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}
.admin-users-table__head,
.admin-user-row {
  display: grid;
  grid-template-columns: minmax(230px, 1.4fr) 0.8fr 0.8fr 0.75fr 0.7fr;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
}
.admin-users-table__head {
  background: #f3f5f1;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-user-row {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: #fff;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-user-row:hover {
  background: #f8faf7;
}
.admin-user-row > span,
.admin-user-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.admin-user-identity {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.admin-user-identity img,
.admin-user-detail-heading img,
.admin-user-pets img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #edf2eb;
}
.admin-user-row strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-user-row small {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-plan-badge {
  width: max-content;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eef1ed;
  color: #536057;
  font-size: 10px;
}
.admin-plan-badge--plus {
  background: #e3f3e5;
  color: #24643a;
}
.admin-user-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.admin-user-pagination button,
.admin-user-back {
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}
.admin-user-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.admin-user-back {
  margin-bottom: 14px;
}
.admin-user-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 20px;
  background: #263b2c;
  color: #fff;
}
.admin-user-detail-heading__identity {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-user-detail-heading img {
  width: 58px;
  height: 58px;
}
.admin-user-detail-heading span,
.admin-user-detail-heading p {
  color: #cfdbd1;
  font-size: 11px;
}
.admin-user-detail-heading h2 {
  margin: 3px 0;
}
.admin-user-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.admin-user-card {
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}
.admin-user-card > header {
  margin-bottom: 15px;
}
.admin-user-card > header > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-user-card > header h3 {
  margin: 4px 0;
}
.admin-user-card > header p {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.admin-user-card dl {
  display: grid;
  gap: 9px;
}
.admin-user-card dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.admin-user-card dt {
  color: var(--color-text-secondary);
}
.admin-user-card dd {
  text-align: right;
}
.admin-user-plan-form {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
}
.admin-user-plan-form .wide,
.admin-user-plan-form button,
.admin-user-plan-form p {
  grid-column: 1/-1;
}
.admin-user-plan-form p {
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.admin-user-features,
.admin-user-pets,
.admin-subscription-history,
.admin-user-timeline {
  display: grid;
  gap: 8px;
}
.admin-user-features > div,
.admin-user-pets > div,
.admin-subscription-history article,
.admin-user-timeline article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f4f6f2;
}
.admin-user-features > div span,
.admin-user-features > div small,
.admin-user-pets span,
.admin-subscription-history article > div,
.admin-user-timeline article > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}
.admin-user-features small,
.admin-user-pets small,
.admin-subscription-history small,
.admin-user-timeline small,
.admin-user-timeline time {
  color: var(--color-text-secondary);
  font-size: 10px;
}
.admin-subscription-history article {
  align-items: flex-start;
}
.admin-subscription-history article > p {
  max-width: 35%;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.admin-user-timeline {
  max-height: 620px;
  overflow: auto;
}
.admin-user-timeline article {
  align-items: flex-start;
}
.admin-user-timeline time {
  width: 130px;
  flex: 0 0 auto;
}
.admin-user-timeline .is-registration {
  background: #e8f4e9;
}
@media (max-width: 900px) {
  .admin-user-metrics,
  .admin-user-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-user-filters,
  .admin-user-detail-grid {
    grid-template-columns: 1fr;
  }
  .admin-users-table__head {
    display: none;
  }
  .admin-user-row {
    grid-template-columns: 1fr 1fr;
  }
  .admin-user-row .admin-user-identity {
    grid-column: 1/-1;
  }
}
@media (max-width: 560px) {
  .admin-user-row,
  .admin-user-plan-form {
    grid-template-columns: 1fr;
  }
  .admin-user-plan-form .wide,
  .admin-user-plan-form button,
  .admin-user-plan-form p {
    grid-column: auto;
  }
  .admin-user-detail-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-user-timeline article {
    flex-direction: column;
  }
  .admin-user-timeline time {
    width: auto;
  }
}
.admin-review-form {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.3fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.admin-review-form label {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
}
.admin-review-form select,
.admin-review-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 9px;
  background: #fff;
  color: var(--color-text-primary);
  font: inherit;
  resize: vertical;
}
.admin-review-status {
  grid-column: 1/-1;
  color: var(--color-text-tertiary);
  font-size: 11px;
}
.admin-denied {
  display: grid;
  min-height: 70vh;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 30px;
  text-align: center;
}
.admin-denied > .ui-icon {
  width: 54px;
  color: var(--color-primary-dark);
}
.admin-search {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.admin-search input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
}
.admin-clinics {
  display: grid;
  gap: 16px;
}
.admin-clinic-form {
  padding: 22px;
  border: 1px solid #bad6bf;
  border-radius: 22px;
  background: #fff;
}
.admin-clinic-form.needs-review {
  border-color: #e8c87d;
  box-shadow: inset 4px 0 #e8b94d;
}
.admin-clinic-form > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.admin-clinic-form header span {
  color: #8b650f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-clinic-form header h3 {
  margin: 4px 0;
  font-size: 20px;
}
.admin-clinic-form header small {
  color: var(--color-text-secondary);
}
.admin-clinic-form header > b {
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff0ee;
  color: #a03831;
  font-size: 10px;
  text-transform: uppercase;
}
.admin-clinic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-clinic-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.admin-clinic-grid label.wide {
  grid-column: 1/-1;
}
.admin-clinic-grid input,
.admin-clinic-grid textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: #fafbf9;
  color: var(--color-text);
  font: inherit;
}
.admin-clinic-grid textarea {
  min-height: 80px;
  resize: vertical;
}
.admin-clinic-flags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.admin-clinic-flags label {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.admin-clinic-flags .btn {
  margin-left: auto;
}
.admin-queue-item--support {
  align-items: flex-start;
}
.admin-support-thread {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.admin-support-thread section {
  padding: 12px;
  border-radius: 12px;
  background: #f3f6f1;
}
.admin-support-thread header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.admin-support-thread time {
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.admin-support-thread section p {
  margin-top: 5px;
  color: var(--color-text);
}
.admin-support-reply {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-top: 12px;
}
.admin-support-reply textarea {
  min-height: 76px;
  flex: 1;
  padding: 11px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  resize: vertical;
}
.admin-content-filter {
  display: flex;
  gap: 7px;
  margin-bottom: 15px;
  overflow-x: auto;
}
.admin-content-filter button {
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.admin-content-filter button.active {
  border-color: #345e3c;
  background: #263b2c;
  color: #fff;
}
.admin-content-list {
  display: grid;
  gap: 11px;
}
.admin-content-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}
.admin-content-card > div:first-child > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-content-card h3 {
  margin: 5px 0;
  font-size: 18px;
}
.admin-content-card p {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.admin-content-card small {
  display: block;
  margin-top: 8px;
  color: var(--color-text-tertiary);
}
.admin-alpha-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 28px 0 18px;
}
.admin-alpha-heading > div > span,
.admin-alpha-card header span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-alpha-heading h2 {
  margin: 3px 0 5px;
  font-size: 32px;
}
.admin-alpha-heading p {
  max-width: 720px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.admin-alpha-heading label {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
}
.admin-alpha-heading select {
  min-width: 145px;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
}
.admin-alpha-metrics article:first-child {
  border-color: #a7c9ad;
  background: #edf6ee;
}
.admin-alpha-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.admin-alpha-card,
.admin-alpha-definition {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: #fff;
}
.admin-alpha-card > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.admin-alpha-card header h3 {
  margin-top: 3px;
  font-size: 22px;
}
.admin-alpha-card > header > small {
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.admin-alpha-daily {
  display: grid;
  grid-template-columns: repeat(14, minmax(18px, 1fr));
  align-items: end;
  gap: 7px;
  min-height: 190px;
}
.admin-alpha-daily > div {
  display: grid;
  align-items: end;
  gap: 6px;
  min-width: 0;
  text-align: center;
}
.admin-alpha-daily span {
  overflow: hidden;
  color: var(--color-text-tertiary);
  font-size: 8px;
  text-overflow: clip;
  white-space: nowrap;
}
.admin-alpha-daily i {
  display: flex;
  height: 120px;
  align-items: flex-end;
  overflow: hidden;
  border-radius: 7px;
  background: #eef2ec;
}
.admin-alpha-daily b {
  display: block;
  width: 100%;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, #83b98c, #315c3a);
}
.admin-alpha-daily strong {
  font-size: 11px;
}
.admin-alpha-loops {
  display: grid;
  gap: 14px;
}
.admin-alpha-loops > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(90px, 1fr) 40px;
  align-items: center;
  gap: 12px;
}
.admin-alpha-loops span {
  font-size: 12px;
  font-weight: 700;
}
.admin-alpha-loops span small {
  display: block;
  margin-top: 2px;
  color: var(--color-text-tertiary);
  font-size: 9px;
  font-weight: 500;
}
.admin-alpha-loops i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2ec;
}
.admin-alpha-loops i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #6fa77a;
}
.admin-alpha-loops > div > strong {
  font-size: 12px;
  text-align: right;
}
.admin-alpha-cohorts {
  margin-top: 16px;
}
.admin-alpha-table-wrap {
  overflow-x: auto;
}
.admin-alpha-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  white-space: nowrap;
}
.admin-alpha-table-wrap th,
.admin-alpha-table-wrap td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
}
.admin-alpha-table-wrap th:first-child,
.admin-alpha-table-wrap td:first-child {
  text-align: left;
}
.admin-alpha-table-wrap th {
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
}
.admin-alpha-table-wrap td small {
  margin-left: 4px;
  color: var(--color-text-tertiary);
  font-size: 9px;
}
.admin-alpha-empty {
  min-height: 180px;
}
.admin-alpha-species {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.admin-alpha-species div {
  display: grid;
  padding: 14px;
  border-radius: 14px;
  background: #f2f6f0;
}
.admin-alpha-species span {
  font-size: 12px;
  font-weight: 800;
}
.admin-alpha-species strong {
  margin-top: 8px;
  font-size: 13px;
}
.admin-alpha-species small {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.admin-alpha-definition {
  background: #263b2c;
  color: #fff;
}
.admin-alpha-definition > strong {
  display: block;
  margin-bottom: 16px;
  font: 800 22px/1.1 var(--font-heading);
}
.admin-alpha-definition p {
  margin-top: 10px;
  color: #cedacf;
  font-size: 12px;
  line-height: 1.6;
}
.admin-alpha-definition p b {
  color: #fff;
}
.support-replies {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.support-replies section {
  padding: 14px;
  border-radius: 14px;
  background: #edf5ee;
}
.support-replies header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.support-replies header .ui-icon {
  width: 16px;
  color: var(--color-primary-dark);
}
.support-replies header time {
  margin-left: auto;
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.support-replies section p {
  margin-top: 7px;
  color: var(--color-text);
}

@media (max-width: 900px) {
  .admin-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .admin-overview-grid {
    grid-template-columns: 1fr;
  }
  .admin-alpha-grid {
    grid-template-columns: 1fr;
  }
  .admin-queue-item {
    grid-template-columns: 1fr;
  }
  .admin-actions {
    justify-content: flex-start;
  }
  .admin-actions label {
    text-align: left;
  }
}
@media (max-width: 560px) {
  .admin-shell {
    width: calc(100% - 20px);
    padding-top: 14px;
  }
  .admin-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 20px;
  }
  .admin-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .admin-metrics article {
    min-height: 125px;
    padding: 16px;
  }
  .admin-metrics strong {
    font-size: 30px;
  }
  .admin-alpha-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-alpha-heading select {
    width: 100%;
  }
  .admin-alpha-card,
  .admin-alpha-definition {
    padding: 18px;
  }
  .admin-alpha-daily {
    gap: 3px;
  }
  .admin-alpha-daily span {
    display: none;
  }
  .admin-alpha-loops > div {
    grid-template-columns: minmax(105px, 0.8fr) minmax(60px, 1fr) 32px;
    gap: 8px;
  }
  .admin-alpha-species {
    grid-template-columns: 1fr;
  }
  .admin-audit article {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .admin-review-form {
    grid-template-columns: 1fr;
  }
  .admin-search {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-clinic-grid {
    grid-template-columns: 1fr;
  }
  .admin-clinic-grid label.wide {
    grid-column: auto;
  }
  .admin-clinic-flags {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-clinic-flags .btn {
    width: 100%;
    margin-left: 0;
  }
  .admin-support-reply {
    align-items: stretch;
    flex-direction: column;
  }
  .admin-content-card {
    grid-template-columns: 1fr;
  }
}

/* Shared care calendar */
.care-calendar {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 112px;
}
.calendar-hero,
.calendar-toolbar,
.calendar-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.calendar-hero {
  margin-bottom: 24px;
  padding: 30px;
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: linear-gradient(135deg, #f5fbf6, #fff8ef);
}
.calendar-hero > div > span,
.calendar-section-title > span {
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.calendar-hero h1 {
  margin: 6px 0 8px;
  font-size: clamp(30px, 4vw, 46px);
}
.calendar-hero p,
.calendar-note p,
.calendar-agenda-empty p,
.calendar-empty p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.calendar-toolbar {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
}
.calendar-toolbar__month {
  display: grid;
  grid-template-columns: 40px minmax(160px, auto) 40px;
  align-items: center;
  gap: 6px;
  text-align: center;
  text-transform: capitalize;
}
.calendar-toolbar__month button,
.calendar-day {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.calendar-day--birthday {
  z-index: 1;
  border-radius: 14px;
  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(236, 135, 153, 0.24) 0 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 73% 34%,
      rgba(239, 190, 73, 0.28) 0 3px,
      transparent 4px
    ),
    linear-gradient(145deg, #fff9df, #fff0f3);
  box-shadow: inset 0 0 0 1px #edcf83;
}
.calendar-day--birthday:hover {
  background:
    radial-gradient(
      circle at 86% 18%,
      rgba(236, 135, 153, 0.3) 0 4px,
      transparent 5px
    ),
    radial-gradient(
      circle at 73% 34%,
      rgba(239, 190, 73, 0.34) 0 3px,
      transparent 4px
    ),
    linear-gradient(145deg, #fff5cf, #ffe8ee);
}
.calendar-day--birthday > span {
  background: #ad6d12;
  color: #fff;
}
.calendar-day--birthday > em {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 5px;
  color: #8a5510;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}
.calendar-day--birthday > em .ui-icon {
  width: 12px;
  height: 12px;
}
.calendar-toolbar__month button {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
}
.calendar-toolbar__month button:hover,
.calendar-day:not(.calendar-day--birthday):hover {
  background: var(--color-background);
}
.calendar-toolbar label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
}
.calendar-toolbar select {
  min-width: 180px;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
}
.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.75fr);
  gap: 20px;
  align-items: start;
}
.calendar-month,
.calendar-agenda {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.calendar-month {
  position: sticky;
  top: 88px;
  overflow: hidden;
}
.calendar-weekdays,
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.calendar-weekdays {
  padding: 14px 12px 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.calendar-days {
  padding: 0 12px 12px;
}
.calendar-day {
  position: relative;
  display: grid;
  min-height: 78px;
  padding: 10px;
  border-top: 1px solid var(--color-border);
  text-align: left;
}
.calendar-day > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  font-weight: 800;
}
.calendar-day--today > span {
  background: var(--color-primary);
  color: #fff;
}
.calendar-day--outside {
  color: var(--color-text-muted);
  opacity: 0.55;
}
.calendar-day > i {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}
.calendar-day > small {
  position: absolute;
  right: 8px;
  bottom: 8px;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.calendar-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
}
.calendar-dot--danger {
  background: #dc5f5f;
}
.calendar-dot--success {
  background: #5ba86c;
}
.calendar-dot--medical {
  background: #6e7fce;
}
.calendar-dot--birthday {
  width: 9px;
  height: 9px;
  background: #d9902e;
  box-shadow: 0 0 0 3px #fff1bd;
}
.calendar-agenda {
  padding: 22px;
}
.calendar-section-title h2 {
  margin: 5px 0 18px;
}
.calendar-agenda-day {
  scroll-margin-top: 92px;
}
.calendar-agenda-day + .calendar-agenda-day {
  margin-top: 24px;
}
.calendar-agenda-day > header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}
.calendar-agenda-day > header span {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-background);
}
.calendar-item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 36px;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  padding: 12px;
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  background: var(--color-background);
}
.calendar-item > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  color: var(--color-primary);
}
.calendar-item > div {
  min-width: 0;
}
.calendar-item > div > span,
.calendar-item > div > small {
  display: block;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.calendar-item > div > strong {
  display: block;
  overflow: hidden;
  margin: 3px 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-item > button,
.calendar-item > a {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: var(--color-primary);
  cursor: pointer;
}
.calendar-item--danger {
  border-left-color: #dc5f5f;
}
.calendar-item--danger > i {
  color: #c44949;
}
.calendar-item--medical {
  border-left-color: #6e7fce;
}
.calendar-item--birthday {
  border: 1px solid #efd38b;
  border-left: 4px solid #d9902e;
  background: linear-gradient(135deg, #fff9df, #fff0f3);
  box-shadow: 0 8px 22px rgba(173, 109, 18, 0.09);
}
.calendar-item--birthday > i {
  background: #fff3c7;
  color: #a9680d;
}
.calendar-item--birthday > div > span {
  color: #986014;
  font-weight: 800;
}
.calendar-item--completed {
  border-left-color: #5ba86c;
  opacity: 0.72;
}
.calendar-item--completed > div > strong {
  text-decoration: line-through;
}
.calendar-note,
.calendar-empty,
.calendar-agenda-empty {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.calendar-note {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 20px;
}
.calendar-note > .ui-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--color-primary);
}
.calendar-note > div {
  flex: 1;
}
.calendar-note > a {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  font-weight: 800;
  white-space: nowrap;
}
.calendar-empty,
.calendar-agenda-empty {
  display: grid;
  justify-items: center;
  padding: 48px 24px;
  border-radius: 24px;
  text-align: center;
}
.calendar-empty > .ui-icon,
.calendar-agenda-empty > .ui-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  color: var(--color-primary);
}
.calendar-empty h1,
.calendar-empty h2,
.calendar-agenda-empty strong {
  margin: 0 0 8px;
}
.calendar-empty .btn {
  margin-top: 18px;
}
.today-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.today-section-actions .today-section-action {
  display: flex;
  align-items: center;
  gap: 5px;
}
.today-section-actions .ui-icon {
  width: 17px;
  height: 17px;
}
@media (max-width: 860px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }
  .calendar-month {
    position: static;
  }
}
@media (max-width: 640px) {
  .care-calendar {
    width: min(100% - 20px, 560px);
    padding-top: 14px;
  }
  .calendar-hero,
  .calendar-toolbar,
  .calendar-note {
    align-items: stretch;
    flex-direction: column;
  }
  .calendar-hero {
    padding: 22px;
  }
  .calendar-toolbar__month {
    width: 100%;
    grid-template-columns: 40px 1fr 40px;
  }
  .calendar-toolbar label {
    justify-content: space-between;
  }
  .calendar-toolbar select {
    min-width: 0;
    width: 58%;
  }
  .calendar-day {
    min-height: 56px;
    padding: 6px 4px;
  }
  .calendar-day > span {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .calendar-day > small {
    display: none;
  }
  .calendar-agenda {
    padding: 16px;
  }
  .calendar-note > a {
    white-space: normal;
  }
  .today-section-heading {
    align-items: flex-start;
  }
  .today-section-actions {
    align-items: flex-end;
    flex-direction: column;
  }
}

/* Daily observations */
.today-checkins {
  margin-top: 18px;
}
.today-checkins .today-section-heading > div > p {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.today-checkins__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.today-checkin-card,
.today-checkins__empty {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 19px;
  background: #fff;
}
.today-checkin-card.is-complete {
  border-color: #b9d9bf;
  background: #f5faf5;
}
.today-checkin-card > img {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  object-fit: cover;
}
.today-checkin-card > div,
.today-checkins__empty > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.today-checkin-card strong,
.today-checkins__empty strong {
  font: 800 15px/1.25 var(--font-heading);
}
.today-checkin-card small,
.today-checkins__empty small {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.35;
}
.today-checkin-card > button,
.today-checkins__empty > a {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.today-checkin-card.is-complete > button {
  background: #fff;
  color: var(--color-primary-dark);
}
.today-checkin-card > button .ui-icon {
  width: 14px;
}
.today-checkins__empty {
  grid-column: 1 / -1;
  border-style: dashed;
}
.today-checkins__empty > .ui-icon {
  width: 28px;
  color: var(--color-primary-dark);
}
.today-section-action .ui-icon {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
.care-observations {
  padding: 24px;
  border: 1px solid #e2e9e1;
  border-radius: 24px;
  background: #fff;
}
.care-observation-trends {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.care-observation-trends article {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border-radius: 16px;
  background: #f3f8f3;
}
.care-observation-trends i,
.care-observation > i {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 11px;
  background: #e1f0e3;
  color: var(--color-primary-dark);
}
.care-observation-trends .ui-icon,
.care-observation > i .ui-icon {
  width: 18px;
  height: 18px;
}
.care-observation-trends span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.care-observation-trends small,
.care-observation-trends em {
  color: var(--color-text-secondary);
  font-size: 10px;
  font-style: normal;
}
.care-observation-trends strong {
  margin: 2px 0;
  font-size: 15px;
}
.care-signal-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.care-signal-chart {
  padding: 13px;
  border: 1px solid #e2e9e1;
  border-radius: 16px;
  background: #fbfdfb;
}
.care-signal-chart > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.care-signal-chart span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.care-signal-chart span .ui-icon {
  width: 15px;
}
.care-signal-chart strong {
  color: #3d7b4a;
  font-size: 11px;
}
.care-signal-chart.has-change strong {
  color: #a06a19;
}
.care-signal-chart svg {
  width: 100%;
  height: 62px;
}
.care-signal-chart path {
  fill: none;
  stroke: #e3e9e2;
  stroke-width: 1;
}
.care-signal-chart polyline {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.care-signal-chart.has-change polyline {
  stroke: #d49a3d;
}
.care-signal-chart > small {
  color: var(--color-text-secondary);
  font-size: 9px;
}
.care-observation-history {
  border-top: 1px solid #edf0ec;
}
.care-observation-history summary {
  padding: 13px 0;
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.care-observation-list {
  display: grid;
}
.care-observation {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-top: 1px solid #edf0ec;
}
.care-observation:first-child {
  border-top: 0;
}
.care-observation > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.care-observation > div > span,
.care-observation small {
  color: var(--color-text-secondary);
  font-size: 10px;
}
.care-observation strong {
  margin: 2px 0;
  font-size: 13px;
}
.care-observation p {
  margin: 1px 0 3px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}
.care-observation > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: #f4f6f3;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.care-observation > button:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.care-observation > button .ui-icon {
  width: 16px;
  height: 16px;
}
.care-observations__note {
  display: flex;
  gap: 7px;
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid #edf0ec;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.45;
}
.care-observations__note .ui-icon {
  width: 15px;
  flex: 0 0 15px;
}
.observation-modal {
  width: min(620px, calc(100% - 24px));
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
}
.observation-modal .modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}
.observation-modal .modal__close,
.care-modal .modal__close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.observation-modal .modal__close .ui-icon,
.care-modal .modal__close .ui-icon {
  width: 18px;
}
.observation-modal .modal__header h2 {
  margin: 2px 0 0;
  font: 800 22px/1.2 var(--font-heading);
}
.observation-modal .modal__header span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.observation-modal__body {
  display: grid;
  gap: 16px;
  max-height: min(68vh, 660px);
  overflow-y: auto;
  padding: 20px 24px;
}
.observation-purpose {
  display: flex;
  gap: 11px;
  padding: 14px;
  border-radius: 15px;
  background: #edf7ee;
}
.observation-purpose > .ui-icon {
  width: 22px;
  flex: 0 0 22px;
  color: var(--color-primary-dark);
}
.observation-purpose strong,
.observation-purpose p {
  display: block;
  margin: 0;
}
.observation-purpose p {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.observation-type-hint {
  display: flex;
  gap: 7px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.observation-type-hint .ui-icon {
  width: 15px;
  flex: 0 0 15px;
}
.daily-checkin__intro {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.daily-checkin__questions {
  display: grid;
  gap: 14px;
}
.daily-checkin__questions fieldset {
  padding: 13px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
}
.daily-checkin__questions legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-weight: 800;
}
.daily-checkin__questions legend .ui-icon {
  width: 17px;
  color: var(--color-primary-dark);
}
.daily-checkin__choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.daily-checkin__choices label {
  position: relative;
}
.daily-checkin__choices input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.daily-checkin__choices span {
  display: grid;
  min-height: 39px;
  place-items: center;
  padding: 7px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  color: var(--color-text-secondary);
  font-size: 10px;
  text-align: center;
  cursor: pointer;
}
.daily-checkin__choices input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 800;
}
.observation-modal__pet,
.observation-modal fieldset,
.observation-modal .form-group {
  display: grid;
  gap: 7px;
  margin: 0;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 750;
}
.observation-modal fieldset {
  padding: 0;
  border: 0;
}
.observation-modal legend {
  margin-bottom: 8px;
}
.observation-modal select,
.observation-modal input,
.observation-modal textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
}
.observation-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.observation-types button {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  padding: 9px 6px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: #fff;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
}
.observation-types button:hover,
.observation-types button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.observation-types .ui-icon {
  width: 19px;
  height: 19px;
}
.observation-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.observation-number span {
  min-width: 50px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.observation-photo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px dashed #cbd9cb;
  border-radius: 14px;
  background: #f8faf7;
  cursor: pointer;
}
.observation-photo > .ui-icon {
  width: 22px;
  color: var(--color-primary-dark);
}
.observation-photo span {
  display: flex;
  flex-direction: column;
}
.observation-photo small {
  color: var(--color-text-secondary);
  font-size: 10px;
}
.observation-photo input {
  width: auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  font-size: 10px;
}
.observation-modal__note {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border-radius: 13px;
  background: #f4f7f3;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}
.observation-modal__note .ui-icon {
  width: 17px;
  flex: 0 0 17px;
}
@media (max-width: 640px) {
  .today-priorities .today-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .care-observation-trends {
    grid-template-columns: 1fr;
  }
  .today-checkins__list,
  .care-signal-charts {
    grid-template-columns: 1fr;
  }
  .observation-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .observation-modal__body {
    padding: 16px;
  }
  .observation-photo {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .observation-photo input {
    width: 100%;
    margin-left: 33px;
  }
}

@media (max-width: 760px) {
  .account-page {
    width: calc(100% - 20px);
    padding-top: 12px;
  }
  .account-hero,
  .account-subscription {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
  }
  .account-hero__avatar {
    width: 64px;
    height: 64px;
    border-radius: 19px;
  }
  .account-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .account-grid {
    grid-template-columns: 1fr;
  }
  .account-settings__grid {
    grid-template-columns: 1fr;
  }
  .account-footer-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .account-verification {
    grid-template-columns: auto 1fr;
  }
  .account-verification .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .billing-shell {
    width: calc(100% - 20px);
    padding-top: 12px;
  }

  .billing-hero,
  .billing-current,
  .billing-history {
    padding: 20px;
  }

  .billing-current {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-payment {
    grid-template-columns: minmax(0, 1fr);
  }

  .billing-payment > div {
    justify-content: space-between;
  }

  .billing-payment > div:nth-child(2) {
    justify-content: space-between;
  }
}

/* ============================================================
   PROFILE AND PET SETTINGS
   ============================================================ */

.settings-page {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 calc(var(--tab-bar-height) + 56px);
}

.settings-page__intro {
  max-width: 720px;
  margin-bottom: 26px;
}
.settings-page__eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.settings-page__intro h1 {
  margin-bottom: 8px;
  font-size: clamp(31px, 5vw, 48px);
}
.settings-page__intro p {
  max-width: 650px;
}
.settings-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.settings-main,
.settings-form {
  display: grid;
  min-width: 0;
  gap: 16px;
}

.settings-avatar-card {
  position: sticky;
  top: calc(var(--header-height) + 18px);
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
}

.settings-avatar-card > img {
  width: 154px;
  height: 154px;
  border: 4px solid #e4f2e5;
  border-radius: 42px;
  object-fit: cover;
  background: var(--color-surface-hover);
}
.settings-avatar-card > p {
  color: var(--color-text-tertiary);
  font-size: 11px;
  text-align: center;
}
.settings-avatar-card .btn .ui-icon {
  width: 18px;
  height: 18px;
}

.settings-card {
  padding: 26px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
}
.settings-card--future {
  background: linear-gradient(145deg, #f7fbf7, #f4f1fb);
}
.settings-card__heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.settings-card__heading > span:not(.settings-page__eyebrow) {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 14px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.12);
}
.settings-card__heading > span > .ui-icon {
  width: 21px;
  height: 21px;
}
.settings-card__heading h2 {
  margin-bottom: 3px;
  font-size: 21px;
}
.settings-card__heading p {
  font-size: 13px;
  line-height: 1.5;
}
.settings-card__heading .settings-page__eyebrow {
  margin-bottom: 5px;
}

.settings-fields {
  display: grid;
  gap: 18px;
}
.settings-fields--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-fields__wide {
  grid-column: 1 / -1;
}
.settings-fields--spaced {
  margin-top: 22px;
}
.settings-fields[hidden] {
  display: none;
}
.settings-feature-toggle--medical {
  margin-top: 22px;
}
.settings-feature-toggle--medical > small {
  display: block;
  margin: 8px 4px 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.settings-fields .form-group {
  min-width: 0;
  margin: 0;
}
.settings-fields label,
.settings-card > .form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 750;
}
.settings-fields textarea {
  min-height: 98px;
  resize: vertical;
}
.settings-fields .form-hint {
  display: block;
  margin-top: 6px;
}

.settings-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px;
  border-radius: 16px;
  background: var(--color-surface-hover);
}
.settings-account-row strong,
.settings-account-row span {
  display: block;
}
.settings-account-row strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}
.settings-account-row span {
  color: var(--color-text-tertiary);
  font-size: 11px;
}
.security-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 22px 110px;
}
.security-layout {
  display: grid;
  gap: 16px;
}
.security-sessions {
  display: grid;
  gap: 9px;
}
.security-session {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--color-surface-hover);
}
.security-session > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--color-primary-dark);
  background: #fff;
}
.security-session strong,
.security-session small {
  display: block;
}
.security-session strong {
  font-size: 13px;
}
.security-session small {
  margin-top: 3px;
  color: var(--color-text-tertiary);
  font-size: 11px;
}
.security-danger {
  border-color: rgba(192, 57, 43, 0.24);
  background: linear-gradient(145deg, #fff, #fff7f6);
}
.security-danger .settings-card__heading > span {
  color: #b23b31;
  background: rgba(192, 57, 43, 0.1);
}
.legal-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 120px;
}
.legal-hero {
  padding: 38px;
  border: 1px solid rgba(91, 168, 108, 0.2);
  border-radius: 30px;
  background: linear-gradient(145deg, #f0f8f1, #fff);
}
.legal-hero > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 13px;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.legal-hero > span .ui-icon {
  width: 17px;
  height: 17px;
}
.legal-hero h1 {
  max-width: 780px;
  margin: 0 0 12px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.legal-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.65;
}
.legal-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 28px;
  margin-top: 28px;
}
.legal-toc {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
}
.legal-toc strong {
  padding: 6px 9px 10px;
  font-size: 13px;
}
.legal-toc a {
  padding: 9px;
  border-radius: 10px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.legal-toc a:hover {
  color: var(--color-primary-dark);
  background: var(--color-surface-hover);
}
.legal-document {
  min-width: 0;
  padding: 12px 38px 38px;
  border: 1px solid var(--color-border);
  border-radius: 26px;
  background: var(--color-surface);
}
.legal-document section {
  padding: 27px 0;
  scroll-margin-top: 90px;
  border-bottom: 1px solid var(--color-border);
}
.legal-document section:last-child {
  border-bottom: 0;
}
.legal-document h2 {
  margin: 0 0 13px;
  font-size: 22px;
  line-height: 1.25;
}
.legal-document p,
.legal-document li {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.75;
}
.legal-document p {
  margin: 0 0 12px;
}
.legal-document p:last-child {
  margin-bottom: 0;
}
.legal-document ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 22px;
}
.legal-document a {
  color: var(--color-primary-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-document .legal-notice {
  margin: 16px 0 6px;
  padding: 20px;
  border: 1px solid #ead9ad;
  border-radius: 18px;
  background: #fffaf0;
}
.legal-notice strong {
  display: block;
  margin-bottom: 6px;
  color: #79571b;
  font-size: 14px;
}
.legal-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.legal-data-grid > div {
  padding: 16px;
  border-radius: 16px;
  background: var(--color-surface-hover);
}
.legal-data-grid strong {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
}
.legal-data-grid p {
  font-size: 12px;
  line-height: 1.6;
}

.settings-savebar {
  position: sticky;
  bottom: calc(var(--tab-bar-height) + 8px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-height: 72px;
  padding: 10px 12px 10px 20px;
  border: 1px solid rgba(218, 225, 218, 0.9);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 38px rgba(33, 61, 41, 0.1);
  backdrop-filter: blur(16px);
}
.settings-savebar > p {
  margin-right: auto;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 700;
}
.settings-savebar > div {
  display: flex;
  gap: 9px;
}

.specialist-choice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.specialist-choice button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px;
  border: 1px solid var(--color-border);
  border-radius: 17px;
  background: #fff;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: 0.2s ease;
}
.specialist-choice button:hover {
  border-color: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.specialist-choice button > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.1);
}
.specialist-choice button > span .ui-icon {
  width: 20px;
  height: 20px;
}
.specialist-choice button > .ui-icon {
  width: 17px;
  height: 17px;
  color: var(--color-text-tertiary);
}
.specialist-choice strong,
.specialist-choice small {
  display: block;
}
.specialist-choice strong {
  font-size: 13px;
}
.specialist-choice small {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.profile-benefit {
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.profile-benefit > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 11px;
  color: #6d28d9;
  background: #f1edff;
}
.profile-benefit .ui-icon {
  width: 18px;
  height: 18px;
}
.profile-benefit p {
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
}
.profile-benefit strong {
  display: block;
  color: var(--color-text);
  font-size: 12px;
}

.settings-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.settings-check {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 13px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  cursor: pointer;
}
.settings-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.settings-check > span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1.5px solid var(--color-border);
  border-radius: 9px;
  color: transparent;
  background: #fff;
}
.settings-check > span .ui-icon {
  width: 15px;
  height: 15px;
}
.settings-check input:checked + span {
  border-color: var(--color-primary);
  color: #fff;
  background: var(--color-primary);
}
.settings-check input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(91, 168, 108, 0.15);
}
.settings-check strong {
  font-size: 12px;
  line-height: 1.35;
}

.settings-inline-link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 15px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.09);
  font-size: 12px;
  font-weight: 800;
}
.settings-inline-link .ui-icon:first-child {
  width: 19px;
  height: 19px;
}
.settings-inline-link .ui-icon:last-child {
  width: 15px;
  height: 15px;
  margin-left: auto;
}
.settings-load-error {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 80px auto;
  padding: 36px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
  text-align: center;
}
.settings-load-error > .ui-icon {
  width: 36px;
  height: 36px;
  color: var(--color-warning);
}

@media (max-width: 800px) {
  .settings-page {
    width: calc(100% - 20px);
    padding-top: 16px;
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-avatar-card {
    position: static;
    grid-template-columns: auto 1fr;
    justify-items: start;
    text-align: left;
  }
  .settings-avatar-card > img {
    grid-row: 1 / 4;
    width: 92px;
    height: 92px;
    border-radius: 27px;
  }
  .settings-avatar-card > p {
    text-align: left;
  }
  .settings-avatar-card .profile-benefit {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .settings-page__intro h1 {
    font-size: 31px;
  }
  .settings-card {
    padding: 19px;
    border-radius: 20px;
  }
  .settings-fields--two,
  .settings-check-grid,
  .specialist-choice {
    grid-template-columns: 1fr;
  }
  .settings-fields__wide {
    grid-column: auto;
  }
  .settings-account-row {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-account-row .btn {
    width: 100%;
  }
  .security-page {
    padding: 20px 14px 96px;
  }
  .security-session {
    grid-template-columns: auto 1fr;
  }
  .security-session .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
  .legal-shell {
    padding: 18px 13px 96px;
  }
  .legal-hero {
    padding: 25px 20px;
    border-radius: 23px;
  }
  .legal-hero h1 {
    font-size: 32px;
  }
  .legal-layout {
    grid-template-columns: 1fr;
    margin-top: 14px;
  }
  .legal-toc {
    position: static;
    display: flex;
    overflow-x: auto;
    padding: 9px;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .legal-toc strong {
    display: none;
  }
  .legal-document {
    padding: 5px 19px 22px;
    border-radius: 21px;
  }
  .legal-document section {
    padding: 23px 0;
  }
  .legal-data-grid {
    grid-template-columns: 1fr;
  }
  .settings-savebar {
    position: static;
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
    padding: 9px;
  }
  .settings-savebar > p:empty {
    display: none;
  }
  .settings-savebar > div {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .settings-savebar .btn {
    height: 48px;
    padding: 0 14px;
  }
}

/* Support */
.support-page {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 calc(var(--tab-bar-height) + 56px);
}
.support-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.support-hero--visual {
  min-height: 330px;
  align-items: center;
  padding: 42px 48% 42px 34px;
  border-radius: 28px;
  background:
    linear-gradient(
      90deg,
      rgba(250, 248, 245, 0.99),
      rgba(250, 248, 245, 0.91) 48%,
      rgba(250, 248, 245, 0.08) 75%
    ),
    url("/assets/media/support/support-team-hero-v1.png") 74% center/cover
      no-repeat;
}
.support-hero--visual > span {
  display: none;
}
.support-hero > span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  flex: none;
  border-radius: 23px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.13);
}
.support-hero > span .ui-icon {
  width: 32px;
  height: 32px;
}
.support-hero h1 {
  margin: 0 0 5px;
  font-size: clamp(31px, 5vw, 46px);
}
.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(270px, 0.65fr);
  align-items: start;
  gap: 18px;
}
.support-aside {
  display: grid;
  gap: 18px;
}
.support-form .form-group {
  margin-top: 18px;
}
.support-form .form-group label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 750;
}
.support-form .form-group label span {
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 500;
}
.support-form textarea {
  resize: vertical;
}
.support-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  border: 0;
}
.support-types legend {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 750;
}
.support-types label {
  cursor: pointer;
}
.support-types input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.support-types label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
}
.support-types label > span .ui-icon {
  width: 17px;
  height: 17px;
  color: var(--color-primary-dark);
}
.support-types input:checked + span {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.09);
  box-shadow: 0 0 0 2px rgba(91, 168, 108, 0.08);
}
.support-types input:focus-visible + span {
  box-shadow: 0 0 0 4px rgba(91, 168, 108, 0.16);
}
.support-form__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
}
.support-form__footer p {
  margin-right: auto;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 700;
}
.support-stores h2 {
  margin-bottom: 4px;
  font-size: 20px;
}
.support-stores > p {
  margin-bottom: 16px;
  font-size: 12px;
}
.support-stores button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
}
.support-stores button .ui-icon {
  width: 17px;
  height: 17px;
}
.support-stores button small {
  margin-left: auto;
  color: var(--color-text-tertiary);
}
.support-history {
  margin-top: 18px;
}
.support-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 28px;
  border-radius: 16px;
  background: var(--color-surface-hover);
  text-align: center;
}
.support-empty > .ui-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 5px;
  color: var(--color-primary-dark);
}
.support-empty p {
  font-size: 12px;
}
.support-history__list {
  display: grid;
  gap: 9px;
}
.support-history__list article {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 16px 120px 16px 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.support-history__list article > div {
  display: flex;
  gap: 9px;
  color: var(--color-text-tertiary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.support-history__list article strong {
  font-size: 14px;
}
.support-history__list article p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.support-history__list article > b {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #7a5411;
  background: #fff4d8;
  font-size: 10px;
}
.support-history__list article > b[data-status="RESOLVED"] {
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.12);
}

@media (max-width: 800px) {
  .support-page {
    width: calc(100% - 20px);
    padding-top: 16px;
  }
  .support-layout {
    grid-template-columns: 1fr;
  }
  .support-aside {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .support-hero {
    align-items: flex-start;
  }
  .support-hero > span {
    width: 52px;
    height: 52px;
    border-radius: 17px;
  }
  .support-hero > span .ui-icon {
    width: 25px;
    height: 25px;
  }
  .support-hero--visual {
    min-height: 430px;
    align-items: flex-end;
    padding: 24px 18px;
    background:
      linear-gradient(
        0deg,
        rgba(250, 248, 245, 0.99),
        rgba(250, 248, 245, 0.88) 45%,
        rgba(250, 248, 245, 0.08) 75%
      ),
      url("/assets/media/support/support-team-hero-v1.png") center/cover
        no-repeat;
  }
  .support-types {
    grid-template-columns: repeat(2, 1fr);
  }
  .support-aside {
    grid-template-columns: 1fr;
  }
  .support-form__footer {
    align-items: stretch;
    flex-direction: column;
  }
  .support-form__footer .btn {
    width: 100%;
  }
  .support-history__list article {
    padding: 15px;
  }
  .support-history__list article > b {
    position: static;
    width: max-content;
    margin-top: 4px;
  }
}

.not-found-page {
  display: grid;
  justify-items: center;
  width: min(680px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(70px, 12vh, 140px) 0 calc(var(--tab-bar-height) + 50px);
  text-align: center;
}
.not-found-page__mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin-bottom: 20px;
  border-radius: 28px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.12);
  transform: rotate(-7deg);
}
.not-found-page__mark .ui-icon {
  width: 40px;
  height: 40px;
}
.not-found-page > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.not-found-page h1 {
  max-width: 630px;
  margin: 9px 0 12px;
  font-size: clamp(34px, 6vw, 56px);
}
.not-found-page p {
  max-width: 520px;
}
.not-found-page > div:last-child {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
@media (max-width: 560px) {
  .not-found-page > div:last-child {
    width: 100%;
    flex-direction: column;
  }
}

.email-verification-result {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.email-verification-result__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 22px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.12);
}
.email-verification-result__icon .ui-icon {
  width: 31px;
  height: 31px;
}
.email-verification-result h1 {
  font-size: 27px;
}
.email-verification-result #verify-email-actions {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}
.email-verification-result #verify-email-actions[hidden] {
  display: none;
}

.profile-page {
  padding: var(--space-md);
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-bottom: calc(var(--tab-bar-height) + var(--space-xl));
}

.profile-page__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  margin-bottom: var(--space-xl);
}

.profile-page__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-md);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 36px;
  color: #fff;
}

.profile-page__info h2 {
  font-size: 24px;
  margin-bottom: 4px;
}

.profile-page__info p {
  color: var(--color-text-secondary);
  font-size: 15px;
  margin-bottom: var(--space-sm);
}

/* ============================================================
   AUTH PAGES
   ============================================================ */

.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  background: var(--gradient-hero);
}

.auth-page__card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xl);
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.auth-page__logo {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.auth-page__logo img {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
}

.auth-page__logo h1 {
  color: var(--color-text);
  font-size: 24px;
}

.auth-page__logo p {
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

.auth-form__divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--color-text-tertiary);
  font-size: 13px;
  font-weight: 500;
}

.auth-form__divider::before,
.auth-form__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 48px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.oauth-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary-light);
}

.auth-form__footer {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* ============================================================
   QUIZ / ONBOARDING
   ============================================================ */

.quiz-page {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--color-bg);
  overflow: visible;
  width: min(960px, 100%);
  margin: 0 auto;
}

.quiz__progress {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  margin-bottom: var(--space-lg);
  overflow: hidden;
  flex-shrink: 0;
}

.quiz__progress-bar {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 3px;
  transition: width 0.5s var(--ease-out);
}

.quiz__question {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: min(540px, calc(100dvh - 190px));
  justify-content: flex-start;
  overflow: visible;
  padding: var(--space-md) 2px;
  scrollbar-gutter: stable;
}

.quiz__question h1 {
  margin: 7px 0 8px;
  font-size: clamp(26px, 4vw, 40px);
  text-align: center;
  flex-shrink: 0;
}
.quiz__step-label {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.quiz__lead {
  max-width: 590px;
  margin: 0 auto 24px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  text-align: center;
}

/* Option cards */
.quiz__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  align-content: start;
}

.quiz__options--large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.quiz__options--large .quiz__option {
  min-height: 160px;
  font-size: 18px;
}

.quiz__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all 0.25s var(--ease-out);
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  min-height: 100px;
  justify-content: center;
  font-family: var(--font-heading);
}

.quiz__option:hover,
.quiz__option.selected {
  border-color: var(--color-primary);
  background: rgba(91, 168, 108, 0.06);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

.quiz__option svg {
  color: var(--color-primary);
}
.quiz__option-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border-radius: 24px;
  background: #edf6ef;
  color: var(--color-primary-dark);
}
.quiz__option-icon .ui-icon {
  width: 34px;
  height: 34px;
}
.quiz__option-copy {
  display: grid;
  gap: 5px;
}
.quiz__option-copy strong {
  font-size: 19px;
}
.quiz__option-copy small {
  max-width: 220px;
  color: var(--color-text-secondary);
  font: 500 12px/1.45 var(--font-body);
}
.quiz__form {
  width: min(720px, 100%);
  margin: 12px auto 0;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.quiz__form .form-group + .form-group {
  margin-top: 18px;
}
.quiz__form input,
.quiz__form select {
  min-height: 52px;
  border-radius: 14px;
}
.quiz__doc-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.quiz__doc-btn {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 9px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  background: #fff;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.quiz__doc-btn > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #f0f6f1;
  color: var(--color-primary-dark);
}
.quiz__doc-btn > span .ui-icon {
  width: 20px;
}
.quiz__doc-btn > i {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1.5px solid #b9c9bb;
  border-radius: 6px;
  color: transparent;
}
.quiz__doc-btn > i .ui-icon {
  width: 12px;
}
.quiz__doc-btn.selected {
  border-color: var(--color-primary);
  background: #f1f8f2;
  box-shadow: 0 0 0 3px rgba(91, 168, 108, 0.1);
}
.quiz__doc-btn.selected > i {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}
@media (max-width: 620px) {
  .quiz__doc-options {
    grid-template-columns: 1fr;
  }
}
.quiz__species-visual {
  position: relative;
  width: 100%;
  height: 108px;
  display: block;
  margin-bottom: 7px;
}
.quiz__species-visual img {
  position: absolute;
  top: 4px;
  width: 82px;
  height: 96px;
  border: 3px solid #fff;
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(35, 70, 43, 0.16);
}
.quiz__species-visual img:nth-child(1) {
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}
.quiz__species-visual img:nth-child(2) {
  left: calc(50% - 70px);
  transform: rotate(-8deg);
}
.quiz__species-visual img:nth-child(3) {
  right: calc(50% - 70px);
  transform: rotate(8deg);
}

/* Breed cards */
.quiz__breeds {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  width: 100%;
  align-items: start;
  padding: 0 2px var(--space-xl);
}

.quiz__breed {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: var(--radius-xl);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  transition: all 0.3s var(--ease-out);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  isolation: isolate;
}

.quiz__breed--fallback {
  background: linear-gradient(
    145deg,
    rgba(91, 168, 108, 0.18),
    rgba(80, 145, 202, 0.16)
  );
  min-height: 132px;
}

.quiz__breed-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 38px;
  font-weight: 900;
  opacity: 0.62;
}
.quiz__breed-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiz__breed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-xl);
  border: 3px solid transparent;
  transition: border-color 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

.quiz__breed.selected::before {
  border-color: var(--color-primary);
}

.quiz__breed-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.2) 50%,
    transparent 100%
  );
  border-radius: var(--radius-xl);
  pointer-events: none;
}

.quiz__breed-name {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: var(--space-md);
  text-align: left;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
  font-family: var(--font-heading);
}

/* Quiz nav */
.quiz__nav {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  justify-content: center;
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-top: var(--space-sm);
  background: var(--color-bg);
  position: sticky;
  bottom: 0;
  z-index: 4;
}

.auth-form__status {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.45;
  background: #fff2f0;
  color: #9b3029;
  border: 1px solid #f1c7c3;
}
.auth-form__status[hidden] {
  display: none;
}
.auth-form__status a {
  color: inherit;
  font-weight: 800;
  text-decoration: underline;
}
.auth-form__status--success {
  background: #eef9f1;
  color: #27663a;
  border-color: #b9dfc3;
}
.form-field-error {
  display: block;
  margin-top: 6px;
  color: #a4312a;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}
.auth-form input[aria-invalid="true"] {
  border-color: #c8443a;
  box-shadow: 0 0 0 3px rgba(200, 68, 58, 0.12);
}
.form-group--consent input[aria-invalid="true"] + .checkbox-custom {
  border-color: #c8443a;
  box-shadow: 0 0 0 3px rgba(200, 68, 58, 0.12);
}
.checkbox-label {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  margin: 0 !important;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}
.checkbox-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.checkbox-custom {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1.5px solid #aab7aa;
  border-radius: 7px;
  background: #fff;
  transition: 0.18s ease;
}
.checkbox-custom::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.checkbox-label input:checked + .checkbox-custom {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.checkbox-label input:checked + .checkbox-custom::after {
  opacity: 1;
}
.checkbox-label input:focus-visible + .checkbox-custom {
  box-shadow: 0 0 0 4px rgba(91, 168, 108, 0.16);
}
.checkbox-text {
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.checkbox-text a {
  color: var(--color-primary-dark);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 2px;
}
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary);
}
.checkbox-label input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}
.auth-form button[disabled] {
  cursor: wait;
}
.form-hint {
  color: var(--color-text-tertiary);
  font-size: 12px;
}
.oauth-btn__mark {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  font:
    800 10px/1 Inter,
    sans-serif;
}
.oauth-btn__mark--vk {
  background: #2787f5;
}
.oauth-btn__mark--ya {
  background: #fc3f1d;
}

/* Product ecosystem */
.product-ecosystem__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.product-ecosystem__grid article {
  min-height: 220px;
  padding: 26px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}
.product-ecosystem__grid article > span {
  color: var(--color-primary);
  font: 800 12px/1 var(--font-heading);
  letter-spacing: 0.12em;
}
.product-ecosystem__grid h3 {
  margin: 28px 0 8px;
  font-size: 21px;
}
.product-ecosystem__grid p {
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.product-ecosystem__grid b {
  margin-top: auto;
  padding-top: 20px;
  color: var(--color-primary-dark);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Calculator */
.calculator-page {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.calculator-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}
.calculator-hero__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 22px;
  color: var(--color-primary-dark);
  background: rgba(91, 168, 108, 0.13);
}
.calculator-hero__icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.calculator-kicker {
  display: block;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 5px;
}
.calculator-hero h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
}
.calculator-hero p {
  color: var(--color-text-secondary);
  margin-top: 8px;
  max-width: 670px;
}
.calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: 22px;
  align-items: start;
}
.calculator-pet-picker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #fff;
}
.calculator-pet-picker > div:last-child {
  display: flex;
  gap: 9px;
  overflow-x: auto;
}
.calculator-pet {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  padding: 8px 11px 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: #fff;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.calculator-pet img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: cover;
}
.calculator-pet span {
  min-width: 0;
  flex: 1;
}
.calculator-pet strong,
.calculator-pet small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calculator-pet strong {
  font-size: 12px;
}
.calculator-pet small {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.calculator-pet > .ui-icon {
  width: 16px;
  color: transparent;
}
.calculator-pet.is-active {
  border-color: var(--color-primary);
  background: #eef8f0;
  box-shadow: 0 0 0 2px rgba(91, 168, 108, 0.1);
}
.calculator-pet.is-active > .ui-icon {
  color: var(--color-primary-dark);
}
.calculator-form {
  padding: 26px;
}
.calculator-form__heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 24px;
}
.calculator-form__heading span {
  font-size: 19px;
  font-weight: 800;
}
.calculator-form__heading small,
.calculator-form__note {
  color: var(--color-text-tertiary);
}
.calculator-form__note {
  font-size: 12px;
  line-height: 1.55;
  margin: 16px 2px 0;
}
.calculator-result-wrap {
  position: sticky;
  top: 90px;
}
.calculator-result {
  min-height: 340px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, #244f34, #5ba86c);
  box-shadow: 0 22px 50px rgba(36, 79, 52, 0.2);
}
.calculator-result__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 800;
  opacity: 0.72;
}
.calculator-result__pet {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.calculator-result__pet img {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
}
.calculator-result__pet small,
.calculator-result__pet strong {
  display: block;
  color: #fff;
}
.calculator-result__pet small {
  font-size: 10px;
  opacity: 0.75;
}
.calculator-result__pet strong {
  margin-top: 2px;
  font-size: 15px;
}
.calculator-result .value {
  margin-top: 24px;
  font: 900 clamp(56px, 10vw, 82px) / 1 var(--font-heading);
}
.calculator-result .label {
  font-size: 18px;
  font-weight: 700;
  opacity: 0.8;
}
.calculator-result p {
  margin-top: 28px;
  color: #fff;
  line-height: 1.6;
  opacity: 1;
}
.calculator-result__decision {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
}
.calculator-result__decision p {
  margin: 0;
  font-size: 12px;
}
.calculator-result__decision small {
  color: #fff;
  line-height: 1.5;
}
.calculator-result__decision > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.calculator-result__decision .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.calculator-result--empty .value,
.calculator-result--empty .label {
  opacity: 0.22;
}

/* Marketplace placeholder and product updates */
.market-coming {
  padding: 40px 24px 72px;
  max-width: 1060px;
}
.market-coming__hero {
  max-width: 1000px;
  min-height: 430px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 46px;
  border-radius: 32px;
  background:
    linear-gradient(
      90deg,
      rgba(250, 248, 245, 0.99) 0%,
      rgba(250, 248, 245, 0.92) 48%,
      rgba(250, 248, 245, 0.12) 76%
    ),
    var(
        --pet-visual-image,
        url("/assets/media/editorial/cover-nutrition-v1.jpg")
      )
      75% center / cover no-repeat;
}
.market-coming__copy {
  max-width: 590px;
}
.market-coming__visual {
  width: min(700px, 100%);
  aspect-ratio: 16 / 7;
  margin: 0 auto 24px;
  border-radius: 28px;
  object-fit: cover;
  box-shadow: 0 22px 55px rgba(42, 83, 50, 0.14);
}
.market-coming__badge,
.updates-hero > span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(91, 168, 108, 0.12);
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 900;
}
.market-coming__icon {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 24px auto;
  border-radius: 26px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-primary);
}
.market-coming__icon svg {
  width: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.market-coming h1 {
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1.02;
}
.market-coming__hero > p {
  margin: 20px auto 0;
  max-width: 680px;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1.6;
}
.market-coming__actions {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.market-coming__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.market-coming__features article {
  padding: 24px;
  border-radius: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.market-coming__features p {
  color: var(--color-text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}
.updates-page {
  padding: 38px 24px 72px;
}
.updates-shell {
  max-width: 1060px;
  margin: 0 auto;
}
.updates-hero {
  max-width: 760px;
  margin-bottom: 48px;
}
.updates-hero h1 {
  font-size: clamp(38px, 7vw, 66px);
  line-height: 1.02;
  margin: 20px 0 16px;
}
.updates-hero p {
  font-size: 18px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.updates-groups {
  display: grid;
  gap: 42px;
}
.updates-group__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.updates-group__heading > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}
.updates-group--next .updates-group__heading > span {
  background: #e2a336;
}
.updates-group--later .updates-group__heading > span {
  background: #8d94a5;
}
.updates-group__heading h2 {
  font-size: 22px;
}
.updates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.updates-grid article {
  padding: 22px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.updates-grid p {
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-top: 7px;
}
.updates-note {
  margin-top: 42px;
  padding: 25px;
  border-radius: 22px;
  background: #eff7f1;
}
.updates-note p {
  max-width: 700px;
  color: var(--color-text-secondary);
  margin: 7px 0 18px;
}

/* SEO article templates */
.articles-feed,
.article-detail {
  width: 100%;
  max-width: none;
  padding: 0;
}
.articles-hub,
.article-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 36px clamp(24px, 3.5vw, 56px) 72px;
}
.articles-hero {
  min-height: 360px;
  margin-bottom: 34px;
  padding: 54px 48% 50px 34px;
  max-width: none;
  border: 1px solid #e0e9df;
  border-radius: 30px;
  background:
    linear-gradient(
      90deg,
      rgba(250, 248, 245, 0.98) 0%,
      rgba(250, 248, 245, 0.91) 43%,
      rgba(250, 248, 245, 0.05) 70%
    ),
    var(
        --pet-visual-image,
        url("/assets/media/knowledge/knowledge-hero-v1.jpg")
      )
      70% center / cover no-repeat;
  box-shadow: 0 18px 50px rgba(42, 83, 50, 0.08);
}
.articles-hero > span {
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  font-weight: 900;
}
.articles-hero h1 {
  margin: 14px 0;
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.05;
}
.articles-hero p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.articles-hero__reset {
  display: inline-flex;
  margin-top: 16px;
  color: var(--color-primary-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.knowledge-course-preview {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
  padding: 20px 22px;
  border: 1px solid #d9e7db;
  border-radius: 22px;
  background: linear-gradient(135deg, #eef8f0, #fff);
}
.knowledge-course-preview > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}
.knowledge-course-preview > span .ui-icon {
  width: 26px;
}
.knowledge-course-preview small {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.knowledge-course-preview h2 {
  margin: 4px 0 5px;
  font-size: 18px;
}
.knowledge-course-preview p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.knowledge-tools {
  display: grid;
  gap: 14px;
  margin: -22px 0 42px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.knowledge-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-bg);
}
.knowledge-search svg {
  width: 20px;
  color: var(--color-text-tertiary);
}
.knowledge-search input {
  width: 100%;
  min-height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
}
.knowledge-tabs,
.knowledge-tags {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.knowledge-pets {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
}
.knowledge-pets button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px 7px 7px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  color: inherit;
  cursor: pointer;
}
.knowledge-pets button.is-active {
  border-color: var(--color-primary);
  background: #eff7f1;
  box-shadow: 0 0 0 2px rgba(91, 168, 108, 0.12);
}
.knowledge-pets img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--color-bg);
}
.knowledge-pets span {
  display: grid;
  gap: 1px;
  text-align: left;
}
.knowledge-pets strong {
  font-size: 13px;
}
.knowledge-pets small {
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.knowledge-tabs button,
.knowledge-tags button {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  padding: 9px 13px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
  font-weight: 800;
  cursor: pointer;
}
.knowledge-tabs button.is-active,
.knowledge-tags button.is-active {
  background: var(--color-primary);
  color: #fff;
}
.knowledge-tabs svg {
  width: 17px;
}
.articles-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.articles-section-heading > div > span {
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 900;
}
.articles-section-heading span {
  color: var(--color-text-tertiary);
  font-size: 13px;
}
.article-card > a {
  display: grid;
  grid-template-columns: minmax(320px, 42%) 1fr;
  color: inherit;
  text-decoration: none;
}
.article-card {
  position: relative;
}
.article-save {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.article-save svg {
  width: 20px;
}
.article-save.is-saved {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.article-card__media {
  min-height: 190px;
  background: rgba(91, 168, 108, 0.1);
}
.article-cover {
  position: relative;
  isolation: isolate;
  min-height: 250px;
  overflow: hidden;
  color: #24372a;
}
.article-cover__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(250, 248, 245, 0.98) 0%,
    rgba(250, 248, 245, 0.82) 48%,
    rgba(250, 248, 245, 0.05) 78%
  );
}
.article-cover__top,
.article-cover__title {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
}
.article-cover__top {
  top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.article-cover__top span {
  padding: 6px 9px;
  border: 1px solid rgba(42, 107, 69, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}
.article-cover__title {
  bottom: 17px;
  max-width: 76%;
}
.article-cover__title h2 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 11px;
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.article-cover__title > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.article-cover__title span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 800;
}
.article-cover__title span.is-verified {
  color: var(--color-primary-dark);
}
.article-cover__title .ui-icon {
  width: 13px;
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-card__content h2 {
  font-size: 22px;
  margin: 10px 0 7px;
}
.article-card__link {
  display: block;
  margin-top: 14px;
  color: var(--color-primary-dark);
  font-weight: 800;
}
.article-card__link svg {
  width: 16px;
  vertical-align: -3px;
}
.article-card__reason {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 12px;
  background: #eff7f1;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
}
.article-card__reason svg {
  flex: none;
  width: 17px;
}
.article-card__progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 800;
}
.article-card__progress svg {
  width: 14px;
  color: var(--color-primary-dark);
}
.articles-empty {
  min-height: 320px;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  gap: 10px;
  padding: 30px;
}
.articles-empty svg {
  width: 54px;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.5;
}
.articles-empty__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
@media (max-width: 560px) {
  .articles-empty__actions {
    flex-direction: column;
  }
}
.article-breadcrumbs {
  display: flex;
  gap: 8px;
  color: var(--color-text-tertiary);
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
}
.article-breadcrumbs > * {
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-detail__header {
  max-width: 820px;
  margin: 38px auto 30px;
}
.article-detail__header h1 {
  font-size: clamp(38px, 7vw, 64px);
  line-height: 1.04;
  margin: 14px 0;
}
.article-detail__lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.article-detail__byline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
  color: var(--color-text-tertiary);
  font-size: 13px;
}
.article-detail__actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.article-detail__save {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-weight: 800;
  cursor: pointer;
}
.article-detail__save svg {
  width: 18px;
}
.article-detail__save.is-saved {
  border-color: var(--color-primary);
  background: #eff7f1;
  color: var(--color-primary-dark);
}
.article-review {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: 16px;
  background: var(--color-bg);
  color: var(--color-text-secondary);
}
.article-review svg {
  flex: none;
  width: 21px;
  color: var(--color-text-tertiary);
}
.article-review > div {
  display: grid;
  gap: 2px;
}
.article-review strong {
  color: var(--color-text-primary);
  font-size: 13px;
}
.article-review span {
  font-size: 12px;
  line-height: 1.45;
}
.article-review--verified {
  background: #eff7f1;
}
.article-review--verified svg,
.article-review--verified strong {
  color: var(--color-primary-dark);
}

.article-sources {
  max-width: 860px;
  margin: 32px auto 0;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
}

.article-sources h2 {
  margin: 0 0 14px;
  font-size: 20px;
}

.article-sources ol {
  margin: 0;
  padding-left: 22px;
}

.article-sources li + li {
  margin-top: 10px;
}

.article-sources a {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.article-sources span {
  display: block;
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.article-detail__byline span + span::before,
.article-detail__byline time + span::before {
  content: "·";
  margin-right: 12px;
}
.article-detail__figure {
  margin: 0;
}
.article-detail__figure img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 26px;
}
.article-detail__figure figcaption {
  color: var(--color-text-tertiary);
  font-size: 12px;
  margin-top: 7px;
}
.article-detail__layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 680px);
  gap: 48px;
  margin: 42px auto;
  justify-content: center;
}
.article-toc {
  position: sticky;
  top: 90px;
  align-self: start;
  padding: 18px;
  border-left: 2px solid var(--color-border);
}
.article-toc nav {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.article-toc a {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.article-detail__body {
  font-size: 18px;
  line-height: 1.75;
  min-width: 0;
}
.article-detail__body p,
.article-detail__body ul,
.article-detail__body ol {
  margin: 0 0 20px;
}
.article-detail__body h2 {
  margin: 44px 0 16px;
  font-size: 30px;
  scroll-margin-top: 90px;
}
.article-detail__body h3 {
  margin: 32px 0 12px;
  font-size: 23px;
  scroll-margin-top: 90px;
}
.article-detail__body li {
  margin-bottom: 8px;
}
.article-ryadom-action {
  display: flex;
  width: fit-content;
  margin-top: 18px;
}
.article-detail__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px;
  border-radius: 24px;
  background: #eff7f1;
}
.article-detail__footer p {
  color: var(--color-text-secondary);
  margin-top: 5px;
}
.article-related {
  margin: 54px 0;
}
.article-related > div:first-child > span {
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 900;
}
.article-related h2 {
  margin: 7px 0 18px;
  font-size: 30px;
}
.article-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.article-related__grid a {
  display: flex;
  min-height: 190px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}
.article-related__grid a > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.article-related__grid h3 {
  margin: 9px 0 7px;
  font-size: 19px;
}
.article-related__grid p {
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.article-related__grid b {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 15px;
  color: var(--color-primary-dark);
}
.article-related__grid b svg {
  width: 15px;
}
.article-back {
  display: inline-block;
  margin-top: 26px;
  color: var(--color-primary-dark);
  font-weight: 800;
}

/* Walkers and premium map preview */
.map-sidebar__item--soon small {
  color: var(--color-primary-dark);
  font-size: 9px;
  text-transform: uppercase;
  margin-left: auto;
}
.map-walker-preview {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.map-walker-preview article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.map-walker-preview__avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(91, 168, 108, 0.14);
  color: var(--color-primary-dark);
  font-weight: 900;
}
.map-walker-preview article div {
  display: grid;
  gap: 2px;
}
.map-walker-preview article span,
.map-walker-preview article small {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.map-walker-preview button {
  border: 0;
  border-radius: 999px;
  padding: 8px 10px;
  background: var(--color-bg);
  color: var(--color-text-tertiary);
  font-weight: 800;
}
.map-ai-preview {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: #eff7f1;
}
.map-ai-preview > span svg {
  width: 24px;
  color: var(--color-primary-dark);
}
.map-ai-preview p {
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.45;
  margin-top: 4px;
}
.map-walkers-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
  padding: 18px 0 18px 20px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.map-walkers-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.map-plus-features {
  display: grid;
  gap: 8px;
  margin: 16px 0;
  text-align: left;
}
.map-plus-features > span {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: var(--color-bg);
  font-size: 13px;
  font-weight: 700;
}
.map-plus-features svg {
  width: 21px;
  color: var(--color-primary);
}
.map-plus-features small {
  color: var(--color-text-tertiary);
  font-size: 10px;
  text-transform: uppercase;
}

@media (min-width: 760px) {
  .quiz-page {
    padding: 24px max(24px, calc((100vw - 920px) / 2));
  }
  .quiz__options:not(.quiz__options--large),
  .quiz__breeds {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
}
@media (max-width: 759px) {
  .quiz-page {
    min-height: calc(100dvh - var(--header-height));
    padding: 12px 12px calc(88px + env(safe-area-inset-bottom, 0px));
  }
  .quiz__progress {
    margin-bottom: 8px;
  }
  .quiz__question {
    padding-top: 8px;
    min-height: 0;
  }
  .quiz__question h1 {
    font-size: 22px;
    margin-bottom: 14px;
  }
  .quiz__options {
    gap: 10px;
  }
  .quiz__option {
    min-height: 88px;
    padding: 12px 8px;
  }
  .quiz__options--large .quiz__option {
    min-height: 130px;
  }
  .quiz__breeds {
    gap: 10px;
    padding-bottom: 18px;
  }
  .quiz__breed {
    border-radius: 16px;
  }
  .quiz__breed-name {
    padding: 11px;
    font-size: 13px;
  }
  .product-ecosystem__grid,
  .market-coming__features,
  .updates-grid {
    grid-template-columns: 1fr;
  }
  .product-ecosystem__grid article {
    min-height: 180px;
  }
  .calculator-page,
  .updates-page {
    padding: 22px 14px 86px;
  }
  .calculator-hero {
    align-items: flex-start;
  }
  .calculator-hero__icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
  }
  .calculator-pet-picker {
    align-items: stretch;
    flex-direction: column;
    padding: 15px;
  }
  .calculator-pet-picker > div:last-child {
    width: 100%;
  }
  .calculator-layout {
    grid-template-columns: 1fr;
  }
  .calculator-result-wrap {
    position: static;
  }
  .calculator-result {
    min-height: 290px;
    padding: 28px;
  }
  .market-coming {
    padding: 20px 14px 88px;
  }
  .market-coming__hero {
    min-height: 500px;
    align-items: flex-end;
    padding: 28px 20px;
    background:
      linear-gradient(
        0deg,
        rgba(250, 248, 245, 0.99) 0%,
        rgba(250, 248, 245, 0.92) 48%,
        rgba(250, 248, 245, 0.12) 78%
      ),
      var(
          --pet-visual-image,
          url("/assets/media/editorial/cover-nutrition-v1.jpg")
        )
        center / cover no-repeat;
  }
  .article-card > a {
    grid-template-columns: 1fr;
  }
  .knowledge-course-preview {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 16px;
  }
  .knowledge-course-preview > span {
    width: 44px;
    height: 44px;
  }
  .knowledge-course-preview > a {
    grid-column: 1 / -1;
    width: 100%;
  }
  .knowledge-tools {
    margin-top: -28px;
    padding: 13px;
  }
  .article-card__media {
    min-height: 180px;
  }
  .article-detail__layout {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 25px;
  }
  .article-toc {
    position: static;
    border-left: 0;
    border-radius: 16px;
    background: var(--color-surface);
  }
  .article-detail__footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .article-detail__actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .article-related__grid {
    grid-template-columns: 1fr;
  }
  .articles-hub,
  .article-shell {
    padding: 22px 14px 88px;
  }
  .map-walkers-checklist {
    grid-template-columns: 1fr;
  }
  .map-plus-features > span {
    grid-template-columns: 24px 1fr;
  }
  .map-plus-features small {
    grid-column: 2;
  }
}

/* ============================================================
   ARTICLES / CONTENT
   ============================================================ */

.articles-feed {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0 auto;
}

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

@media (max-width: 820px) {
  .articles-list {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.article-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  text-decoration: none;
  color: inherit;
  display: block;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.article-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}

.article-card:hover .article-card__image {
  transform: scale(1.04);
}

.article-card__content {
  padding: var(--space-md);
}

.article-card__tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(91, 168, 108, 0.1);
  color: var(--color-primary-dark);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-heading);
  margin-bottom: var(--space-sm);
}

.article-card h4 {
  font-size: 17px;
  margin-bottom: var(--space-xs);
  line-height: 1.35;
}

.article-card p {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   PET PROFILE
   ============================================================ */

.pet-profile {
  padding: var(--space-md);
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.pet-profile__header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--color-surface);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.pet-profile__header .avatar {
  width: 88px;
  height: 88px;
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow-md);
}

.pet-profile__info h2 {
  margin-bottom: 4px;
  font-size: 26px;
}

.pet-profile__info p {
  color: var(--color-text-secondary);
  font-size: 15px;
}

.pet-profile__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.stat-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--color-border);
  transition: all 0.2s var(--ease-out);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.stat-card .value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
}

.stat-card .label {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 600;
  font-family: var(--font-heading);
  margin-top: 4px;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.3s ease;
}

.sidebar--open {
  pointer-events: auto;
  visibility: visible;
}

.sidebar__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar--open .sidebar__overlay {
  opacity: 1;
}

.sidebar__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--color-surface);
  transform: translateX(-100%);
  transition: transform 0.3s var(--ease-out);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
}

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

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.sidebar__logo {
  width: 36px;
  height: 36px;
}

.sidebar__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: all 0.2s ease;
}

.sidebar__close:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.sidebar__nav {
  flex: 1;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 12px var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.sidebar__link:hover {
  background: rgba(91, 168, 108, 0.08);
  color: var(--color-primary);
}

.sidebar__link--soon {
  opacity: 0.5;
  cursor: not-allowed;
}

.sidebar__link--small {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.sidebar__footer {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .landing__hero {
    padding: calc(var(--header-height) + var(--space-xxl)) var(--space-md)
      var(--space-xxl);
    min-height: auto;
  }

  .hero__stats-ticker {
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .stats-ticker__divider {
    display: none;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
  }

  .pricing-card--featured {
    transform: none;
    order: -1;
  }

  .pricing-card--featured:hover {
    transform: translateY(-4px);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .map-preview__layout {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .comparison-table__header,
  .comparison-table__row {
    font-size: 12px;
  }

  .hero__cta-group {
    flex-direction: column;
    align-items: center;
  }

  .hero__btn-main,
  .hero__btn-ghost {
    width: 100%;
    max-width: 300px;
  }
}

/* ============================================================
   MAP CONTROL SURFACES — compact header + adaptive map menu
   ============================================================ */

.map-page .map-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.map-place-cluster-wrap {
  border: 0;
  background: transparent;
}
.map-place-cluster {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  background: var(--cluster-color, #3d6f4c);
  box-shadow: 0 5px 16px rgba(45, 41, 38, 0.28);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
}

.map-brandbar {
  left: 16px;
  right: 16px;
  max-width: none;
}

.map-brandbar__brand {
  flex: 0 0 auto;
}
.map-brandbar__actions {
  flex: 0 0 auto;
}

.map-header-location,
.map-search__open,
.map-search__close {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--color-primary-dark);
  cursor: pointer;
}

.map-header-location {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #eef8f0;
}

.map-header-location.is-loading .map-icon {
  animation: map-control-pulse 1s ease-in-out infinite;
}

@keyframes map-control-pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.86);
  }
}

.map-search {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.map-search__open {
  grid-auto-flow: column;
  gap: 8px;
  min-width: 112px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: #f6f8f6;
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
}

.map-search__open .map-icon {
  width: 18px;
  height: 18px;
}

.map-search__panel {
  position: fixed;
  z-index: 42;
  top: 86px;
  left: 50%;
  width: min(680px, calc(100% - 32px));
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 60px rgba(39, 59, 43, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(0.98);
  transform-origin: top center;
  backdrop-filter: blur(18px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}

.map-search--open .map-search__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.map-search__field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding-left: 10px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
}

.map-search__field > .map-icon {
  color: var(--color-primary);
}

.map-search__field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.map-search__submit {
  align-self: stretch;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.map-search__close {
  width: 40px;
  height: 40px;
}
.map-search__close .map-icon {
  width: 18px;
  height: 18px;
}

.map-search__categories {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.map-search__categories .map-filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  box-shadow: none;
  font-size: 11px;
}

.map-search__categories .map-filter .map-icon {
  width: 17px;
  height: 17px;
}

.map-brandbar__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #f5f8f5;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.map-brandbar__back:hover {
  background: #eaf5ec;
}
.map-brandbar__back .map-icon {
  width: 17px;
  height: 17px;
}

.map-location-notice {
  top: 90px;
  left: 92px;
}

.map-sidebar {
  position: absolute;
  z-index: 28;
  top: 90px;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  width: 60px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 40px rgba(39, 59, 43, 0.17);
  backdrop-filter: blur(18px);
  transition:
    width 0.24s ease,
    height 0.24s ease,
    border-radius 0.24s ease;
}

.map-sidebar--expanded {
  width: 282px;
}

.map-sidebar__toggle,
.map-sidebar__item,
.map-sidebar__premium-actions button {
  display: flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.map-sidebar__toggle,
.map-sidebar__item {
  width: 100%;
  gap: 12px;
  padding: 0 10px;
  white-space: nowrap;
}

.map-sidebar__toggle {
  margin-bottom: 6px;
  background: #eef8f0;
  color: var(--color-primary-dark);
}

.map-sidebar__toggle span,
.map-sidebar__item span {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.map-sidebar--expanded .map-sidebar__toggle span,
.map-sidebar--expanded .map-sidebar__item span {
  opacity: 1;
}

.map-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.map-sidebar__item:hover {
  background: #f3f7f4;
  color: var(--color-primary-dark);
}
.map-sidebar__item .map-icon {
  width: 20px;
  height: 20px;
}

.map-sidebar__rain {
  position: relative;
  margin-top: 4px;
  background: #f0f6ff;
  color: #245ea8;
}

.map-sidebar__rain input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.map-sidebar__rain i {
  position: absolute;
  right: 10px;
  width: 30px;
  height: 18px;
  border-radius: 99px;
  background: #cbd5e1;
  opacity: 0;
  transition:
    background 0.2s ease,
    opacity 0.15s ease;
}

.map-sidebar__rain i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.map-sidebar--expanded .map-sidebar__rain i {
  opacity: 1;
}
.map-sidebar__rain input:checked ~ i {
  background: #2563eb;
}
.map-sidebar__rain input:checked ~ i::after {
  transform: translateX(12px);
}
.map-sidebar__rain:has(input:checked) {
  background: #e4efff;
  color: #174d91;
}

.map-sidebar__account,
.map-sidebar__premium-actions,
.map-sidebar .map-smart-weather {
  display: none;
}

.map-sidebar--expanded .map-sidebar__account {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
  padding: 12px 10px;
  border-top: 1px solid var(--color-border-light);
}

.map-sidebar__account-title {
  display: flex;
  align-items: center;
  gap: 5px;
}
.map-sidebar__visual {
  display: block;
  width: 100%;
  height: 92px;
  margin-bottom: 10px;
  border-radius: 14px;
  object-fit: cover;
}
.map-sidebar__account-title strong {
  font-family: var(--font-heading);
  font-size: 13px;
}
.map-sidebar__account > span {
  color: var(--color-text-tertiary);
  font-size: 10px;
  line-height: 1.4;
}
.map-sidebar .map-user-summary__pet {
  width: 100%;
  max-width: none;
}

.map-sidebar--expanded .map-sidebar__premium-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 3px;
}

.map-sidebar__premium-actions button {
  gap: 7px;
  min-height: 48px;
  padding: 7px 8px;
  background: #f6f8f6;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.25;
  text-align: left;
}

.map-sidebar__premium-actions .map-icon {
  width: 17px;
  height: 17px;
  color: var(--color-primary);
}

.map-sidebar--expanded.map-sidebar--radar-active
  .map-smart-weather:not([hidden]) {
  position: static;
  display: block;
  width: auto;
  margin-top: auto;
  padding: 12px 10px;
  overflow: auto;
  border: 0;
  border-top: 1px solid var(--color-border-light);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.map-smart-weather__icon .map-icon {
  width: 25px;
  height: 25px;
}
.map-smart-weather__icon {
  font-size: 0;
  color: #2563eb;
}
.map-smart-weather small {
  display: none;
}

.map-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.map-icon-button .map-icon {
  width: 17px;
  height: 17px;
}
.place-sheet__icon .map-icon {
  width: 27px;
  height: 27px;
}
#place-sheet-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#place-sheet-rating[hidden] {
  display: none;
}
#place-sheet-rating .map-icon {
  width: 14px;
  height: 14px;
}
.map-auth-modal__icon .map-icon {
  width: 34px;
  height: 34px;
}
.map-walk-rating button .map-icon {
  width: 30px;
  height: 30px;
  fill: transparent;
}
.map-walk-rating button.active .map-icon {
  fill: currentColor;
}
.map-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.map-modal-title .map-icon {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}
.map-route-item strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.map-route-item strong .map-icon {
  width: 17px;
  height: 17px;
  color: var(--color-primary);
}

.map-filters,
.map-toolbar,
.map-user-summary {
  display: none !important;
}

@media (max-width: 760px) {
  .map-brandbar {
    top: 8px;
    left: 8px;
    right: 8px;
    min-height: 50px;
  }

  .map-brandbar__brand small,
  .map-brandbar__login {
    display: none;
  }

  .map-brandbar__back {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .map-brandbar__back span {
    display: none;
  }

  .map-search {
    margin-left: auto;
  }
  .map-search__open {
    min-width: 42px;
    width: 42px;
    height: 38px;
    padding: 0;
  }
  .map-search__open span {
    display: none;
  }

  .map-page--search-open .map-brandbar__brand,
  .map-page--search-open .map-brandbar__actions {
    display: none;
  }

  .map-page--search-open .map-search {
    flex: 1;
    margin: 0;
  }
  .map-page--search-open .map-search__open {
    visibility: hidden;
  }

  .map-search__panel {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100vh - 16px);
    overflow: auto;
    border-radius: 17px;
    transform: translateY(-7px) scale(0.98);
  }

  .map-search--open .map-search__panel {
    transform: translateY(0) scale(1);
  }
  .map-search__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .map-search__submit {
    padding: 0 12px;
  }

  .map-header-location {
    width: 38px;
    height: 38px;
  }
  .map-brandbar__profile,
  .map-brandbar__register {
    padding: 9px;
    font-size: 0;
  }
  .map-brandbar__profile::before {
    content: "\041F\0440\043E\0444\0438\043B\044C";
    font-size: 10px;
  }
  .map-brandbar__register::before {
    content: "\0412\043E\0439\0442\0438";
    font-size: 10px;
  }

  .map-location-notice {
    top: 66px;
    left: 8px;
    width: calc(100% - 16px);
    padding: 8px 10px;
    font-size: 11px;
  }

  .map-location-notice .btn {
    padding: 7px 9px;
    font-size: 10px;
  }

  .map-sidebar {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: auto;
    height: 62px;
    padding: 6px;
    border-radius: 19px;
  }

  .map-sidebar__toggle,
  .map-sidebar__item {
    justify-content: center;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    margin: 0;
  }

  .map-sidebar__toggle span,
  .map-sidebar__item span,
  .map-sidebar__rain i {
    display: none;
  }
  .map-sidebar__nav {
    display: contents;
  }

  .map-sidebar--expanded {
    display: flex;
    flex-direction: column;
    width: auto;
    height: min(80vh, 680px);
    padding: 10px;
    overflow-y: auto;
    border-radius: 24px 24px 18px 18px;
  }

  .map-sidebar--expanded .map-sidebar__toggle {
    justify-content: flex-start;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
  }

  .map-sidebar--expanded .map-sidebar__toggle span,
  .map-sidebar--expanded .map-sidebar__item span {
    display: inline;
    opacity: 1;
  }

  .map-sidebar--expanded .map-sidebar__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .map-sidebar--expanded .map-sidebar__item {
    justify-content: flex-start;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    background: #f6f8f6;
  }

  .map-sidebar--expanded .map-sidebar__rain i {
    display: block;
    opacity: 1;
  }
  .map-sidebar--expanded .map-sidebar__account {
    flex: 0 0 auto;
  }

  .map-sidebar--expanded.map-sidebar--radar-active
    .map-smart-weather:not([hidden]) {
    flex: 0 0 auto;
    margin-top: 6px;
  }

  .map-navigation {
    bottom: 78px;
    width: calc(100% - 16px);
    padding: 10px 12px;
  }

  .map-navigation > small {
    display: none;
  }
  .map-navigation__heading {
    margin-bottom: 7px;
  }
  .map-navigation__metrics > div {
    padding: 7px 8px;
  }
  .map-navigation__actions {
    margin-top: 7px;
  }

  .map-guest-promo {
    bottom: 78px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    width: calc(100% - 16px);
    min-height: 54px;
    padding: 7px 34px 7px 8px;
    border-radius: 17px;
  }

  .map-guest-promo__pets {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .map-guest-promo__pets .map-icon {
    width: 21px;
    height: 21px;
  }
  .map-guest-promo__copy strong {
    font-size: 12px;
  }
  .map-guest-promo__copy span {
    display: none;
  }
  .map-guest-promo__button {
    padding: 8px 9px;
    font-size: 9px;
  }
  .map-guest-promo__close {
    top: 2px;
    right: 2px;
  }

  .place-sheet {
    bottom: 72px;
  }
  .map-page .leaflet-bottom {
    bottom: 66px;
  }

  .map-page .leaflet-control-attribution {
    margin: 0 5px 5px 0;
    padding: 2px 5px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.72);
    color: #647068;
    font-size: 9px;
    line-height: 1.2;
    backdrop-filter: blur(5px);
  }
  .map-page .leaflet-control-attribution a {
    color: #536c5c;
  }
}

@media (max-width: 380px) {
  .map-brandbar__brand > span {
    display: none;
  }
  .map-search__categories {
    grid-template-columns: 1fr 1fr;
  }
  .map-sidebar {
    left: 4px;
    right: 4px;
    bottom: 4px;
    padding: 4px;
  }
  .map-sidebar__toggle,
  .map-sidebar__item {
    min-height: 50px;
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   MAP PAGE FIXES
   ============================================================ */

.map-page {
  position: fixed;
  inset: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #e6eee7;
}

.map-brandbar {
  position: absolute;
  z-index: 30;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1180px;
  min-height: 58px;
  margin: 0 auto;
  padding: 8px 10px 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 40px rgba(39, 59, 43, 0.16);
  backdrop-filter: blur(18px);
}

.map-brandbar__brand,
.map-brandbar__actions {
  display: flex;
  align-items: center;
}

.map-brandbar__brand {
  gap: 9px;
  color: var(--color-text);
  text-decoration: none;
}

.map-brandbar__brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.map-brandbar__brand > span {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 850;
}

.map-brandbar__brand small {
  padding-left: 10px;
  border-left: 1px solid var(--color-border);
  color: var(--color-text-tertiary);
  font-size: 12px;
  font-weight: 700;
}

.map-brandbar__actions {
  gap: 8px;
}

.map-brandbar__login,
.map-brandbar__profile,
.map-brandbar__register {
  padding: 10px 14px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.map-brandbar__login,
.map-brandbar__profile {
  color: var(--color-text-secondary);
}

.map-brandbar__register {
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 8px 20px rgba(61, 139, 79, 0.22);
}

.map-toolbar {
  position: absolute;
  z-index: 26;
  top: 90px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(760px, calc(100% - 32px));
}

.map-search {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 8px;
  min-width: 0;
  padding: 5px 5px 5px 14px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 32px rgba(39, 59, 43, 0.15);
  backdrop-filter: blur(16px);
}

.map-search__icon {
  color: var(--color-primary-dark);
  font-size: 24px;
  line-height: 1;
}

.map-search input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.map-search__submit {
  align-self: stretch;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 800;
  cursor: pointer;
}

.map-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #e5e5e5;
}

.map-round-action,
.map-add-action {
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-primary-dark);
  box-shadow: 0 12px 32px rgba(39, 59, 43, 0.15);
  backdrop-filter: blur(16px);
  cursor: pointer;
}

.map-round-action {
  width: 52px;
  min-width: 52px;
  padding: 0;
  border-radius: 17px;
  font-size: 25px;
}

.map-add-action {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 17px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.map-add-action span {
  font-size: 22px;
  line-height: 1;
}

.map-location-notice {
  position: absolute;
  z-index: 25;
  top: 158px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(520px, calc(100% - 32px));
  padding: 10px 16px;
  border: 1px solid #d7eadb;
  border-radius: 14px;
  background: rgba(238, 248, 240, 0.95);
  color: var(--color-primary-dark);
  box-shadow: 0 10px 30px rgba(39, 59, 43, 0.13);
  font-size: 13px;
  font-weight: 650;
  backdrop-filter: blur(14px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.map-location-notice[data-state="error"] {
  border-color: #f2c9c4;
  background: rgba(255, 241, 239, 0.96);
  color: var(--color-error);
}

.map-location-notice--hidden {
  display: none;
}

.map-smart-weather {
  position: absolute;
  z-index: 25;
  top: 90px;
  right: 16px;
  width: min(320px, calc(100% - 32px));
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 40px rgba(39, 59, 43, 0.17);
  backdrop-filter: blur(18px);
  transition: opacity 0.2s ease;
}

.map-smart-weather[hidden] {
  display: none;
}

.map-smart-weather--loading {
  opacity: 0.72;
}

.map-smart-weather__main {
  display: flex;
  align-items: center;
  gap: 11px;
}

.map-smart-weather__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(145deg, #eef8ff, #e8f6ec);
  font-size: 25px;
}

.map-smart-weather__main > div {
  display: flex;
  flex-direction: column;
}

.map-smart-weather__main strong {
  font-family: var(--font-heading);
  font-size: 25px;
  line-height: 1;
}

.map-smart-weather__main span:last-child {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.map-smart-weather__advice {
  margin: 11px 0;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
}

.map-smart-weather__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.map-smart-weather__metrics span {
  padding: 5px 7px;
  border-radius: 8px;
  background: #f1f5f2;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 700;
}

.map-smart-weather__actions {
  display: flex;
  margin-top: 10px;
}

.map-radar-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 6px;
  border-radius: 12px;
  background: #eef8f0;
  cursor: pointer;
}

.map-radar-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.map-radar-switch span {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: #cbd5d1;
  transition: background 0.2s ease;
}

.map-radar-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease;
}

.map-radar-switch input:checked + span {
  background: #2563eb;
}

.map-radar-switch input:checked + span::after {
  transform: translateX(14px);
}

.map-radar-switch b {
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 11px;
}

.map-smart-weather__radar-time {
  display: block;
  margin-top: 8px;
  color: #2563eb;
  font-size: 10px;
  font-weight: 750;
}

.map-smart-weather small {
  display: block;
  margin-top: 8px;
  color: var(--color-text-tertiary);
  font-size: 9px;
}

.map-smart-weather small a {
  color: inherit;
}

.map-container canvas {
  outline: none;
}

.map-filters {
  position: absolute;
  z-index: 24;
  top: 218px;
  left: 16px;
  right: 16px;
  display: flex;
  gap: var(--space-sm);
  width: fit-content;
  max-width: calc(100% - 32px);
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.map-filters::-webkit-scrollbar {
  display: none;
}

.map-filter {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text-secondary);
  box-shadow: 0 8px 22px rgba(39, 59, 43, 0.12);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.map-filter:hover {
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.map-filter.active {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

.map-guest-promo {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: min(720px, calc(100% - 32px));
  padding: 12px 44px 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(39, 59, 43, 0.2);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.map-guest-promo--hidden,
.map-guest-promo--suppressed {
  display: none;
}

.map-guest-promo__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

.map-guest-promo__pets {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #eef8f0;
  font-size: 25px;
}

.map-guest-promo__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.map-guest-promo__copy strong {
  font-family: var(--font-heading);
  font-size: 15px;
}

.map-guest-promo__copy span {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.map-guest-promo__button {
  padding: 11px 15px;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.map-user-summary {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  width: min(1180px, calc(100% - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 50px rgba(39, 59, 43, 0.2);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.map-user-summary[hidden] {
  display: none;
}

.map-user-summary__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: #eef8f0;
  color: var(--color-primary-dark);
  font-size: 21px;
}

.map-user-summary__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.map-user-summary__copy strong {
  font-family: var(--font-heading);
  font-size: 15px;
}

.map-user-summary__copy span {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.map-user-summary__button {
  padding: 11px 14px;
  border: 0;
  border-radius: 13px;
  background: var(--gradient-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.map-user-summary__pet {
  max-width: 150px;
  min-height: 40px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
}

.map-user-summary__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.map-user-summary__button--soft {
  background: #eef8f0;
  color: var(--color-primary-dark);
  box-shadow: none;
}

.map-plus-badge {
  display: inline-flex;
  margin: 0 0 0 5px !important;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  color: #fff !important;
  font-size: 10px !important;
  line-height: 1.5;
  vertical-align: 2px;
}

.map-user-summary__button--plus {
  background: linear-gradient(135deg, #6d28d9, #a855f7);
  box-shadow: 0 8px 18px rgba(109, 40, 217, 0.2);
}

.map-walk-history-item {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.map-tracking-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 8px;
  padding: 12px;
  border-radius: 14px;
  background: #f4f1ff;
  text-align: left;
  cursor: pointer;
}
.map-tracking-consent--info {
  cursor: default;
}
.map-tracking-consent--info > .map-icon {
  width: 20px;
  flex: 0 0 20px;
  color: #6d28d9;
}

.map-tracking-consent input {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  accent-color: #7c3aed;
}

.map-tracking-consent span,
.map-tracking-consent small {
  display: block;
}

.map-tracking-consent strong {
  font-size: 13px;
}

.map-tracking-consent small {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.4;
}

.map-tracking-consent__status {
  display: block;
  min-height: 18px;
  margin-bottom: 10px;
  color: var(--color-primary-dark);
  font-size: 11px;
}

.map-location-form {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 8px;
  margin: 15px 0;
}

.map-location-form input,
.map-location-form select,
.map-suggestion-controls select {
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  background: #fff;
}

.map-location-form span {
  align-self: center;
  color: var(--color-text-tertiary);
  font-size: 10px;
}

.map-suggestion-modal__content {
  width: min(620px, calc(100% - 24px));
}

.map-suggestion-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 15px 0;
}

.map-walk-planner label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 700;
}

.map-walk-planner > .btn {
  grid-column: 1 / -1;
}

.map-suggestion-result {
  padding: 15px;
  border-radius: 15px;
  background: #f4f8f5;
}

.map-suggestion-result > strong {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-heading);
  font-size: 24px;
}

.map-suggestion-result p {
  margin: 6px 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.map-suggestion-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.map-navigation {
  position: absolute;
  z-index: 32;
  top: 95px;
  left: 50%;
  width: min(680px, calc(100% - 32px));
  padding: 15px 17px;
  border: 1px solid rgba(109, 40, 217, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 50px rgba(57, 38, 87, 0.24);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.map-navigation[hidden] {
  display: none;
}

.map-navigation__heading,
.map-navigation__metrics,
.map-navigation__actions {
  display: flex;
  align-items: center;
}
.map-navigation__actions {
  flex-wrap: wrap;
}

.map-route-preferences {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #f8faf8;
}
.map-route-preferences legend {
  padding: 0 6px;
  color: var(--color-text-primary);
  font-size: 12px;
  font-weight: 800;
}
.map-route-preferences label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.map-route-preferences input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}
.map-route-preferences small {
  color: var(--color-primary-dark);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.map-route-preferences p {
  margin: 7px 0 0;
  color: var(--color-text-tertiary);
  font-size: 10px;
  line-height: 1.45;
}

#map-suggestion-open {
  border-color: color-mix(in srgb, var(--color-primary) 35%, transparent);
  background: linear-gradient(135deg, #eef9f3, #fff8e8);
  box-shadow: 0 8px 20px rgba(39, 116, 82, 0.12);
}

#map-suggestion-open .map-icon {
  color: var(--color-primary-dark);
}

.map-navigation__heading {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.map-navigation__heading span {
  color: #7c3aed;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.map-navigation__metrics {
  gap: 8px;
}

.map-navigation__metrics > div {
  flex: 1;
  padding: 9px 11px;
  border-radius: 12px;
  background: #f6f3ff;
}

.map-navigation__metrics strong,
.map-navigation__metrics span {
  display: block;
}

.map-navigation__metrics strong {
  font-family: var(--font-heading);
  font-size: 15px;
}

.map-navigation__metrics span,
.map-navigation > small {
  color: var(--color-text-secondary);
  font-size: 10px;
}

.map-navigation__actions {
  gap: 8px;
  margin-top: 10px;
}

.map-navigation__warning {
  color: #c2410c;
}

.map-navigation > small {
  display: block;
  margin-top: 9px;
}

.map-walk-feedback__content {
  width: min(500px, calc(100% - 24px));
}

.map-walk-rating {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 14px 0;
}

.map-walk-rating button {
  border: 0;
  background: transparent;
  color: #d1d5db;
  font-size: 32px;
  cursor: pointer;
}

.map-walk-rating button.active {
  color: #f59e0b;
}

.map-walk-feedback-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-bottom: 16px;
}

.map-walk-feedback-tags input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.map-walk-feedback-tags span {
  display: block;
  padding: 8px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-size: 11px;
  cursor: pointer;
}

.map-walk-feedback-tags input:checked + span {
  border-color: #7c3aed;
  background: #f4f1ff;
  color: #6d28d9;
}
.map-create-choice {
  display: grid;
  gap: 7px;
  min-width: 210px;
  padding: 3px;
}
.map-create-choice strong {
  margin-bottom: 3px;
  font-size: 13px;
}
.map-create-choice button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  font-weight: 750;
  cursor: pointer;
}
.map-create-choice button:hover {
  border-color: var(--color-primary);
  background: #eef8f0;
}
.map-create-choice .map-icon {
  width: 17px;
  color: var(--color-primary-dark);
}
.map-create-choice small {
  color: var(--color-text-tertiary);
  font-size: 10px;
}
.map-creation-marker-wrap {
  background: transparent;
  border: 0;
}
.map-creation-marker {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 4px solid #fff;
  border-radius: 18px 18px 18px 4px;
  color: #fff;
  background: var(--color-primary-dark);
  box-shadow: 0 12px 28px rgba(20, 66, 36, 0.34);
  transform: rotate(-45deg);
}
.map-creation-marker .map-icon {
  width: 23px;
  transform: rotate(45deg);
}
.map-region-empty {
  display: grid;
  gap: 12px;
  padding: 24px 10px;
  text-align: center;
}
.map-region-empty strong {
  font-family: var(--font-heading);
  font-size: 20px;
}
.map-region-empty p {
  max-width: 440px;
  margin: 0 auto;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.map-region-empty .btn {
  justify-self: center;
}

/* Consistent vertical rhythm for forms and dialogs. */
.modal__content form,
.app-modal form,
.map-page .modal__content form,
.calculator-form {
  display: grid;
  gap: 20px;
}
.modal__content .form-group,
.app-modal .form-group,
.map-page .modal__content .form-group,
.calculator-form .form-group {
  margin: 0;
}
.modal__content fieldset + .form-group,
.modal__content .form-group + fieldset {
  margin-top: 4px;
}

.page-loading-skeleton {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 100px;
}
.page-loading-skeleton__hero {
  height: 220px;
  margin-bottom: 20px;
  border-radius: 28px;
}
.page-loading-skeleton__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.page-loading-skeleton__grid .skeleton {
  height: 170px;
  border-radius: 22px;
}

.admin-preview-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-preview-button .ui-icon {
  width: 17px;
}
.admin-article-preview {
  z-index: 12000;
}
.admin-article-preview .modal__content {
  width: min(920px, calc(100% - 28px));
  padding: 38px;
  border-radius: 28px;
}
.admin-article-preview header {
  padding-right: 42px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 26px;
  padding-bottom: 20px;
}
.admin-article-preview header span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.admin-article-preview header h1 {
  margin: 8px 0;
  font-size: clamp(30px, 5vw, 48px);
}
.admin-article-preview__body {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.75;
}
.admin-article-preview__body h2 {
  margin: 32px 0 12px;
}
.admin-article-preview__body p,
.admin-article-preview__body ul,
.admin-article-preview__body ol {
  margin: 0 0 18px;
}
.admin-preview-loading {
  display: grid;
  gap: 14px;
  padding: 40px 0;
}
.admin-article-editor {
  z-index: 12010;
}
.admin-article-editor .modal__content {
  width: min(1120px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  overflow: auto;
  padding: 34px;
  border-radius: 28px;
}
.admin-article-editor__form {
  display: grid;
  gap: 20px;
}
.admin-article-editor__form header {
  padding-right: 44px;
}
.admin-article-editor__form header span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-article-editor__form header h2 {
  margin: 7px 0;
  font-size: clamp(27px, 4vw, 40px);
}
.admin-article-editor__form header p,
.admin-article-editor__form footer span {
  color: var(--color-text-secondary);
  font-size: 12px;
}
.admin-article-editor__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.admin-article-editor__meta label {
  display: grid;
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
}
.admin-article-editor__meta label:nth-child(2) {
  grid-row: span 2;
}
.admin-article-editor__meta input,
.admin-article-editor__meta textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
}
.admin-article-editor__toolbar {
  position: sticky;
  top: -34px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
}
.admin-article-editor__toolbar button {
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: var(--color-surface-soft, #f5f7f4);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.admin-article-editor__body {
  min-height: 440px;
  padding: 28px clamp(18px, 5vw, 70px);
  border: 1px solid var(--color-border);
  border-radius: 0 0 14px 14px;
  background: #fff;
  line-height: 1.72;
  outline: none;
}
.admin-article-editor__body:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 94, 60, 0.12);
}
.admin-article-editor__body h2 {
  margin: 30px 0 11px;
}
.admin-article-editor__body h3 {
  margin: 24px 0 9px;
}
.admin-article-editor__body p,
.admin-article-editor__body ul,
.admin-article-editor__body ol,
.admin-article-editor__body blockquote {
  margin: 0 0 17px;
}
.admin-article-editor__form footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-onboarding {
  z-index: 11900;
}
.product-onboarding .modal__content {
  width: min(880px, calc(100% - 28px));
  display: grid;
  grid-template-columns: 42% 1fr;
  overflow: hidden;
  padding: 0;
  border-radius: 30px;
}
.product-onboarding .modal__content > img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}
.product-onboarding__copy {
  padding: 38px;
}
.product-onboarding__copy > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.product-onboarding__copy h2 {
  margin: 9px 0 25px;
  font-size: 32px;
}
.product-onboarding__steps {
  display: grid;
  gap: 14px;
}
.product-onboarding__steps article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: start;
}
.product-onboarding__steps b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: #fff;
  background: var(--color-primary-dark);
}
.product-onboarding__steps strong {
  display: block;
  margin-bottom: 3px;
}
.product-onboarding__steps p {
  font-size: 13px;
  line-height: 1.45;
}
.product-onboarding__actions {
  display: grid;
  gap: 8px;
  margin-top: 26px;
}

.today-alpha-participation:empty,
.today-activation:empty {
  display: none;
}
.today-alpha-participation {
  margin-bottom: 18px;
}
.today-alpha-invite {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border: 1px solid #d9c27d;
  border-radius: 22px;
  background: linear-gradient(135deg, #fffdf7, #f5efd9);
}
.today-alpha-invite--active {
  border-color: #9dc5a5;
  background: linear-gradient(135deg, #f8fcf7, #e9f4e8);
}
.today-alpha-invite__mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 17px;
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 8px 25px rgba(71, 67, 48, 0.09);
}
.today-alpha-invite__mark .ui-icon {
  width: 24px;
  height: 24px;
}
.today-alpha-invite > div:last-child > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.today-alpha-invite h2 {
  margin: 4px 0 7px;
  font-size: 24px;
}
.today-alpha-invite p,
.today-alpha-invite li {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.today-alpha-invite ul {
  display: grid;
  gap: 3px;
  margin: 10px 0 15px 18px;
}
.today-alpha-invite form > label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--color-text);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.today-alpha-invite form > label input {
  margin-top: 2px;
  accent-color: var(--color-primary-dark);
}
.today-alpha-invite form > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}
.today-alpha-invite form > div > a,
.today-alpha-invite__withdraw {
  padding: 7px 4px;
  border: 0;
  background: transparent;
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.today-activation__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 28px;
  margin-top: 18px;
  padding: 25px 28px;
  border: 1px solid #b9d4bd;
  border-radius: 24px;
  background: linear-gradient(135deg, #f2f8f1, #fff);
  box-shadow: 0 12px 32px rgba(49, 88, 58, 0.07);
}
.today-activation__body > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.today-activation__body h2 {
  margin: 5px 0 7px;
  font-size: clamp(22px, 3vw, 29px);
}
.today-activation__body > p {
  max-width: 690px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.today-activation__steps {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.today-activation__steps span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf0eb;
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 800;
}
.today-activation__steps i {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-style: normal;
}
.today-activation__steps .ui-icon {
  width: 12px;
}
.today-activation__steps span.is-done {
  color: #35643e;
  background: #e3f1e4;
}
.today-activation__steps span.is-current {
  color: #fff;
  background: #315c3a;
}
.today-activation__steps span.is-current i {
  color: #315c3a;
}
.today-activation__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 19px;
}
.today-activation__actions details {
  position: relative;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.today-activation__actions summary {
  cursor: pointer;
}
.today-activation__actions details form {
  position: absolute;
  z-index: 4;
  top: calc(100% + 8px);
  left: 0;
  display: grid;
  width: min(330px, calc(100vw - 44px));
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 15px 35px rgba(35, 52, 39, 0.16);
}
.today-activation__actions textarea {
  min-height: 82px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}
.today-activation__progress {
  display: grid;
  gap: 7px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
}
.today-activation__progress strong {
  font: 900 30px/1 var(--font-heading);
}
.today-activation__progress > span {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eee7;
}
.today-activation__progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #63a06f;
}
.today-activation__progress small {
  color: var(--color-text-tertiary);
  font-size: 9px;
  line-height: 1.35;
}
.today-activation__card--success {
  grid-template-columns: 60px minmax(0, 1fr);
  background: linear-gradient(135deg, #eaf6eb, #fff);
}
.today-activation__success-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 18px;
  background: #315c3a;
  color: #fff;
}
.today-activation__success-icon .ui-icon {
  width: 27px;
}
.today-alpha-feedback {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 16px;
  margin-top: 17px;
}
.today-alpha-feedback fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  border: 0;
}
.today-alpha-feedback legend {
  width: 100%;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
}
.today-alpha-feedback label {
  cursor: pointer;
}
.today-alpha-feedback fieldset label {
  position: relative;
}
.today-alpha-feedback fieldset input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.today-alpha-feedback fieldset span {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  font-size: 10px;
  font-weight: 800;
}
.today-alpha-feedback fieldset input:checked + span {
  border-color: #315c3a;
  background: #315c3a;
  color: #fff;
}
.today-alpha-feedback__message {
  display: grid;
  grid-column: 1 / -1;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
}
.today-alpha-feedback__message > span {
  color: var(--color-text-tertiary);
  font-weight: 500;
}
.today-alpha-feedback textarea {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  color: var(--color-text);
  font: inherit;
  resize: vertical;
}

.admin-alpha-feedback {
  margin-top: 16px;
}
.admin-alpha-feedback > header > strong {
  color: var(--color-primary-dark);
  font-size: 12px;
}
.admin-alpha-feedback__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-alpha-feedback__list > article {
  padding: 17px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fafbf9;
}
.admin-alpha-feedback__list > article[data-status="NEW"] {
  border-color: #d9b765;
  box-shadow: inset 3px 0 #dfb344;
}
.admin-alpha-feedback__list article > header,
.admin-alpha-feedback__list article > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.admin-alpha-feedback__list header div {
  display: grid;
  gap: 3px;
}
.admin-alpha-feedback__list header span,
.admin-alpha-feedback__list footer {
  color: var(--color-text-tertiary);
  font-size: 9px;
}
.admin-alpha-feedback__list header b {
  padding: 5px 7px;
  border-radius: 999px;
  background: #edf2ea;
  color: var(--color-primary-dark);
  font-size: 8px;
  text-transform: uppercase;
}
.admin-alpha-feedback__list article > p {
  margin: 13px 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.admin-alpha-feedback__actions {
  display: flex;
  gap: 7px;
  margin-top: 13px;
}
.admin-alpha-feedback__actions button {
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}

.admin-alpha-readiness {
  margin-bottom: 16px;
  padding: 26px;
  border: 1px solid #e1c87f;
  border-radius: 24px;
  background: linear-gradient(145deg, #fffdf7, #f8f3e5);
}
.admin-alpha-readiness.is-ready {
  border-color: #9cc6a4;
  background: linear-gradient(145deg, #f8fcf7, #eaf4e9);
}
.admin-alpha-readiness > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.admin-alpha-readiness > header span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-alpha-readiness > header h3 {
  margin: 4px 0 6px;
  font-size: 25px;
}
.admin-alpha-readiness > header p {
  max-width: 650px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.admin-alpha-readiness > header > strong {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: #fff;
  color: #856819;
  font-size: 10px;
}
.admin-alpha-readiness.is-ready > header > strong {
  color: var(--color-primary-dark);
}
.admin-alpha-readiness__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 18px;
}
.admin-alpha-invitations-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 18px;
}
.admin-alpha-invitations-summary div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.72);
}
.admin-alpha-invitations-summary span {
  color: var(--color-text-tertiary);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-alpha-invitations-summary strong {
  font-size: 17px;
}
.admin-alpha-readiness__grid > section {
  min-width: 0;
}
.admin-alpha-readiness__grid h4 {
  margin-bottom: 10px;
  font-size: 13px;
}
.admin-alpha-checks,
.admin-alpha-manual {
  display: grid;
  gap: 8px;
}
.admin-alpha-checks article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(124, 102, 39, 0.15);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.78);
}
.admin-alpha-checks article > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #edf5eb;
  color: var(--color-primary-dark);
}
.admin-alpha-checks article[data-check-status="ACTION"] > i {
  background: #fff0e9;
  color: #a5492e;
}
.admin-alpha-checks article[data-check-status="WAITING"] > i {
  background: #f7efd8;
  color: #856819;
}
.admin-alpha-checks .ui-icon {
  width: 14px;
  height: 14px;
}
.admin-alpha-checks article > div {
  display: grid;
  gap: 2px;
}
.admin-alpha-checks article > div strong {
  font-size: 11px;
}
.admin-alpha-checks article > div small {
  color: var(--color-text-tertiary);
  font-size: 9px;
}
.admin-alpha-checks article > b {
  color: var(--color-text-secondary);
  font-size: 8px;
  text-transform: uppercase;
}
.admin-alpha-checks article > button {
  grid-column: 2 / -1;
  justify-self: start;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary-dark);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.admin-alpha-manual form {
  padding: 12px;
  border: 1px solid rgba(124, 102, 39, 0.15);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.8);
}
.admin-alpha-manual form.is-complete {
  border-color: rgba(49, 92, 58, 0.25);
  background: rgba(247, 252, 246, 0.9);
}
.admin-alpha-manual label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: pointer;
}
.admin-alpha-manual input {
  margin-top: 2px;
  accent-color: var(--color-primary-dark);
}
.admin-alpha-manual label span {
  display: grid;
  gap: 2px;
}
.admin-alpha-manual label strong {
  font-size: 11px;
}
.admin-alpha-manual label small,
.admin-alpha-manual footer small {
  color: var(--color-text-tertiary);
  font-size: 9px;
  line-height: 1.4;
}
.admin-alpha-manual textarea {
  width: 100%;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: #fff;
  color: var(--color-text);
  font: 10px/1.45 var(--font-body);
  resize: vertical;
}
.admin-alpha-manual footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 7px;
}
.admin-alpha-manual footer button {
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: var(--color-primary-dark);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.admin-alpha-participants {
  margin-top: 16px;
}
.admin-alpha-enroll {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.4fr) minmax(120px, 0.7fr) minmax(125px, 0.7fr)
    minmax(160px, 1fr) auto;
  align-items: end;
  gap: 9px;
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 16px;
  background: #f2f6f0;
}
.admin-alpha-enroll label {
  display: grid;
  gap: 5px;
  color: var(--color-text-secondary);
  font-size: 9px;
  font-weight: 800;
}
.admin-alpha-enroll input,
.admin-alpha-enroll select,
.admin-alpha-participants td select {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: #fff;
  color: var(--color-text);
  font: 10px/1.2 var(--font-body);
}
.admin-alpha-enroll > p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: 9px;
}
.admin-alpha-participants td:first-child strong,
.admin-alpha-participants td:first-child small,
.admin-alpha-participants td select + small,
.admin-alpha-participants td b + small {
  display: block;
}
.admin-alpha-participants td select + small,
.admin-alpha-participants td b + small {
  margin-top: 5px;
  color: var(--color-text-tertiary);
  font-size: 8px;
}
.admin-alpha-participants td b[data-stage] {
  display: inline-block;
  padding: 5px 7px;
  border-radius: 999px;
  background: #f4edda;
  color: #755e1e;
  font-size: 8px;
  text-transform: uppercase;
}
.admin-alpha-participants td b[data-stage="ACTIVATED"] {
  background: #e8f3e7;
  color: var(--color-primary-dark);
}
.admin-alpha-participants td .is-critical,
.admin-alpha-participants td .is-blocked {
  display: block;
  color: #a5492e;
  font-size: 9px;
  font-weight: 800;
}
.admin-alpha-participants td .is-blocked {
  color: #856819;
}
.admin-alpha-warning {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff0e9;
  color: #8f3d28;
  font-size: 10px;
}

@media (max-width: 680px) {
  .account-visual-guide {
    grid-template-columns: 1fr;
  }
  .account-visual-guide img {
    height: 170px;
  }
  .account-visual-guide div {
    padding: 0 18px 20px;
  }
  .page-loading-skeleton__grid {
    grid-template-columns: 1fr;
  }
  .page-loading-skeleton__grid .skeleton {
    height: 120px;
  }
  .admin-article-preview .modal__content {
    padding: 28px 18px;
  }
  .admin-article-editor .modal__content {
    padding: 26px 16px;
  }
  .admin-article-editor__meta {
    grid-template-columns: 1fr;
  }
  .admin-article-editor__meta label:nth-child(2) {
    grid-row: auto;
  }
  .admin-article-editor__toolbar {
    top: -26px;
  }
  .admin-article-editor__body {
    min-height: 360px;
    padding: 20px 16px;
  }
  .admin-article-editor__form footer {
    align-items: stretch;
    flex-direction: column;
  }
  .product-onboarding .modal__content {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 24px);
  }
  .product-onboarding .modal__content > img {
    min-height: 0;
    height: 170px;
  }
  .product-onboarding__copy {
    padding: 24px 20px;
  }
  .product-onboarding__copy h2 {
    font-size: 27px;
  }
  .today-activation__card,
  .today-activation__card--success {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px;
  }
  .today-alpha-invite {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .today-activation__steps {
    align-items: stretch;
    flex-direction: column;
  }
  .today-activation__progress {
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .today-activation__progress small {
    grid-column: 1 / -1;
  }
  .today-alpha-feedback {
    grid-template-columns: 1fr;
  }
  .today-alpha-feedback .btn {
    width: 100%;
  }
  .admin-alpha-feedback__list {
    grid-template-columns: 1fr;
  }
  .admin-alpha-readiness__grid {
    grid-template-columns: 1fr;
  }
  .admin-alpha-invitations-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-alpha-enroll {
    grid-template-columns: 1fr;
  }
  .admin-alpha-enroll > p {
    grid-column: auto;
  }
}

.place-sheet {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 18px;
  width: min(620px, calc(100% - 24px));
  padding: 14px 20px 20px;
  border: 1px solid rgba(91, 168, 108, 0.18);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 55px rgba(45, 41, 38, 0.22);
  backdrop-filter: blur(18px);
  transform: translate(-50%, calc(100% + 50px));
  opacity: 0;
  visibility: hidden;
  transition:
    transform 0.28s ease,
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.place-sheet--open {
  transform: translate(-50%, 0);
  opacity: 1;
  visibility: visible;
}

.place-sheet__handle {
  width: 42px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--color-border);
}

.place-sheet__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.place-sheet__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 40px;
}

.place-sheet__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  background: #eef8f0;
  font-size: 25px;
}

.place-sheet__type {
  display: block;
  margin-bottom: 3px;
  color: var(--color-primary-dark);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.place-sheet h2 {
  margin: 0;
  font-size: clamp(19px, 4vw, 24px);
  line-height: 1.15;
}

.place-sheet__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.place-sheet__facts span {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef8f0;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 750;
}

.place-sheet__browse {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 7px;
  border: 1px solid #dce8de;
  border-radius: 15px;
  background: #f7faf7;
}
.place-sheet__browse[hidden] {
  display: none;
}
.place-sheet__browse button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #cfdcd1;
  border-radius: 12px;
  background: #fff;
  color: var(--color-primary-dark);
  cursor: pointer;
}
.place-sheet__browse button:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: #edf7ef;
}
.place-sheet__browse button:disabled {
  opacity: 0.32;
  cursor: default;
}
.place-sheet__browse button .map-icon {
  width: 19px;
  height: 19px;
}
.place-sheet__browse > span {
  color: #58705f;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.place-sheet__address {
  margin: 12px 0 0;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.place-sheet__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin-top: 12px;
}

.place-sheet__details > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
}

.place-sheet__details span {
  color: var(--color-text-tertiary);
}

.place-sheet__details strong,
.place-sheet__details a {
  overflow: hidden;
  color: var(--color-text);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.place-sheet__route-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 14px;
  background: #eef8f0;
  color: var(--color-primary-dark);
}

.place-sheet__route-summary[hidden],
.place-sheet__facts span[hidden] {
  display: none;
}

.place-sheet__route-summary span {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.place-sheet__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.place-save-btn--active {
  border-color: var(--color-primary) !important;
  background: #eef8f0 !important;
  color: var(--color-primary-dark) !important;
}

.place-sheet__actions .btn {
  justify-content: center;
  text-align: center;
}

/* Modal inside map page */
.map-page .modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: flex-end;
  justify-content: center;
  width: auto;
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  transform: none;
  transition: none;
}

.map-page .modal--open {
  display: flex;
}

.map-page .modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(45, 41, 38, 0.55);
  backdrop-filter: blur(4px);
}

.map-page .modal__content {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  width: 100%;
  max-width: var(--max-content-width);
  max-height: 80vh;
  overflow-y: auto;
  padding: var(--space-xl);
}

.map-page .map-auth-modal {
  align-items: center;
  padding: 16px;
}

.map-page .map-auth-modal__content {
  width: min(430px, 100%);
  padding: 34px 30px 28px;
  border-radius: 28px;
  text-align: center;
}

.map-auth-modal__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 21px;
  background: #eef8f0;
  font-size: 31px;
}

.map-auth-modal__eyebrow {
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.map-auth-modal__content h2 {
  margin: 8px 0;
}

.map-auth-modal__content p {
  margin: 0 0 20px;
  color: var(--color-text-secondary);
}

.map-auth-modal__login {
  display: inline-block;
  margin-top: 16px;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 750;
}

.map-page .map-list-modal,
.map-page .map-event-modal {
  align-items: center;
  padding: 16px;
}

.map-page .map-list-modal__content,
.map-page .map-event-modal__content {
  width: min(560px, 100%);
  max-height: min(82vh, 720px);
  padding: 30px;
  border-radius: 26px;
}

.map-list-modal__content h2,
.map-event-modal__content h2 {
  margin: 7px 0 18px;
}

.map-event-modal__content > p {
  margin: -10px 0 18px;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.map-route-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.map-route-list__empty {
  padding: 24px 10px;
  text-align: center;
}

.map-route-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-surface-alt);
}

.map-route-item > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.map-route-item strong,
.map-route-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-route-item span {
  color: var(--color-text-secondary);
  font-size: 12px;
}

.map-route-item__show,
.map-route-item__remove {
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.map-route-item__show {
  padding: 8px 10px;
  background: #eef8f0;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.map-route-item__remove {
  width: 32px;
  height: 32px;
  background: #fff;
  color: var(--color-text-tertiary);
  font-size: 18px;
}

.map-page .modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.map-page .modal__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .map-brandbar {
    top: 8px;
    left: 8px;
    right: 8px;
    min-height: 50px;
    padding: 6px 7px 6px 9px;
    border-radius: 17px;
  }

  .map-brandbar__brand {
    gap: 6px;
  }

  .map-brandbar__brand img {
    width: 34px;
    height: 34px;
  }

  .map-brandbar__brand > span {
    font-size: 19px;
  }

  .map-brandbar__brand small,
  .map-brandbar__login {
    display: none;
  }

  .map-brandbar__register,
  .map-brandbar__profile {
    padding: 9px 10px;
    font-size: 11px;
  }

  .map-brandbar__register span {
    display: none;
  }

  .map-toolbar {
    top: 66px;
    left: 8px;
    gap: 7px;
    width: calc(100% - 16px);
  }

  .map-search {
    padding-left: 11px;
    border-radius: 15px;
  }

  .map-search__submit {
    padding: 0 12px;
    font-size: 12px;
  }

  .map-round-action,
  .map-add-action {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    justify-content: center;
    border-radius: 15px;
  }

  .map-add-action {
    overflow: hidden;
    font-size: 0;
  }

  .map-add-action span {
    font-size: 23px;
  }

  .map-location-notice {
    top: 124px;
    left: 8px;
    align-items: flex-start;
    width: calc(100% - 16px);
    padding: 9px 12px;
    font-size: 12px;
  }

  .map-filters {
    top: 182px;
    left: 8px;
    right: 0;
    max-width: calc(100% - 8px);
    padding-right: 8px;
  }

  .map-smart-weather {
    top: 230px;
    right: 8px;
    width: calc(100% - 16px);
    padding: 11px;
    border-radius: 17px;
  }

  .map-smart-weather__main {
    gap: 9px;
  }

  .map-smart-weather__icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    font-size: 22px;
  }

  .map-smart-weather__main strong {
    font-size: 21px;
  }

  .map-smart-weather__advice {
    margin: 8px 0;
  }

  .map-smart-weather__metrics,
  .map-smart-weather small {
    display: none;
  }

  .map-guest-promo {
    bottom: 8px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    width: calc(100% - 16px);
    padding: 10px 38px 10px 10px;
    border-radius: 19px;
  }

  .map-user-summary {
    bottom: 8px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    width: calc(100% - 16px);
    padding: 10px;
    border-radius: 19px;
  }

  .map-user-summary__button {
    padding: 10px;
  }

  .map-user-summary__pet,
  .map-user-summary__actions {
    grid-column: 1 / -1;
  }

  .map-location-form,
  .map-suggestion-controls {
    grid-template-columns: 1fr;
  }

  .map-navigation {
    position: fixed;
    top: auto;
    bottom: 8px;
    width: calc(100% - 16px);
    border-radius: 19px;
  }

  .map-navigation__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .map-user-summary__pet {
    width: 100%;
    max-width: none;
  }

  .map-user-summary__actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .map-page .map-list-modal__content,
  .map-page .map-event-modal__content {
    padding: 26px 18px 20px;
    border-radius: 22px;
  }

  .map-guest-promo__pets {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 22px;
  }

  .map-guest-promo__button {
    grid-column: 1 / -1;
    padding: 10px;
    text-align: center;
  }

  .place-sheet {
    position: fixed;
    bottom: 8px;
    width: calc(100% - 16px);
    max-height: min(67vh, 560px);
    overflow-y: auto;
    border-radius: 22px;
  }

  .place-sheet__details {
    grid-template-columns: 1fr;
  }

  .place-sheet__actions {
    grid-template-columns: 1fr 1fr;
  }

  .place-sheet__actions a:last-child {
    grid-column: 1 / -1;
  }
}

/* ================================================================
   HEALTH PAGE
   ================================================================ */

.health-page {
  padding: var(--space-md);
  max-width: var(--max-content-width);
  margin: 0 auto;
}

.health-header {
  margin-bottom: var(--space-lg);
}

.health-header h1 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: var(--space-xs);
}

/* Quick actions */
.health-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.health-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.health-action-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.health-action-card--urgent {
  background: linear-gradient(135deg, #fff0f0 0%, #ffe4e4 100%);
  border-color: #ffb3b3;
}

.health-action-card--urgent:hover {
  border-color: #e74c3c;
}

.health-action-card__icon {
  font-size: 28px;
}

.health-action-card__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.3;
}

/* Filters */
.health-filters {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.health-filters::-webkit-scrollbar {
  display: none;
}

.health-filter {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.health-filter.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.health-filter:hover:not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Specialists list */
.specialists-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Specialist card */
.specialist-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.specialist-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.specialist-card__header {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.specialist-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-surface-alt);
}

.specialist-card__info {
  flex: 1;
  min-width: 0;
}

.specialist-card__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 2px;
}

.specialist-card__name {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.specialist-card__verified {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.specialist-card__type {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xs);
}

.specialist-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.specialist-card__rating {
  font-size: 13px;
  font-weight: 600;
}

.specialist-card__reviews {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

.specialist-card__edu {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

.specialist-card__certs {
  font-size: 11px;
  color: var(--color-text-tertiary);
  margin: 2px 0 0;
  line-height: 1.4;
}

.specialist-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

.specialist-card__price {
  display: flex;
  flex-direction: column;
}

.specialist-card__price-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary);
}

.specialist-card__price-label {
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.specialist-card__actions {
  display: flex;
  gap: var(--space-xs);
}

/* Skeleton */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skeleton-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-alt) 25%,
    var(--color-border-light) 50%,
    var(--color-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

.skeleton--avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.skeleton--text {
  height: 14px;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Avatar dropdown in header */
.header__avatar-wrap {
  position: relative;
}

.avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 200px;
  padding: var(--space-xs) 0;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
}

.avatar-dropdown--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.avatar-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  color: var(--color-text-primary);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.avatar-dropdown__item:hover {
  background: var(--color-surface-alt);
}

.avatar-dropdown__divider {
  height: 1px;
  background: var(--color-border-light);
  margin: var(--space-xs) var(--space-md);
}

@media (max-width: 640px) {
  .health-actions {
    grid-template-columns: 1fr;
  }

  .health-action-card {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }

  .specialist-card__header {
    gap: var(--space-sm);
  }

  .specialist-card__avatar {
    width: 52px;
    height: 52px;
  }

  .specialist-card__actions {
    flex-direction: column;
  }
}

/* Product alpha: pet overview and care center */
.pet-overview,
.care-center {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 96px;
}
.pet-overview__hero,
.care-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  border: 1px solid #dfe9df;
  border-radius: 28px;
  background: linear-gradient(135deg, #f3faf2 0%, #fff 72%);
  box-shadow: 0 14px 45px rgba(42, 83, 50, 0.07);
}
.pet-overview__identity {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pet-overview__identity img {
  width: 104px;
  height: 104px;
  border: 5px solid #fff;
  border-radius: 30px;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(42, 83, 50, 0.15);
}
.pet-overview__identity span,
.care-eyebrow,
.care-section-heading span,
.pet-section__heading span {
  display: block;
  margin-bottom: 5px;
  color: #4e8e5b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.pet-overview__identity h1,
.care-hero h1 {
  margin: 0;
  font: 900 34px/1.1 var(--font-heading);
  color: var(--color-text);
}
.pet-overview__identity p,
.care-hero p {
  margin: 7px 0 0;
  color: var(--color-text-secondary);
}
.pet-overview__hero .ui-icon,
.care-hero .ui-icon {
  width: 17px;
}
.pet-completeness {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 18px 0;
  padding: 18px 22px;
  border: 1px solid #e2e9e1;
  border-radius: 20px;
  background: #fff;
}
.pet-completeness span {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.pet-completeness strong {
  color: var(--color-text);
  font-size: 15px;
}
.pet-completeness__bar {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 20px;
  background: #e8eee8;
}
.pet-completeness__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ba86c, #83c78d);
}
.pet-completeness > a,
.pet-completeness__ready {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #477e52;
  font-size: 13px;
  font-weight: 800;
}
.pet-completeness .ui-icon {
  width: 15px;
}
.pet-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 18px 0;
}
.pet-metrics article {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 18px;
  border: 1px solid #e2e9e1;
  border-radius: 20px;
  background: #fff;
}
.pet-metrics i {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 13px;
  background: #edf7ee;
  color: #4f965d;
}
.pet-metrics .ui-icon {
  width: 21px;
}
.pet-metrics strong,
.pet-metrics span {
  display: block;
}
.pet-metrics strong {
  font: 800 18px/1.2 var(--font-heading);
}
.pet-metrics span {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.pet-alert,
.care-safety {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 18px 0;
  padding: 18px 20px;
  border: 1px solid #f0d49a;
  border-radius: 20px;
  background: #fff8e9;
  color: #795714;
}
.pet-alert--danger {
  border-color: #efb4b4;
  background: #fff2f2;
  color: #8a3636;
}
.pet-alert > .ui-icon,
.care-safety > .ui-icon {
  width: 22px;
  flex: 0 0 22px;
}
.pet-alert strong,
.care-safety strong {
  font-size: 14px;
}
.pet-alert p,
.care-safety p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.55;
}
.pet-overview__grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 18px;
  margin: 18px 0;
}
.pet-section {
  padding: 24px;
  border: 1px solid #e2e9e1;
  border-radius: 24px;
  background: #fff;
}
.pet-section__heading,
.care-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.pet-section__heading h2,
.care-section-heading h2 {
  margin: 0;
  font: 800 21px/1.2 var(--font-heading);
}
.pet-section__heading > a,
.care-section-heading > a {
  color: #4b8c58;
  font-size: 12px;
  font-weight: 800;
}
.pet-health-list {
  display: grid;
  gap: 9px;
}
.pet-health-row {
  display: grid;
  grid-template-columns: 38px 1fr 8px;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 15px;
  background: #f7f9f6;
}
.pet-health-row > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  color: #508f5b;
}
.pet-health-row .ui-icon {
  width: 19px;
}
.pet-health-row strong,
.pet-health-row small {
  display: block;
}
.pet-health-row strong {
  font-size: 13px;
}
.pet-health-row small {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.pet-health-row > b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa59b;
}
.pet-health-row--ok > b {
  background: #58a565;
}
.pet-health-row--warning > b {
  background: #e8a631;
}
.pet-health-row--danger > b {
  background: #dd6262;
}
.pet-service-grid {
  display: grid;
  gap: 9px;
}
.pet-service-grid > a {
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 15px;
  color: var(--color-text);
  background: #f7f9f6;
}
.pet-service-grid > a > .ui-icon:first-child {
  width: 20px;
  color: #508f5b;
}
.pet-service-grid > a > .ui-icon:last-child {
  width: 15px;
  color: #9aa49a;
}
.pet-service-grid strong,
.pet-service-grid small {
  display: block;
}
.pet-service-grid strong {
  font-size: 13px;
}
.pet-service-grid small {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.pet-details dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  margin: 0;
}
.pet-details dl > div {
  padding: 15px 0;
  border-top: 1px solid #edf0ed;
}
.pet-details dt {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.pet-details dd {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 700;
  white-space: pre-wrap;
}
.care-hero {
  align-items: flex-end;
  margin-bottom: 16px;
  min-height: 340px;
  padding-right: 48%;
  background:
    linear-gradient(
      90deg,
      rgba(250, 248, 245, 0.98) 0%,
      rgba(250, 248, 245, 0.91) 43%,
      rgba(250, 248, 245, 0.05) 70%
    ),
    var(--pet-visual-image, url("/assets/media/health/health-hero-v1.jpg")) 70%
      center / cover no-repeat;
}
.care-hero > div {
  max-width: 690px;
}
.care-safety {
  align-items: center;
  margin: 0 0 18px;
}
.care-safety > a {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
  color: #8a3636;
  font-size: 12px;
  font-weight: 800;
}
.care-safety > a .ui-icon {
  width: 15px;
}
.care-pets {
  display: flex;
  gap: 9px;
  margin: 0 0 18px;
  overflow-x: auto;
  padding: 2px;
}
.care-pets button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  padding: 9px 14px 9px 9px;
  border: 1px solid #e0e8df;
  border-radius: 17px;
  background: #fff;
  text-align: left;
}
.care-pets button.active {
  border-color: #70b17c;
  background: #eff8f0;
  box-shadow: 0 0 0 2px rgba(91, 168, 108, 0.1);
}
.care-pets img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
}
.care-pets strong,
.care-pets small {
  display: block;
}
.care-pets strong {
  font-size: 13px;
}
.care-pets small {
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.care-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
  gap: 18px;
}
.care-main,
.care-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  gap: 18px;
}
.care-summary,
.care-vaccines,
.care-side > section {
  padding: 24px;
  border: 1px solid #e1e8e0;
  border-radius: 24px;
  background: #fff;
}
.care-summary__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.care-summary-card {
  display: flex;
  min-height: 130px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  border-radius: 17px;
  background: #f5f8f5;
}
.care-summary-card i {
  display: grid;
  width: 36px;
  height: 36px;
  margin-bottom: auto;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  color: #5a9966;
}
.care-summary-card .ui-icon {
  width: 18px;
}
.care-summary-card strong {
  font: 800 15px/1.25 var(--font-heading);
}
.care-summary-card span {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 10px;
}
.care-summary-card--warning {
  background: #fff8e9;
}
.care-summary-card--danger {
  background: #fff1f1;
}
.care-summary-card--success {
  background: #eef8ef;
}
.care-timeline {
  display: grid;
}
.care-vaccine {
  display: grid;
  grid-template-columns: 10px 1fr auto 28px;
  align-items: center;
  gap: 13px;
  padding: 15px 0;
  border-top: 1px solid #edf0ed;
}
.care-vaccine:first-child {
  border-top: 0;
}
.care-vaccine > i {
  width: 10px;
  height: 10px;
  border: 3px solid #c8dfcc;
  border-radius: 50%;
  background: #5ba86c;
}
.care-vaccine strong,
.care-vaccine p {
  margin: 0;
}
.care-vaccine strong {
  font-size: 13px;
}
.care-vaccine p {
  margin-top: 4px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.care-status {
  padding: 5px 8px;
  border-radius: 20px;
  background: #edf7ee;
  color: #468052;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.care-status--due {
  background: #fff1cf;
  color: #866019;
}
.care-status--overdue {
  background: #fee8e8;
  color: #9c4242;
}
.care-vaccine__delete {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9aa39a;
}
.care-vaccine__delete:hover {
  background: #feecec;
  color: #b84343;
}
.care-vaccine__delete .ui-icon {
  width: 15px;
}
.care-inline-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 17px;
  background: #f6f8f5;
}
.care-inline-empty > .ui-icon {
  width: 24px;
  color: #63a56f;
}
.care-inline-empty div {
  flex: 1;
}
.care-inline-empty strong {
  font-size: 13px;
}
.care-inline-empty p {
  margin: 3px 0 0;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.care-facts {
  margin: 0;
}
.care-facts > div {
  padding: 12px 0;
  border-top: 1px solid #edf0ed;
}
.care-facts > div:first-child {
  border-top: 0;
}
.care-facts dt {
  color: var(--color-text-secondary);
  font-size: 10px;
}
.care-facts dd {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  white-space: pre-wrap;
}
.care-edit-link {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: #4e8e5b;
  font-size: 12px;
  font-weight: 800;
}
.care-edit-link .ui-icon {
  width: 16px;
}
.care-edit-link .ui-icon:last-child {
  margin-left: auto;
  width: 14px;
}
.care-side .care-future {
  background: #203f2a;
  color: #fff;
}
.care-future > span {
  color: #add6b4;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.care-future h3 {
  margin: 7px 0 10px;
  font: 800 19px var(--font-heading);
}
.care-future ul {
  margin: 0 0 14px;
  padding-left: 18px;
  color: #dce8dd;
  font-size: 12px;
  line-height: 1.8;
}
.care-future a {
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
}
.care-consultations {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 24px;
  margin-top: 18px;
  padding: 26px;
  border: 1px solid #dce6dc;
  border-radius: 24px;
  background: linear-gradient(135deg, #f3f7f3, #fff);
}
.care-consultations__copy {
  max-width: 600px;
}
.care-consultations h2 {
  margin: 0;
  font: 800 22px var(--font-heading);
}
.care-consultations p {
  margin: 7px 0 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.care-consultations__features {
  display: grid;
  gap: 7px;
}
.care-consultations__features span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
}
.care-consultations__features .ui-icon {
  width: 16px;
  color: #5a9c66;
}
.care-no-pet {
  display: grid;
  min-height: 300px;
  place-items: center;
  padding: 50px;
  text-align: center;
  border: 1px solid #e1e8e0;
  border-radius: 24px;
  background: #fff;
}
.care-no-pet > .ui-icon {
  width: 42px;
  color: #5ba86c;
}
.care-no-pet h2 {
  margin: 12px 0 4px;
}
.care-no-pet p {
  max-width: 500px;
  color: var(--color-text-secondary);
}
.care-modal {
  width: min(680px, calc(100% - 24px));
  overflow: hidden;
  padding: 0;
  border-radius: 24px;
}
.care-modal .modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}
.care-modal .modal__header h3 {
  margin: 0;
  font: 800 21px var(--font-heading);
}
.care-modal__body {
  display: grid;
  gap: 16px;
  max-height: min(62vh, 600px);
  overflow-y: auto;
  padding: 20px 24px;
}
.care-modal__note {
  display: flex;
  gap: 8px;
  margin: 4px 0 0;
  padding: 12px;
  border-radius: 13px;
  background: #f4f7f3;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}
.care-modal__note .ui-icon {
  width: 17px;
  flex: 0 0 17px;
}
.care-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid #e8ece7;
  background: #fbfcfa;
}
.care-profile-setup {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid #d9e7db !important;
  background: #f6faf6 !important;
}
.care-profile-setup summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}
.care-profile-setup summary::-webkit-details-marker {
  display: none;
}
.care-profile-setup summary > span {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 2px 9px;
}
.care-profile-setup summary > span > .ui-icon {
  grid-row: 1 / 3;
  width: 18px;
  color: var(--color-primary-dark);
}
.care-profile-setup summary small {
  color: var(--color-text-secondary);
  font-size: 10px;
}
.care-profile-setup summary > .ui-icon {
  width: 16px;
  transition: transform 0.2s ease;
}
.care-profile-setup[open] summary > .ui-icon {
  transform: rotate(90deg);
}
.care-profile-setup > p,
.care-profile-setup > ul,
.care-profile-setup > a {
  margin-right: 16px;
  margin-left: 16px;
}
.care-profile-setup > p {
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.care-profile-setup > ul {
  padding-left: 18px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.8;
}
.care-profile-setup > a {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 850;
}
.care-loading {
  display: grid;
  gap: 16px;
  padding: 40px 0;
}
.care-loading .skeleton-card {
  height: 220px;
}
@media (max-width: 900px) {
  .pet-metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .pet-overview__grid,
  .care-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .care-consultations {
    grid-template-columns: 1fr auto;
  }
  .care-consultations__features {
    display: none;
  }
}
@media (max-width: 640px) {
  .pet-overview,
  .care-center {
    width: calc(100% - 24px);
    padding-top: 14px;
  }
  .pet-overview__hero,
  .care-hero {
    align-items: stretch;
    flex-direction: column;
    padding: 20px;
    border-radius: 22px;
  }
  .care-hero {
    min-height: 440px;
    padding-right: 20px;
    background:
      linear-gradient(
        180deg,
        rgba(250, 248, 245, 0.98) 0%,
        rgba(250, 248, 245, 0.9) 48%,
        rgba(250, 248, 245, 0.08) 74%
      ),
      var(--pet-visual-image, url("/assets/media/health/health-hero-v1.jpg"))
        72% center / cover no-repeat;
  }
  .articles-hero {
    min-height: 450px;
    padding: 30px 20px;
    background:
      linear-gradient(
        180deg,
        rgba(250, 248, 245, 0.98) 0%,
        rgba(250, 248, 245, 0.94) 62%,
        rgba(250, 248, 245, 0.74) 100%
      ),
      var(
          --pet-visual-image,
          url("/assets/media/knowledge/knowledge-hero-v1.jpg")
        )
        72% center / cover no-repeat;
  }
  .pet-overview__identity {
    align-items: flex-start;
  }
  .pet-overview__identity img {
    width: 76px;
    height: 76px;
    border-radius: 23px;
  }
  .pet-overview__identity h1,
  .care-hero h1 {
    font-size: 27px;
  }
  .pet-overview__hero .btn,
  .care-hero .btn {
    width: 100%;
  }
  .pet-completeness {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .pet-metrics {
    gap: 8px;
  }
  .pet-metrics article {
    min-height: 80px;
    padding: 12px;
  }
  .pet-metrics i {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .pet-metrics strong {
    font-size: 15px;
  }
  .pet-section,
  .care-summary,
  .care-vaccines,
  .care-side > section {
    padding: 18px;
    border-radius: 20px;
  }
  .pet-details dl {
    grid-template-columns: 1fr;
  }
  .care-safety {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .care-safety > a {
    width: 100%;
    margin-left: 36px;
  }
  .care-summary__cards {
    grid-template-columns: 1fr;
  }
  .care-summary-card {
    min-height: 92px;
  }
  .care-vaccine {
    grid-template-columns: 9px 1fr 28px;
  }
  .care-vaccine .care-status {
    grid-column: 2;
  }
  .care-vaccine__delete {
    grid-row: 1;
    grid-column: 3;
  }
  .care-inline-empty {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .care-inline-empty button {
    width: 100%;
  }
  .care-consultations {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .care-consultations .btn {
    width: 100%;
  }
  .care-modal__body {
    padding: 18px;
  }
  .care-modal__footer {
    padding: 14px 18px;
  }
  .care-modal__footer .btn {
    flex: 1;
  }
}

.care-journal {
  padding: 24px;
  border: 1px solid #e1e8e0;
  border-radius: 24px;
  background: #fff;
}
.care-journal .care-section-heading > div > p {
  max-width: 620px;
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.care-entry-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border-radius: 15px;
  background: #f0f4ef;
}
.care-entry-mode button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.care-entry-mode button.active {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 3px 12px rgba(32, 63, 42, 0.08);
}
.care-entry-mode .ui-icon {
  width: 17px;
}
.care-record-purpose {
  display: flex;
  gap: 9px;
  padding: 13px;
  border-radius: 14px;
  background: #edf7ee;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.care-record-purpose > .ui-icon {
  width: 17px;
  flex: 0 0 17px;
  color: var(--color-primary-dark);
}
.care-record-purpose p {
  margin: 0;
}
.care-record-purpose strong {
  display: block;
  color: var(--color-text);
}
.care-type-purpose {
  margin: -4px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  background: #f8faf7;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.5;
}
[data-text-entry] {
  display: grid;
  gap: 16px;
}
[data-text-entry][hidden],
[data-voice-entry][hidden] {
  display: none;
}
.care-voice-entry {
  display: grid;
  gap: 12px;
}
.care-voice-guide {
  display: flex;
  gap: 12px;
  padding: 15px;
  border: 1px solid #dce7db;
  border-radius: 15px;
  background: #fbfdfb;
}
.care-voice-guide > .ui-icon {
  width: 22px;
  flex: 0 0 22px;
  color: var(--color-primary-dark);
}
.care-voice-guide ol {
  margin: 7px 0 0;
  padding-left: 18px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.6;
}
.care-record-button {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.care-record-button .ui-icon {
  width: 20px;
}
.care-voice-entry > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.5;
}
.care-voice-entry audio {
  width: 100%;
}
.care-journal__filters {
  display: flex;
  gap: 7px;
  margin: -2px 0 15px;
  overflow-x: auto;
  padding-bottom: 3px;
}
.care-journal__filters button {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid #e2e9e1;
  border-radius: 20px;
  background: #fff;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 700;
}
.care-journal__filters button.active {
  border-color: #5ba86c;
  background: #edf7ee;
  color: #437d50;
}
.care-records {
  display: grid;
}
.care-record {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #edf0ed;
}
.care-record:first-child {
  border-top: 0;
}
.care-record > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #edf7ee;
  color: #4d8d59;
}
.care-record > i .ui-icon {
  width: 18px;
}
.care-record > div > span {
  display: block;
  margin-bottom: 2px;
  color: #5c9667;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.care-record strong {
  display: block;
  font-size: 13px;
}
.care-record p,
.care-record small {
  display: block;
  margin: 3px 0 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.4;
}
.care-record small {
  color: #966a22;
  font-weight: 700;
}
.care-record > button,
.care-upcoming button > i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: #f3f6f2;
  color: #6c8c72;
}
.care-record > button:last-child {
  color: #a58585;
}
.care-record > button .ui-icon,
.care-upcoming button .ui-icon {
  width: 14px;
}
.care-record--completed {
  opacity: 0.58;
}
.care-record--completed strong {
  text-decoration: line-through;
}
.care-upcoming {
  padding: 22px;
  border-radius: 22px;
  background: #203f2a;
  color: #fff;
}
.care-upcoming > span {
  color: #add6b4;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.care-upcoming h3 {
  margin: 7px 0 12px;
  font: 800 19px var(--font-heading);
}
.care-upcoming > p {
  margin: 0;
  color: #dce8dd;
  font-size: 11px;
  line-height: 1.55;
}
.care-upcoming > div {
  display: grid;
  gap: 7px;
}
.care-upcoming button {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  text-align: left;
}
.care-upcoming button > i {
  background: rgba(255, 255, 255, 0.13);
  color: #c9e5ce;
}
.care-upcoming button strong,
.care-upcoming button small {
  display: block;
}
.care-upcoming button strong {
  font-size: 11px;
}
.care-upcoming button small {
  margin-top: 2px;
  color: #bcd4c0;
  font-size: 9px;
}
@media (max-width: 640px) {
  .care-journal {
    padding: 18px;
    border-radius: 20px;
  }
  .care-record {
    grid-template-columns: 34px minmax(0, 1fr) auto;
  }
  .care-record > i {
    width: 34px;
    height: 34px;
  }
  .care-record > button {
    grid-row: 2;
  }
  .care-record > button:last-child {
    grid-column: 3;
  }
  .care-record > button[data-complete-record] {
    grid-column: 2;
    justify-self: end;
  }
}

.care-weight {
  padding: 24px;
  border: 1px solid #e1e8e0;
  border-radius: 24px;
  background: #fff;
}
.care-weight .care-section-heading > strong {
  text-align: right;
  font: 900 20px var(--font-heading);
}
.care-weight .care-section-heading > strong small {
  display: block;
  margin-top: 3px;
  color: var(--color-text-secondary);
  font: 700 10px var(--font-body);
}
.care-weight svg {
  display: block;
  width: 100%;
  height: 150px;
  overflow: visible;
}
.care-weight__grid {
  fill: none;
  stroke: #e5ece4;
  stroke-width: 0.6;
}
.care-weight__line {
  fill: none;
  stroke: #5ba86c;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.care-weight circle {
  fill: #fff;
  stroke: #5ba86c;
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}
.care-weight__dates {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-secondary);
  font-size: 9px;
}
@media (max-width: 640px) {
  .care-weight {
    padding: 18px;
    border-radius: 20px;
  }
  .care-weight svg {
    height: 120px;
  }
}

.care-notification-settings {
  display: grid;
  grid-template-columns: minmax(240px, 0.65fr) 1.35fr;
  gap: 28px;
  margin-top: 18px;
  padding: 24px;
  border: 1px solid #dfe7de;
  border-radius: 24px;
  background: #fff;
}
.care-notification-settings h2 {
  margin: 0;
  font: 800 21px var(--font-heading);
}
.care-notification-settings > div > p {
  margin: 7px 0 0;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.55;
}
.care-notification-settings__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.care-notification-settings__toggles label {
  cursor: pointer;
}
.care-notification-settings__toggles input {
  position: absolute;
  opacity: 0;
}
.care-notification-settings__toggles span {
  display: block;
  padding: 7px 10px;
  border: 1px solid #dfe7de;
  border-radius: 20px;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 700;
}
.care-notification-settings__toggles input:checked + span {
  border-color: #64a871;
  background: #edf7ee;
  color: #437c4e;
}
.care-notification-settings__fields {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 9px;
}
.care-notification-settings__fields label {
  display: grid;
  gap: 4px;
  color: var(--color-text-secondary);
  font-size: 9px;
  font-weight: 700;
}
.care-notification-settings__fields input,
.care-notification-settings__fields select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #dfe7de;
  border-radius: 9px;
  background: #fff;
  color: var(--color-text);
  font-size: 11px;
}
@media (max-width: 760px) {
  .care-notification-settings {
    grid-template-columns: 1fr;
    padding: 18px;
    border-radius: 20px;
  }
  .care-notification-settings__fields {
    align-items: stretch;
  }
  .care-notification-settings__fields label {
    flex: 1 1 120px;
  }
  .care-notification-settings__fields button {
    width: 100%;
  }
}

/* Map controls cascade seal: keep this block at the end of the bundle. */
.map-page .map-brandbar {
  top: 16px;
  left: 16px;
  right: 16px;
  max-width: none;
  min-height: 58px;
}
.map-page .map-search {
  position: relative;
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.map-page .map-search__panel {
  position: fixed;
  top: 86px;
  left: 50%;
  width: min(680px, calc(100% - 32px));
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px) scale(0.98);
}
.map-page .map-search--open .map-search__panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}
.map-page .map-search__field input {
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.map-page .map-search__submit {
  align-self: stretch;
  padding: 0 16px;
  border-radius: 11px;
}
.map-page .map-search__categories {
  display: grid;
}
.map-page .map-search__categories .map-filter {
  display: flex;
  padding: 9px 10px;
  border-radius: 11px;
  box-shadow: none;
}
.map-page .map-location-notice {
  top: 90px;
  left: 92px;
}
.map-page:has(.map-sidebar--expanded) .map-location-notice {
  left: 306px;
}
.map-page .map-brandbar__profile {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.map-page .map-brandbar__profile .map-icon {
  display: none;
  width: 18px;
  height: 18px;
}
.map-page .map-sidebar {
  position: absolute;
}
.map-page .map-smart-weather {
  display: none;
}
.map-page
  .map-sidebar--expanded.map-sidebar--radar-active
  .map-smart-weather:not([hidden]) {
  position: static;
  display: block;
  width: auto;
  padding: 12px 10px;
  border: 0;
  border-top: 1px solid var(--color-border-light);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.map-page .map-filters,
.map-page .map-toolbar,
.map-page .map-user-summary {
  display: none !important;
}
.map-page .map-guest-promo__pets {
  font-size: 0;
}
.map-page .map-walk-rating button {
  display: grid;
  place-items: center;
  color: #d1d5db;
  font-size: 0;
}
.map-page .map-walk-rating button.active {
  color: #f59e0b;
}

@media (max-width: 760px) {
  .map-page .map-brandbar {
    top: 8px;
    left: 8px;
    right: 8px;
    min-height: 50px;
    padding: 6px 7px 6px 9px;
  }
  .map-page .map-search {
    margin-left: auto;
  }
  .map-page.map-page--search-open .map-search {
    flex: 1;
    margin: 0;
  }
  .map-page .map-search__panel {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    transform: translateY(-7px) scale(0.98);
  }
  .map-page .map-search--open .map-search__panel {
    transform: translateY(0) scale(1);
  }
  .map-page .map-search__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .map-page .map-location-notice {
    top: 66px;
    left: 8px;
    width: calc(100% - 16px);
    padding: 8px 10px;
    font-size: 11px;
  }
  .map-page:has(.map-sidebar--expanded) .map-location-notice {
    left: 8px;
  }
  .map-page .map-brandbar__profile,
  .map-page .map-brandbar__register {
    font-size: 0;
  }
  .map-page .map-brandbar__profile::before {
    content: none;
  }
  .map-page .map-brandbar__profile .map-icon {
    display: block;
  }
  .map-page .map-brandbar__profile .map-profile-label {
    display: none;
  }
  .map-page .map-sidebar {
    position: fixed;
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    height: 62px;
    padding: 6px;
    border-radius: 19px;
  }
  .map-page .map-sidebar--expanded {
    width: auto;
    height: min(80vh, 680px);
    padding: 10px;
    border-radius: 24px 24px 18px 18px;
  }
  .map-page .map-navigation {
    position: fixed;
    top: auto;
    bottom: 78px;
    width: calc(100% - 16px);
    padding: 10px 12px;
    border-radius: 19px;
  }
  .map-page .map-guest-promo {
    bottom: 78px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    width: calc(100% - 16px);
    min-height: 54px;
    padding: 7px 34px 7px 8px;
    border-radius: 17px;
  }
  .map-page .place-sheet {
    bottom: 72px;
  }
  .map-page .map-smart-weather__metrics {
    display: flex;
  }
}

/* Preventive care plan */
.care-summary__cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.care-plan {
  padding: 24px;
  border: 1px solid #dfe8df;
  border-radius: 24px;
  background: linear-gradient(145deg, #f7fbf7, #fff);
}
.care-plan .care-section-heading > small {
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 700;
}
.care-plan__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.care-plan__item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  min-height: 132px;
  padding: 15px;
  border: 1px solid #e5ebe4;
  border-radius: 17px;
  background: #fff;
}
.care-plan__item > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 12px;
  background: #edf6ee;
  color: #4f905c;
}
.care-plan__item > i .ui-icon {
  width: 19px;
}
.care-plan__item strong {
  font-size: 13px;
}
.care-plan__item p {
  margin: 4px 0 10px;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.45;
}
.care-plan__item a,
.care-plan__item button {
  display: inline-flex;
  border: 0;
  background: transparent;
  color: var(--color-primary-dark);
  font: 800 10px var(--font-body);
  text-decoration: none;
  cursor: pointer;
}
.care-plan__item--danger {
  border-color: #f1cccc;
  background: #fff8f8;
}
.care-plan__item--danger > i {
  background: #fee9e9;
  color: #a54545;
}
.care-plan__item--warning {
  background: #fffaf0;
}
.care-plan__item--success {
  background: #eff8f0;
}
.care-plan__note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  color: var(--color-text-tertiary);
  font-size: 9px;
}
.care-plan__note .ui-icon {
  flex: none;
  width: 15px;
}
@media (max-width: 900px) {
  .care-summary__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .care-plan {
    padding: 18px;
    border-radius: 20px;
  }
  .care-plan__grid {
    grid-template-columns: 1fr;
  }
  .care-plan__item {
    min-height: 112px;
  }
}

/* Pet nutrition profile */
.pet-nutrition {
  margin-bottom: 18px;
}
.pet-nutrition__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.pet-nutrition__grid > div {
  display: grid;
  gap: 5px;
  min-height: 86px;
  padding: 14px;
  border-radius: 15px;
  background: #f6f8f5;
}
.pet-nutrition__grid span {
  color: var(--color-text-tertiary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}
.pet-nutrition__grid strong {
  font-size: 12px;
  line-height: 1.35;
}
.pet-nutrition__calculate {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}
.pet-nutrition__calculate .ui-icon {
  width: 16px;
}
.pet-nutrition__calculate .ui-icon:last-child {
  width: 13px;
}
.pet-nutrition > p {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 12px 0 0;
  color: var(--color-text-tertiary);
  font-size: 9px;
}
.pet-nutrition > p .ui-icon {
  flex: none;
  width: 14px;
}
.calculator-result__save {
  margin-top: 18px;
  padding: 11px 15px;
  border: 1px solid #ffffff66;
  border-radius: 999px;
  background: #ffffff18;
  color: #fff;
  font: 800 11px var(--font-body);
  cursor: pointer;
}
.calculator-result__save:disabled {
  opacity: 0.7;
}
@media (max-width: 760px) {
  .pet-nutrition__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Animal knowledge catalog */
.animal-catalog,
.animal-species,
.animal-breed {
  background: linear-gradient(180deg, #f6faf6 0, #faf8f5 360px);
}
.animal-catalog__inner,
.animal-species__inner,
.animal-breed__inner {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 calc(var(--tab-bar-height) + 56px);
}
.animal-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.animal-catalog__hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border: 1px solid #dfe9df;
  border-radius: 28px;
  background: #ffffffd9;
  box-shadow: 0 18px 50px #36523c14;
}
.animal-catalog__hero h1,
.animal-species__hero h1,
.animal-breed__intro h1 {
  margin: 0;
  font-size: clamp(31px, 5vw, 52px);
}
.animal-catalog__hero p {
  max-width: 700px;
  margin: 10px 0 0;
  font-size: 14px;
}
.animal-catalog__tools,
.animal-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 28px 0 15px;
}
.animal-catalog__tools label,
.animal-breed-search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(420px, 100%);
  height: 44px;
  padding: 0 13px;
  border: 1px solid #dce6dc;
  border-radius: 14px;
  background: #fff;
}
.animal-catalog__tools label .ui-icon,
.animal-breed-search .ui-icon {
  width: 18px;
  color: var(--color-primary);
}
.animal-catalog__tools input,
.animal-breed-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font: 600 12px var(--font-body);
}
.animal-catalog__tools > span {
  color: var(--color-text-tertiary);
  font-size: 11px;
  font-weight: 700;
}
.animal-species-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.animal-species-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 15px;
  min-height: 154px;
  padding: 20px;
  border: 1px solid #e0e7df;
  border-radius: 22px;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  transition: 0.2s ease;
}
.animal-species-card:hover {
  transform: translateY(-3px);
  border-color: #acd0b3;
  box-shadow: 0 16px 32px #3152381a;
}
.animal-species-card__media {
  overflow: hidden;
  width: 62px;
  height: 62px;
  border-radius: 19px;
  background: #edf6ee;
}
.animal-species-card__media img,
.animal-species__hero-icon--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.animal-species-card h2 {
  margin: 2px 0 6px;
  font-size: 17px;
}
.animal-species-card p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.animal-species-card div > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 9px;
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
}
.animal-species-card .ui-icon {
  width: 14px;
}
.animal-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 42px;
  border: 1px dashed #cedbce;
  border-radius: 22px;
  background: #fff;
  text-align: center;
}
.animal-empty > .ui-icon {
  width: 30px;
  color: var(--color-primary);
}
.animal-empty p {
  font-size: 12px;
}
.animal-empty--page {
  width: min(640px, calc(100% - 32px));
  margin: 70px auto;
}
.animal-empty[hidden],
[data-search][hidden],
[data-breed-search][hidden] {
  display: none !important;
}
.animal-species__hero {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 28px;
  padding: 32px;
  border-radius: 28px;
  background: linear-gradient(135deg, #e6f4e8, #f7f4e9);
}
.animal-species__hero-icon {
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border: 1px solid #ffffffcc;
  border-radius: 30px;
  background: #ffffffb8;
  font-size: 55px;
}
.animal-species__hero-icon--photo {
  overflow: hidden;
  padding: 0;
}
.animal-species__hero p {
  max-width: 780px;
  margin: 9px 0;
  font-size: 13px;
}
.animal-species__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
}
.animal-species__facts span,
.animal-species__facts a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 99px;
  background: #ffffffc2;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.animal-species__facts .ui-icon {
  width: 15px;
}
.animal-section-heading > div > span {
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.animal-section-heading h2 {
  margin: 2px 0 0;
  font-size: 26px;
}
.animal-breed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.animal-breed-card {
  overflow: hidden;
  border: 1px solid #e0e7df;
  border-radius: 22px;
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  transition: 0.2s ease;
}
.animal-breed-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px #2a47311c;
}
.animal-breed-card__image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #edf4ed;
}
.animal-breed-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.animal-breed-card:hover img {
  transform: scale(1.035);
}
.animal-breed-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  padding: 15px;
}
.animal-breed-card__body h3 {
  margin: 0;
  font-size: 15px;
}
.animal-breed-card__body p {
  display: flex;
  gap: 10px;
  margin: 4px 0 0;
  font-size: 10px;
}
.animal-breed-card__body > .ui-icon {
  width: 17px;
  color: var(--color-primary);
}
.animal-breed-card__tags {
  grid-column: 1/-1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.animal-breed-card__tags span,
.animal-temperament span {
  padding: 4px 7px;
  border-radius: 99px;
  background: #eef6ef;
  color: #4c7654;
  font-size: 9px;
  font-weight: 700;
}
.animal-breed__hero {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) 1.2fr;
  gap: 34px;
  align-items: center;
}
.animal-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin: 0 0 22px;
  color: var(--color-text-tertiary);
  font-size: 10px;
  font-weight: 700;
}
.animal-breadcrumbs a {
  color: var(--color-primary-dark);
  text-decoration: none;
}
.animal-breadcrumbs a:hover {
  text-decoration: underline;
}
.animal-breed__photo {
  margin: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 28px;
  background: #e8f1e8;
}
.animal-breed__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.animal-breed__photo figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 99px;
  background: #183720b8;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.03em;
}
.animal-breed__intro > p {
  max-width: 650px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.65;
}
.animal-breed__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 18px 0;
}
.animal-breed__stats > div {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid #e1e8e0;
  border-radius: 14px;
  background: #fff;
}
.animal-breed__stats .ui-icon {
  width: 19px;
  color: var(--color-primary);
}
.animal-breed__stats span {
  display: grid;
}
.animal-breed__stats strong {
  font-size: 11px;
}
.animal-breed__stats small {
  color: var(--color-text-tertiary);
  font-size: 8px;
}
.animal-breed__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 18px;
  margin-top: 28px;
}
.animal-breed__section,
.animal-breed__aside {
  margin-bottom: 15px;
  padding: 24px;
  border: 1px solid #e0e7df;
  border-radius: 22px;
  background: #fff;
}
.animal-breed__section h2,
.animal-breed__aside h2 {
  margin: 0 0 14px;
  font-size: 21px;
}
.animal-breed__lead,
.animal-breed__decision {
  margin: -4px 0 16px;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.65;
}
.animal-trait-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.animal-trait-grid > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 11px;
  background: #f5f8f5;
}
.animal-trait-grid span {
  color: var(--color-text-tertiary);
  font-size: 9px;
}
.animal-trait-grid strong {
  font-size: 11px;
}
.animal-temperament {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.animal-care-list {
  display: grid;
  gap: 8px;
}
.animal-care-list article {
  display: flex;
  gap: 11px;
  padding: 13px;
  border-radius: 14px;
  background: #f7f8f6;
}
.animal-care-list .ui-icon {
  flex: none;
  width: 20px;
  color: var(--color-primary);
}
.animal-care-list strong {
  font-size: 12px;
}
.animal-care-list p {
  margin: 3px 0 0;
  font-size: 10px;
  line-height: 1.55;
}
.animal-health-risks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.animal-health-risks li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 11px;
  border: 1px solid #e6ebe5;
  border-radius: 13px;
  background: #f7f9f6;
  font-size: 10px;
  line-height: 1.4;
}
.animal-health-risks .ui-icon {
  flex: none;
  width: 18px;
  color: var(--color-primary);
}
.animal-fit-list {
  display: grid;
  gap: 8px;
}
.animal-fit-list article {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border-left: 3px solid #acd0b3;
  border-radius: 0 13px 13px 0;
  background: #f5f8f5;
}
.animal-fit-list .ui-icon {
  width: 20px;
  color: var(--color-primary-dark);
}
.animal-fit-list strong {
  font-size: 11px;
}
.animal-fit-list p {
  margin: 3px 0 0;
  font-size: 10px;
  line-height: 1.55;
}
.animal-breed__decision {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e7ece6;
}
.animal-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 12px 0 0;
  padding: 10px;
  border-radius: 11px;
  background: #fff8e8;
  font-size: 9px;
}
.animal-safety-note .ui-icon {
  flex: none;
  width: 16px;
  color: #9c6a11;
}
.animal-breed__aside {
  position: sticky;
  top: 82px;
  height: max-content;
}
.animal-breed__aside > p {
  font-size: 11px;
}
.animal-breed__aside > a {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 11px;
  border-radius: 11px;
  background: #f3f7f3;
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}
.animal-breed__aside > a .ui-icon {
  width: 16px;
}
.animal-breed__aside > a .ui-icon:last-child {
  margin-left: auto;
}
@media (max-width: 900px) {
  .animal-species-grid,
  .animal-breed-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .animal-breed__hero {
    grid-template-columns: 1fr;
  }
  .animal-breed__layout {
    grid-template-columns: 1fr;
  }
  .animal-breed__aside {
    position: static;
  }
}
@media (max-width: 620px) {
  .animal-catalog__inner,
  .animal-species__inner,
  .animal-breed__inner {
    width: calc(100% - 20px);
    padding-top: 15px;
  }
  .animal-catalog__hero {
    display: grid;
    padding: 21px;
    border-radius: 22px;
  }
  .animal-catalog__hero .btn {
    width: 100%;
  }
  .animal-catalog__tools,
  .animal-section-heading {
    align-items: stretch;
    flex-direction: column;
  }
  .animal-species-grid,
  .animal-breed-grid {
    grid-template-columns: 1fr;
  }
  .animal-species-card {
    min-height: 128px;
    padding: 15px;
  }
  .animal-species__hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }
  .animal-species__hero-icon {
    width: 74px;
    height: 74px;
    border-radius: 22px;
    font-size: 39px;
  }
  .animal-breed-search {
    width: 100%;
  }
  .animal-breed__hero {
    gap: 20px;
  }
  .animal-breed__photo {
    border-radius: 22px;
  }
  .animal-breed__stats {
    grid-template-columns: 1fr;
  }
  .animal-trait-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .animal-health-risks {
    grid-template-columns: 1fr;
  }
  .animal-breed__section,
  .animal-breed__aside {
    padding: 18px;
  }
}
.animal-species-card__icon .ui-icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary-dark);
}
.animal-species__hero-icon .ui-icon {
  width: 52px;
  height: 52px;
  color: var(--color-primary-dark);
}
.animal-breed-card__image,
.animal-breed__photo {
  position: relative;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #edf5ee, #f8faf6);
}
.animal-breed-card__image img,
.animal-breed__photo img {
  position: relative;
}

/* Launch pass: keep the mobile map focused on the map itself. */
@media (max-width: 640px) {
  .map-page .leaflet-control-zoom {
    display: none;
  }
  .map-page .map-location-notice {
    right: 8px;
    left: 8px;
    width: auto;
    min-height: 48px;
    padding: 8px 9px 8px 13px;
  }
  .map-page .map-location-notice > span {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .map-page .map-location-notice .btn {
    flex: 0 0 auto;
    padding-inline: 10px;
    font-size: 10px;
  }
  .map-page .map-sidebar:not(.map-sidebar--expanded) .map-sidebar__item--soon {
    display: none;
  }
  .map-page .map-guest-promo {
    bottom: 76px;
  }
}

/* Family access */
.pet-overview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pet-family-page,
.pet-invite-page {
  min-height: 100%;
  background: var(--color-bg);
}

.pet-family-shell {
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 120px;
}

.pet-family-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid rgba(91, 168, 108, 0.18);
  border-radius: 24px;
  background: linear-gradient(135deg, #f5fbf4, #fff);
}

.pet-family-hero > img {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  object-fit: cover;
}

.pet-family-hero > div {
  flex: 1;
}

.pet-family-hero span,
.pet-family-invite .pet-section__heading span,
.pet-family-list .pet-section__heading span,
.pet-family-history .pet-section__heading span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pet-family-hero h1 {
  margin: 4px 0;
  font-size: clamp(28px, 4vw, 42px);
}

.pet-family-hero p,
.pet-family-limit p,
.pet-family-access p {
  margin: 0;
}

.pet-family-limit,
.pet-family-invite,
.pet-family-list,
.pet-family-history,
.pet-family-access,
.pet-family-children,
.pet-family-roles {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: #fff;
}

.pet-family-limit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pet-family-limit > div {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.pet-family-limit .ui-icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
}

.pet-family-limit strong {
  font-size: 22px;
}

#family-invite-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}

#family-invite-form label {
  display: grid;
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

#family-invite-form select,
.pet-family-share input {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
}

.pet-family-share {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 15px;
  background: #f1f8f1;
}

.pet-family-share > div {
  display: grid;
  gap: 5px;
}

.pet-family-share span,
.pet-family-share small {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 700;
}

.pet-family-share small {
  grid-column: 1 / -1;
  font-weight: 500;
}

.pet-family-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}

.pet-family-card:first-child {
  border-top: 0;
}

.pet-family-card__avatar {
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #eaf5e9;
  color: var(--color-primary-dark);
  font-weight: 800;
}

.pet-family-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-family-card > div {
  display: grid;
  flex: 1;
  gap: 3px;
}

.pet-family-card small,
.pet-family-event small,
.pet-family-empty p {
  color: var(--color-text-muted);
  font-size: 12px;
}

.pet-family-event {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
}

.pet-family-event:first-child {
  border-top: 0;
}

.pet-family-event > i {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: #edf7ed;
  color: var(--color-primary-dark);
}

.pet-family-event > span {
  display: grid;
  gap: 3px;
}

.pet-family-access {
  display: flex;
  gap: 16px;
}

.pet-family-access > i {
  display: grid;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: #eaf5e9;
  color: var(--color-primary-dark);
}

.pet-family-access h2 {
  margin: 3px 0 6px;
}

.pet-family-children .pet-section__heading,
.pet-family-roles .pet-section__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pet-family-children .pet-section__heading > b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #f0eafa;
  color: #67499a;
  font-size: 11px;
}

.pet-family-children__notice {
  margin: 10px 0 16px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

#child-profile-form {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(150px, 0.7fr) auto;
  align-items: end;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  background: #f7faf6;
}

#child-profile-form > label:not(.pet-family-consent) {
  display: grid;
  gap: 7px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

#child-profile-form input[type="text"],
#child-profile-form input:not([type]),
#child-profile-form select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
}

.pet-family-consent {
  display: flex;
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 9px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.pet-family-consent input {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  padding: 0;
  border-radius: 6px;
  -webkit-appearance: checkbox;
  appearance: auto;
  accent-color: var(--color-primary);
}

#child-profile-form > .btn {
  grid-column: 1 / -1;
}

.pet-family-children__list {
  margin-top: 14px;
}

.pet-family-child {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}

.pet-family-child:first-child {
  border-top: 0;
}

.pet-family-child > div {
  display: grid;
  flex: 1;
  gap: 4px;
}

.pet-family-child small {
  color: var(--color-text-muted);
  font-size: 12px;
}

.pet-family-child.is-archived {
  opacity: 0.62;
}

.pet-family-child__progress {
  width: min(240px, 100%);
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e9eee8;
}

.pet-family-child__progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.pet-family-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.pet-family-role-grid article {
  padding: 15px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: #fafcf9;
}

.pet-family-role-grid ul {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
  font-size: 12px;
}

.pet-family-role-grid li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pet-family-role-grid .ui-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  color: var(--color-primary);
}

.child-learning-modal .modal__content {
  width: min(760px, calc(100% - 24px));
  max-height: min(88vh, 900px);
  overflow: auto;
}

.child-learning-list {
  display: grid;
  gap: 12px;
  margin: 18px 0;
}

.child-learning-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 17px;
  text-align: left;
}

.child-learning-card.is-complete {
  border-color: rgba(91, 168, 108, 0.5);
  background: #f8fcf7;
}

.child-learning-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.child-learning-card h3,
.child-learning-card p {
  margin: 0;
}

.child-learning-card header span,
.child-learning-card header b,
.child-learning-card > small {
  font-size: 11px;
}

.child-learning-card header b {
  color: var(--color-primary-dark);
}

.child-learning-card > div {
  padding: 12px;
  border-radius: 12px;
  background: #f3f6f2;
}

.child-learning-card > div p {
  margin-top: 5px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.child-learning-card > small {
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.child-learning-card__lock {
  color: #67499a;
  font-size: 12px;
  font-weight: 800;
}

.pet-invite-page {
  display: grid;
  min-height: calc(100vh - 80px);
  padding: 32px 16px 80px;
  place-items: center;
}

.pet-invite-card {
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid rgba(91, 168, 108, 0.2);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(44, 75, 52, 0.12);
  text-align: center;
}

.pet-invite-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.pet-invite-brand img {
  width: 32px;
  height: 32px;
}

.pet-invite-pet {
  width: 116px;
  height: 116px;
  margin-bottom: 14px;
  border-radius: 32px;
  object-fit: cover;
}

.pet-invite-eyebrow {
  display: block;
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.pet-invite-card h1 {
  margin: 8px 0;
  font-size: clamp(28px, 7vw, 42px);
}

.pet-invite-card > section {
  display: flex;
  gap: 14px;
  margin: 22px 0;
  padding: 16px;
  border-radius: 16px;
  background: #f3f8f2;
  text-align: left;
}

.pet-invite-card > section > i {
  color: var(--color-primary-dark);
}

.pet-invite-card > section p {
  margin: 4px 0 0;
  font-size: 13px;
}

.pet-invite-auth {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.pet-invite-card > small {
  display: block;
  margin-top: 16px;
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.5;
}

.today-routine__readonly {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--color-text-muted);
}

/* Stable first paint for «Сегодня»: the skeleton mirrors final block geometry. */
.today-skeleton-pets {
  min-height: 104px;
}
.today-skeleton-pet,
.today-skeleton-card,
.today-skeleton-weather,
.today-skeleton-feed > div {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
}
.today-skeleton-pet {
  flex: 0 0 min(280px, 72vw);
  min-height: 92px;
  padding: 14px;
}
.today-skeleton-pet > i {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 18px;
}
.today-skeleton-pet span,
.today-skeleton-card span,
.today-skeleton-weather span,
.today-skeleton-feed span {
  display: grid;
  flex: 1;
  gap: 9px;
}
.today-skeleton-pet b,
.today-skeleton-card b,
.today-skeleton-weather b,
.today-skeleton-feed b {
  width: min(180px, 72%);
  height: 16px;
}
.today-skeleton-pet small,
.today-skeleton-card small,
.today-skeleton-weather small,
.today-skeleton-feed small {
  width: min(240px, 88%);
  height: 11px;
}
.today-skeleton-card {
  min-height: 92px;
  padding: 16px;
}
.today-skeleton-card > i,
.today-skeleton-weather > i {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
}
.today-skeleton-card > em,
.today-skeleton-weather > em {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
}
.today-skeleton-weather {
  min-height: 128px;
  padding: 22px;
}
.today-skeleton-feed > div {
  overflow: hidden;
  min-height: 210px;
}
.today-skeleton-feed > div > i {
  align-self: stretch;
  width: 42%;
  flex: 0 0 42%;
  border-radius: 0;
}
.today-skeleton-feed > div > span {
  padding: 18px 18px 18px 0;
}
@media (max-width: 640px) {
  .today-skeleton-feed > div {
    display: grid;
    min-height: 320px;
  }
  .today-skeleton-feed > div > i {
    width: 100%;
    min-height: 170px;
  }
  .today-skeleton-feed > div > span {
    padding: 4px 16px 18px;
  }
}

@media (max-width: 680px) {
  .pet-family-shell {
    width: min(100% - 20px, 1040px);
    padding-top: 16px;
  }

  .pet-family-hero {
    align-items: flex-start;
    padding: 18px;
  }

  .pet-family-hero > img {
    width: 64px;
    height: 64px;
    border-radius: 18px;
  }

  .pet-family-hero > .btn {
    display: none;
  }

  .pet-family-limit,
  .pet-family-invite,
  .pet-family-list,
  .pet-family-history,
  .pet-family-access,
  .pet-family-children,
  .pet-family-roles {
    padding: 17px;
  }

  .pet-family-limit {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  #family-invite-form,
  .pet-family-share,
  #child-profile-form,
  .pet-family-role-grid {
    grid-template-columns: 1fr;
  }

  .pet-family-child {
    flex-wrap: wrap;
  }

  .pet-family-child > div {
    min-width: calc(100% - 60px);
  }

  .pet-family-share small {
    grid-column: auto;
  }

  .pet-family-card .btn {
    padding-inline: 8px;
  }

  .pet-overview__actions {
    width: 100%;
  }

  .pet-overview__actions .btn {
    flex: 1;
  }

  .pet-invite-card {
    padding: 22px 18px;
    border-radius: 22px;
  }
}

/* Article feedback and reading history */
.article-feedback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 36px;
  padding: 26px 28px;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: linear-gradient(135deg, #f5fbf6, #fffaf2);
}
.article-feedback > div:first-child {
  flex: 1;
}
.article-feedback > div:first-child > span {
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.article-feedback h2 {
  margin: 5px 0 6px;
  font-size: 24px;
}
.article-feedback p {
  margin: 0;
  color: var(--color-text-secondary);
}
.article-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.article-feedback__actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.article-feedback__actions button:hover,
.article-feedback__actions button.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.article-feedback__actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.article-feedback__actions .ui-icon {
  width: 16px;
  height: 16px;
}
@media (max-width: 640px) {
  .article-feedback {
    align-items: stretch;
    flex-direction: column;
    padding: 22px;
  }
  .article-feedback__actions {
    justify-content: stretch;
  }
  .article-feedback__actions button {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Personalized pet visuals: dog, cat, or inclusive mixed-species mode. */
.personalized-cutout {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.calendar-hero__visual {
  width: 132px;
  height: 118px;
  margin: -20px 0;
}
.calculator-hero {
  position: relative;
  justify-content: space-between;
  min-height: 150px;
  padding: 18px 24px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 26px;
  background: linear-gradient(135deg, #f4faf4, #fff9ef);
}
.calculator-hero__visual {
  align-self: flex-end;
  width: 160px;
  height: 138px;
  margin: -8px 0 -18px;
}
.updates-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  gap: 28px;
  max-width: none;
  min-height: 290px;
  padding: 36px 38px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: linear-gradient(135deg, #f1f8f2, #fff8ef);
}
.updates-hero__visual {
  width: 220px;
  height: 220px;
}
.settings-page__intro--visual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 170px;
  align-items: center;
  gap: 24px;
  max-width: none;
  min-height: 190px;
  padding: 24px 30px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 26px;
  background: linear-gradient(135deg, #f4faf4, #fff9ef);
}
.settings-page__visual {
  width: 170px;
  height: 170px;
  margin: -8px 0;
}
.not-found-page__visual {
  width: min(290px, 72vw);
  height: 230px;
  margin: -24px auto 4px;
}
.map-guest-promo__pets img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}
.legal-hero {
  position: relative;
  overflow: hidden;
  padding-right: 245px;
}
.legal-hero__visual {
  position: absolute;
  right: 24px;
  bottom: -28px;
  width: 210px;
  height: 210px;
  opacity: 0.88;
}
@media (max-width: 680px) {
  .calendar-hero {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .calendar-hero__visual {
    order: 3;
    width: 110px;
    height: 95px;
    margin: -14px auto -30px;
  }
  .calculator-hero {
    align-items: flex-start;
    min-height: 380px;
    padding: 24px 20px;
  }
  .calculator-hero__visual {
    position: absolute;
    right: 6px;
    bottom: 0;
    width: 185px;
    height: 185px;
    margin: 0;
    opacity: 0.92;
  }
  .updates-hero {
    grid-template-columns: 1fr;
    min-height: 480px;
    padding: 28px 22px 0;
  }
  .updates-hero__visual {
    width: 230px;
    height: 210px;
    margin: -14px auto 0;
  }
  .settings-page__intro--visual {
    position: relative;
    display: block;
    min-height: 260px;
    padding: 22px 104px 22px 22px;
  }
  .settings-page__intro--visual > div {
    position: relative;
    z-index: 1;
  }
  .settings-page__visual {
    position: absolute;
    right: -8px;
    bottom: 0;
    width: 116px;
    height: 116px;
    margin: 0;
  }
  .legal-hero {
    padding: 28px 22px 155px;
  }
  .legal-hero__visual {
    right: 50%;
    bottom: -40px;
    width: 185px;
    height: 185px;
    transform: translateX(50%);
    opacity: 0.72;
  }
}

.article-comments {
  margin-top: 32px;
  padding: clamp(22px, 4vw, 36px);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  background: var(--color-surface);
}
.article-comments > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.article-comments > header span {
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article-comments > header h2 {
  margin: 4px 0 0;
}
.article-comments > header > strong {
  display: grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: #e7f4ea;
  color: var(--color-primary-dark);
}
.article-comments__form {
  display: grid;
  gap: 10px;
  margin-bottom: 24px;
  padding: 18px;
  border-radius: 20px;
  background: var(--color-surface-hover);
}
.article-comments__form label {
  font-weight: 800;
}
.article-comments__form textarea {
  width: 100%;
  resize: vertical;
}
.article-comments__form > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article-comments__form small,
.article-comments__rules,
.article-comment time,
.article-comments__own time {
  color: var(--color-text-muted);
}
.article-comments__gate {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
}
.article-comments__gate .ui-icon {
  flex: 0 0 24px;
  color: var(--color-primary);
}
.article-comments__gate div {
  flex: 1;
}
.article-comments__gate p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
}
.article-comments__list {
  display: grid;
  gap: 14px;
}
.article-comment {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}
.article-comment__avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e7f4ea;
  color: var(--color-primary-dark);
}
.article-comment__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-comment__avatar .ui-icon {
  width: 21px;
  height: 21px;
}
.article-comment header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.article-comment p {
  margin: 8px 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.article-comment button,
.article-comments__own button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-error);
  font-size: 13px;
  cursor: pointer;
}
.article-comments__empty {
  padding: 22px;
  border: 1px dashed var(--color-border);
  border-radius: 18px;
  text-align: center;
}
.article-comments__empty p {
  margin: 5px 0 0;
  color: var(--color-text-muted);
}
.article-comments__own {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
}
.article-comments__own h3 {
  margin: 0;
  font-size: 16px;
}
.article-comments__own article {
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff8e7;
}
.article-comments__own article[data-status="REJECTED"] {
  background: #fff0f0;
}
.article-comments__own article > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
}
.article-comments__own p {
  margin: 8px 0;
  overflow-wrap: anywhere;
}
.article-comments__own small {
  display: block;
  margin-bottom: 8px;
  color: var(--color-error);
}
.article-comments__rules {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.admin-queue-item--comment > div:first-child > a {
  display: inline-block;
  margin-top: 10px;
  color: var(--color-primary-dark);
  font-weight: 700;
}
.admin-queue-item--comment .admin-actions label,
.admin-queue-item--community-report .admin-actions label,
.admin-queue-item--community-post .admin-actions label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.admin-queue-item--comment .admin-actions textarea,
.admin-queue-item--community-report .admin-actions textarea,
.admin-queue-item--community-post .admin-actions textarea {
  width: min(280px, 100%);
  resize: vertical;
}

.admin-queue-item--community-post img,
.admin-queue-item--community-post video {
  display: block;
  width: min(420px, 100%);
  max-height: 320px;
  margin: 12px 0;
  border-radius: 14px;
  object-fit: cover;
  background: #e8ece8;
}

.community-own-posts {
  padding: 24px;
  border: 1px solid var(--border-color, #dfe5df);
  border-radius: 24px;
  background: #fff;
}

.community-own-posts > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.community-own-posts > header span,
.community-own-posts > header small {
  color: var(--text-secondary, #66706a);
}

.community-own-posts > header h2 {
  margin: 4px 0 0;
}

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

.community-post-card {
  overflow: hidden;
  border: 1px solid #e1e7e1;
  border-radius: 20px;
  background: #fafcf9;
}

.community-post-card > img,
.community-post-card > video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #e8ece8;
}

.community-post-card__body {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.community-post-card__body > header,
.community-post-card__body > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.community-post-card__body > header b {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e5f3e9;
  color: #245d35;
  font-size: 12px;
}

.community-post-card__body > header b[data-status="PENDING"] {
  background: #fff2cf;
  color: #765719;
}

.community-post-card__body > header b[data-status="REJECTED"],
.community-post-card__body > header b[data-status="HIDDEN"] {
  background: #fae4e2;
  color: #8d2f29;
}

.community-post-card__body > small {
  color: #66706a;
}

.community-post-card__body > p {
  margin: 0;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.community-post-card__body blockquote {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #b74b43;
  background: #fff5f3;
  color: #71332e;
}

.community-post-card__body > footer label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #66706a;
  font-size: 12px;
}

.community-post-card__body select,
.community-post-modal select,
.community-post-modal textarea,
.community-post-modal input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #ced7ce;
  border-radius: 12px;
  background: #fff;
  color: inherit;
}

.community-post-card__body > footer button {
  border: 0;
  background: transparent;
  color: #9a3d37;
  cursor: pointer;
}

.community-post-empty,
.community-post-form-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: #f4f7f3;
}

.community-post-empty p,
.community-post-form-empty p {
  margin: 4px 0 0;
  color: #66706a;
}

.community-post-modal .modal__content {
  display: grid;
  gap: 16px;
  width: min(560px, calc(100vw - 32px));
}

.community-post-modal label {
  display: grid;
  gap: 7px;
  font-weight: 600;
}

.community-post-modal label small,
.community-post-form-note {
  color: #66706a;
  font-size: 12px;
  font-weight: 400;
}

.community-feed {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border-color, #dfe5df);
  border-radius: 24px;
  background: #f8faf7;
}

.community-feed > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.community-feed > header span,
.community-feed > header p {
  color: var(--text-secondary, #66706a);
}

.community-feed > header h2,
.community-feed > header p {
  margin: 4px 0 0;
}

.community-feed > header p {
  max-width: 510px;
  line-height: 1.5;
}

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

.community-feed-filters label {
  display: grid;
  gap: 6px;
  color: #66706a;
  font-size: 12px;
  font-weight: 700;
}

.community-feed-filters select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #ced7ce;
  border-radius: 12px;
  background: #fff;
  color: var(--text-primary, #1d2922);
}

.community-feed-list {
  display: grid;
  gap: 18px;
}

.community-feed-card {
  overflow: hidden;
  border: 1px solid #dce4dc;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 28px rgb(29 61 38 / 6%);
}

.community-feed-card > header,
.community-feed-card__text,
.community-feed-actions,
.community-feed-comments {
  margin: 0;
  padding: 16px 18px;
}

.community-feed-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.community-feed-card > header > span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #edf5ed;
  color: #356340;
  font-size: 12px;
  font-weight: 700;
}

.community-feed-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.community-feed-author > img,
.community-feed-author > svg {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  object-fit: cover;
}

.community-feed-author > svg {
  padding: 8px;
  background: #edf3ed;
}

.community-feed-author div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.community-feed-author small {
  color: #66706a;
}

.community-feed-card__text {
  padding-top: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.community-feed-card > img,
.community-feed-card > video {
  display: block;
  width: 100%;
  max-height: 540px;
  object-fit: cover;
  background: #e8ece8;
}

.community-feed-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #edf0ed;
  border-bottom: 1px solid #edf0ed;
}

.community-feed-actions button,
.community-feed-actions > span,
.community-feed-comment footer button,
.community-feed-comments__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: #66706a;
  font-size: 12px;
  cursor: pointer;
}

.community-feed-actions button.is-active {
  color: #a7354c;
}

.community-feed-actions button:nth-last-child(-n + 2) {
  margin-left: auto;
}

.community-feed-actions button:last-child {
  margin-left: 0;
}

.community-feed-comments {
  display: grid;
  gap: 12px;
  background: #fbfcfa;
}

.community-feed-comments > div {
  display: grid;
  gap: 10px;
}

.community-feed-comment {
  padding: 11px 12px;
  border-radius: 13px;
  background: #f0f4ef;
}

.community-feed-comment header,
.community-feed-comment footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.community-feed-comment time,
.community-feed-comments__empty {
  color: #778078;
  font-size: 12px;
}

.community-feed-comment p {
  margin: 7px 0 2px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.community-feed-comment footer {
  justify-content: flex-end;
}

.community-feed-comments__more {
  justify-self: start;
  color: var(--color-primary-dark, #28603a);
  font-weight: 700;
}

.community-feed-comments form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.community-feed-comments textarea {
  width: 100%;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid #ced7ce;
  border-radius: 12px;
  background: #fff;
  color: inherit;
}

.community-feed-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 34px 20px;
  border: 1px dashed #cdd8cd;
  border-radius: 18px;
  color: #66706a;
  text-align: center;
}

.community-feed-empty p {
  margin: 0;
}

.community-feed-more {
  justify-self: center;
}

@media (max-width: 680px) {
  .community-own-posts {
    padding: 18px;
  }

  .community-own-posts > header,
  .community-post-card__body > footer {
    align-items: stretch;
    flex-direction: column;
  }

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

  .community-post-card__body > footer button {
    align-self: flex-start;
    padding: 8px 0;
  }

  .community-feed {
    padding: 18px;
  }

  .community-feed > header,
  .community-feed-card > header,
  .community-feed-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .community-feed-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .community-feed-actions {
    gap: 3px;
  }

  .community-feed-actions button:nth-last-child(-n + 2) {
    margin-left: 0;
  }

  .community-feed-comments form {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .article-comments {
    padding: 20px 16px;
    border-radius: 22px;
  }
  .article-comments__form > div,
  .article-comments__gate,
  .article-comment header {
    align-items: stretch;
    flex-direction: column;
  }
  .article-comments__form .btn,
  .article-comments__gate .btn {
    width: 100%;
  }
  .article-comment {
    grid-template-columns: 36px minmax(0, 1fr);
  }
  .article-comment__avatar {
    width: 36px;
    height: 36px;
  }
}

.community-page,
.community-room-page {
  min-height: 100vh;
  background: var(--color-bg);
}
.community-shell,
.community-room-shell {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 110px;
}
.community-loading,
.community-empty {
  padding: 80px 24px;
  text-align: center;
}
.community-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: clamp(26px, 5vw, 52px);
  border-radius: 32px;
  background: linear-gradient(135deg, #e8f5ea, #f5efe4);
}
.community-hero > div:first-child > span,
.community-room-header > div > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-primary-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.community-hero h1,
.community-room-header h1 {
  margin: 8px 0 10px;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.05;
}
.community-hero p,
.community-room-header p {
  max-width: 720px;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}
.community-hero__mark {
  display: grid;
  width: 108px;
  height: 108px;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-primary-dark);
  font: 800 32px/1 var(--font-heading);
  box-shadow: var(--shadow-md);
}
.community-hero__mark small {
  margin-top: -22px;
  font: 700 12px/1 var(--font-body);
  color: var(--color-text-muted);
}
.community-safety,
.community-room-notice {
  display: flex;
  gap: 13px;
  margin: 20px 0;
  padding: 16px 18px;
  border: 1px solid #ead69a;
  border-radius: 18px;
  background: #fff8e7;
}
.community-safety .ui-icon,
.community-room-notice .ui-icon {
  flex: 0 0 22px;
  color: #9a6d00;
}
.community-safety p,
.community-room-notice p {
  margin: 3px 0 0;
  color: var(--color-text-secondary);
}
.community-species-tabs {
  display: flex;
  gap: 8px;
  margin: 24px 0;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.community-species-tabs button {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.community-species-tabs button.active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: white;
}
.community-group[hidden] {
  display: none;
}
.community-group > header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 18px 0;
}
.community-group > header > span {
  font-size: 42px;
}
.community-group h2 {
  margin: 0;
}
.community-group > header p {
  margin: 3px 0 0;
  color: var(--color-text-muted);
}
.community-room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.community-room-card {
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.community-room-card.is-plus {
  background: linear-gradient(145deg, #fffaf0, #fff);
}
.community-room-card > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.community-room-card__plus,
.community-room-card__free {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  color: var(--color-primary-dark);
}
.community-room-card__plus .ui-icon {
  width: 15px;
}
.community-room-card h3 {
  margin: 24px 0 8px;
  font-size: 22px;
}
.community-room-card p {
  margin: 0 0 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.community-room-card small {
  margin-top: auto;
  color: var(--color-text-muted);
}
.community-room-card > a,
.community-room-card > button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  padding: 11px 14px;
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  background: transparent;
  color: var(--color-primary-dark);
  font-weight: 800;
  cursor: pointer;
}
.community-room-card > a .ui-icon,
.community-room-card > button .ui-icon {
  width: 17px;
}
.community-rules {
  margin-top: 30px;
  padding: 24px;
  border-radius: 24px;
  background: #243c31;
  color: white;
}
.community-rules header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.community-rules header .ui-icon {
  width: 30px;
  height: 30px;
}
.community-rules header span {
  opacity: 0.7;
  font-size: 12px;
  text-transform: uppercase;
}
.community-rules h2 {
  margin: 3px 0 0;
}
.community-rules li,
.community-rules p {
  margin-top: 8px;
  line-height: 1.5;
  opacity: 0.88;
}
.community-room-back {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--color-primary-dark);
  font-weight: 800;
}
.community-room-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 28px;
  border-radius: 28px;
  background: var(--color-surface);
}
.community-room-header h1 {
  font-size: clamp(28px, 4vw, 42px);
}
.community-room-rules {
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
}
.community-room-rules summary {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  cursor: pointer;
}
.community-room-rules summary .ui-icon {
  width: 19px;
}
.community-room-rules li,
.community-room-rules p {
  margin-top: 7px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.community-messages {
  display: grid;
  gap: 12px;
  min-height: 260px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
}
.community-messages__empty {
  align-self: center;
  text-align: center;
  color: var(--color-text-muted);
}
.community-messages__empty p {
  margin: 5px 0 0;
}
.community-message {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  max-width: 820px;
}
.community-message.is-own {
  margin-left: auto;
  width: min(820px, 92%);
}
.community-message__avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #e8f5ea;
  color: var(--color-primary-dark);
}
.community-message__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.community-message > div:last-child {
  min-width: 0;
  padding: 13px 15px;
  border-radius: 4px 18px 18px;
  background: var(--color-surface-hover);
}
.community-message.is-own > div:last-child {
  background: #e8f5ea;
}
.community-message header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.community-message time {
  color: var(--color-text-muted);
  font-size: 12px;
}
.community-message p {
  margin: 8px 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.community-message footer {
  display: flex;
  gap: 12px;
}
.community-message footer button {
  display: inline-flex;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
}
.community-message footer .ui-icon {
  width: 14px;
}
.community-composer,
.community-join {
  display: flex;
  gap: 14px;
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: var(--color-surface);
}
.community-composer {
  display: grid;
}
.community-composer label {
  font-weight: 800;
}
.community-composer textarea {
  width: 100%;
  resize: vertical;
}
.community-composer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.community-composer small,
.community-join p {
  color: var(--color-text-muted);
}
.community-join {
  align-items: center;
  justify-content: space-between;
}
.community-join p {
  margin: 4px 0 0;
}
.community-room-locked {
  padding: 60px 24px;
  border-radius: 28px;
  background: var(--color-surface);
  text-align: center;
}
.community-room-locked > .ui-icon {
  width: 46px;
  height: 46px;
  color: var(--color-primary);
}
.community-room-locked p {
  color: var(--color-text-secondary);
}
.community-report-modal .modal__content {
  width: min(560px, calc(100vw - 24px));
}
.community-report-modal label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  font-weight: 700;
}

@media (max-width: 700px) {
  .community-shell,
  .community-room-shell {
    width: min(100% - 20px, 1120px);
    padding-top: 18px;
  }
  .community-hero {
    grid-template-columns: 1fr;
    border-radius: 24px;
  }
  .community-hero__mark {
    display: none;
  }
  .community-room-grid {
    grid-template-columns: 1fr;
  }
  .community-room-header,
  .community-composer > div,
  .community-join {
    align-items: stretch;
    flex-direction: column;
  }
  .community-room-header .btn,
  .community-composer .btn,
  .community-join .btn {
    width: 100%;
  }
  .community-messages {
    padding: 14px 10px;
  }
  .community-message {
    grid-template-columns: 34px minmax(0, 1fr);
  }
  .community-message__avatar {
    width: 34px;
    height: 34px;
  }
  .community-message.is-own {
    width: 96%;
  }
  .community-message header {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .community-message footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 700px) {
  .sound-library-shell {
    width: min(100% - 20px, 1040px);
    padding-top: 18px;
  }
  .sound-library-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    border-radius: 22px;
  }
  .sound-library-hero__wave {
    display: none;
  }
  .sound-library-warning {
    padding: 16px;
  }
  .sound-library-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .sound-library-toolbar select,
  .sound-library-toolbar .btn,
  .sound-library-modal select {
    width: 100%;
    min-width: 0;
  }
  .sound-library-list {
    padding: 20px 14px;
  }
  .sound-library-grid {
    grid-template-columns: 1fr;
  }
  .sound-session-card > header {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .sound-session-card > header > b {
    grid-column: 2;
    justify-self: start;
  }
}

.consultation-preview-page {
  min-height: 100vh;
  background: var(--color-bg);
}
.consultation-preview-shell {
  display: grid;
  gap: 18px;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 120px;
}
.consultation-preview-hero,
.consultation-emergency,
.consultation-preview-config,
.consultation-price-config,
.consultation-workspace,
.consultation-preview-flow {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.consultation-preview-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 34px;
  background: linear-gradient(135deg, #eef8f0, #f7f2ff);
}
.consultation-preview-hero span,
.consultation-preview-config > div > span,
.consultation-price-config > div > span,
.consultation-workspace__top span,
.consultation-preview-flow > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.consultation-preview-hero span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.consultation-preview-hero h1 {
  margin: 8px 0;
  font-size: clamp(30px, 5vw, 46px);
}
.consultation-preview-hero p {
  max-width: 740px;
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.consultation-preview-hero > b {
  padding: 9px 12px;
  border-radius: 999px;
  background: #eee8fa;
  color: #6849a7;
  font-size: 11px;
}
.consultation-emergency {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-color: #e8c9c4;
  background: #fff5f3;
}
.consultation-emergency > .ui-icon {
  width: 24px;
  color: #a54c43;
}
.consultation-emergency p,
.consultation-workspace footer p,
.consultation-preview-flow p {
  margin: 4px 0 0;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.consultation-preview-config {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.6fr);
  gap: 24px;
  padding: 24px;
}
.consultation-preview-config > div {
  display: grid;
  align-content: start;
  gap: 10px;
}
.consultation-preview-config select {
  min-height: 50px;
  padding: 0 42px 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: #fff;
}
.consultation-price-config {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 24px;
  padding: 24px;
}
.consultation-price-config > div {
  display: grid;
  align-content: start;
  gap: 10px;
}
.consultation-specialists {
  display: grid;
  gap: 10px;
}
.consultation-specialists > button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: #fafcf9;
  color: var(--color-text);
  text-align: left;
}
.consultation-specialists > button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.consultation-specialists > button > span:nth-child(2) {
  min-width: 0;
}
.consultation-specialists strong,
.consultation-specialists small {
  display: block;
}
.consultation-specialists small {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.consultation-specialists b {
  color: var(--color-primary-dark);
  font-size: 12px;
  white-space: nowrap;
}
.consultation-specialist-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: #e5f3e9;
  color: var(--color-primary-dark);
}
.consultation-specialist-avatar img,
.consultation-specialist-avatar .ui-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.consultation-specialist-avatar .ui-icon { padding: 9px; }
.consultation-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.consultation-blocks button {
  min-height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: #fff;
  color: var(--color-text-secondary);
  font-weight: 750;
}
.consultation-blocks button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.consultation-quote {
  display: grid;
  gap: 3px;
  padding: 16px;
  border-radius: 16px;
  background: #27312c;
  color: #fff;
}
.consultation-quote small { color: #cbd6cf; }
.consultation-quote strong { font-size: 28px; }
.consultation-quote span { font-size: 12px; }
.consultation-quote em {
  margin-top: 5px;
  color: #bde2c7;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
}
.consultation-direction {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.consultation-direction button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: #fafcf9;
  color: var(--color-text);
  text-align: left;
}
.consultation-direction button.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.consultation-direction .ui-icon {
  grid-row: 1 / 3;
  width: 24px;
  color: var(--color-primary-dark);
}
.consultation-direction strong,
.consultation-direction small {
  display: block;
}
.consultation-direction small,
.consultation-no-pet {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.consultation-no-pet {
  padding: 14px;
  border-radius: 14px;
  background: #f6f7f5;
}
.consultation-workspace {
  overflow: hidden;
}
.consultation-workspace__top {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-bottom: 1px solid var(--color-border);
}
.consultation-workspace__top h2 {
  margin: 5px 0 0;
}
.consultation-channel {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: #eef1ed;
}
.consultation-channel button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: 750;
}
.consultation-channel button.active {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: 0 2px 8px rgb(32 54 37 / 8%);
}
.consultation-channel .ui-icon {
  width: 17px;
}
.consultation-chat-preview {
  display: grid;
  gap: 12px;
  min-height: 360px;
  padding: 26px;
  background: #f7f9f6;
}
.consultation-chat-preview__label {
  justify-self: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eee8fa;
  color: #6849a7;
  font-size: 10px;
  font-weight: 800;
}
.consultation-chat-preview article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  width: min(78%, 610px);
}
.consultation-chat-preview article.is-owner {
  justify-self: end;
}
.consultation-chat-preview article > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  overflow: hidden;
  background: #e5f3e9;
  color: var(--color-primary-dark);
}
.consultation-chat-preview article img,
.consultation-chat-preview article .ui-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.consultation-chat-preview article .ui-icon {
  padding: 8px;
}
.consultation-chat-preview article p {
  margin: 0;
  padding: 12px 14px;
  border-radius: 4px 16px 16px;
  background: #fff;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.consultation-chat-preview article p strong {
  display: block;
  margin-bottom: 3px;
  color: var(--color-text);
}
.consultation-chat-disabled {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: auto;
}
.consultation-chat-disabled input,
.consultation-chat-disabled button {
  min-height: 46px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
}
.consultation-chat-disabled input {
  padding: 0 13px;
  background: #fff;
}
.consultation-chat-disabled button {
  padding: 0 18px;
}
.consultation-video-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.5fr);
  gap: 16px;
  padding: 24px;
  background: #f7f9f6;
}
.consultation-video-preview__screen {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 20px;
  background: #27312c;
  color: #fff;
  text-align: center;
}
.consultation-video-preview__screen .ui-icon {
  width: 42px;
  height: 42px;
  opacity: 0.72;
}
.consultation-video-preview__screen span {
  color: #cbd6cf;
  font-size: 12px;
}
.consultation-video-preview aside {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fff;
}
.consultation-video-preview aside > span {
  color: var(--color-primary-dark);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.consultation-video-preview aside > strong {
  display: block;
  margin-top: 6px;
}
.consultation-video-preview aside p,
.consultation-video-preview aside li {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.55;
}
.consultation-video-preview aside ul {
  padding-left: 18px;
}
.consultation-workspace > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  border-top: 1px solid var(--color-border);
}
.consultation-workspace > footer > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}
.consultation-workspace > footer .ui-icon {
  width: 20px;
  color: #8a641a;
}
.consultation-workspace > footer p {
  font-size: 12px;
}
.consultation-workspace > footer p strong {
  display: block;
  color: var(--color-text);
}
.consultation-launch-status {
  margin: 0 24px 22px;
  padding: 13px 15px;
  border: 1px solid #dfcceb;
  border-radius: 13px;
  background: #f8f2fb;
  color: #68407d;
  font-size: 12px;
}
.consultation-preview-flow {
  padding: 24px;
}
.consultation-preview-flow > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.consultation-preview-flow article {
  padding: 16px;
  border-radius: 16px;
  background: #f7f9f6;
}
.consultation-preview-flow article > b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 9px;
  border-radius: 50%;
  background: #e5f3e9;
  color: var(--color-primary-dark);
}
.consultation-preview-flow p {
  font-size: 12px;
}
.consultation-preview-empty,
.consultation-preview-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 20px;
  color: var(--color-text-secondary);
  text-align: center;
}

@media (max-width: 760px) {
  .consultation-preview-shell {
    width: min(100% - 20px, 1100px);
    padding-top: 18px;
  }
  .consultation-preview-hero,
  .consultation-emergency,
  .consultation-preview-config,
  .consultation-price-config,
  .consultation-workspace__top,
  .consultation-workspace > footer {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }
  .consultation-preview-hero {
    padding: 24px 20px;
  }
  .consultation-preview-hero > b {
    align-self: start;
  }
  .consultation-emergency .btn,
  .consultation-workspace > footer .btn {
    width: 100%;
  }
  .consultation-preview-config,
  .consultation-price-config,
  .consultation-direction,
  .consultation-video-preview,
  .consultation-preview-flow > div {
    grid-template-columns: 1fr;
  }
  .consultation-specialists > button {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .consultation-specialists b {
    grid-column: 2;
    justify-self: start;
  }
  .consultation-channel {
    align-self: stretch;
  }
  .consultation-channel button {
    flex: 1;
    justify-content: center;
  }
  .consultation-chat-preview {
    min-height: 420px;
    padding: 18px 12px;
  }
  .consultation-chat-preview article {
    width: 94%;
  }
  .consultation-video-preview__screen {
    min-height: 260px;
  }
  .consultation-workspace > footer {
    display: flex;
  }
}

.smart-home-page {
  min-height: 100vh;
  background: var(--color-bg);
}
.smart-home-shell {
  display: grid;
  gap: 18px;
  width: min(1060px, calc(100% - 32px));
  margin: 0 auto;
  padding: 38px 0 120px;
}
.smart-home-hero,
.smart-home-provider,
.smart-home-permissions,
.smart-home-capabilities,
.smart-home-safety,
.smart-home-planner {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: #fff;
}
.smart-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 34px;
  background: linear-gradient(135deg, #eef8f0, #f7f2ff);
}
.smart-home-hero span,
.smart-home-planner > header span,
.smart-home-permissions header span,
.smart-home-capabilities header span,
.smart-home-safety > span {
  color: var(--color-primary-dark);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.smart-home-hero span,
.smart-home-safety > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.smart-home-hero h1 {
  margin: 8px 0;
  font-size: clamp(30px, 5vw, 46px);
}
.smart-home-hero p,
.smart-home-provider p,
.smart-home-planner > header p,
.smart-home-permissions aside p,
.smart-home-safety p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.smart-home-hero__device {
  position: relative;
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  border-radius: 36px;
  background: linear-gradient(145deg, #2d303c, #14161d);
  box-shadow: 0 18px 38px rgb(28 31 41 / 18%);
}
.smart-home-hero__device .ui-icon {
  width: 38px;
  height: 38px;
  color: #fff;
}
.smart-home-hero__device i {
  position: absolute;
  bottom: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c289ff;
}
.smart-home-hero__device i:nth-of-type(1) {
  transform: translateX(-12px);
  background: #66d7f4;
}
.smart-home-hero__device i:nth-of-type(3) {
  transform: translateX(12px);
  background: #fb7185;
}
.smart-home-provider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  padding: 24px;
}
.smart-home-provider__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.smart-home-provider__brand > b {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 18px;
  background: #fc3f1d;
  color: #fff;
  font-size: 25px;
}
.smart-home-provider__brand span,
.smart-home-provider__status span {
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.smart-home-provider h2 {
  margin: 3px 0;
}
.smart-home-provider h2 em {
  display: inline-flex;
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eee8fb;
  color: #6849a7;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  vertical-align: 4px;
}
.smart-home-provider p {
  font-size: 12px;
}
.smart-home-provider__status {
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6f7f5;
}
.smart-home-provider__status small {
  color: var(--color-text-secondary);
}
.smart-home-connect-status {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #dfcceb;
  border-radius: 14px;
  background: #f8f2fb;
  color: #68407d;
}
.smart-home-permissions,
.smart-home-capabilities,
.smart-home-safety,
.smart-home-planner {
  padding: 24px;
}
.smart-home-planner > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.smart-home-planner > header h2 {
  margin: 4px 0 6px;
}
.smart-home-planner > header p {
  max-width: 700px;
}
.smart-home-planner > aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #eef8f0;
  color: #285c3a;
}
.smart-home-planner > aside .ui-icon {
  width: 22px;
}
.smart-home-planner > aside div,
.smart-home-planner > aside strong,
.smart-home-planner > aside span {
  display: block;
}
.smart-home-planner > aside span {
  margin-top: 3px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.smart-home-planner > aside > b {
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  white-space: nowrap;
}
.smart-home-scenario-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.smart-home-scenario {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: #fbfcfa;
}
.smart-home-scenario > header,
.smart-home-scenario__summary,
.smart-home-scenario__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.smart-home-scenario > header span {
  color: var(--color-text-secondary);
  font-size: 11px;
}
.smart-home-scenario > header h3 {
  margin: 3px 0 0;
}
.smart-home-scenario > header > b {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f2eefa;
  color: #6849a7;
  font-size: 10px;
}
.smart-home-scenario__summary {
  margin-top: 14px;
  padding: 12px;
  border-radius: 13px;
  background: #fff;
}
.smart-home-scenario__summary span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-primary-dark);
  font-weight: 750;
}
.smart-home-scenario__summary .ui-icon {
  width: 16px;
}
.smart-home-scenario > p {
  margin: 12px 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.smart-home-scenario code {
  color: #6849a7;
  font-size: 11px;
}
.smart-home-scenario__actions {
  justify-content: start;
}
.smart-home-action-log {
  display: grid;
  gap: 7px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--color-border);
}
.smart-home-action-log > strong {
  font-size: 11px;
}
.smart-home-action-log > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.smart-home-action-log time {
  color: var(--color-text-secondary);
}
.smart-home-action-log b {
  padding: 4px 6px;
  border-radius: 999px;
  background: #eef2ee;
}
.smart-home-action-log b.is-safe {
  background: #e5f3e9;
  color: #285c3a;
}
.smart-home-planner__empty {
  grid-column: 1 / -1;
  padding: 30px;
  border: 1px dashed var(--color-border);
  border-radius: 18px;
  text-align: center;
}
.smart-home-planner__empty p {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
}
.smart-home-form {
  display: grid;
  gap: 14px;
  width: min(520px, calc(100vw - 32px));
  padding: 28px;
  border-radius: 22px;
}
.smart-home-modal .modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #edf3ef;
  color: var(--color-text);
  cursor: pointer;
}
.smart-home-modal .modal__close .ui-icon {
  width: 18px;
  height: 18px;
}
.smart-home-form > small {
  color: var(--color-primary-dark);
  font-weight: 800;
  text-transform: uppercase;
}
.smart-home-form h2,
.smart-home-form p {
  margin: 0;
}
.smart-home-form > p {
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.smart-home-form > label:not(.smart-home-form__consent) {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 750;
}
.smart-home-form input,
.smart-home-form select {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: #fff;
}
.smart-home-form__consent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 13px;
  border-radius: 13px;
  background: #fff9e9;
  cursor: pointer;
}
.smart-home-form__consent input {
  width: 18px;
  min-height: 18px;
  margin-top: 2px;
}
.smart-home-form__consent strong {
  display: block;
  margin-bottom: 3px;
}
.smart-home-permissions > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}
.smart-home-permissions h2,
.smart-home-capabilities h2 {
  margin: 4px 0 0;
}
.smart-home-permissions > header > b {
  padding: 6px 9px;
  border-radius: 999px;
  background: #f2eefa;
  color: #6849a7;
  font-size: 10px;
}
.smart-home-permissions > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.smart-home-permissions label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
}
.smart-home-permissions label > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.smart-home-permissions label > span,
.smart-home-permissions label strong,
.smart-home-permissions label small {
  display: block;
}
.smart-home-permissions label small {
  margin-top: 4px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.smart-home-permissions label > i {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #dfe4df;
}
.smart-home-permissions label > i::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgb(0 0 0 / 14%);
  transition: 0.2s ease;
}
.smart-home-permissions input:checked ~ i {
  background: var(--color-primary);
}
.smart-home-permissions input:checked ~ i::after {
  transform: translateX(18px);
}
.smart-home-permissions aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  margin-top: 16px;
  padding: 15px;
  border-radius: 15px;
  background: #fff9e9;
}
.smart-home-permissions aside .ui-icon {
  width: 22px;
  color: #8a641a;
}
.smart-home-permissions aside p {
  margin-top: 4px;
  font-size: 12px;
}
.smart-home-capabilities > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.smart-home-capabilities article {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-radius: 16px;
  background: #f7f9f6;
}
.smart-home-capabilities article > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: #e5f3e9;
  color: var(--color-primary-dark);
}
.smart-home-capabilities article .ui-icon {
  width: 20px;
}
.smart-home-capabilities article small {
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.smart-home-safety > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.smart-home-safety article {
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
}
.smart-home-safety article > b {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 50%;
  background: #f2eefa;
  color: #6849a7;
}
.smart-home-safety p {
  margin-top: 5px;
  font-size: 12px;
}
.smart-home-empty,
.smart-home-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 48px 20px;
  color: var(--color-text-secondary);
  text-align: center;
}

@media (max-width: 760px) {
  .smart-home-shell {
    width: min(100% - 20px, 1060px);
    padding-top: 18px;
  }
  .smart-home-hero {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }
  .smart-home-hero__device {
    display: none;
  }
  .smart-home-provider {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .smart-home-provider__status {
    min-width: 0;
  }
  .smart-home-provider .btn {
    width: 100%;
  }
  .smart-home-permissions > header {
    align-items: start;
    flex-direction: column;
  }
  .smart-home-permissions > div,
  .smart-home-scenario-list,
  .smart-home-capabilities > div,
  .smart-home-safety > div {
    grid-template-columns: 1fr;
  }
  .smart-home-planner > header {
    flex-direction: column;
  }
  .smart-home-planner > header .btn {
    width: 100%;
  }
  .smart-home-planner > aside {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .smart-home-planner > aside > b {
    grid-column: 1 / -1;
    text-align: center;
  }
  .smart-home-scenario__actions {
    align-items: stretch;
    flex-direction: column;
  }
  .smart-home-action-log > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .smart-home-action-log > div b {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .smart-home-form {
    width: calc(100vw - 20px);
    padding: 24px 18px;
    border-radius: 20px;
  }
}