/* 2026-06-16: final locked typography and page rhythm.
   This file must be loaded last. It is the single source of truth for fonts. */

@font-face {
  font-family: "YanYanBrand";
  src:
    url("../fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype"),
    url("/assets/fonts/ShiShiRuYi-XiaoYaCiLi-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YanYanHand";
  src:
    url("../fonts/Slidefu-Regular-2.ttf") format("truetype"),
    url("/assets/fonts/Slidefu-Regular-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YanYanAlt";
  src:
    url("../fonts/ShanHaiBanRuoTiW-2.ttf") format("truetype"),
    url("/assets/fonts/ShanHaiBanRuoTiW-2.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root,
body,
#app,
#app[data-view] {
  --yy-font-logo: "YanYanHand", "YanYanBrand", "PingFang SC", sans-serif;
  --yy-font-title: "YanYanBrand", "PingFang SC", sans-serif;
  --yy-font-body: "YanYanBrand", "PingFang SC", sans-serif;
  --yy-font-label: "YanYanAlt", "YanYanBrand", "PingFang SC", sans-serif;
  --yy-font-emotion: "YanYanHand", "YanYanBrand", "PingFang SC", sans-serif;

  --yy-size-logo: clamp(34px, 4.2vw, 58px);
  --yy-size-page-title: clamp(24px, 2.1vw, 34px);
  --yy-size-section-title: clamp(21px, 1.55vw, 28px);
  --yy-size-card-title: clamp(22px, 1.6vw, 30px);
  --yy-size-node-title: clamp(24px, 2.2vw, 40px);
  --yy-size-body: clamp(15px, 0.98vw, 17px);
  --yy-size-ui: clamp(13px, 0.86vw, 15px);
  --yy-size-label: clamp(11px, 0.72vw, 13px);
  --yy-size-emotion: clamp(24px, 2.15vw, 36px);

  --yy-line-title: 1.18;
  --yy-line-body: 1.78;
  --yy-line-emotion: 1.52;
}

body,
#app,
#app[data-view],
#app[data-view] :is(p, li, dd, dt, blockquote, span, a, button, input, textarea, select, option, label, small) {
  font-family: var(--yy-font-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0.016em !important;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app[data-view] p,
#app[data-view] li,
#app[data-view] dd,
#app[data-view] textarea,
#app[data-view] input {
  font-size: var(--yy-size-body) !important;
  line-height: var(--yy-line-body) !important;
}

#app[data-view] :is(button, .button, .nav-pill, .floating-function-dock button, .section-more-button) {
  font-family: var(--yy-font-body) !important;
  font-size: var(--yy-size-ui) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03em !important;
  white-space: nowrap !important;
}

#app[data-view] :is(.wordmark, .brand-title, .site-brand-title, .home-brand-title, .main-brand-title) {
  font-family: var(--yy-font-logo) !important;
  font-size: var(--yy-size-logo) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.05em !important;
}

#app[data-view] :is(
  h1,
  .page-title,
  .feature-page-hero h1,
  .activities-hero h1,
  .observations-hero h1,
  .profile-hero h1,
  .listening-progress-card h1,
  .observation-empty h1
) {
  font-family: var(--yy-font-title) !important;
  font-size: var(--yy-size-page-title) !important;
  line-height: var(--yy-line-title) !important;
  letter-spacing: 0.026em !important;
  font-weight: 400 !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h2,
  .section-heading h2,
  .profile-section h2,
  .observation-intro-card h2,
  .home-disclaimer h2
) {
  font-family: var(--yy-font-title) !important;
  font-size: var(--yy-size-section-title) !important;
  line-height: 1.22 !important;
  letter-spacing: 0.024em !important;
  font-weight: 400 !important;
  text-wrap: balance;
}

#app[data-view] :is(
  h3,
  .test-card h2,
  .test-card h3,
  .activity-card h3,
  .event-card h3,
  .observation-card h2,
  .feature-page-card h2,
  .home-action-card h2,
  .feature-node h2,
  .feature-node-title
) {
  font-family: var(--yy-font-title) !important;
  font-size: var(--yy-size-card-title) !important;
  line-height: 1.23 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-wrap: balance;
}

#app[data-view="home"] :is(.feature-node h2, .feature-node-title) {
  font-size: var(--yy-size-node-title) !important;
}

#app[data-view] :is(
  .eyebrow,
  .tag,
  .pill,
  .pill-tag,
  .soft-tag,
  .platform-pill,
  .status-pill,
  .price-pill,
  .activity-type,
  .activity-status,
  .event-type,
  .observation-type,
  .observation-number,
  .observation-source,
  .result-count-badge,
  .same-result-badge,
  .test-card-tags,
  .test-card .tag,
  .test-card .pill,
  .test-meta-row,
  .option-key,
  .tiny-label,
  .seal-label
) {
  font-family: var(--yy-font-label) !important;
  font-size: var(--yy-size-label) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.05em !important;
  font-weight: 400 !important;
}

#app[data-view] :is(
  .observation-main-text.original,
  .daily-care-line,
  .emotion-line,
  .emotional-line,
  .hand-note,
  .handwritten-note,
  .soft-note,
  .one-liner,
  .result-reminder,
  .creator-note,
  .echo-creator-note
) {
  font-family: var(--yy-font-emotion) !important;
  font-size: var(--yy-size-emotion) !important;
  line-height: var(--yy-line-emotion) !important;
  letter-spacing: 0.038em !important;
  font-weight: 400 !important;
}

#app[data-view] :is(.observation-main-text.quote, .observation-main-text:not(.original)) {
  font-family: var(--yy-font-body) !important;
  font-size: clamp(19px, 1.35vw, 25px) !important;
  line-height: 1.72 !important;
  letter-spacing: 0.018em !important;
}

/* Page rhythm: functional pages show the useful content first. */
#app[data-view] .feature-page-view,
#app[data-view] .daily-card-view,
#app[data-view] .activities-view,
#app[data-view] .observations-view,
#app[data-view] .creator-profile-view,
#app[data-view] .listening-service-view,
#app[data-view] .library-view {
  width: min(1180px, calc(100vw - 64px)) !important;
  margin-inline: auto !important;
  padding-top: clamp(72px, 7vw, 96px) !important;
}

#app[data-view] .feature-page-hero,
#app[data-view] .activities-hero,
#app[data-view] .observations-hero,
#app[data-view] .profile-hero,
#app[data-view] .listening-progress-card {
  padding: clamp(24px, 3vw, 40px) !important;
  margin-bottom: clamp(22px, 2.4vw, 34px) !important;
  min-height: auto !important;
}

/* Today observation: one card, one prompt, one echo area. */
#app[data-view="daily-observation"] .observation-card-result {
  display: grid !important;
  grid-template-columns: minmax(330px, 0.9fr) minmax(320px, 1fr) !important;
  gap: clamp(22px, 3vw, 44px) !important;
  align-items: center !important;
  min-height: auto !important;
  padding: clamp(28px, 3.4vw, 48px) !important;
  overflow: visible !important;
}

#app[data-view="daily-observation"] .observation-text-card,
#app[data-view="daily-observation"] .observation-projection-card {
  min-height: clamp(300px, 36vw, 480px) !important;
  padding: clamp(30px, 4vw, 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

#app[data-view="daily-observation"] .observation-arrived-note {
  font-family: var(--yy-font-body) !important;
  font-size: var(--yy-size-ui) !important;
  line-height: 1.62 !important;
  max-width: 32em !important;
}

#app[data-view="daily-observation"] .observation-prompt-strip,
#app[data-view="daily-observation"] .observation-prompt,
#app[data-view="daily-observation"] .tiny-action-card {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 12px 22px !important;
  align-items: start !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
}

#app[data-view="daily-observation"] .observation-prompt-strip h2,
#app[data-view="daily-observation"] .observation-prompt h2,
#app[data-view="daily-observation"] .tiny-action-card h2 {
  font-size: clamp(16px, 1.05vw, 20px) !important;
  line-height: 1.35 !important;
}

#app[data-view="daily-observation"] .observation-echo-section {
  padding: clamp(28px, 3.4vw, 46px) !important;
}

#app[data-view="daily-observation"] .echo-form-card {
  width: min(680px, 100%) !important;
  padding: clamp(22px, 2.6vw, 34px) !important;
}

#app[data-view="daily-observation"] .observation-echo-input {
  min-height: 150px !important;
  resize: vertical;
}

/* Test library: cards keep one scale and never spill text. */
#app[data-view="library"] .library-grid,
#app[data-view="library"] .recommended-tests .library-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
}

#app[data-view="library"] .test-card {
  min-height: 520px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  overflow: hidden !important;
  padding: clamp(24px, 2.6vw, 34px) !important;
}

#app[data-view="library"] .test-card h2 {
  font-size: clamp(23px, 1.65vw, 31px) !important;
  line-height: 1.24 !important;
}

#app[data-view="library"] .test-card p {
  max-width: 34em !important;
}

#app[data-view="library"] .test-card .button {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* Activities: invitation cards use consistent columns and avoid single-character wrapping. */
#app[data-view="activities"] .activity-grid,
#app[data-view="activities"] .event-card-grid,
#app[data-view="activities"] .activities-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  align-items: stretch !important;
}

#app[data-view="activities"] .event-card,
#app[data-view="activities"] .activity-card {
  min-height: 500px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: clamp(24px, 2.6vw, 34px) !important;
  overflow: hidden !important;
}

#app[data-view="activities"] :is(.event-card, .activity-card) dl {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-items: start !important;
}

#app[data-view="activities"] :is(.event-card, .activity-card) dl > div {
  display: grid !important;
  grid-template-columns: 3.25em minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

#app[data-view="activities"] :is(.event-card, .activity-card) dt {
  font-family: var(--yy-font-label) !important;
  color: var(--color-deep-sea, #2a4561) !important;
  white-space: nowrap !important;
}

#app[data-view="activities"] :is(.event-card, .activity-card) dd {
  min-width: 0 !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

#app[data-view="activities"] :is(.event-card, .activity-card) .button {
  margin-top: auto !important;
  align-self: flex-start !important;
}

/* Dock and form controls stay readable, compact, and consistent. */
#app[data-view] .floating-function-dock {
  z-index: 30 !important;
}

#app[data-view] :is(input, textarea, select) {
  font-family: var(--yy-font-body) !important;
  border-radius: 18px !important;
}

#app[data-view] :is(.background-motifs, .motif, .motif-watermark, .card-motif, .feature-motif) {
  pointer-events: none !important;
}

@media (max-width: 760px) {
  #app[data-view] .feature-page-view,
  #app[data-view] .daily-card-view,
  #app[data-view] .activities-view,
  #app[data-view] .observations-view,
  #app[data-view] .creator-profile-view,
  #app[data-view] .listening-service-view,
  #app[data-view] .library-view {
    width: min(100% - 28px, 100%) !important;
    padding-top: 86px !important;
  }

  #app[data-view="daily-observation"] .observation-card-result {
    grid-template-columns: 1fr !important;
  }

  #app[data-view="library"] .library-grid,
  #app[data-view="activities"] .activity-grid,
  #app[data-view="activities"] .event-card-grid,
  #app[data-view="activities"] .activities-grid {
    grid-template-columns: 1fr !important;
  }

  #app[data-view="activities"] :is(.event-card, .activity-card) dl {
    grid-template-columns: 3.5em minmax(0, 1fr) !important;
  }
}

/* 2026-06-16 v2: corrective layout lock.
   Keep functional pages calm, compact, and readable. */
#app[data-view] *,
#app[data-view] *::before,
#app[data-view] *::after {
  box-sizing: border-box !important;
}

#app[data-view] :is(h1, h2, h3, p, dd, dt, span, button, label, textarea, input) {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

#app[data-view] :is(.background-motifs, .motif, .motif-watermark, .card-motif, .feature-motif, svg[aria-hidden="true"]) {
  pointer-events: none !important;
}

/* Daily observation is one composed card, not scattered fragments. */
#app[data-view="daily-observation"] .daily-card-view,
#app[data-view="daily-observation"] .feature-page-view,
#app[data-view="daily-observation"] .observation-page {
  width: min(1060px, calc(100vw - 64px)) !important;
  margin-inline: auto !important;
  padding-top: clamp(78px, 7vw, 104px) !important;
}

#app[data-view="daily-observation"] .observation-card-result {
  width: 100% !important;
  max-width: 940px !important;
  margin: 0 auto clamp(24px, 3vw, 38px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: clamp(16px, 2vw, 24px) !important;
  align-items: stretch !important;
  min-height: auto !important;
  padding: clamp(28px, 3.4vw, 44px) !important;
  border-radius: 32px !important;
  overflow: hidden !important;
}

#app[data-view="daily-observation"] .observation-card-result > .eyebrow,
#app[data-view="daily-observation"] .observation-card-result > .observation-number {
  margin: 0 !important;
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  color: var(--color-umber, #8a5b3d) !important;
}

#app[data-view="daily-observation"] .observation-card-result > .observation-number {
  color: var(--color-antique-gold, #a8844a) !important;
}

#app[data-view="daily-observation"] .observation-arrived-note {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border-radius: 999px !important;
  text-align: center !important;
  background: rgba(247, 243, 236, 0.78) !important;
  border: 1px solid rgba(106, 143, 168, 0.18) !important;
}

#app[data-view="daily-observation"] .observation-text-card,
#app[data-view="daily-observation"] .observation-projection-card {
  width: min(720px, 100%) !important;
  min-height: clamp(260px, 30vw, 380px) !important;
  margin: 0 auto !important;
  padding: clamp(28px, 4vw, 50px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  border-radius: 28px !important;
}

#app[data-view="daily-observation"] .observation-main-text.original {
  font-family: var(--yy-font-emotion) !important;
  font-size: clamp(24px, 2.25vw, 34px) !important;
  line-height: 1.55 !important;
  letter-spacing: 0.035em !important;
  max-width: 18em !important;
  margin: 0 !important;
}

#app[data-view="daily-observation"] .observation-main-text.quote {
  font-family: var(--yy-font-body) !important;
  font-size: clamp(20px, 1.45vw, 26px) !important;
  line-height: 1.72 !important;
  max-width: 24em !important;
  margin: 0 !important;
}

#app[data-view="daily-observation"] .observation-source {
  margin-top: 18px !important;
}

#app[data-view="daily-observation"] .observation-prompt-strip,
#app[data-view="daily-observation"] .observation-prompt,
#app[data-view="daily-observation"] .tiny-action-card {
  width: min(760px, 100%) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: 5.5em minmax(0, 1fr) !important;
  gap: 12px 22px !important;
  align-items: start !important;
  padding: 16px 22px !important;
  border-radius: 22px !important;
}

#app[data-view="daily-observation"] .observation-prompt-strip > span,
#app[data-view="daily-observation"] .observation-prompt > span,
#app[data-view="daily-observation"] .tiny-action-card > span {
  font-family: var(--yy-font-label) !important;
  font-size: var(--yy-size-label) !important;
  color: var(--color-umber, #8a5b3d) !important;
  white-space: nowrap !important;
}

#app[data-view="daily-observation"] .observation-prompt-strip p,
#app[data-view="daily-observation"] .observation-prompt p,
#app[data-view="daily-observation"] .tiny-action-card p {
  margin: 0 !important;
}

#app[data-view="daily-observation"] .observation-echo-section {
  width: 100% !important;
  max-width: 940px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 20px !important;
}

#app[data-view="daily-observation"] .echo-intro-card,
#app[data-view="daily-observation"] .echo-form-card,
#app[data-view="daily-observation"] .echo-list-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(22px, 2.6vw, 32px) !important;
  border-radius: 26px !important;
}

#app[data-view="daily-observation"] .echo-form-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}

#app[data-view="daily-observation"] .observation-echo-input {
  width: 100% !important;
  min-height: 160px !important;
}

/* Activity pages: keep invitations in equal cards, never vertical text. */
#app[data-view="activities"] .activities-view {
  width: min(1180px, calc(100vw - 64px)) !important;
}

#app[data-view="activities"] .activities-hero {
  padding: clamp(24px, 3vw, 36px) !important;
  min-height: auto !important;
}

#app[data-view="activities"] .activity-grid,
#app[data-view="activities"] .event-card-grid,
#app[data-view="activities"] .activities-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2vw, 26px) !important;
  align-items: stretch !important;
}

#app[data-view="activities"] .event-card,
#app[data-view="activities"] .activity-card {
  min-height: 520px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: clamp(24px, 2.4vw, 34px) !important;
  overflow: hidden !important;
}

#app[data-view="activities"] .event-card h3,
#app[data-view="activities"] .activity-card h3 {
  min-height: 2.6em !important;
  font-size: clamp(22px, 1.55vw, 29px) !important;
}

#app[data-view="activities"] :is(.event-info-list, .activity-info-list) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

#app[data-view="activities"] :is(.event-info-row, .activity-info-row) {
  display: grid !important;
  grid-template-columns: 3.25em minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

#app[data-view="activities"] :is(.event-info-row, .activity-info-row) dt,
#app[data-view="activities"] :is(.event-info-row, .activity-info-row) dd {
  display: block !important;
}

#app[data-view="activities"] :is(.event-info-row, .activity-info-row) dt {
  white-space: nowrap !important;
}

#app[data-view="activities"] :is(.event-info-row, .activity-info-row) dd {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

#app[data-view="activities"] .event-summary,
#app[data-view="activities"] .activity-summary {
  margin-top: auto !important;
}

#app[data-view="activities"] .event-card-actions,
#app[data-view="activities"] .activity-card-actions {
  margin-top: 8px !important;
}

/* Test library: two clean columns on desktop, stable card height and no clipped titles. */
#app[data-view="library"] .library-grid,
#app[data-view="library"] .recommended-tests .library-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
}

#app[data-view="library"] .test-card {
  min-height: 560px !important;
  overflow: hidden !important;
}

#app[data-view="library"] .test-card h2 {
  font-size: clamp(24px, 1.72vw, 32px) !important;
  min-height: 2.45em !important;
  max-width: 100% !important;
}

#app[data-view="library"] .test-meta-row,
#app[data-view="library"] .test-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

@media (max-width: 1120px) {
  #app[data-view="activities"] .activity-grid,
  #app[data-view="activities"] .event-card-grid,
  #app[data-view="activities"] .activities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  #app[data-view="daily-observation"] .daily-card-view,
  #app[data-view="daily-observation"] .feature-page-view,
  #app[data-view="daily-observation"] .observation-page,
  #app[data-view="activities"] .activities-view {
    width: min(100% - 28px, 100%) !important;
    padding-top: 86px !important;
  }

  #app[data-view="daily-observation"] .observation-card-result {
    padding: 24px !important;
  }

  #app[data-view="daily-observation"] .observation-prompt-strip,
  #app[data-view="daily-observation"] .observation-prompt,
  #app[data-view="daily-observation"] .tiny-action-card {
    grid-template-columns: 1fr !important;
  }

  #app[data-view="activities"] .activity-grid,
  #app[data-view="activities"] .event-card-grid,
  #app[data-view="activities"] .activities-grid,
  #app[data-view="library"] .library-grid,
  #app[data-view="library"] .recommended-tests .library-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
   2026-06-16 final typography + functional-page layout contract.
   This block intentionally sits at the end of the last-loaded stylesheet:
   it is the single source of truth for the current visual standard.
------------------------------------------------------------------- */
:root {
  --yy-font-logo: "YanYanHand", "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-title: "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-body: "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-label: "YanYanAlt", "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-emotion: "YanYanHand", "YanYanBrand", "PingFang SC", sans-serif !important;

  --yy-size-page-title: clamp(34px, 3.1vw, 50px);
  --yy-size-section-title: clamp(28px, 2.35vw, 38px);
  --yy-size-card-title: clamp(22px, 1.7vw, 30px);
  --yy-size-body: clamp(16px, 1vw, 18px);
  --yy-size-small: clamp(13px, 0.82vw, 15px);
  --yy-page-width: min(1180px, calc(100vw - 56px));
}

html body,
html body #app,
html body #app[data-view] {
  font-family: var(--yy-font-body) !important;
}

html body #app[data-view] :is(p, li, dd, dt, label, textarea, input, select, button, a, span, strong, small) {
  font-family: var(--yy-font-body) !important;
  letter-spacing: 0.02em !important;
}

html body #app[data-view] :is(.wordmark, .brand-title, .brand-chip, .site-logo, .logo-text) {
  font-family: var(--yy-font-logo) !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(
  h1,
  h2,
  h3,
  .page-title,
  .section-heading h2,
  .feature-page-hero h1,
  .activities-hero h1,
  .library-hero h1,
  .observation-hero h1,
  .feature-node-title,
  .test-card h2,
  .test-card h3,
  .test-card-title,
  .event-card h2,
  .event-card h3,
  .activity-card h2,
  .activity-card h3,
  .activity-card-title,
  .content-card h3,
  .listening-card h3
) {
  font-family: var(--yy-font-title) !important;
  font-weight: 400 !important;
  line-height: 1.22 !important;
  letter-spacing: 0.035em !important;
}

html body #app[data-view] :is(
  .eyebrow,
  .pill-tag,
  .tag,
  .status-pill,
  .event-type,
  .activity-type,
  .test-card-top,
  .test-card-top span,
  .test-card-tags,
  .test-meta-row span,
  .observation-number,
  .observation-source,
  .event-card dt,
  .activity-card dt
) {
  font-family: var(--yy-font-label) !important;
  font-weight: 400 !important;
  font-size: var(--yy-size-small) !important;
  line-height: 1.45 !important;
  letter-spacing: 0.05em !important;
}

html body #app[data-view] :is(.observation-main-text.original, .emotion-line, .daily-care-line, .hand-note) {
  font-family: var(--yy-font-emotion) !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(.button, button, .nav-link, .floating-dock a, input, textarea, select) {
  font-family: var(--yy-font-body) !important;
  font-weight: 400 !important;
}

/* Functional pages: action first, compact headings, stable reading width. */
html body #app[data-view] :is(
  .feature-page-view,
  .daily-card-view,
  .observation-page,
  .activities-view,
  .observations-view,
  .creator-profile-view,
  .tests-view,
  .library-view,
  .service-view,
  .listening-view
) {
  width: var(--yy-page-width) !important;
  margin-inline: auto !important;
  padding-top: clamp(84px, 8vh, 108px) !important;
  padding-bottom: 64px !important;
}

html body #app[data-view] :is(.page-title, .feature-page-hero h1, .activities-hero h1, .library-hero h1, .observation-hero h1) {
  font-size: var(--yy-size-page-title) !important;
  line-height: 1.14 !important;
  margin: 0 0 14px !important;
}

html body #app[data-view] :is(.section-heading h2, .feature-section-title) {
  font-size: var(--yy-size-section-title) !important;
  line-height: 1.18 !important;
}

html body #app[data-view] :is(.feature-page-hero, .activities-hero, .library-hero, .observation-hero) {
  min-height: auto !important;
  padding: clamp(22px, 3vw, 36px) !important;
  border-radius: 28px !important;
}

html body #app[data-view] :is(p, li, dd) {
  font-size: var(--yy-size-body) !important;
  line-height: 1.75 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

html body #app[data-view] :is(.button, button) {
  font-size: clamp(15px, 0.95vw, 17px) !important;
  line-height: 1.2 !important;
  min-height: 44px !important;
}

/* Daily observation: one card, two clear columns, no repeated summary headings. */
html body #app[data-view="daily-observation"] .observation-page-stack {
  gap: 26px !important;
}

html body #app[data-view="daily-observation"] .observation-card-result {
  width: 100% !important;
  max-width: 1120px !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: clamp(24px, 3.4vw, 44px) !important;
  display: grid !important;
  grid-template-columns: minmax(330px, 0.92fr) minmax(360px, 1fr) !important;
  grid-template-areas:
    "meta meta"
    "main prompt"
    "main action" !important;
  gap: 20px 30px !important;
  align-items: start !important;
  border-radius: 32px !important;
  overflow: hidden !important;
}

html body #app[data-view="daily-observation"] .observation-card-result > .eyebrow {
  grid-area: meta !important;
  justify-self: start !important;
  margin: 0 !important;
  color: var(--color-terracotta, #b45e3c) !important;
}

html body #app[data-view="daily-observation"] .observation-card-result > .observation-number {
  grid-area: meta !important;
  justify-self: end !important;
  margin: 0 !important;
}

html body #app[data-view="daily-observation"] .observation-arrived-note {
  grid-column: 1 / -1 !important;
  width: auto !important;
  max-width: 28em !important;
  margin: -4px 0 0 !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-size: clamp(15px, 0.95vw, 17px) !important;
}

html body #app[data-view="daily-observation"] :is(.observation-text-card, .observation-projection-card) {
  grid-area: main !important;
  width: 100% !important;
  min-height: clamp(280px, 36vh, 420px) !important;
  padding: clamp(30px, 4vw, 58px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 28px !important;
}

html body #app[data-view="daily-observation"] .observation-main-text.original {
  font-size: clamp(25px, 2.15vw, 34px) !important;
  line-height: 1.58 !important;
  letter-spacing: 0.035em !important;
  max-width: 18em !important;
  margin: 0 !important;
}

html body #app[data-view="daily-observation"] .observation-main-text.quote {
  font-family: var(--yy-font-body) !important;
  font-size: clamp(19px, 1.28vw, 24px) !important;
  line-height: 1.72 !important;
  max-width: 24em !important;
  margin: 0 !important;
}

html body #app[data-view="daily-observation"] .observation-reflection-strip {
  grid-area: prompt !important;
}

html body #app[data-view="daily-observation"] .observation-action-strip {
  grid-area: action !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  display: grid !important;
  grid-template-columns: 5.4em minmax(0, 1fr) !important;
  gap: 12px 20px !important;
  align-items: center !important;
  border-radius: 24px !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip p {
  margin: 0 !important;
  font-size: clamp(17px, 1.05vw, 20px) !important;
  line-height: 1.72 !important;
}

html body #app[data-view="daily-observation"] .observation-echo-section {
  width: 100% !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(360px, 0.86fr) minmax(420px, 1fr) !important;
  gap: 22px !important;
}

html body #app[data-view="daily-observation"] .echo-intro-card {
  grid-column: 1 / -1 !important;
  padding: 24px 30px !important;
  border-radius: 26px !important;
}

html body #app[data-view="daily-observation"] .echo-intro-card h2 {
  font-size: clamp(24px, 1.8vw, 32px) !important;
  line-height: 1.2 !important;
}

html body #app[data-view="daily-observation"] :is(.echo-form-card, .echo-list-card) {
  min-height: 0 !important;
  padding: 24px !important;
  border-radius: 26px !important;
}

html body #app[data-view="daily-observation"] .observation-echo-input {
  min-height: 160px !important;
}

/* Activities: equal invitation cards, horizontal metadata, no one-character columns. */
html body #app[data-view="activities"] :is(.event-card-grid, .activity-invitation-grid, .activity-grid, .activities-grid) {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

html body #app[data-view="activities"] :is(.event-card, .activity-card) {
  min-height: 560px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: 30px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

html body #app[data-view="activities"] :is(.event-card h2, .event-card h3, .activity-card h2, .activity-card h3) {
  font-size: clamp(24px, 1.58vw, 31px) !important;
  line-height: 1.32 !important;
  min-height: 2.65em !important;
  margin: 0 !important;
  max-width: 100% !important;
}

html body #app[data-view="activities"] :is(.event-card dl, .activity-card dl, .event-info-list, .activity-info-list) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body #app[data-view="activities"] :is(.event-card dl > div, .activity-card dl > div, .event-info-row, .activity-info-row) {
  display: grid !important;
  grid-template-columns: 3.2em minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

html body #app[data-view="activities"] :is(.event-card dt, .activity-card dt, .event-card dd, .activity-card dd) {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  min-width: 0 !important;
}

html body #app[data-view="activities"] :is(.event-card dt, .activity-card dt) {
  white-space: nowrap !important;
}

html body #app[data-view="activities"] :is(.event-card > p, .activity-card > p, .event-summary, .activity-summary) {
  margin-top: auto !important;
}

html body #app[data-view="activities"] :is(.event-card-actions, .activity-card-actions, .event-card .button, .activity-card .button) {
  margin-top: auto !important;
  align-self: start !important;
}

/* Test library: stable card rhythm and no clipped titles. */
html body #app[data-view="library"] :is(.library-grid, .recommended-tests .library-grid) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

html body #app[data-view="library"] .test-card {
  min-height: 520px !important;
  height: auto !important;
  padding: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

html body #app[data-view="library"] .test-card-visual {
  height: 160px !important;
  min-height: 160px !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

html body #app[data-view="library"] .test-card :is(h2, h3, .test-card-title) {
  font-size: clamp(24px, 1.65vw, 31px) !important;
  line-height: 1.3 !important;
  min-height: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

html body #app[data-view="library"] .test-card :is(p, .test-related-video, .test-card-description, .test-card-fit) {
  font-size: clamp(16px, 1vw, 18px) !important;
  line-height: 1.72 !important;
  max-width: 100% !important;
}

html body #app[data-view="library"] :is(.test-card-actions, .test-card .actions) {
  margin-top: auto !important;
}

@media (max-width: 1120px) {
  html body #app[data-view="activities"] :is(.event-card-grid, .activity-invitation-grid, .activity-grid, .activities-grid) {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  :root {
    --yy-page-width: min(100% - 28px, 100%);
  }

  html body #app[data-view] :is(
    .feature-page-view,
    .daily-card-view,
    .observation-page,
    .activities-view,
    .observations-view,
    .creator-profile-view,
    .tests-view,
    .library-view,
    .service-view,
    .listening-view
  ) {
    padding-top: 86px !important;
  }

  html body #app[data-view="daily-observation"] .observation-card-result {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "meta"
      "main"
      "prompt"
      "action" !important;
  }

  html body #app[data-view="daily-observation"] .observation-card-result > .observation-number {
    justify-self: start !important;
  }

  html body #app[data-view="daily-observation"] .observation-prompt-strip {
    grid-template-columns: 1fr !important;
  }

  html body #app[data-view="daily-observation"] .observation-echo-section,
  html body #app[data-view="activities"] :is(.event-card-grid, .activity-invitation-grid, .activity-grid, .activities-grid),
  html body #app[data-view="library"] :is(.library-grid, .recommended-tests .library-grid) {
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
   2026-06-21 hard lock: final font contract + functional page cleanup.
   Keep this as the last layer. It prevents older page-specific styles
   from reintroducing mixed fonts, oversized titles, or uneven cards.
------------------------------------------------------------------- */

:root {
  --yy-font-logo: "YanYanHand", "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-title: "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-body: "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-label: "YanYanAlt", "YanYanBrand", "PingFang SC", sans-serif !important;
  --yy-font-emotion: "YanYanHand", "YanYanBrand", "PingFang SC", sans-serif !important;

  --yy-page-title-size: clamp(30px, 2.45vw, 42px);
  --yy-section-title-size: clamp(25px, 1.95vw, 34px);
  --yy-card-title-size: clamp(22px, 1.45vw, 28px);
  --yy-body-size: clamp(15px, 0.92vw, 17px);
  --yy-small-size: clamp(12px, 0.74vw, 14px);
  --yy-page-width: min(1180px, calc(100vw - 64px));
}

html body #app[data-view] {
  font-family: var(--yy-font-body) !important;
  color: #2a4561 !important;
  font-synthesis: none !important;
}

html body #app[data-view] :is(
  p,
  li,
  dt,
  dd,
  label,
  input,
  textarea,
  select,
  button,
  a,
  span,
  small,
  strong
) {
  font-family: var(--yy-font-body) !important;
  font-size: var(--yy-body-size) !important;
  line-height: 1.72 !important;
  letter-spacing: 0.02em !important;
  font-weight: 400 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

html body #app[data-view] :is(h1, h2, h3, h4, .page-title, .section-title) {
  font-family: var(--yy-font-title) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  color: #2a4561 !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: balance;
}

html body #app[data-view] :is(.wordmark, .brand-title, .home-brand-title) {
  font-family: var(--yy-font-logo) !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(
  .eyebrow,
  .event-type,
  .activity-type,
  .test-card-top span,
  .test-meta-row span,
  .event-info-row dt,
  .pill,
  .tag,
  .chip
) {
  font-family: var(--yy-font-label) !important;
  font-size: var(--yy-small-size) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
}

html body #app[data-view] :is(.button, button, .floating-function-dock button) {
  font-family: var(--yy-font-body) !important;
  font-size: clamp(14px, 0.9vw, 16px) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

html body #app[data-view] :is(
  .feature-page-view,
  .tests-page-view,
  .daily-card-view,
  .activities-view,
  .creator-profile-view,
  .service-view,
  .listening-view,
  .observations-view
) {
  width: var(--yy-page-width) !important;
  margin-inline: auto !important;
  padding-top: 92px !important;
  padding-bottom: 56px !important;
}

html body #app[data-view] :is(.section-heading, .feature-page-hero, .activities-hero, .library-hero) {
  max-width: var(--yy-page-width) !important;
  margin-inline: auto !important;
}

html body #app[data-view] :is(.section-heading h1, .feature-page-hero h1, .activities-hero h1, .library-hero h1) {
  font-size: var(--yy-page-title-size) !important;
  margin: 0 0 12px !important;
}

html body #app[data-view] :is(.section-heading h2, .feature-page-hero h2, .activities-hero h2, .library-hero h2) {
  font-size: var(--yy-section-title-size) !important;
  margin: 0 0 12px !important;
}

html body #app[data-view] :is(.section-heading p, .feature-page-hero p, .activities-hero p, .library-hero p) {
  max-width: 720px !important;
  margin: 0 !important;
}

html body #app[data-view] .floating-function-dock {
  z-index: 40 !important;
}

/* 今日观照: one clear card, no scattered oversized blocks. */
html body #app[data-view="daily-observation"] .observation-page-stack {
  width: var(--yy-page-width) !important;
  margin-inline: auto !important;
  display: grid !important;
  gap: 28px !important;
}

html body #app[data-view="daily-observation"] .observation-card-result {
  display: grid !important;
  grid-template-columns: minmax(340px, 0.9fr) minmax(360px, 1fr) !important;
  grid-template-areas:
    "meta meta"
    "main prompt"
    "main action" !important;
  gap: 22px 30px !important;
  align-items: center !important;
  max-width: var(--yy-page-width) !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: clamp(28px, 4vw, 52px) !important;
}

html body #app[data-view="daily-observation"] .observation-card-result > .eyebrow {
  grid-area: meta !important;
  justify-self: start !important;
  color: #b45e3c !important;
}

html body #app[data-view="daily-observation"] .observation-card-result > .observation-number {
  grid-area: meta !important;
  justify-self: end !important;
  font-family: var(--yy-font-label) !important;
  font-size: var(--yy-small-size) !important;
  color: #a8844a !important;
}

html body #app[data-view="daily-observation"] .observation-arrived-note {
  grid-column: 1 / -1 !important;
  font-family: var(--yy-font-body) !important;
  font-size: var(--yy-body-size) !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  max-width: max-content !important;
}

html body #app[data-view="daily-observation"] :is(.observation-text-card, .observation-projection-card) {
  grid-area: main !important;
  width: 100% !important;
  min-height: clamp(240px, 32vh, 360px) !important;
  padding: clamp(28px, 4vw, 46px) !important;
  display: grid !important;
  place-items: center !important;
}

html body #app[data-view="daily-observation"] .observation-main-text.original {
  font-family: var(--yy-font-emotion) !important;
  font-size: clamp(24px, 2.1vw, 34px) !important;
  line-height: 1.72 !important;
  letter-spacing: 0.04em !important;
}

html body #app[data-view="daily-observation"] .observation-main-text.quote,
html body #app[data-view="daily-observation"] .observation-text-card p {
  font-family: var(--yy-font-body) !important;
  font-size: clamp(20px, 1.55vw, 28px) !important;
  line-height: 1.7 !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip {
  display: grid !important;
  grid-template-columns: 5.5em minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 20px 24px !important;
  max-width: 100% !important;
}

html body #app[data-view="daily-observation"] .observation-reflection-strip {
  grid-area: prompt !important;
}

html body #app[data-view="daily-observation"] .observation-action-strip {
  grid-area: action !important;
  align-self: start !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip span {
  font-family: var(--yy-font-label) !important;
  font-size: var(--yy-small-size) !important;
  color: #8a5b3d !important;
}

html body #app[data-view="daily-observation"] .observation-prompt-strip p {
  margin: 0 !important;
  font-family: var(--yy-font-body) !important;
  font-size: var(--yy-body-size) !important;
}

html body #app[data-view="daily-observation"] .observation-echo-section {
  display: grid !important;
  grid-template-columns: minmax(340px, 0.85fr) minmax(420px, 1fr) !important;
  grid-template-areas:
    "intro form"
    "list list" !important;
  gap: 24px !important;
  max-width: var(--yy-page-width) !important;
  margin-inline: auto !important;
}

html body #app[data-view="daily-observation"] .echo-intro-card {
  grid-area: intro !important;
}

html body #app[data-view="daily-observation"] .echo-form-card {
  grid-area: form !important;
}

html body #app[data-view="daily-observation"] .echo-list-card {
  grid-area: list !important;
}

html body #app[data-view="daily-observation"] .echo-form-card textarea {
  min-height: 150px !important;
  font-family: var(--yy-font-body) !important;
}

/* 活动页: invitation cards with equal rhythm and horizontal metadata. */
html body #app[data-view="activities"] :is(.event-card-grid, .activity-invitation-grid, .activity-grid, .activities-grid) {
  width: var(--yy-page-width) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(310px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

html body #app[data-view="activities"] :is(.event-card, .activity-card) {
  min-height: 520px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
  padding: 32px !important;
  overflow: hidden !important;
}

html body #app[data-view="activities"] :is(.event-card h2, .event-card h3, .activity-card h2, .activity-card h3) {
  font-size: var(--yy-card-title-size) !important;
  line-height: 1.28 !important;
  min-height: 2.56em !important;
}

html body #app[data-view="activities"] .event-info-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin: 0 !important;
}

html body #app[data-view="activities"] .event-info-row {
  display: grid !important;
  grid-template-columns: 3.5em minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
}

html body #app[data-view="activities"] .event-info-row :is(dt, dd) {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-align: left !important;
}

html body #app[data-view="activities"] .event-summary {
  margin-top: auto !important;
}

html body #app[data-view="activities"] .event-card-actions {
  margin-top: 0 !important;
}

/* 测试库: only two-column, equal cards, no title overflow. */
html body #app[data-view="library"] :is(.library-grid, .recommended-tests .library-grid) {
  width: var(--yy-page-width) !important;
  margin-inline: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
  gap: 30px !important;
  align-items: stretch !important;
}

html body #app[data-view="library"] .test-card {
  min-height: 500px !important;
  height: 100% !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html body #app[data-view="library"] .test-card-visual {
  height: 140px !important;
  min-height: 140px !important;
  margin-bottom: 20px !important;
}

html body #app[data-view="library"] .test-card :is(h2, h3) {
  font-size: var(--yy-card-title-size) !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
  max-width: 100% !important;
}

html body #app[data-view="library"] .test-card :is(p, .test-card-fit, .test-video-chip) {
  font-size: var(--yy-body-size) !important;
  line-height: 1.7 !important;
  margin-block: 0 14px !important;
}

html body #app[data-view="library"] .test-meta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: auto !important;
}

html body #app[data-view="library"] .test-card-actions {
  margin-top: 22px !important;
}

@media (max-width: 1120px) {
  html body #app[data-view="activities"] :is(.event-card-grid, .activity-invitation-grid, .activity-grid, .activities-grid),
  html body #app[data-view="library"] :is(.library-grid, .recommended-tests .library-grid) {
    grid-template-columns: repeat(2, minmax(300px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --yy-page-width: min(100% - 28px, 100%);
  }

  html body #app[data-view] :is(
    .feature-page-view,
    .tests-page-view,
    .daily-card-view,
    .activities-view,
    .creator-profile-view,
    .service-view,
    .listening-view,
    .observations-view
  ) {
    padding-top: 84px !important;
  }

  html body #app[data-view="daily-observation"] .observation-card-result,
  html body #app[data-view="daily-observation"] .observation-echo-section,
  html body #app[data-view="activities"] :is(.event-card-grid, .activity-invitation-grid, .activity-grid, .activities-grid),
  html body #app[data-view="library"] :is(.library-grid, .recommended-tests .library-grid) {
    grid-template-columns: 1fr !important;
  }

  html body #app[data-view="daily-observation"] .observation-card-result {
    grid-template-areas:
      "meta"
      "main"
      "prompt"
      "action" !important;
  }

  html body #app[data-view="daily-observation"] .observation-echo-section {
    grid-template-areas:
      "intro"
      "form"
      "list" !important;
  }

  html body #app[data-view="daily-observation"] .observation-prompt-strip {
    grid-template-columns: 1fr !important;
  }

  html body #app[data-view="activities"] :is(.event-card, .activity-card),
  html body #app[data-view="library"] .test-card {
    min-height: 0 !important;
  }
}

.site-record-footer {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 80;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: calc(100vw - 32px);
  min-height: 28px;
  margin: 0;
  padding: 6px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(61, 95, 132, 0.18);
  border-radius: 999px;
  background: rgba(247, 243, 236, 0.88);
  box-shadow: 0 10px 28px rgba(30, 26, 26, 0.08);
  color: rgba(42, 69, 97, 0.72);
  font-family: var(--font-brand, "Songti SC", serif);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  backdrop-filter: blur(10px);
  pointer-events: auto;
}

.site-record-footer a {
  color: rgba(42, 69, 97, 0.78);
  text-decoration: none;
}

.site-record-footer a:hover {
  color: var(--color-deep-sea, #2a4561);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-record-footer span {
  opacity: 0.62;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .site-record-footer {
    bottom: max(72px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    padding: 5px 10px;
    font-size: 11px;
  }
}