:root {
  --ink: #1f2823;
  --muted: #6f7872;
  --line: #ded2b4;
  --line-strong: #cabb94;
  --paper: #f3f5f2;
  --surface: #f8f1dc;
  --green-900: #18392d;
  --green-800: #23493a;
  --green-700: #2f604b;
  --green-100: #e5eee8;
  --red: #ad493d;
  --red-soft: #f5e7e4;
  --gold: #b88326;
  --gold-soft: #f5edd9;
  --blue: #58747a;
  --blue-soft: #e5edef;
  --prescription-paper: #f8f1dc;
  --prescription-paper-deep: #f1e6c9;
  --prescription-line: #d7c9a5;
  --prescription-ink: #2a3d32;
  --shadow: 0 16px 44px rgba(28, 45, 35, 0.09);
  --rail-width: 224px;
  --font-scale: 1.12;
  --font-min-size: 14px;
}

html[data-font-size="large"] {
  --font-scale: 1.28;
  --font-min-size: 16px;
}

html[data-font-size="xlarge"] {
  --font-scale: 1.6;
  --font-min-size: 20px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  max-width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

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

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

button { letter-spacing: 0; }

button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(184, 131, 38, 0.38);
  outline-offset: 2px;
}

svg { width: 18px; height: 18px; stroke-width: 1.8; }

/* Keep every reading mode comfortably above the former 8-12px labels. */
html[data-font-size] body {
  font-size: calc(14px * var(--font-scale));
  line-height: 1.65;
}

html[data-font-size] .app-view :is(p, button, input, select, textarea) {
  font-size: max(var(--font-min-size), calc(14px * var(--font-scale))) !important;
}

html[data-font-size] .app-view :is(span, small, strong, em, b, dt, dd, label, legend, time) {
  font-size: max(var(--font-min-size), 1em) !important;
}

html[data-font-size] .app-shell h1 { font-size: calc(30px * var(--font-scale)) !important; }
html[data-font-size] .app-shell h2 { font-size: calc(21px * var(--font-scale)) !important; }
html[data-font-size] .app-shell h3 { font-size: calc(17px * var(--font-scale)) !important; }
html[data-font-size] .recommendation-header .section-kicker {
  font-size: calc(17px * var(--font-scale)) !important;
  line-height: 1.45;
}
html[data-font-size] .view-header .section-kicker {
  font-size: calc(17px * var(--font-scale)) !important;
  line-height: 1.45;
}

html[data-font-size] .app-shell .brand-seal { font-size: calc(19px * var(--font-scale)) !important; }
html[data-font-size] :is(.brand strong, .mobile-brand strong) { font-size: calc(18px * var(--font-scale)) !important; }
html[data-font-size] .formula-list-copy strong,
html[data-font-size] .herb-identity strong { font-size: calc(15px * var(--font-scale)) !important; }
html[data-font-size] .catalog-card > strong { font-size: calc(18px * var(--font-scale)) !important; }
html[data-font-size] .season-stats dd { font-size: calc(27px * var(--font-scale)) !important; }
html[data-font-size] .view-count strong { font-size: calc(32px * var(--font-scale)) !important; }
html[data-font-size] .record-metrics > div > strong { font-size: calc(22px * var(--font-scale)) !important; }
html[data-font-size] .timeline-list time strong { font-size: calc(19px * var(--font-scale)) !important; }
html[data-font-size] .profile-avatar { font-size: calc(26px * var(--font-scale)) !important; }
html[data-font-size] .profile-stat-strip strong { font-size: calc(20px * var(--font-scale)) !important; }
html[data-font-size] .font-size-menu button:nth-child(1) em { font-size: calc(16px * var(--font-scale)) !important; }
html[data-font-size] .font-size-menu button:nth-child(2) em { font-size: calc(21px * var(--font-scale)) !important; }
html[data-font-size] .font-size-menu button:nth-child(3) em { font-size: calc(26px * var(--font-scale)) !important; }

html[data-font-size] :is(.choice-chip, .mini-chip-group button, .segmented-control button) {
  min-height: 44px;
  height: auto;
}

html[data-font-size] :is(.formula-dialog, .record-dialog, .profile-dialog, .delete-record-dialog) {
  font-size: max(var(--font-min-size), calc(15px * var(--font-scale)));
  line-height: 1.7;
}

html[data-font-size] .profile-dialog .section-kicker {
  font-size: max(var(--font-min-size), calc(14px * var(--font-scale))) !important;
}

html[data-font-size] .profile-dialog .dialog-header h2 {
  font-size: calc(27px * var(--font-scale)) !important;
}

html[data-font-size] .profile-form label > span {
  font-size: max(var(--font-min-size), calc(15px * var(--font-scale))) !important;
  line-height: 1.5;
}

html[data-font-size] .profile-form :is(input, select, textarea) {
  font-size: max(var(--font-min-size), calc(16px * var(--font-scale))) !important;
  line-height: 1.6;
}

html[data-font-size] .profile-form .form-boundary,
html[data-font-size] .profile-form .dialog-footer button {
  font-size: max(var(--font-min-size), calc(15px * var(--font-scale))) !important;
}

html[data-font-size] :is(.formula-dialog, .record-dialog, .note-dialog) :is(p, button, input, select, textarea) {
  font-size: max(var(--font-min-size), calc(15px * var(--font-scale))) !important;
}

html[data-font-size] :is(.formula-dialog, .record-dialog) :is(span, small, strong, legend, label) {
  font-size: max(var(--font-min-size), 1em) !important;
}

html[data-font-size] :is(.formula-dialog, .record-dialog) .dialog-header h2 {
  font-size: calc(26px * var(--font-scale)) !important;
}

html[data-font-size] :is(.formula-dialog, .record-dialog) .dialog-header .section-kicker {
  font-size: max(var(--font-min-size), calc(13px * var(--font-scale))) !important;
}

html[data-font-size] :is(.formula-dialog, .record-dialog) .dialog-body h3 {
  font-size: calc(18px * var(--font-scale)) !important;
}

html[data-font-size] .formula-dialog .dialog-ingredients strong {
  font-size: calc(16px * var(--font-scale)) !important;
}

html[data-font-size] .formula-dialog .dialog-ingredients span {
  font-size: max(var(--font-min-size), calc(14px * var(--font-scale))) !important;
}

html[data-font-size] .formula-dialog .step-list li,
html[data-font-size] .formula-dialog :is(.dialog-caution, .dialog-evidence) p {
  font-size: calc(16px * var(--font-scale)) !important;
  line-height: 1.75;
}

html[data-font-size] .formula-dialog .step-list li::before {
  font-size: max(var(--font-min-size), calc(13px * var(--font-scale))) !important;
}

html[data-font-size] :is(.record-dialog, .note-dialog) :is(.record-form label > span, .record-form legend, .note-form label > span) {
  font-size: calc(16px * var(--font-scale)) !important;
}

html[data-font-size] :is(.record-dialog, .note-dialog) :is(input, select, textarea, .form-chip-group label span, .form-boundary) {
  font-size: max(var(--font-min-size), calc(15px * var(--font-scale))) !important;
}

html[data-font-size] .detail-steps li {
  min-height: 54px;
  padding: 3px 0 18px 50px;
  font-size: calc(16px * var(--font-scale)) !important;
  line-height: 1.75;
}

html[data-font-size] .detail-steps li::before {
  width: 36px;
  height: 36px;
  font-size: max(var(--font-min-size), calc(13px * var(--font-scale))) !important;
}

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

.side-rail {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: var(--rail-width);
  display: flex;
  flex-direction: column;
  padding: 30px 18px 22px;
  background: var(--prescription-paper);
  border-right: 1px solid var(--line);
}

.brand, .mobile-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand { position: relative; width: 100%; }
.brand::after {
  content: "广府凉茶 · 草本养生";
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 60%;
  min-height: 18px;
  display: grid;
  place-items: center;
  color: #493928;
  background: var(--prescription-paper);
  font: 600 9px/1.2 "Microsoft YaHei", "PingFang SC", sans-serif;
  white-space: nowrap;
}
.brand-art {
  width: 100%;
  aspect-ratio: 900 / 418;
  display: block;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
}

.brand-seal {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 6px;
  color: #fff;
  background: var(--red);
  font: 700 20px/1 "STKaiti", "KaiTi", serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.brand strong, .mobile-brand strong {
  display: block;
  font: 700 19px/1.2 "Songti SC", "STSong", serif;
}

.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }

.rail-nav { display: grid; gap: 6px; margin-top: 28px; }

.nav-item {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 14px;
  color: #536159;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.nav-item:hover { background: var(--prescription-paper-deep); color: var(--green-800); }
.nav-item.active { color: #fff; background: var(--green-800); }
.nav-item span { font-weight: 600; }

.rail-profile {
  width: 100%;
  margin-top: auto;
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  gap: 9px;
  padding: 13px 8px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.rail-profile:hover, .rail-profile.active { background: var(--prescription-paper-deep); }

.rail-profile strong, .rail-profile small { display: block; }
.rail-profile strong { font-size: 13px; }
.rail-profile small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.rail-profile > svg { width: 15px; color: #97a19a; }

.main-content {
  min-height: 100vh;
  margin-left: var(--rail-width);
  padding: 0 40px 52px;
}

.topbar {
  height: 92px;
  max-width: 1380px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-brand { display: none; }

.date-block small, .date-block strong { display: block; }
.date-block small { margin-bottom: 3px; color: var(--muted); font-size: 12px; }
.date-block strong { font-size: 15px; }
.date-line { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; }
.today-date-value { display: inline-flex; align-items: center; gap: .45em; }
.date-divider { color: #a4aca7; font-weight: 400; }
.lunar-date { color: var(--green-700); font-weight: 700; }

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

.weather-summary {
  min-height: 50px;
  display: grid;
  grid-template-columns: 24px auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
  color: var(--ink);
  background: var(--prescription-paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.weather-icon { display: grid; place-items: center; color: var(--gold); }
.weather-icon svg { width: 23px; height: 23px; }
.weather-condition { min-width: 64px; }
.weather-condition small, .weather-condition strong { display: block; line-height: 1.35; }
.weather-condition small { color: var(--muted); }
.weather-condition strong { color: var(--green-800); }
.weather-value {
  min-width: 58px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
}
.weather-value svg { width: 17px; height: 17px; color: var(--blue); }
.weather-value strong { font-variant-numeric: tabular-nums; }

.member-switcher, .font-size-control { position: relative; }

.font-size-button {
  min-height: 50px;
  display: grid;
  grid-template-columns: 22px auto 16px;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  color: var(--green-800);
  background: var(--prescription-paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.font-size-button:hover, .font-size-button[aria-expanded="true"] { border-color: var(--green-700); background: var(--green-100); }
.font-size-button > .font-size-short-label { display: none; }
.font-size-button > svg:first-child { width: 21px; height: 21px; }
.font-size-button > svg:last-child { width: 14px; color: var(--muted); }
.font-size-button span, .font-size-button small, .font-size-button strong { display: block; text-align: left; }
.font-size-button small { color: var(--muted); font-size: 10px; }
.font-size-button strong { margin-top: 1px; font-size: 12px; }

.font-size-menu {
  position: absolute;
  z-index: 31;
  top: calc(100% + 8px);
  right: 0;
  width: 250px;
  padding: 7px;
  background: var(--prescription-paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.font-size-menu button {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr 40px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.font-size-menu button:hover, .font-size-menu button[aria-checked="true"] { color: var(--green-800); background: var(--green-100); }
.font-size-menu span, .font-size-menu strong, .font-size-menu small { display: block; }
.font-size-menu small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.font-size-menu em { justify-self: center; color: var(--green-700); font: 700 18px/1 "Songti SC", serif; font-style: normal; }
.font-size-menu button:nth-child(2) em { font-size: 22px; }
.font-size-menu button:nth-child(3) em { font-size: 27px; }

.member-button {
  display: grid;
  grid-template-columns: 38px auto 18px;
  align-items: center;
  gap: 10px;
  padding: 5px 7px 5px 5px;
  color: var(--ink);
  background: var(--prescription-paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.member-button small, .member-button strong { display: block; text-align: left; }
.member-button small { color: var(--muted); font-size: 10px; }
.member-button strong { font-size: 12px; }
.member-button > svg { width: 14px; color: var(--muted); }

.avatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green-700);
  font: 700 15px/1 "Songti SC", serif;
}

.avatar-small { width: 32px; height: 32px; font-size: 12px; }
.avatar-red { background: var(--red); }
.avatar-gold { background: var(--gold); }

.member-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: 228px;
  padding: 6px;
  background: var(--prescription-paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.member-menu button {
  width: 100%;
  display: grid;
  grid-template-columns: 32px 1fr 16px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.member-menu button:hover { background: var(--prescription-paper-deep); }
.member-menu button span:nth-child(2) { font-weight: 600; }
.member-menu small { display: block; color: var(--muted); font-weight: 400; font-size: 10px; }
.member-menu svg { width: 15px; color: var(--green-700); }

.season-band {
  position: relative;
  max-width: 1380px;
  min-height: 184px;
  margin: 0 auto 24px;
  padding: 30px 34px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  overflow: hidden;
  color: var(--prescription-ink);
  background: var(--prescription-paper);
  border: 1px solid var(--prescription-line);
  border-radius: 8px;
}

.season-band > div,
.dashboard-grid,
.body-log,
.formula-focus {
  min-width: 0;
}

.season-band::after {
  content: "饮";
  position: absolute;
  right: 42px;
  bottom: -47px;
  color: rgba(35,73,58,.05);
  font: 700 170px/1 "STKaiti", "KaiTi", serif;
  pointer-events: none;
}

.eyebrow { margin: 0 0 10px; color: var(--green-700); font-size: 12px; font-weight: 700; }
.eyebrow > span:first-child { display: inline-block; width: 22px; height: 1px; margin: 0 8px 4px 0; background: #e1b75d; }
#solarTermEyebrow { display: inline; background: transparent; }

.season-band h1 {
  margin: 0;
  max-width: 640px;
  font: 700 31px/1.3 "Songti SC", "STSong", serif;
  letter-spacing: 0;
}

#solarTermSummary { max-width: 700px; margin: 12px 0 0; color: #56645c; }
.season-detail-button { position: relative; z-index: 1; min-height: 42px; display: inline-flex; align-items: center; gap: 8px; margin-top: 17px; padding: 8px 12px; color: var(--green-800); background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 5px; cursor: pointer; font-weight: 700; }
.season-detail-button:hover { background: var(--green-100); }
.season-detail-button svg { width: 17px; }

.season-stats { display: grid; grid-template-columns: repeat(3, 92px); margin: 0; }
.season-stats div { padding-left: 20px; border-left: 1px solid var(--prescription-line); }
.season-stats dt { color: var(--muted); font-size: 11px; }
.season-stats dd { margin: 6px 0 0; font: 700 28px/1 "Songti SC", serif; }
.season-stats dd small { margin-left: 4px; color: var(--muted); font: 400 11px/1 sans-serif; }

.dashboard-grid {
  max-width: 1380px;
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: minmax(460px, .9fr) minmax(540px, 1.1fr);
  gap: 24px;
}

.solar-library { max-width: 1380px; margin: 34px auto; }
.solar-relation-count { color: var(--muted); }
.solar-relation-count strong { color: var(--green-800); }
.solar-term-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.solar-term-card { min-height: 104px; display: grid; grid-template-columns: 36px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; gap: 4px 10px; padding: 14px; text-align: left; color: var(--ink); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; cursor: pointer; }
.solar-term-card:hover { border-color: #b39f70; background: var(--prescription-paper-deep); }
.solar-term-card.current { color: #fff; background: var(--green-800); border-color: var(--green-800); }
.solar-term-index { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 50%; font-weight: 800; }
.solar-term-card.current .solar-term-index { color: var(--green-900); background: #e5c77f; }
.solar-term-card strong { align-self: end; font-family: "Songti SC", "STSong", serif; }
.solar-term-card small { align-self: start; color: var(--muted); }
.solar-term-card.current small { color: #d5e1da; }
.solar-term-card em { grid-column: 1 / -1; justify-self: start; margin-top: 5px; color: var(--red); font-style: normal; font-weight: 800; }
.solar-term-card.current em { color: #f0cf84; }

.constitution-toolbar { max-width: 1380px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.constitution-boundary { max-width: 1380px; min-height: 64px; margin: 0 auto 18px; display: grid; grid-template-columns: 20px minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 14px 22px; padding: 13px 18px; color: var(--ink); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-left: 3px solid var(--green-700); }
.constitution-boundary > svg { width: 19px; color: var(--green-700); }
.constitution-boundary p { margin: 0; }
.constitution-boundary strong, .constitution-boundary span { display: block; }
.constitution-boundary strong { color: var(--green-900); }
.constitution-boundary span { margin-top: 2px; color: var(--muted); }
.constitution-grid { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.constitution-card { position: relative; min-height: 278px; display: flex; flex-direction: column; align-items: stretch; padding: 20px; overflow: hidden; text-align: left; color: var(--ink); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-top: 3px solid var(--green-700); border-radius: 8px; cursor: pointer; }
.constitution-card--derived { border-top-color: var(--red); }
.constitution-card:hover { background: var(--prescription-paper-deep); border-color: #b7a475; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(65,53,25,.08); }
.constitution-card-head { display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 10px; }
.constitution-card-head b { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font: 700 20px/1 "STKaiti", "KaiTi", serif; }
.constitution-card--derived .constitution-card-head b { background: var(--red); }
.constitution-card-head em { color: var(--green-700); font-style: normal; font-weight: 800; }
.constitution-card--derived .constitution-card-head em { color: var(--red); }
.constitution-card-head > svg { width: 17px; color: #8f9992; }
.constitution-card > strong { margin-top: 18px; color: var(--prescription-ink); font: 700 22px/1.35 "Songti SC", serif; }
.constitution-card > p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: #536159; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.constitution-card-base { margin-top: 10px; color: var(--blue); }
.constitution-card-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 14px; padding-top: 15px; border-top: 1px solid var(--prescription-line); color: var(--green-700); }
.constitution-card-foot > span { display: flex; align-items: center; gap: 5px; }
.constitution-card-foot .caution { color: var(--red); }
.constitution-card-foot svg { width: 15px; }

.constitution-section-intro { margin: -4px 0 15px !important; color: var(--muted) !important; line-height: 1.7; }
.constitution-formula-empty { margin: 0; padding: 15px; color: var(--muted); background: var(--prescription-paper-deep); border-left: 3px solid var(--gold); line-height: 1.65; }
.constitution-formula-list { display: grid; border-top: 1px solid var(--prescription-line); }
.constitution-formula-list > :is(button, div) { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 6px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); }
.constitution-formula-list > button { cursor: pointer; }
.constitution-formula-list > button:hover { background: var(--prescription-paper-deep); }
.constitution-formula-list strong, .constitution-formula-list small { display: block; }
.constitution-formula-list strong { color: var(--green-800); }
.constitution-formula-list--caution strong { color: var(--red); }
.constitution-formula-list small { margin-top: 4px; color: var(--muted); }
.constitution-formula-list svg { width: 17px; flex: 0 0 17px; color: #8f9992; }
.constitution-formula-list--caution svg { color: var(--red); }
.constitution-association-disclosure { margin: 0; }
.constitution-association-disclosure > summary { min-height: 44px; display: flex; align-items: center; color: var(--green-700); cursor: pointer; font-weight: 800; }
.constitution-association-list { display: grid; margin-top: 8px; border-top: 1px solid var(--prescription-line); }
.constitution-association-list button { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 4px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); cursor: pointer; }
.constitution-association-list button:hover:not(:disabled) { background: var(--prescription-paper-deep); }
.constitution-association-list button:disabled { cursor: default; }
.constitution-association-list strong, .constitution-association-list small { display: block; }
.constitution-association-list small { margin-top: 5px; color: var(--muted); line-height: 1.6; }
.constitution-association-list svg { width: 17px; flex: 0 0 17px; color: var(--green-700); }
.constitution-red-flags { border-color: #d8aaa2; }
.constitution-red-flags h2 { color: var(--red) !important; }

.constitution-test-header { background: var(--green-900); }
.constitution-test-gender { max-width: 900px; min-height: 270px; margin: 34px auto; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 18px 24px; align-items: start; padding: 34px; color: var(--prescription-ink); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-top: 4px solid var(--gold); border-radius: 8px; }
.constitution-test-gender-icon { width: 64px; height: 64px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; }
.constitution-test-gender-icon svg { width: 28px; height: 28px; }
.constitution-test-gender h2 { margin: 4px 0 8px; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
.constitution-test-gender p { margin: 0; color: var(--muted); line-height: 1.75; }
.constitution-profile-required-action { grid-column: 2; }
.constitution-profile-required-action .primary-button { width: min(100%, 260px); min-height: 58px; }

.constitution-test-workspace, .constitution-test-result { max-width: 1380px; margin: 24px auto 40px; }
.constitution-test-progress { margin-bottom: 18px; padding: 20px 22px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.constitution-progress-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.constitution-progress-copy > div span, .constitution-progress-copy > div strong { display: block; }
.constitution-progress-copy > div span { color: var(--muted); }
.constitution-progress-copy > div strong { margin-top: 3px; color: var(--green-900); }
.constitution-progress-copy > span { color: var(--green-700); font-weight: 900; }
.constitution-progress-track { height: 10px; margin-top: 13px; overflow: hidden; background: #e4d8b9; border-radius: 5px; }
.constitution-progress-track span { width: 0; height: 100%; display: block; background: var(--green-700); border-radius: inherit; transition: width .2s ease; }
.constitution-test-source-tags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; color: #66726a; }
.constitution-test-source-tags span { display: inline-flex; align-items: center; gap: 6px; }
.constitution-test-source-tags svg { width: 16px; color: var(--gold); }

.constitution-test-layout { display: grid; grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); align-items: start; gap: 20px; }
.constitution-test-steps { position: sticky; top: 108px; max-height: calc(100vh - 128px); display: grid; overflow-x: hidden; overflow-y: auto; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; scrollbar-width: thin; }
.constitution-test-steps button { min-height: 66px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; padding: 9px 13px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); cursor: pointer; }
.constitution-test-steps button:last-child { border-bottom: 0; }
.constitution-test-steps button:hover { background: var(--prescription-paper-deep); }
.constitution-test-steps button.active { color: #fff; background: var(--green-800); }
.constitution-test-steps button > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; color: var(--green-700); background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 50%; font-weight: 900; }
.constitution-test-steps button.complete > span:first-child { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.constitution-test-steps button.active > span:first-child { color: var(--green-900); background: #efd493; border-color: #efd493; }
.constitution-test-steps button svg { width: 16px; }
.constitution-test-steps strong, .constitution-test-steps small { display: block; }
.constitution-test-steps small { margin-top: 2px; color: var(--muted); }
.constitution-test-steps button.active small { color: #d9e5de; }

.constitution-question-panel { min-width: 0; }
.constitution-question-heading { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; color: #fff; background: var(--green-900); border-radius: 8px 8px 0 0; }
.constitution-question-heading h2 { margin: 2px 0 0; color: #fff; font-family: "Songti SC", "STSong", serif; }
.constitution-question-heading > span { flex: 0 0 auto; padding: 7px 10px; color: #f2d797; border: 1px solid rgba(242,215,151,.45); border-radius: 5px; font-weight: 800; }
.constitution-question-intro { margin: 0; padding: 17px 24px; color: #59685f; background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-top: 0; line-height: 1.75; }
.constitution-question-list { display: grid; gap: 12px; margin-top: 14px; }
.constitution-question-card { min-width: 0; margin: 0; padding: 22px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.constitution-question-card.unanswered { border-color: var(--red); box-shadow: inset 4px 0 var(--red); }
.constitution-question-card legend { width: 100%; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: start; gap: 11px; padding: 0; color: var(--prescription-ink); font-weight: 800; line-height: 1.7; }
.constitution-question-card legend > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; }
.constitution-question-card legend em { margin-top: 5px; padding: 3px 7px; color: var(--blue); background: var(--blue-soft); border-radius: 4px; font-style: normal; white-space: nowrap; }
.constitution-score-options { display: grid; grid-template-columns: repeat(5, minmax(90px,1fr)); gap: 8px; margin-top: 18px; }
.constitution-score-options label { min-width: 0; min-height: 62px; display: flex; align-items: center; justify-content: center; padding: 7px 5px; text-align: center; color: #59635d; background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 6px; cursor: pointer; }
.constitution-score-options label:hover { border-color: var(--green-700); }
.constitution-score-options label:has(input:checked) { color: #fff; background: var(--green-700); border-color: var(--green-700); box-shadow: 0 0 0 2px rgba(47,96,75,.15); }
.constitution-score-options input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.constitution-score-options strong, .constitution-score-options small { display: block; }
.constitution-score-options small { margin-top: 2px; color: #7a827d; }
.constitution-score-options label:has(input:checked) small { color: #e1ebe5; }
.constitution-test-missing { min-height: 52px; display: flex; align-items: center; gap: 9px; margin: 14px 0 0; padding: 10px 14px; color: #823c34; background: var(--red-soft); border-left: 3px solid var(--red); }
.constitution-test-missing svg { flex: 0 0 19px; }
.constitution-test-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--prescription-line); }
.constitution-test-actions .primary-button, .constitution-test-actions .secondary-button { width: auto; min-width: 150px; }
.constitution-test-actions button:disabled { opacity: .45; cursor: not-allowed; }

.constitution-result-hero { position: relative; min-height: 210px; display: flex; align-items: center; overflow: hidden; padding: 32px 160px 32px 34px; color: var(--prescription-ink); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.constitution-result-hero h2 { margin: 6px 0 9px; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
.constitution-result-hero p { max-width: 850px; margin: 0; color: #56645c; }
.constitution-result-seal { position: absolute; right: 40px; width: 92px; height: 92px; display: grid; place-items: center; color: var(--gold); border: 3px double var(--gold); border-radius: 50%; font: 700 43px/1 "STKaiti", "KaiTi", serif; transform: rotate(-7deg); }
.constitution-result-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.38fr); align-items: start; gap: 18px; margin-top: 18px; }
.constitution-result-layout > main, .constitution-result-layout > aside { display: grid; gap: 18px; }
.constitution-result-section { padding: 24px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.constitution-result-section h2 { margin: 3px 0 0; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
.constitution-primary-result { border-top: 4px solid var(--green-700); }
.constitution-primary-heading { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 15px; }
.constitution-primary-heading > span { width: 58px; height: 58px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-weight: 900; }
.constitution-primary-heading > em { align-self: start; padding: 6px 9px; color: #754d12; background: #efdaaa; border-radius: 4px; font-style: normal; font-weight: 800; }
.constitution-primary-traits { margin: 20px 0 0; padding: 16px 18px; color: #435249; background: var(--prescription-paper-deep); border-left: 3px solid var(--gold); line-height: 1.75; }
.constitution-analysis-list { display: grid; margin-top: 18px; border-top: 1px solid var(--prescription-line); }
.constitution-analysis-list > div { min-height: 86px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--prescription-line); }
.constitution-analysis-list > div > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 50%; }
.constitution-analysis-list strong, .constitution-analysis-list small { display: block; }
.constitution-analysis-list small { margin-top: 5px; color: #5b675f; line-height: 1.75; }
.constitution-analysis-list small b { display: inline; color: var(--green-800); }
.constitution-analysis-list .constitution-analysis-caution > span { color: var(--red); background: var(--red-soft); }
.constitution-analysis-list .constitution-analysis-caution strong { color: #8a4037; }
.constitution-overlap-list { display: grid; border-top: 1px solid var(--prescription-line); }
.constitution-overlap-list > div { min-height: 94px; display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--prescription-line); }
.constitution-overlap-list > div > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--green-800); background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 50%; font-weight: 900; }
.constitution-overlap-list strong, .constitution-overlap-list small { display: block; }
.constitution-overlap-list small { margin-top: 5px; color: var(--muted); line-height: 1.75; }
.constitution-ranking-disclosure { padding: 20px 24px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.constitution-ranking-disclosure summary { min-height: 36px; display: flex; align-items: center; color: var(--green-800); cursor: pointer; font-weight: 900; }
.constitution-ranking-disclosure > p { color: var(--muted); line-height: 1.7; }
.constitution-ranking-disclosure ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--prescription-line); }
.constitution-ranking-disclosure li { min-height: 52px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--prescription-line); }
.constitution-ranking-disclosure li > span { width: 27px; height: 27px; display: grid; place-items: center; color: var(--muted); background: var(--prescription-paper-deep); border-radius: 50%; }
.constitution-ranking-disclosure li em { color: var(--muted); font-style: normal; }
.constitution-ranking-disclosure li.selected { color: var(--green-800); }
.constitution-ranking-disclosure li.selected > span { color: #fff; background: var(--green-700); }
.constitution-ranking-disclosure li.selected em { color: var(--green-700); font-weight: 900; }
.constitution-result-choice dl { margin: 16px 0; border-top: 1px solid var(--prescription-line); }
.constitution-result-choice dl > div { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--prescription-line); }
.constitution-result-choice dt { color: var(--muted); }
.constitution-result-choice dd { max-width: 62%; margin: 0; color: var(--green-800); text-align: right; font-weight: 900; }
.constitution-result-choice .secondary-button { width: 100%; min-height: 52px; }
.constitution-result-boundary { color: #53666a; background: var(--blue-soft); border-color: #bdced2; }
.constitution-result-boundary h2 { display: flex; align-items: center; gap: 8px; color: #35545a; }
.constitution-result-boundary p { margin: 10px 0 0; line-height: 1.75; }
.constitution-method-list { display: grid; margin-top: 17px; border-top: 1px solid var(--prescription-line); }
.constitution-method-list p { display: grid; grid-template-columns: 128px minmax(0,1fr); gap: 16px; margin: 0; padding: 15px 0; border-bottom: 1px solid var(--prescription-line); }
.constitution-method-list strong { color: var(--green-800); }
.constitution-method-list span { color: #5b675f; line-height: 1.75; }
.constitution-method-list a { color: var(--green-700); font-weight: 800; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.body-log, .formula-focus {
  min-height: 440px;
  padding: 26px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.formula-focus {
  position: relative;
  overflow: hidden;
  background: var(--prescription-paper);
  border-color: var(--prescription-line);
  box-shadow: inset 0 0 0 3px rgba(184, 131, 38, .045);
}

.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.section-kicker { margin: 0 0 4px; color: var(--red); font-size: 11px; font-weight: 800; }
.section-heading h2, .source-copy h2 { margin: 0; font: 700 22px/1.35 "Songti SC", "STSong", serif; }

.status-dot { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.status-dot > span { width: 7px; height: 7px; border-radius: 50%; background: #b9c0ba; }
.status-dot.saved { color: var(--green-700); }
.status-dot.saved > span { background: var(--green-700); }

.field-group { margin-top: 28px; }
.field-label { display: flex; justify-content: space-between; margin-bottom: 11px; }
.field-label strong { font-size: 12px; }
.field-label span { color: var(--muted); font-size: 10px; }

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

.choice-chip {
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  color: #556159;
  background: var(--prescription-paper-deep);
  border: 1px solid var(--prescription-line);
  border-radius: 6px;
  cursor: pointer;
}

.choice-chip:hover { border-color: #9cb4a5; color: var(--green-800); }
.choice-chip.selected { color: var(--green-800); background: var(--green-100); border-color: #9db8a7; font-weight: 700; }

.other-symptom-field {
  margin-top: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.other-symptom-field > span { color: #4f5d55; font-weight: 700; white-space: nowrap; }
.other-symptom-field input {
  width: 100%;
  min-height: 48px;
  padding: 10px 13px;
  color: var(--ink);
  background: var(--prescription-paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  outline: 0;
}
.other-symptom-field input:focus { border-color: #7c9c89; box-shadow: 0 0 0 3px rgba(47,96,75,.09); }

.caution-check { margin-top: 24px; padding-top: 21px; border-top: 1px solid var(--line); }
.mini-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-chip-group button {
  padding: 6px 11px;
  color: #7c625d;
  background: #fbf6f5;
  border: 1px solid #eadad6;
  border-radius: 5px;
  cursor: pointer;
}
.mini-chip-group button.selected { color: #fff; background: var(--red); border-color: var(--red); }

.log-footer { margin-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.log-footer p { display: flex; align-items: flex-start; gap: 7px; margin: 0; max-width: 245px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.log-footer p svg { width: 14px; height: 14px; flex: 0 0 14px; color: var(--blue); }

.primary-button, .secondary-button, .text-button, .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}

.primary-button {
  min-height: 40px;
  padding: 0 16px;
  color: #fff;
  background: var(--green-800);
  border: 1px solid var(--green-800);
  border-radius: 6px;
  font-weight: 700;
}
.primary-button:hover { background: var(--green-900); }
.primary-button svg { width: 15px; }

.formula-watermark {
  position: absolute;
  right: 18px;
  top: 21px;
  color: #eef2ee;
  font: 700 126px/1 "STKaiti", "KaiTi", serif;
  pointer-events: none;
}

.formula-topline { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.formula-label { color: var(--red); font-size: 11px; font-weight: 800; }
.evidence-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; color: var(--blue); background: var(--blue-soft); border-radius: 4px; font-size: 10px; font-weight: 700; }
.evidence-badge svg { width: 13px; height: 13px; }

.formula-focus > h2 { position: relative; margin: 16px 0 5px; font: 700 30px/1.3 "Songti SC", "STSong", serif; }
.formula-scenario { position: relative; min-height: 44px; margin: 0; max-width: 83%; color: var(--muted); font-size: 12px; }

.ingredient-row { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 18px; }
.ingredient-row > span { min-width: 78px; display: grid; grid-template-columns: 27px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; color: #405048; font-size: 11px; }
.ingredient-row b { grid-row: 1 / 3; width: 27px; height: 27px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font: 700 11px/1 "STKaiti", "KaiTi", serif; }
.ingredient-row span:nth-child(even) b { background: var(--gold); }
.ingredient-row small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }

.material-form-badge { display: inline-flex; align-items: center; width: fit-content; min-height: 20px; padding: 2px 6px; border: 1px solid transparent; border-radius: 4px; font-size: 9px; font-style: normal; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.material-form--dry { color: #49646b; background: #e8eff0; border-color: #c8d7d9; }
.material-form--fresh { color: #286044; background: #e4f0e8; border-color: #bed4c6; }
.material-form--fried { color: #75531c; background: #f4ead2; border-color: #ddc58e; }
.material-form--honeyed { color: #81483e; background: #f5e6e2; border-color: #dfc0b9; }
.material-form--unknown { color: #68716b; background: #eef0ee; border-color: #d6dbd7; }

.method-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin: 21px 0 0; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-strip div { padding: 0 16px; border-left: 1px solid var(--line); }
.method-strip div:first-child { padding-left: 0; border-left: 0; }
.method-strip dt { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.method-strip dt svg { width: 13px; }
.method-strip dd { margin: 3px 0 0; color: #34473d; font-size: 12px; font-weight: 700; }

.caution-note { margin-top: 15px; display: flex; gap: 10px; padding: 10px 11px; color: #7a433c; background: var(--red-soft); border-left: 3px solid var(--red); }
.caution-note > svg { width: 15px; flex: 0 0 15px; margin-top: 2px; }
.caution-note p { margin: 0; line-height: 1.4; }
.caution-note strong, .caution-note span { display: block; }
.caution-note strong { margin-bottom: 2px; font-size: 10px; }
.caution-note span { font-size: 10px; }

.formula-actions { margin-top: 17px; display: flex; gap: 8px; }
.secondary-button { min-height: 38px; padding: 0 14px; color: var(--green-800); background: transparent; border: 1px solid #9eb0a4; border-radius: 6px; font-weight: 700; }
.secondary-button:hover { background: var(--green-100); }
.secondary-button svg { width: 14px; }

.icon-button { width: 38px; height: 38px; padding: 0; color: var(--green-800); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 6px; }
.icon-button:hover { background: var(--prescription-paper-deep); }
.icon-button.active { color: #fff; background: var(--red); border-color: var(--red); }

.library-section { max-width: 1380px; margin: 0 auto 34px; }
.inline-heading { align-items: flex-end; margin-bottom: 14px; }
.text-button { padding: 5px 0; color: var(--green-700); background: transparent; border: 0; font-size: 11px; font-weight: 700; }
.text-button svg { width: 14px; }

.formula-list { border-top: 1px solid var(--line-strong); }
.formula-list-item {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(240px, 1fr) 96px 104px 18px;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.formula-list-item:hover, .formula-list-item.active { background: var(--prescription-paper-deep); }
.formula-list-item.active { box-shadow: inset 3px 0 0 var(--green-700); }
.formula-index { color: #9ba39d; font: 700 13px/1 "Songti SC", serif; }
.formula-list-copy strong, .formula-list-copy small { display: block; }
.formula-list-copy strong { margin-bottom: 3px; font: 700 15px/1.3 "Songti SC", serif; }
.formula-list-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tag { justify-self: start; padding: 4px 7px; border-radius: 4px; font-size: 9px; font-weight: 700; }
.tag-green { color: var(--green-700); background: var(--green-100); }
.tag-red { color: var(--red); background: var(--red-soft); }
.tag-gold { color: #87611f; background: var(--gold-soft); }
.tag-blue { color: var(--blue); background: var(--blue-soft); }
.list-meta { color: var(--muted); font-size: 10px; }
.formula-list-item > svg { width: 15px; color: #9aa29c; }

.source-band {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 54px minmax(300px, 1fr) minmax(250px, auto);
  align-items: center;
  gap: 22px;
  padding: 24px 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.source-symbol { width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: var(--blue); border-radius: 6px; }
.source-copy h2 { font-size: 18px; }
.source-copy > p:last-child { max-width: 740px; margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.source-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.source-tags span { padding: 5px 8px; color: #536c71; background: var(--blue-soft); border-radius: 4px; font-size: 9px; font-weight: 700; }

.app-view[hidden] { display: none !important; }

.view-header {
  max-width: 1380px;
  min-height: 170px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 28px 32px;
  color: var(--ink);
  background: var(--prescription-paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.view-header > div:first-child { min-width: 0; }
.view-header h1 { margin: 0; font: 700 29px/1.3 "Songti SC", "STSong", serif; }
.view-header > div:first-child > p:last-child { max-width: 720px; margin: 10px 0 0; color: var(--muted); font-size: 12px; }
.view-count { min-width: 122px; padding: 5px 0 5px 28px; border-left: 1px solid var(--line); }
.view-count strong, .view-count span { display: block; }
.view-count strong { color: var(--green-800); font: 700 35px/1 "Songti SC", serif; }
.view-count span { margin-top: 7px; color: var(--muted); font-size: 10px; }

.catalog-toolbar {
  max-width: 1380px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.search-field {
  width: min(420px, 100%);
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 13px;
  background: var(--prescription-paper);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}
.search-field:focus-within { border-color: #7c9c89; box-shadow: 0 0 0 3px rgba(47,96,75,.09); }
.search-field svg { width: 16px; color: var(--muted); }
.search-field input { width: 100%; min-width: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 12px; }
.search-field input::placeholder { color: #9ba39e; }

.segmented-control { display: inline-grid; grid-auto-flow: column; padding: 3px; background: #e7ebe8; border-radius: 6px; }
.segmented-control button { min-width: 62px; height: 34px; padding: 0 12px; color: #68736c; background: transparent; border: 0; border-radius: 4px; cursor: pointer; font-size: 11px; }
.segmented-control button.active { color: var(--green-800); background: var(--prescription-paper-deep); box-shadow: 0 1px 4px rgba(25,48,36,.11); font-weight: 700; }

.catalog-layout {
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 205px minmax(0, 1fr);
  gap: 24px;
}

.catalog-sidebar { align-self: start; padding: 16px 12px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.catalog-sidebar > p { margin: 0 9px 10px; color: var(--muted); font-size: 10px; font-weight: 700; }
.catalog-sidebar > button { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px; color: #536159; background: transparent; border: 0; border-radius: 5px; cursor: pointer; }
.catalog-sidebar > button:hover { background: var(--prescription-paper-deep); }
.catalog-sidebar > button.active { color: var(--green-800); background: var(--green-100); font-weight: 700; }
.catalog-sidebar > button span { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.catalog-sidebar > button svg { width: 15px; }
.catalog-sidebar > button b { color: #89938c; font-size: 9px; }
.result-line { height: 34px; display: flex; align-items: flex-start; justify-content: space-between; color: var(--muted); font-size: 10px; }
.result-line button { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: 10px; }
.result-line svg { width: 13px; }

.catalog-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.catalog-card {
  position: relative;
  min-height: 248px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 18px;
  overflow: hidden;
  text-align: left;
  color: var(--ink);
  background: var(--prescription-paper);
  border: 1px solid var(--prescription-line);
  border-radius: 8px;
  cursor: pointer;
}
.catalog-card:hover { background: #fbf5e5; border-color: #b8a97e; box-shadow: 0 12px 28px rgba(65,53,25,.08); transform: translateY(-1px); }
.catalog-mark { position: absolute; right: 9px; top: 36px; color: #edf2ee; font: 700 86px/1 "STKaiti", "KaiTi", serif; pointer-events: none; }
.catalog-mark.mark-red { color: #f5ecea; }
.catalog-mark.mark-gold { color: #f6f0e2; }
.catalog-mark.mark-blue { color: #eaf0f1; }
.catalog-card-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-card-head em { color: var(--blue); font-size: 9px; font-style: normal; font-weight: 700; }
.catalog-card-head svg { width: 15px; color: #9aa49d; }
.catalog-card-icons { display: inline-flex; align-items: center; gap: 8px; }
.catalog-card-icons .favorite-card-icon { color: var(--red); }
.catalog-card-icons .formula-note-card-icon { color: #9a7027; }
.catalog-card > strong { position: relative; margin-top: 20px; font: 700 19px/1.3 "Songti SC", serif; }
.catalog-card > small { position: relative; min-height: 38px; margin-top: 6px; color: var(--muted); font-size: 10px; }
.catalog-materials { position: relative; margin-top: 16px; overflow: hidden; color: #526159; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.catalog-card-foot { position: relative; margin-top: auto; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--prescription-line); }
.catalog-card-foot > b { color: #647068; font-size: 9px; }
.catalog-card-foot .tag { font-style: normal; }

.empty-state { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); background: var(--prescription-paper); border: 1px dashed var(--prescription-line); border-radius: 8px; }
.empty-state svg { width: 30px; height: 30px; margin-bottom: 10px; color: #9aa59e; }
.empty-state strong { color: #4c5851; font-size: 13px; }
.empty-state span { margin-top: 5px; font-size: 10px; }

.catalog-pagination { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px auto 0; }
.catalog-pagination[hidden] { display: none; }
.catalog-pagination button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: #526159; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 4px; cursor: pointer; font-weight: 800; }
.catalog-pagination button:hover:not(:disabled) { color: var(--green-800); background: var(--green-100); border-color: #9bb0a2; }
.catalog-pagination button[aria-current="page"] { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.catalog-pagination button:disabled { opacity: .38; cursor: default; }
.catalog-pagination button svg { width: 18px; height: 18px; }
.catalog-pagination > span { min-width: 18px; color: var(--muted); text-align: center; }

.herb-summary-strip { max-width: 1380px; margin: 0 auto 16px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; overflow: hidden; }
.herb-summary-strip > div { min-height: 68px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); border-left: 1px solid var(--prescription-line); }
.herb-summary-strip > div:first-child { border-left: 0; }
.herb-summary-strip svg { width: 17px; color: #dcb969; }
.herb-summary-strip strong { margin-right: 3px; color: var(--green-900); font-size: 13px; }
.herb-summary-strip span { font-size: 10px; }

.herb-table-wrap { max-width: 1380px; margin: 0 auto; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; overflow: hidden; }
.herb-table-head, .herb-row { display: grid; grid-template-columns: minmax(220px,1.2fr) .55fr .55fr minmax(190px,1fr) .65fr 18px; align-items: center; gap: 16px; }
.herb-table-head { min-height: 42px; padding: 0 18px; color: var(--muted); background: var(--prescription-paper-deep); border-bottom: 1px solid var(--prescription-line); font-size: 9px; font-weight: 700; }
.herb-row { width: 100%; min-height: 76px; padding: 10px 18px; text-align: left; color: var(--ink); background: var(--prescription-paper); border: 0; border-bottom: 1px solid var(--prescription-line); cursor: pointer; }
.herb-row:last-child { border-bottom: 0; }
.herb-row:hover { background: var(--prescription-paper-deep); box-shadow: inset 3px 0 0 var(--green-700); }
.herb-row > span:not(.herb-identity) { color: #5f6d65; font-size: 10px; }
.herb-row > svg { width: 15px; color: #9da59f; }
.herb-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.herb-identity > span { min-width: 0; }
.herb-identity strong, .herb-identity small { display: block; }
.herb-identity strong { font: 700 15px/1.3 "Songti SC", serif; }
.herb-identity small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.herb-glyph { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font: 700 12px/1 "STKaiti", serif; }
.glyph-gold { background: var(--gold); }
.glyph-red { background: var(--red); }
.glyph-blue, .avatar-blue { background: var(--blue); }
.safety { justify-self: start; padding: 4px 7px; border-radius: 4px; font-size: 9px !important; font-weight: 700; }
.safety-low { color: var(--green-700) !important; background: var(--green-100); }
.safety-medium { color: #856321 !important; background: var(--gold-soft); }
.safety-high { color: var(--red) !important; background: var(--red-soft); }

.record-header .primary-button { width: auto; align-self: flex-end; }
.record-metrics { max-width: 1380px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.record-metrics > div { min-height: 126px; padding: 17px 18px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.record-metrics span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.record-metrics span svg { width: 15px; color: var(--blue); }
.record-metrics strong { display: block; min-height: 36px; margin-top: 13px; color: var(--green-800); font: 700 23px/1.25 "Songti SC", serif; }
.record-metrics strong small { margin-left: 4px; font: 400 9px/1 sans-serif; }
.record-metrics em { display: block; margin-top: 9px; color: #8d9690; font-size: 9px; font-style: normal; }
.record-metrics .metric-red { color: var(--red); }

.records-dashboard { max-width: 1380px; margin: 0 auto 28px; display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; }
.calendar-panel, .trend-panel { min-height: 408px; padding: 22px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.panel-heading h2 { margin: 0; font: 700 18px/1.35 "Songti SC", serif; }
.panel-heading > div:last-child { display: flex; gap: 6px; }
.panel-heading .icon-button { width: 32px; height: 32px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-week { margin-top: 19px; color: #8a938d; font-size: 9px; text-align: center; }
.calendar-days { margin-top: 5px; gap: 5px; }
.calendar-days button { position: relative; aspect-ratio: 1.45; display: grid; place-items: center; color: #445049; background: transparent; border: 0; border-radius: 5px; cursor: pointer; font-size: 10px; }
.calendar-days button:hover { background: var(--prescription-paper-deep); }
.calendar-days .muted { color: #b8bdb9; }
.calendar-days .today { color: #fff; background: var(--green-800); font-weight: 700; }
.calendar-days .selected-day { box-shadow: inset 0 0 0 2px var(--gold); }
.calendar-days .has-record::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--green-700); }
.calendar-days .gold-record::after { background: var(--gold); }
.calendar-days .blue-record::after { background: #9fc4cb; box-shadow: 0 0 0 1px #fff; }
.calendar-legend { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: 9px; }
.calendar-legend span { display: flex; align-items: center; gap: 5px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-700); }
.dot-gold { background: var(--gold); }
.dot-blue { background: var(--blue); }
.ring { width: 9px; height: 9px; border: 2px solid var(--green-700); border-radius: 50%; }

.trend-total { color: var(--green-700); font-size: 10px; font-weight: 700; }
.bar-chart { height: 218px; margin-top: 25px; display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 10px; border-bottom: 1px solid var(--line-strong); }
.bar-chart > div { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.bar-chart span { width: min(31px, 70%); min-height: 8px; background: #b8c9bf; border-radius: 3px 3px 0 0; }
.bar-chart .current span { background: var(--green-700); }
.bar-chart b { position: absolute; bottom: -22px; color: #849087; font-size: 8px; font-weight: 500; white-space: nowrap; }
.bar-chart small { position: absolute; top: 2px; color: #707b74; font-size: 8px; }
.trend-note { margin-top: 41px; display: flex; gap: 9px; padding: 11px; background: var(--blue-soft); }
.trend-note > svg { width: 14px; flex: 0 0 14px; color: var(--blue); }
.trend-note p { margin: 0; }
.trend-note strong, .trend-note span { display: block; }
.trend-note strong { color: #466168; font-size: 9px; }
.trend-note span { margin-top: 2px; color: #687d81; font-size: 8px; }

.record-timeline { max-width: 1380px; margin: 0 auto; }
.timeline-list { border-top: 1px solid var(--line-strong); }
.notes-library { max-width: 1120px; margin: 24px auto 44px; padding: 0 24px; }
.notes-count { color: var(--green-800); font-weight: 800; }
.notes-list { display: grid; gap: 10px; }
.formula-note-group { overflow: hidden; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.formula-note-group-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--prescription-paper-deep); border-bottom: 1px solid var(--prescription-line); }
.formula-note-group-head > b { flex: 0 0 auto; color: #7b5620; font-size: 13px; }
.formula-note-formula-link { display: inline-flex; min-width: 0; align-items: center; gap: 7px; padding: 0; color: var(--green-800); background: transparent; border: 0; cursor: pointer; font-weight: 800; text-align: left; }
.formula-note-formula-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.formula-note-formula-link svg { width: 17px; flex: 0 0 17px; }
.formula-note-formula-link svg:last-child { color: #8a998f; }
.formula-note-entries { padding: 0 18px; }
.formula-note-entry { padding: 15px 0; border-top: 1px solid var(--line); }
.formula-note-entry:first-child { border-top: 0; }
.formula-note-entry > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.formula-note-entry time { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.formula-note-delete-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: var(--red); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.formula-note-delete-button:hover { background: var(--red-soft); border-color: #d9b5ad; }
.formula-note-delete-button svg { width: 16px; height: 16px; }
.formula-note-entry > p { margin: 10px 0 0; color: #42534a; line-height: 1.75; overflow-wrap: anywhere; white-space: pre-wrap; }
.record-timeline-row { min-height: 82px; display: grid; grid-template-columns: minmax(0,1fr) 52px; align-items: stretch; border-bottom: 1px solid var(--line); }
.record-open-button { width: 100%; min-width: 0; display: grid; grid-template-columns: 54px 180px minmax(240px,1fr) minmax(200px,.8fr) 18px; align-items: center; gap: 15px; padding: 10px 14px; text-align: left; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
.record-open-button:hover { background: var(--prescription-paper-deep); }
.record-delete-button { align-self: center; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; color: var(--red); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.record-delete-button:hover { background: var(--red-soft); border-color: #d9b5ad; }
.record-delete-button svg { width: 18px; height: 18px; }
.timeline-list time { text-align: center; }
.timeline-list time strong, .timeline-list time small { display: block; }
.timeline-list time strong { color: var(--green-800); font: 700 20px/1 "Songti SC", serif; }
.timeline-list time small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.record-member { display: flex; align-items: center; gap: 9px; }
.record-member strong, .record-member small, .record-formula strong, .record-formula small, .record-result b, .record-result small { display: block; }
.record-member strong, .record-formula strong { font-size: 11px; }
.record-member small, .record-formula small, .record-result small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.record-result b { color: var(--green-700); font-size: 9px; }
.record-result.warning b { color: var(--red); }
.record-open-button > svg { width: 15px; color: #9da59f; }
.personal-record-empty { min-height: 180px; display: grid; place-items: center; color: var(--muted); background: rgba(248,241,220,.72); border-bottom: 1px solid var(--prescription-line); font-size: 13px; }

.profile-header .secondary-button { flex: 0 0 auto; }
.profile-layout { max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); gap: 18px; align-items: start; }
.profile-main, .profile-side-stack { min-width: 0; display: grid; align-content: start; gap: 18px; }
.profile-overview-panel, .profile-panel { padding: 24px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.profile-overview-panel { display: grid; grid-template-columns: minmax(260px,1fr) minmax(330px,1.15fr); align-items: center; gap: 28px; background: #f7eed7; border-top: 3px solid var(--red); }
.profile-identity { display: flex; align-items: center; gap: 17px; }
.profile-avatar { width: 68px; height: 68px; flex: 0 0 68px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font: 700 28px/1 "STKaiti", "KaiTi", serif; box-shadow: inset 0 0 0 4px rgba(255,255,255,.2); }
.profile-identity h2 { margin: 2px 0 7px; color: var(--prescription-ink); font: 700 26px/1.25 "Songti SC", serif; }
.profile-identity > div > span { display: flex; align-items: center; gap: 6px; color: var(--green-700); font-size: 12px; }
.profile-identity > div > span svg { width: 16px; height: 16px; }
.profile-stat-strip { min-height: 78px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-left: 1px solid var(--prescription-line); }
.profile-stat-strip > div { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 12px; text-align: center; border-right: 1px solid var(--prescription-line); }
.profile-stat-strip strong { max-width: 100%; overflow-wrap: anywhere; color: var(--green-800); font: 700 21px/1.25 "Songti SC", serif; }
.profile-stat-strip span { margin-top: 6px; color: var(--muted); font-size: 11px; }
.profile-panel .panel-heading { margin-bottom: 12px; }
.profile-panel .panel-heading > svg { width: 20px; color: var(--red); }
.profile-field-list { border-top: 1px solid var(--prescription-line); }
.profile-field-list > button { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); cursor: pointer; }
.profile-field-list > button:hover, .privacy-panel > button:hover { background: var(--prescription-paper-deep); }
.profile-field-list > button > span { min-width: 0; display: flex; align-items: center; gap: 13px; }
.profile-field-list > button > span > svg { width: 21px; height: 21px; color: var(--green-700); }
.profile-field-list strong, .profile-field-list small { display: block; }
.profile-field-list strong { font-size: 14px; }
.profile-field-list small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.profile-field-list > button > svg { width: 17px; color: #9aa39d; }
.profile-health-note { margin: 16px 0 0; display: flex; align-items: flex-start; gap: 9px; padding: 13px; color: #61777b; background: var(--blue-soft); font-size: 12px; line-height: 1.6; }
.profile-health-note svg { width: 17px; flex: 0 0 17px; color: var(--blue); }
.privacy-status { display: flex; align-items: flex-start; gap: 11px; margin: 14px 0 8px; padding: 14px; color: #315d4b; background: var(--green-100); border-left: 3px solid var(--green-700); }
.privacy-status > svg { width: 20px; flex: 0 0 20px; }
.privacy-status strong, .privacy-status span { display: block; }
.privacy-status strong { font-size: 14px; }
.privacy-status span { margin-top: 4px; color: #62746b; font-size: 11px; line-height: 1.55; }
.privacy-panel > button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 6px 0; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.privacy-panel > button:last-child { border-bottom: 0; }
.privacy-panel > button > span { display: flex; align-items: center; gap: 9px; }
.privacy-panel > button > span > svg { width: 17px; color: var(--green-700); }
.privacy-panel > button strong, .privacy-panel > button small { display: block; }
.privacy-panel > button strong { font-size: 13px; }
.privacy-panel > button small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.privacy-panel > button > svg { width: 14px; color: #9aa39d; }
.account-panel dl { margin: 12px 0 18px; }
.account-panel dl > div { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--prescription-line); }
.account-panel dt { color: var(--muted); font-size: 12px; }
.account-panel dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.account-signout { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--red); background: transparent; border: 1px solid #d9b5ad; border-radius: 5px; cursor: pointer; font-weight: 700; }
.account-signout:hover { background: var(--red-soft); }
.account-signout svg { width: 17px; }

.detail-view { max-width: 1380px; margin: 0 auto; }
.back-button { height: 38px; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 0 11px; color: var(--green-800); background: transparent; border: 1px solid var(--line-strong); border-radius: 5px; cursor: pointer; font-weight: 700; }
.back-button svg { width: 15px; }
.detail-hero { position: relative; min-height: 214px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 30px; padding: 32px 36px; overflow: hidden; color: var(--prescription-ink); background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 8px; }
.herb-detail-hero--image { min-height: 0; aspect-ratio: 16 / 9; display: block; padding: 0; background-color: var(--prescription-paper-deep); background-image: var(--herb-detail-image); background-position: center; background-repeat: no-repeat; background-size: cover; }
.herb-detail-title-strip { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 22px 26px; color: var(--prescription-ink); background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-top: 0; border-radius: 0 0 8px 8px; }
.herb-detail-title-copy { min-width: 0; }
.herb-detail-title-copy .section-kicker { color: #8b651a; font-size: 14px; }
.herb-detail-title-copy h1 { display: flex; align-items: center; gap: 10px; margin: 5px 0 8px; font: 700 32px/1.25 "Songti SC", serif; }
.herb-detail-title-copy h1 > span { min-width: 0; }
.herb-detail-title-copy > p:last-child { margin: 0; color: #526055; font-size: 15px; }
.herb-detail-title-strip .detail-badges { flex: 0 0 auto; }
.herb-detail-title-strip .detail-badges span { padding: 8px 11px; color: #506054; background: var(--prescription-paper); border: 1px solid var(--prescription-line); font-size: 13px; }
.solar-detail-hero--image { min-height: 0; aspect-ratio: 16 / 9; display: block; padding: 0; background-color: var(--green-900); background-image: var(--solar-term-image); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 0; box-shadow: none; }
.solar-detail-hero--image.solar-detail-hero--wide { aspect-ratio: 5 / 3; background-position: center; }
.solar-detail-hero--image .detail-watermark { display: none; }
.solar-detail-hero--image .detail-hero-copy { position: absolute; z-index: 1; top: 28px; left: 28px; width: min(360px, calc(100% - 56px)); padding: 20px 22px; background: rgba(8,35,25,.82); border: 1px solid rgba(255,255,255,.32); border-left: 4px solid #e5bd60; border-radius: 6px; box-shadow: 0 7px 24px rgba(0,0,0,.22); backdrop-filter: blur(5px); }
.solar-detail-hero--image .detail-hero-copy .section-kicker { font-size: 15px; }
.solar-detail-hero--image .detail-hero-copy h1 { color: #fff; font-size: 38px; }
.solar-detail-hero--image .detail-hero-copy > p:last-child { color: #fff; font-size: 15px; line-height: 1.7; }
.solar-detail-hero--image .detail-badges { position: absolute; right: 28px; bottom: 28px; }
.solar-detail-hero--image .detail-badges span { padding: 9px 12px; color: #fff; background: rgba(8,35,25,.8); border-color: rgba(255,255,255,.38); box-shadow: 0 3px 14px rgba(0,0,0,.18); backdrop-filter: blur(5px); font-size: 13px; }
.solar-detail-hero--image.solar-detail-hero--wide .detail-hero-copy {
  top: 14px;
  left: 14px;
  width: fit-content;
  max-width: calc(100% - 28px);
  padding: 10px 12px;
  background: rgba(18, 67, 46, .56);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 5px 16px rgba(0,0,0,.14);
  backdrop-filter: blur(3px);
}
.solar-detail-hero--image.solar-detail-hero--wide .detail-hero-copy .section-kicker {
  color: #fff;
  font-size: 16px !important;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.42);
}
.solar-detail-hero--image.solar-detail-hero--wide .detail-badges { display: none; }
.detail-hero .detail-watermark { position: absolute; right: 245px; bottom: -47px; color: rgba(94,70,31,.09); font: 700 170px/1 "STKaiti", serif; }
.detail-hero-copy { position: relative; min-width: 0; }
.detail-hero-copy .section-kicker { color: #8b651a; }
.detail-hero-copy h1 { display: flex; align-items: center; gap: 10px; margin: 4px 0 7px; font: 700 32px/1.25 "Songti SC", serif; }
.detail-hero-copy h1 > span { min-width: 0; }
.detail-formula-note-indicator { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; padding: 0; color: #805c1d; background: #fff0c9; border: 1px solid #bd9340; border-radius: 5px; cursor: pointer; }
.detail-formula-note-indicator:hover { background: #ffe6a8; }
.detail-formula-note-indicator svg { width: 19px; height: 19px; }
.detail-hero-copy > p:last-child { max-width: 720px; margin: 0; color: #526055; font-size: 11px; }
.detail-hero-favorite-button { position: absolute; z-index: 2; top: 20px; right: 36px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; color: var(--green-800); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 6px; cursor: pointer; font-weight: 800; }
.detail-hero-favorite-button:hover { background: #fff7e5; border-color: #b99a57; }
.detail-hero-favorite-button.active { color: #76520e; background: #fff0c9; border-color: #bd9340; }
.detail-hero-favorite-button svg { width: 18px; height: 18px; }
.detail-badges { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.detail-badges span { padding: 6px 9px; color: #506054; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 4px; font-size: 9px; }
.detail-hero-actions { position: relative; align-self: end; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding-bottom: 0; transform: translateY(14px); }
.detail-hero-record-button, .detail-hero-note-button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; color: var(--green-800); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 6px; cursor: pointer; font-weight: 800; box-shadow: none; }
.detail-hero-record-button:hover, .detail-hero-note-button:hover { background: #fff7e5; border-color: #b99a57; }
.detail-hero-note-button { color: #7b5620; background: var(--prescription-paper-deep); }
.detail-hero-record-button svg, .detail-hero-note-button svg { width: 18px; height: 18px; }
.detail-layout { margin-top: 18px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); gap: 18px; align-items: start; }
.detail-main, .detail-side { min-width: 0; display: grid; gap: 18px; }
.detail-section { min-width: 0; padding: 24px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.detail-section h2 { margin: 0 0 15px; font: 700 18px/1.35 "Songti SC", serif; }
.detail-section:not(.detail-callout) h2 { padding-left: 10px; color: var(--prescription-ink); border-left: 3px solid var(--red); }
.detail-section > p { margin: 0; color: #56625b; font-size: 11px; }
.detail-property-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.detail-property-grid div { padding: 15px; border-left: 1px solid var(--line); }
.detail-property-grid div:first-child { border-left: 0; }
.detail-property-grid span, .detail-property-grid strong { display: block; }
.detail-property-grid span { color: var(--muted); font-size: 8px; }
.detail-property-grid strong { margin-top: 5px; color: #344a3e; font-size: 11px; }
.detail-ingredient-table { border-top: 1px solid var(--prescription-line); }
.detail-ingredient-table > div { min-height: 54px; display: grid; grid-template-columns: minmax(130px,1fr) 90px minmax(150px,1.2fr); align-items: center; gap: 14px; padding: 7px 4px; border-bottom: 1px solid var(--prescription-line); }
.detail-ingredient-table > div > strong { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 11px; }
.detail-ingredient-table > div > span { color: #536159; font-size: 10px; }
.detail-ingredient-table small { color: var(--muted); font-size: 9px; }
.detail-ingredient-table small strong { color: #47554d; }
.detail-steps { margin: 0; padding: 0; list-style: none; counter-reset: detailsteps; }
.detail-steps li { counter-increment: detailsteps; position: relative; min-height: 43px; padding: 5px 0 13px 42px; color: #536059; font-size: 11px; }
.detail-steps li::before { content: counter(detailsteps); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 9px; font-weight: 700; }
.detail-callout { padding: 17px; color: #6d4842; background: var(--red-soft); border-left: 3px solid var(--red); }
.detail-callout h2 { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: #733f38; font-size: 14px; }
.detail-callout h2 svg { width: 16px; }
.detail-callout p { color: #70524d; font-size: 10px; }
.detail-source-list { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-source-list span { padding: 5px 8px; color: var(--blue); background: var(--blue-soft); border-radius: 4px; font-size: 9px; font-weight: 700; }
.detail-side .primary-button { width: 100%; }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.section-title-row h2 { margin-bottom: 0; }
.section-title-row > span { color: var(--muted); white-space: nowrap; }
.muted-data { margin: 0; color: var(--muted); }
.database-note { margin-top: 14px !important; padding-top: 13px; color: var(--muted) !important; border-top: 1px solid var(--line); }
.inline-data-link { padding: 0; color: var(--green-700); background: transparent; border: 0; cursor: pointer; font-weight: 700; }
.inline-data-link:hover { text-decoration: underline; }

.relation-list { border-top: 1px solid var(--line-strong); }
.relation-list > div { padding: 15px 2px; border-bottom: 1px solid var(--line); }
.relation-list p { margin: 9px 0 5px; color: #46534b; }
.relation-list small { display: block; color: var(--muted); }
.relation-chip { display: inline-flex; padding: 5px 8px; border-radius: 4px; font-weight: 800; }
.relation-reference { color: var(--green-700); background: var(--green-100); }
.relation-caution { color: #8a5d15; background: var(--gold-soft); }
.relation-professional { color: var(--red); background: var(--red-soft); }

.solar-link-list, .solar-recommendation-list { border-top: 1px solid var(--line-strong); }
.solar-link-list > button, .solar-recommendation-list > button { width: 100%; display: grid; grid-template-columns: minmax(150px,.5fr) auto; gap: 8px 16px; padding: 15px 2px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.solar-link-list > button:hover, .solar-recommendation-list > button:hover { background: var(--prescription-paper-deep); }
.solar-link-list span, .solar-link-list strong, .solar-link-list small,
.solar-recommendation-list span, .solar-recommendation-list strong, .solar-recommendation-list small { display: block; }
.solar-link-list span > small, .solar-recommendation-list span > small { margin-top: 3px; color: var(--muted); }
.solar-link-list em, .solar-recommendation-list em { justify-self: end; color: var(--green-700); font-style: normal; font-weight: 800; }
.solar-link-list p, .solar-recommendation-list p { grid-column: 1 / -1; margin: 3px 0 0; color: #46534b; }
.solar-link-list > button > small, .solar-recommendation-list > button > small { grid-column: 1 / -1; color: var(--muted); }
.solar-recommendation-list > button > svg { grid-column: 3; grid-row: 1; justify-self: end; margin-top: 24px; color: var(--muted); }
.solar-recommendation-list > button { grid-template-columns: minmax(0,1fr) auto 18px; }
.solar-recommendation-list > button > p, .solar-recommendation-list > button > small { grid-column: 1 / -1; }

.guidance-list { margin-top: 16px; }
.source-citation-list { border-top: 1px solid var(--line); }
.source-citation-list > div { min-height: 58px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.source-citation-list p, .source-citation-list strong, .source-citation-list small { display: block; margin: 0; }
.source-citation-list small { margin-top: 3px; color: var(--muted); }
.authority-score { width: 38px; height: 30px; display: grid; place-items: center; color: var(--green-800); background: var(--green-100); border-radius: 4px; font-weight: 800; }

.standard-list { border-top: 1px solid var(--line-strong); }
.standard-row { min-height: 66px; display: grid; grid-template-columns: minmax(0,1fr) minmax(90px,.45fr); align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.standard-row p, .standard-row strong, .standard-row small { display: block; margin: 0; }
.standard-row small { margin-top: 4px; color: var(--muted); }
.standard-row span { color: #526159; }
.standard-field-list { margin-top: 10px; border-top: 1px solid var(--line); }
.standard-field { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 14px; align-items: start; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.standard-field > span { color: var(--blue); font-weight: 800; }
.standard-field p, .standard-field strong, .standard-field small { display: block; margin: 0; }
.standard-field small { margin-top: 5px; color: #536159; overflow-wrap: anywhere; }

.data-disclosure { margin-top: 16px; border-top: 1px solid var(--line); }
.data-disclosure summary { padding: 14px 0 4px; color: var(--green-700); cursor: pointer; font-weight: 800; }
.data-disclosure ul { margin: 12px 0 0; padding-left: 22px; color: #4c5952; }
.data-disclosure li { margin: 9px 0; }
.standard-disclosure { margin-top: 18px; }
.herb-result-line { max-width: 1380px; height: auto; min-height: 34px; margin: 0 auto; align-items: center; }
.related-list { display: grid; }
.related-list button { min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 8px 0; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.related-list button:last-child { border-bottom: 0; }
.related-list strong, .related-list small { display: block; }
.related-list strong { font-size: 10px; }
.related-list small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.related-list svg { width: 14px; color: #9ba49e; }
.record-detail-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.record-detail-summary div { padding: 14px; background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 5px; }
.record-detail-summary span, .record-detail-summary strong { display: block; }
.record-detail-summary span { color: var(--muted); font-size: 8px; }
.record-detail-summary strong { margin-top: 6px; font-size: 11px; }
.observation-list { display: grid; gap: 10px; }
.observation-list div { min-width: 0; display: grid; grid-template-columns: minmax(70px, 90px) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.observation-list div:last-child { border-bottom: 0; }
.observation-list strong { color: var(--muted); font-size: 9px; }
.observation-list span { min-width: 0; color: #46534b; font-size: 10px; overflow-wrap: anywhere; }
.observation-list .solar-seasonal-context { display: block; padding: 16px 18px; background: #f7efd9; border: 1px solid var(--prescription-line); border-left: 3px solid #b86d52; border-radius: 5px; }
.solar-seasonal-context > strong { display: block; margin-bottom: 8px; }
.observation-list .solar-seasonal-copy { display: block; padding: 0; border: 0; }
.solar-seasonal-copy > span { display: block; }
.solar-term-poem { margin: 14px 0 0; padding: 13px 0 1px; color: var(--prescription-ink); background: transparent; border: 0; border-top: 1px solid #d6c29a; border-radius: 0; }
.solar-term-poem p { margin: 0; font: 700 16px/1.8 "Songti SC", "STSong", serif; }
.solar-term-poem cite { display: block; margin-top: 7px; color: #786e5a; font-size: 12px; font-style: normal; text-align: right; }

.record-dialog, .profile-dialog, .note-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(800px, calc(100vh - 32px)); padding: 0; overflow-y: auto; color: var(--ink); background: var(--prescription-paper); border: 0; border-radius: 8px; box-shadow: 0 24px 90px rgba(17,32,24,.28); }
.record-dialog::backdrop, .profile-dialog::backdrop, .note-dialog::backdrop, .delete-record-dialog::backdrop { background: rgba(20,31,25,.58); }
.record-form, .profile-form, .note-form { display: grid; gap: 22px; padding: 26px 28px 0; }
.record-form label > span, .record-form legend, .profile-form label > span, .note-form label > span { display: block; margin-bottom: 7px; color: #59655e; font-size: 10px; font-weight: 700; }
.record-form :is(input, select, textarea), .profile-form :is(input, select, textarea), .note-form :is(input, select, textarea) { width: 100%; min-height: 50px; padding: 12px 14px; color: var(--ink); background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 5px; outline: 0; font-size: 11px; }
.record-form textarea, .profile-form textarea, .note-form textarea { resize: vertical; }
.record-form :is(input, select, textarea):focus, .profile-form :is(input, select, textarea):focus, .note-form :is(input, select, textarea):focus { border-color: #7f9f8c; box-shadow: 0 0 0 3px rgba(47,96,75,.08); }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.record-form fieldset { margin: 0; padding: 0; border: 0; }
.linked-today-record { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; background: var(--green-100); border-left: 3px solid var(--green-700); }
.linked-today-record div { min-width: 0; }
.linked-today-record strong, .linked-today-record span { display: block; }
.linked-today-record strong { color: var(--green-900); line-height: 1.55; }
.linked-today-record span { margin-top: 4px; color: var(--muted); line-height: 1.5; }
.linked-today-record .text-button { flex: 0 0 auto; white-space: nowrap; }
.linked-today-record.missing { background: var(--gold-soft); border-left-color: var(--gold); }
.linked-today-record.missing strong { color: #6c501f; }
.form-boundary { display: flex; align-items: flex-start; gap: 9px; padding: 13px 14px; color: var(--blue); background: var(--blue-soft); font-size: 9px; }
.form-boundary svg { width: 14px; flex: 0 0 14px; }
.record-form .dialog-footer, .profile-form .dialog-footer, .note-form .dialog-footer { margin: 0 -28px; gap: 8px; }
.record-form .dialog-footer .primary-button, .record-form .dialog-footer .secondary-button, .profile-form .dialog-footer .primary-button, .profile-form .dialog-footer .secondary-button, .note-form .dialog-footer .primary-button, .note-form .dialog-footer .secondary-button { width: auto; }

.delete-record-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; overflow: hidden; color: var(--ink); background: var(--prescription-paper); border: 0; border-radius: 8px; box-shadow: 0 24px 90px rgba(17,32,24,.28); }
.delete-record-content { min-height: 150px; display: flex; align-items: center; gap: 18px; padding: 28px; }
.delete-record-icon { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; color: var(--red); background: var(--red-soft); border-radius: 50%; }
.delete-record-icon svg { width: 24px; height: 24px; }
.delete-record-content strong { display: block; color: var(--prescription-ink); font-size: 17px; }
.delete-record-content p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.danger-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; color: #fff; background: var(--red); border: 1px solid var(--red); border-radius: 5px; cursor: pointer; font-weight: 800; }
.danger-button:hover { background: #963b32; border-color: #963b32; }
.danger-button svg { width: 18px; }

.bottom-nav { display: none; }

.formula-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 36px));
  overflow-y: auto;
  padding: 0;
  color: var(--ink);
  background: var(--prescription-paper);
  border: 0;
  border-radius: 8px;
  box-shadow: 0 24px 90px rgba(17, 32, 24, .28);
}
.formula-dialog::backdrop { background: rgba(20, 31, 25, .58); }
.formula-dialog .dialog-header, .formula-dialog .dialog-footer { background: var(--prescription-paper); border-color: var(--prescription-line); }
.formula-dialog .dialog-body section { border-color: var(--prescription-line); }
.formula-dialog .dialog-body h3 { color: var(--prescription-ink); }
.dialog-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; background: var(--prescription-paper); border-bottom: 1px solid var(--prescription-line); }
.dialog-header h2 { margin: 0; font: 700 24px/1.3 "Songti SC", serif; }
.dialog-body { display: grid; gap: 30px; padding: 28px; }
.dialog-body section { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.dialog-body section:last-child { padding-bottom: 0; border-bottom: 0; }
.dialog-body h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font: 700 15px/1.35 "Songti SC", serif; }
.dialog-body h3 svg { width: 16px; color: var(--red); }
.dialog-ingredients { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dialog-ingredients > div { min-height: 50px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 11px 14px; background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 5px; }
.dialog-ingredients > div > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dialog-ingredients strong { overflow-wrap: anywhere; }
.dialog-ingredients span { flex: 0 0 auto; }
.dialog-ingredients strong { font-size: 11px; }
.dialog-ingredients span { color: var(--muted); font-size: 10px; }
.dialog-ingredients small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.dialog-ingredient-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.step-list { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.step-list li { counter-increment: steps; position: relative; min-height: 46px; padding: 3px 0 18px 48px; color: #48544d; font-size: 12px; }
.step-list li::before { content: counter(steps); position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 10px; font-weight: 700; }
.step-list li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 35px; bottom: -1px; width: 1px; background: #b8c8be; }
.dialog-caution { padding: 20px !important; background: var(--red-soft); border: 0 !important; border-left: 3px solid var(--red) !important; }
.dialog-caution p, .dialog-evidence p { margin: 0; color: #624b47; font-size: 11px; }
.dialog-evidence p { color: var(--muted); }
.dialog-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 16px 28px; background: var(--prescription-paper); border-top: 1px solid var(--prescription-line); }
.dialog-footer :is(.primary-button, .secondary-button) { min-height: 48px; padding-inline: 20px; }

.toast {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  color: #fff;
  background: #24362d;
  border-radius: 6px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 16px; }

@media (max-width: 1180px) {
  :root { --rail-width: 188px; }
  .main-content { padding-inline: 26px; }
  .weather-condition { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .body-log, .formula-focus { min-height: auto; }
  .formula-focus { min-height: 430px; }
  .season-stats { grid-template-columns: repeat(3, 78px); }
  .catalog-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .constitution-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .constitution-result-layout { grid-template-columns: minmax(0,1fr) 320px; }
  .herb-table-head, .herb-row { grid-template-columns: minmax(210px,1.1fr) .5fr .5fr minmax(150px,.8fr) .62fr 18px; gap: 10px; }
  .record-open-button { grid-template-columns: 50px 155px minmax(200px,1fr) minmax(180px,.8fr) 18px; }
  .solar-term-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* The product is a fixed-width H5 canvas. Its mobile composition must not
   switch back to wide-screen grids when the 390px canvas is centered on PC. */
@media all {
  body { background: #f5f7f5; }
  .side-rail { display: none; }
  .main-content { margin-left: 0; padding: 0 16px 92px; }
  .topbar {
    min-height: 92px;
    height: auto;
    padding: 7px 0 10px;
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr) auto;
    grid-template-rows: 54px auto;
    column-gap: 8px;
    align-content: center;
  }
  .mobile-brand { grid-column: 1; grid-row: 1; width: 118px; height: 55px; display: flex; }
  .mobile-brand .brand-art { width: 118px; flex: 0 0 118px; }
  .date-block { display: block; grid-column: 1 / -1; grid-row: 2; min-width: 0; }
  .date-block small { display: none; }
  .date-block strong { font-size: 16px; line-height: 1.45; }
  .date-line { gap: 6px; }
  .topbar-actions { display: contents; }
  .weather-summary { display: none; }
  .weather-icon svg { width: 20px; height: 20px; }
  .weather-value { min-width: auto; min-height: 28px; gap: 3px; padding-left: 5px; }
  .weather-value svg { width: 15px; height: 15px; }
  .font-size-button { min-width: 86px; min-height: 44px; grid-template-columns: 1fr; place-items: center; padding: 5px; border: 0; background: transparent; }
  .font-size-button > .font-size-icon { display: none; }
  .font-size-button > .font-size-short-label { color: var(--green-800); font-size: calc(12px * var(--font-scale)) !important; font-weight: 800; line-height: 1; white-space: nowrap; }
  .font-size-button > span, .font-size-button > svg:last-child { display: none; }
  .font-size-button > .font-size-short-label { display: block; }
  .font-size-control { grid-column: 2; grid-row: 1; align-self: center; justify-self: start; }
  .font-size-menu { position: fixed; top: 64px; right: 12px; width: min(280px, calc(100vw - 24px)); }
  .member-switcher { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; }
  .member-button { grid-template-columns: 32px 18px; border: 0; background: transparent; }
  .member-button .avatar { width: 32px; height: 32px; }
  .member-button > span:nth-child(2) { display: none; }
  .season-band { min-height: 218px; padding: 26px 22px; grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .season-band::after { right: -20px; bottom: -34px; font-size: 130px; }
  .season-band h1 { font-size: 26px; }
  #solarTermSummary { font-size: 12px; }
  .season-stats { grid-template-columns: repeat(3, 1fr); width: 100%; }
  .season-stats div { padding-left: 12px; }
  .season-stats div:first-child { padding-left: 0; border-left: 0; }
  .season-stats dd { font-size: 23px; }
  .dashboard-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
  .formula-focus { order: -1; min-height: 0; }
  .body-log, .formula-focus { padding: 22px 18px; }
  .formula-focus > h2 { font-size: 27px; }
  .formula-topline { flex-wrap: wrap; }
  .evidence-badge { max-width: 100%; white-space: normal; }
  .formula-scenario { max-width: 90%; }
  .ingredient-row { gap: 10px 8px; }
  .ingredient-row > span { min-width: calc(33.333% - 8px); }
  .chip-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice-chip { font-size: 12px; }
  .log-footer { align-items: stretch; flex-direction: column; }
  .log-footer p { max-width: none; }
  .primary-button { width: 100%; }
  .formula-list-item { grid-template-columns: 30px 1fr 18px; min-height: 68px; gap: 8px; padding-inline: 10px; }
  .formula-list-item .tag, .formula-list-item .list-meta { display: none; }
  .source-band { grid-template-columns: 44px 1fr; gap: 14px; }
  .source-symbol { width: 42px; height: 42px; }
  .source-tags { grid-column: 1 / -1; justify-content: flex-start; }
  .solar-term-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bottom-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 40;
    width: 100vw;
    height: calc(68px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    padding: 7px 6px env(safe-area-inset-bottom);
    background: rgba(248,241,220,.97);
    border-top: 1px solid var(--line);
  }
  .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #778078; background: transparent; border: 0; font-size: 9px; }
  .bottom-nav button svg { width: 18px; }
  .bottom-nav button.active { color: var(--green-800); font-weight: 800; }
  .toast { bottom: 82px; }
  .formula-dialog, .record-dialog, .profile-dialog, .note-dialog, .delete-record-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .dialog-header { padding: 20px 18px; }
  .dialog-body { gap: 24px; padding: 22px 18px; }
  .dialog-body section { padding-bottom: 24px; }
  .dialog-footer { padding: 14px 18px; }
  .dialog-ingredients { grid-template-columns: repeat(2, 1fr); }
  .view-header { min-height: 0; align-items: flex-start; padding: 24px 20px; }
  .view-header h1 { font-size: 24px; }
  .view-count { display: none; }
  .view-header .primary-button, .view-header .secondary-button { width: auto; flex: 0 0 auto; }
  .catalog-toolbar { align-items: stretch; flex-direction: column; }
  .search-field { width: 100%; }
  .segmented-control { width: 100%; overflow-x: auto; grid-auto-columns: minmax(64px,1fr); }
  .segmented-control button { min-width: 64px; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { display: none; }
  .catalog-card-grid { grid-template-columns: 1fr; }
  .constitution-toolbar { align-items: stretch; flex-direction: column; }
  .constitution-boundary { grid-template-columns: 20px minmax(0,1fr); }
  .constitution-boundary > p:last-child { grid-column: 2; }
  .constitution-grid { grid-template-columns: 1fr; }
  .constitution-card { min-height: 258px; }
  .constitution-test-workspace, .constitution-test-result { margin-top: 18px; }
  .constitution-test-gender { margin: 18px auto; padding: 24px 20px; }
  .constitution-test-layout { grid-template-columns: 1fr; }
  .constitution-test-steps { position: static; max-height: none; display: flex; overflow-x: auto; overflow-y: hidden; border-radius: 7px; scrollbar-width: thin; }
  .constitution-test-steps button { min-width: 180px; border-right: 1px solid var(--prescription-line); border-bottom: 0; }
  .constitution-question-heading { min-height: 92px; padding: 18px 20px; }
  .constitution-question-intro { padding: 15px 20px; }
  .constitution-question-card { padding: 19px 16px; }
  .constitution-question-card legend { grid-template-columns: 38px minmax(0,1fr); }
  .constitution-question-card legend em { grid-column: 2; justify-self: start; margin-top: 0; }
  .constitution-score-options { grid-template-columns: repeat(3,minmax(90px,1fr)); }
  .constitution-result-layout { grid-template-columns: 1fr; }
  .constitution-result-hero { min-height: 190px; padding: 26px 125px 26px 22px; }
  .constitution-result-seal { right: 24px; width: 76px; height: 76px; font-size: 35px; }
  .catalog-card { min-height: 218px; }
  .herb-summary-strip { grid-template-columns: 1fr; }
  .herb-summary-strip > div { min-height: 52px; justify-content: flex-start; padding: 0 18px; border-left: 0; border-top: 1px solid var(--prescription-line); }
  .herb-summary-strip > div:first-child { border-top: 0; }
  .herb-table-head { display: none; }
  .herb-row { grid-template-columns: minmax(0,1fr) auto 16px; grid-template-rows: auto auto; gap: 6px 10px; padding: 13px 14px; }
  .herb-row > span:nth-child(2), .herb-row > span:nth-child(3), .herb-row > span:nth-child(4) { display: none; }
  .herb-row .safety { grid-column: 2; grid-row: 1 / 3; }
  .herb-row > svg { grid-column: 3; grid-row: 1 / 3; }
  .record-metrics { grid-template-columns: repeat(2,1fr); }
  .record-metrics > div { min-height: 112px; }
  .records-dashboard { grid-template-columns: 1fr; }
  .calendar-panel, .trend-panel { min-height: 0; padding: 18px 14px; }
  .record-timeline-row { grid-template-columns: minmax(0,1fr) 48px; }
  .record-open-button { grid-template-columns: 42px minmax(0,1fr) 16px; gap: 9px; }
  .timeline-list .record-member { display: none; }
  .timeline-list .record-result { grid-column: 2; }
  .record-open-button > svg { grid-column: 3; grid-row: 1 / 3; }
  .record-delete-button { width: 40px; height: 40px; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-overview-panel, .profile-panel { padding: 18px; }
  .profile-overview-panel { grid-template-columns: 1fr; gap: 20px; }
  .profile-stat-strip { border-top: 1px solid var(--prescription-line); border-left: 0; }
  .detail-hero { min-height: 0; grid-template-columns: 1fr; padding: 25px 20px; }
  .herb-detail-hero--image { aspect-ratio: 16 / 9; padding: 0; }
  .herb-detail-title-strip { align-items: stretch; flex-direction: column; gap: 14px; padding: 18px; }
  .herb-detail-title-copy .section-kicker { font-size: 14px; }
  .herb-detail-title-copy h1 { font-size: 28px; }
  .herb-detail-title-copy > p:last-child { font-size: 15px; }
  .herb-detail-title-strip .detail-badges { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .herb-detail-title-strip .detail-badges span { font-size: 13px; }
  .solar-detail-hero--image { min-height: 0; aspect-ratio: 4 / 5; padding: 0; background-image: var(--solar-term-image); background-position: 61% center; background-size: cover; }
  .solar-detail-hero--image .detail-hero-copy { top: 14px; left: 14px; width: 72%; padding: 14px 15px; background: rgba(8,35,25,.78); }
  .solar-detail-hero--image .detail-hero-copy .section-kicker { font-size: 12px; }
  .solar-detail-hero--image .detail-hero-copy h1 { font-size: 28px; }
  .solar-detail-hero--image .detail-hero-copy > p:last-child { font-size: 13px; line-height: 1.55; }
  .solar-detail-hero--image .detail-badges { right: 14px; bottom: 14px; max-width: 74%; align-items: flex-end; justify-content: flex-end; }
  .solar-detail-hero--image .detail-badges span { padding: 7px 9px; font-size: 12px; }
  .detail-hero .detail-watermark { right: -5px; bottom: -27px; font-size: 130px; }
  .detail-hero-copy h1 { font-size: 26px; }
  .detail-hero-favorite-button { position: static; width: 100%; }
  .detail-badges { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .detail-hero-actions { width: 100%; justify-content: flex-start; transform: none; }
  .detail-hero-record-button, .detail-hero-note-button { width: 100%; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-main, .detail-side { gap: 14px; }
  .detail-section { padding: 19px 17px; }
  .detail-property-grid { grid-template-columns: repeat(2,1fr); }
  .detail-property-grid div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .detail-property-grid div:nth-child(4) { border-top: 1px solid var(--line); }
  .detail-ingredient-table > div { grid-template-columns: minmax(0, 1fr); gap: 7px; padding-block: 12px; }
  .detail-ingredient-table > div > span, .detail-ingredient-table small { grid-column: 1; }
  .section-title-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .standard-row { grid-template-columns: 1fr auto; }
  .standard-field { grid-template-columns: 1fr; gap: 7px; }
  .standard-field a { grid-column: 1; }
  .record-detail-summary { grid-template-columns: repeat(2,1fr); }
  .record-form, .profile-form, .note-form { padding: 18px 18px 0; }
  .record-form .dialog-footer, .profile-form .dialog-footer, .note-form .dialog-footer { margin-inline: -18px; }
  .notes-library { margin: 0; padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
  .formula-note-group-head { align-items: flex-start; padding: 14px 16px; }
  .formula-note-entries { padding: 0 16px; }
  .formula-note-entry time { font-size: 12px; }
  .linked-today-record { align-items: flex-start; flex-direction: column; gap: 9px; }
  .linked-today-record .text-button { align-self: flex-start; }
}

@media all {
  .topbar { grid-template-columns: 108px minmax(0, 1fr) auto; }
  .mobile-brand { width: 108px; }
  .mobile-brand .brand-art { width: 108px; flex-basis: 108px; }
  .mobile-brand strong { display: none; }
  .weather-value svg { display: none; }
  .weather-value { padding-left: 4px; }
  .season-band h1 { font-size: 23px; }
  .formula-topline { align-items: flex-start; flex-direction: column; gap: 7px; }
  .formula-scenario { max-width: 100%; }
  .method-strip div { padding: 0 9px; }
  .method-strip dd { font-size: 10px; }
  .formula-actions .secondary-button { flex: 1; }
  .view-header { flex-direction: column; gap: 17px; }
  .view-header .primary-button, .view-header .secondary-button { width: 100%; }
  .record-metrics { grid-template-columns: 1fr; }
  .record-metrics > div { min-height: 102px; }
  .calendar-days button { aspect-ratio: 1.15; }
  .profile-stat-strip { grid-template-columns: 1fr; }
  .profile-stat-strip > div { min-height: 66px; border-right: 0; border-bottom: 1px solid var(--prescription-line); }
  .two-columns { grid-template-columns: 1fr; }
  .record-detail-summary { grid-template-columns: 1fr; }
  .dialog-ingredients { grid-template-columns: 1fr; }
  .solar-term-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .constitution-test-gender { grid-template-columns: 1fr; }
  .constitution-test-gender-icon { width: 52px; height: 52px; }
  .constitution-profile-required-action { grid-column: 1; }
  .constitution-profile-required-action .primary-button { width: 100%; }
  .constitution-test-progress { padding: 16px 14px; }
  .constitution-progress-copy { align-items: flex-end; }
  .constitution-test-source-tags { display: grid; gap: 7px; }
  .constitution-question-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .constitution-question-card legend { grid-template-columns: 36px minmax(0,1fr); gap: 9px; }
  .constitution-question-card legend > span:first-child { width: 34px; height: 34px; }
  .constitution-score-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .constitution-score-options label:last-child { grid-column: 1 / -1; }
  .constitution-test-actions .primary-button, .constitution-test-actions .secondary-button { flex: 1; min-width: 0; padding-inline: 8px; }
  .constitution-result-hero { min-height: 0; padding: 24px 20px; }
  .constitution-result-seal { display: none; }
  .constitution-result-section { padding: 19px 15px; }
  .constitution-method-list p { grid-template-columns: 1fr; gap: 5px; }
  .constitution-primary-heading { grid-template-columns: 52px minmax(0,1fr); }
  .constitution-primary-heading > span { width: 52px; height: 52px; }
  .constitution-primary-heading > em { grid-column: 2; justify-self: start; }
  .constitution-ranking-disclosure { padding: 18px 15px; }
  .constitution-ranking-disclosure ol { grid-template-columns: 1fr; }
}

@media all {
  html { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  body, .main-content { background: var(--prescription-paper); }
  .main-content { overflow-x: hidden; padding: 0 16px calc(86px + env(safe-area-inset-bottom)); }
  .topbar { border-bottom: 1px solid var(--prescription-line); }
  .app-view { min-width: 0; }

  html[data-font-size] .app-shell :is(.season-band, .view-header, .detail-hero, .constitution-result-hero) h1 { font-size: calc(25px * var(--font-scale)) !important; }
  html[data-font-size] .app-shell .formula-focus > h2 { font-size: calc(25px * var(--font-scale)) !important; }
  html[data-font-size="xlarge"] .mobile-brand strong { display: none; }
  html[data-font-size="xlarge"] .view-header { align-items: stretch; flex-direction: column; gap: 17px; }
  html[data-font-size="xlarge"] .view-header :is(.primary-button, .secondary-button) { width: 100%; flex: 0 0 auto; }

  .season-band {
    min-height: 0;
    margin: 0 -16px 8px;
    padding: 22px 20px 24px;
    border-radius: 0;
  }
  .season-band h1 { max-width: 12em; line-height: 1.35; text-wrap: balance; }
  #solarTermSummary { display: -webkit-box; max-width: 34em; overflow: hidden; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .season-detail-button { min-height: 48px; margin-top: 14px; }

  .dashboard-grid { gap: 0; margin: 0 auto; }
  .body-log, .formula-focus {
    min-height: 0;
    padding: 26px 0 28px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
    box-shadow: none;
  }
  .formula-focus { order: -1; }
  .formula-watermark { display: none; }
  .formula-scenario { max-width: 100%; min-height: 0; line-height: 1.75; }
  .ingredient-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 10px; }
  .ingredient-row > span { min-width: 0; }
  .method-strip { gap: 0; }
  .method-strip div { min-width: 0; padding: 0 10px; }
  .method-strip dd { overflow-wrap: anywhere; line-height: 1.5; }

  .body-log .field-group { margin-top: 22px; }
  .chip-group { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 12px; border-top: 1px solid var(--prescription-line); }
  .choice-chip {
    min-height: 58px;
    justify-content: flex-start;
    padding: 10px 4px 10px 32px;
    position: relative;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
  }
  .choice-chip::before { content: ""; position: absolute; left: 4px; width: 18px; height: 18px; border: 1.5px solid #a8aeaa; border-radius: 3px; background: transparent; }
  .choice-chip.selected { color: var(--green-800); background: transparent; border-color: var(--prescription-line); }
  .choice-chip.selected::before { content: "\2713"; display: grid; place-items: center; color: #fff; background: var(--green-700); border-color: var(--green-700); font-size: 13px; font-weight: 900; }
  .caution-check { padding-top: 18px; }
  .log-footer { margin-top: 20px; }

  .library-section { margin: 0 auto; padding: 26px 0; border-bottom: 1px solid var(--prescription-line); }
  .formula-list-item { padding-inline: 2px; }
  .formula-list-item:hover, .formula-list-item.active { background: transparent; }
  .source-band { margin: 0; padding: 26px 0; border-bottom: 0; }

  .view-header {
    margin: 0 -16px 20px;
    padding: 22px 16px 20px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
  }
  .view-header > div:first-child > p:last-child { line-height: 1.7; }
  .catalog-toolbar { margin-bottom: 14px; }

  .catalog-card-grid, .constitution-grid { gap: 0; border-top: 1px solid var(--prescription-line); }
  .catalog-card {
    min-height: 0;
    padding: 18px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
  }
  .catalog-card:hover { background: transparent; border-color: var(--prescription-line); box-shadow: none; transform: none; }
  .catalog-mark { display: none; }
  .catalog-card > strong { margin-top: 10px; }
  .catalog-card > small { min-height: 0; line-height: 1.65; }
  .catalog-materials { margin-top: 9px; }
  .catalog-card-foot { margin-top: 12px; padding-top: 10px; }

  .solar-page-library { margin-top: 0; }
  .solar-term-grid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--prescription-line); }
  .solar-term-card {
    min-height: 78px;
    padding: 12px 4px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
  }
  .solar-term-card:hover { background: transparent; border-color: var(--prescription-line); }
  .solar-term-card.current { color: var(--green-900); background: var(--green-100); border-color: var(--prescription-line); box-shadow: inset 4px 0 var(--green-700); }
  .solar-term-card.current small { color: #64746b; }
  .solar-term-card.current em { color: var(--red); }

  .constitution-boundary { margin-inline: -16px; padding: 15px 16px; border-left: 0; border-right: 0; border-top: 1px solid var(--prescription-line); border-bottom: 1px solid var(--prescription-line); }
  .constitution-card {
    min-height: 0;
    padding: 18px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
  }
  .constitution-card:hover { background: transparent; border-color: var(--prescription-line); box-shadow: none; transform: none; }
  .constitution-card > strong { margin-top: 12px; }
  .constitution-card > p { margin-top: 7px; -webkit-line-clamp: 2; }
  .constitution-card-foot { margin-top: 12px; padding-top: 10px; }

  .herb-summary-strip { margin-inline: -16px; border-radius: 0; }
  .herb-table-wrap { background: transparent; border: 0; border-top: 1px solid var(--prescription-line); border-radius: 0; }
  .herb-row { padding-inline: 2px; background: transparent; }
  .herb-row:hover { background: transparent; box-shadow: none; }

  .record-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0; border-top: 1px solid var(--prescription-line); }
  .record-metrics > div { min-height: 96px; padding: 16px 10px; background: transparent; border: 0; border-right: 1px solid var(--prescription-line); border-bottom: 1px solid var(--prescription-line); border-radius: 0; }
  .record-metrics > div:nth-child(even) { border-right: 0; }
  .record-metrics strong { margin-top: 9px; }
  .records-dashboard { gap: 0; }
  .calendar-panel, .trend-panel { padding: 24px 0; background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); border-radius: 0; }

  .profile-main, .profile-side-stack, .detail-main, .detail-side, .constitution-result-layout > main, .constitution-result-layout > aside { gap: 0; }
  .profile-overview-panel, .profile-panel, .detail-section, .constitution-result-section, .constitution-test-progress, .constitution-question-card, .constitution-test-gender, .constitution-ranking-disclosure {
    padding: 22px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
    box-shadow: none;
  }
  .profile-overview-panel { border-top: 0; }
  .profile-health-note, .privacy-status { margin-inline: 0; }
  .detail-layout, .constitution-result-layout { gap: 0; margin-top: 0; }
  .detail-hero, .constitution-result-hero { margin-inline: -16px; border-radius: 0; }
  .solar-detail-hero--image { margin-inline: 0; }
  .record-detail-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--prescription-line);
  }
  .record-detail-summary div {
    min-height: 88px;
    padding: 15px 10px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--prescription-line);
    border-bottom: 1px solid var(--prescription-line);
    border-radius: 0;
  }
  .record-detail-summary div:nth-child(even) { border-right: 0; }
  .record-detail-summary strong { overflow-wrap: anywhere; line-height: 1.55; }
  .constitution-primary-result { border-top: 0; }
  .constitution-question-list { gap: 0; margin-top: 0; border-top: 1px solid var(--prescription-line); }
  .constitution-question-card legend { padding-top: 4px; }
  .constitution-test-steps, .constitution-question-heading { border-radius: 0; }
  .empty-state { background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); border-radius: 0; }

  .bottom-nav { grid-template-columns: repeat(5,1fr); height: calc(72px + env(safe-area-inset-bottom)); padding: 6px 10px env(safe-area-inset-bottom); background: rgba(248,241,220,.98); box-shadow: 0 -6px 22px rgba(37,54,44,.08); }
  .bottom-nav button { min-width: 0; min-height: 58px; gap: 3px; font-size: 11px; touch-action: manipulation; }
  .bottom-nav button span { white-space: nowrap; }
  .bottom-nav button svg { width: 21px; height: 21px; }

  .mobile-more-backdrop { position: fixed; inset: 0; z-index: 55; display: block; width: 100%; background: rgba(18,28,22,.34); border: 0; }
  .mobile-more-sheet { position: fixed; z-index: 56; inset: auto 0 0; display: block; max-height: min(72vh, 560px); padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; color: var(--ink); background: var(--prescription-paper); border-top: 1px solid var(--prescription-line); border-radius: 8px 8px 0 0; box-shadow: 0 -16px 38px rgba(18,28,22,.18); overscroll-behavior: contain; }
  .mobile-more-backdrop[hidden], .mobile-more-sheet[hidden] { display: none !important; }
  .mobile-more-sheet > header { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--prescription-line); }
  .mobile-more-sheet > header h2 { margin: 0; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
  .mobile-more-sheet nav { display: grid; }
  .mobile-more-sheet nav > button { min-height: 72px; display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; align-items: center; gap: 13px; padding: 10px 2px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); }
  .mobile-more-sheet nav > button > svg:first-child { width: 24px; color: var(--green-700); }
  .mobile-more-sheet nav > button > svg:last-child { width: 17px; color: #929c95; }
  .mobile-more-sheet nav strong, .mobile-more-sheet nav small { display: block; }
  .mobile-more-sheet nav small { margin-top: 3px; color: var(--muted); }
  .mobile-more-sheet nav > button.active strong { color: var(--green-800); }
}

/* Personal tea selection */
.recommendation-header { color: #fff; background: var(--green-900); border-color: var(--green-900); }
.recommendation-header .section-kicker { color: #e3c77f; }
.recommendation-header > div:first-child > p:last-child { color: #d9e5de; }
.recommendation-header .secondary-button { color: #fff; border-color: rgba(255,255,255,.45); }
.recommendation-header .secondary-button:hover { background: rgba(255,255,255,.1); }

.recommendation-profile-gate {
  max-width: 980px;
  min-height: 250px;
  margin: 32px auto;
  display: grid;
  grid-template-columns: 64px minmax(0,1fr) auto;
  align-items: center;
  gap: 22px;
  padding: 32px;
  background: var(--prescription-paper);
  border: 1px solid var(--prescription-line);
  border-top: 4px solid var(--gold);
  border-radius: 8px;
}
.recommendation-profile-gate > span { width: 64px; height: 64px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; }
.recommendation-profile-gate > span svg { width: 28px; height: 28px; }
.recommendation-profile-gate h2 { margin: 5px 0 8px; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
.recommendation-profile-gate p { margin: 0; color: var(--muted); line-height: 1.75; }
.recommendation-gate-actions { min-width: 220px; display: grid; gap: 10px; }
.recommendation-gate-actions button { width: 100%; min-height: 48px; }

.recommendation-workspace { max-width: 1380px; margin: 24px auto 44px; }
.recommendation-profile-strip { padding: 22px 24px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-top: 3px solid var(--green-700); border-radius: 8px; }
.recommendation-profile-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.recommendation-profile-heading h2 { margin: 3px 0 0; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
.recommendation-profile-heading .text-button { display: inline-flex; align-items: center; gap: 6px; }
.recommendation-profile-summary { margin: 18px 0 0; display: grid; grid-template-columns: .65fr .65fr 1.2fr 1.3fr 1.5fr; border-top: 1px solid var(--prescription-line); }
.recommendation-profile-summary > div { min-width: 0; padding: 14px 16px 0; border-left: 1px solid var(--prescription-line); }
.recommendation-profile-summary > div:first-child { padding-left: 0; border-left: 0; }
.recommendation-profile-summary dt { color: var(--muted); }
.recommendation-profile-summary dd { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--ink); font-weight: 800; }

.recommendation-form { margin-top: 20px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; overflow: hidden; }
.recommendation-intro-line { min-height: 104px; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 20px 24px; color: #fff; background: var(--green-900); }
.recommendation-intro-line > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--green-900); background: #e5c77f; border-radius: 50%; font-weight: 900; }
.recommendation-intro-line strong, .recommendation-intro-line p { display: block; margin: 0; }
.recommendation-intro-line p { margin-top: 4px; color: #d9e5de; line-height: 1.65; }
.recommendation-intro-line em { padding: 6px 10px; color: var(--green-900); background: #f0d996; border-radius: 4px; font-style: normal; font-weight: 900; white-space: nowrap; }

.recommendation-meta-fieldset, .recommendation-symptom-group { min-width: 0; margin: 0; padding: 22px 24px; border: 0; border-bottom: 1px solid var(--prescription-line); }
.recommendation-meta-fieldset > legend { padding: 0; color: var(--green-900); font-weight: 900; }
.recommendation-radio-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.recommendation-radio-row--three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.recommendation-radio-row label { min-width: 0; min-height: 70px; position: relative; cursor: pointer; }
.recommendation-radio-row input { position: absolute; opacity: 0; pointer-events: none; }
.recommendation-radio-row label > span { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 11px 14px; background: var(--prescription-paper-deep); border: 1px solid var(--prescription-line); border-radius: 6px; }
.recommendation-radio-row strong, .recommendation-radio-row small { display: block; }
.recommendation-radio-row small { margin-top: 3px; color: var(--muted); line-height: 1.45; }
.recommendation-radio-row label:has(input:checked) > span { color: #fff; background: var(--green-700); border-color: var(--green-700); box-shadow: 0 0 0 2px rgba(47,96,75,.16); }
.recommendation-radio-row label:has(input:checked) small { color: #e2ede6; }

.recommendation-symptom-group legend { width: 100%; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; padding: 0; }
.recommendation-symptom-group legend > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-weight: 900; }
.recommendation-symptom-group legend strong, .recommendation-symptom-group legend small { display: block; }
.recommendation-symptom-group legend strong { color: var(--green-900); }
.recommendation-symptom-group legend small { margin-top: 2px; color: var(--muted); font-weight: 400; }
.recommendation-check-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 18px; margin-top: 14px; border-top: 1px solid var(--prescription-line); }
.recommendation-check { min-width: 0; min-height: 58px; position: relative; display: block; cursor: pointer; }
.recommendation-check > input { position: absolute; opacity: 0; pointer-events: none; }
.recommendation-check > span { height: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--prescription-line); line-height: 1.55; }
.recommendation-check i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; color: transparent; border: 1.5px solid #9fa9a2; border-radius: 4px; font-style: normal; }
.recommendation-check i svg { width: 15px; height: 15px; }
.recommendation-check:has(input:checked) > span { color: var(--green-800); font-weight: 800; }
.recommendation-check:has(input:checked) i { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.recommendation-check:focus-within > span { outline: 3px solid rgba(184,131,38,.3); outline-offset: -2px; }

.recommendation-female-section, .recommendation-condition-section, .recommendation-danger-section { padding: 22px 24px; border-bottom: 1px solid var(--prescription-line); }
.recommendation-section-heading { display: flex; align-items: flex-start; gap: 12px; }
.recommendation-section-heading > span { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 50%; }
.recommendation-section-heading strong, .recommendation-section-heading small { display: block; }
.recommendation-section-heading small { margin-top: 3px; color: var(--muted); font-weight: 400; line-height: 1.55; }
.recommendation-danger-section { background: #fbf0eb; border-left: 4px solid var(--red); }
.recommendation-danger-section .recommendation-section-heading > span { color: var(--red); background: var(--red-soft); }
.recommendation-danger-section .recommendation-check:has(input:checked:not([data-exclusive-none])) > span { color: var(--red); }
.recommendation-danger-section .recommendation-check:has(input:checked:not([data-exclusive-none])) i { background: var(--red); border-color: var(--red); }
.recommendation-check-grid--safety, .recommendation-check-grid--danger { grid-template-columns: repeat(2,minmax(0,1fr)); }

.recommendation-form-error { min-height: 54px; display: flex; align-items: center; gap: 10px; margin: 18px 24px 0; padding: 11px 14px; color: #853f37; background: var(--red-soft); border-left: 3px solid var(--red); }
.recommendation-submit-row { min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 24px; }
.recommendation-submit-row p { max-width: 620px; display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); }
.recommendation-submit-row p svg { flex: 0 0 19px; color: var(--green-700); }
.recommendation-submit-row .primary-button { width: auto; min-width: 270px; min-height: 52px; }

.recommendation-result { margin-top: 24px; }
.recommendation-result-hero, .recommendation-result-alert { position: relative; min-height: 190px; display: flex; align-items: center; overflow: hidden; padding: 30px 150px 30px 32px; color: var(--prescription-ink); background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-top: 4px solid var(--green-700); border-radius: 8px; }
.recommendation-result-hero h2, .recommendation-result-alert h2 { margin: 5px 0 9px; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
.recommendation-result-hero p, .recommendation-result-alert p { max-width: 850px; margin: 0; line-height: 1.75; }
.recommendation-result-hero > span { position: absolute; right: 34px; width: 90px; height: 90px; display: grid; place-items: center; color: #fff; background: var(--red); border: 5px double #f3d59b; border-radius: 50%; font: 700 42px/1 "STKaiti", "KaiTi", serif; transform: rotate(-5deg); }
.recommendation-result-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(300px,.7fr); align-items: start; gap: 20px; margin-top: 20px; }
.recommendation-result-layout > main { display: grid; gap: 16px; }
.recommendation-result-layout > aside { position: sticky; top: 106px; }
.recommendation-result-section { padding: 24px; background: var(--prescription-paper); border: 1px solid var(--prescription-line); border-radius: 8px; }
.recommendation-result-section .section-title-row > em { padding: 6px 9px; color: #785411; background: #efdaaa; border-radius: 4px; font-style: normal; font-weight: 900; }
.recommendation-analysis-list { display: grid; margin-top: 15px; border-top: 1px solid var(--prescription-line); }
.recommendation-analysis-list > div { min-height: 84px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--prescription-line); }
.recommendation-analysis-list > div > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 50%; }
.recommendation-analysis-list p, .recommendation-analysis-list strong, .recommendation-analysis-list small { display: block; margin: 0; }
.recommendation-analysis-list small { margin-top: 3px; color: var(--muted); line-height: 1.7; }
.recommendation-guidance-list { margin: 14px 0 0; }
.recommendation-guidance-list > div { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 18px; padding: 15px 0; border-top: 1px solid var(--prescription-line); }
.recommendation-guidance-list dt { color: var(--green-800); font-weight: 900; }
.recommendation-guidance-list dd { margin: 0; line-height: 1.75; }
.recommendation-guidance-list .caution { margin-top: 6px; padding: 15px; color: #784039; background: var(--red-soft); border: 0; border-left: 3px solid var(--red); }
.recommendation-result-boundary { color: #53666a; background: var(--blue-soft); border-color: #bdced2; }
.recommendation-result-boundary h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.recommendation-result-boundary p { margin: 0; line-height: 1.75; }
.recommendation-result-summary h2 { margin: 4px 0 14px; color: var(--green-900); font-family: "Songti SC", "STSong", serif; }
.recommendation-result-summary dl { margin: 0 0 18px; }
.recommendation-result-summary dl > div { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 10px; padding: 11px 0; border-top: 1px solid var(--prescription-line); }
.recommendation-result-summary dt { color: var(--muted); }
.recommendation-result-summary dd { margin: 0; font-weight: 800; }
.recommendation-result-summary button { width: 100%; min-height: 48px; margin-top: 9px; }
.recommendation-result-alert { grid-template-columns: 70px minmax(0,1fr); gap: 20px; padding-right: 32px; border-top-color: var(--red); }
.recommendation-result-alert-icon { width: 68px; height: 68px; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 50%; }
.recommendation-result-alert-icon svg { width: 30px; height: 30px; }
.recommendation-result > .recommendation-result-section { margin-top: 16px; }
.recommendation-reason-list { display: grid; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--prescription-line); }
.recommendation-reason-list li { min-height: 62px; display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--prescription-line); }
.recommendation-reason-list svg { color: var(--red); }

@media (max-width: 980px) {
  .recommendation-profile-summary { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .recommendation-profile-summary > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .recommendation-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recommendation-result-layout { grid-template-columns: 1fr; }
  .recommendation-result-layout > aside { position: static; }
}

@media all {
  .recommendation-header { color: var(--ink); background: transparent; border-color: var(--prescription-line); }
  .recommendation-header .section-kicker { color: var(--red); }
  .recommendation-header > div:first-child > p:last-child { color: var(--muted); }
  .recommendation-header .secondary-button { color: var(--green-800); border-color: #9eb0a4; }
  .recommendation-profile-gate { grid-template-columns: 52px minmax(0,1fr); margin: 18px 0; padding: 22px 0; background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); border-radius: 0; }
  .recommendation-profile-gate > span { width: 52px; height: 52px; }
  .recommendation-gate-actions { grid-column: 1 / -1; min-width: 0; grid-template-columns: 1fr 1fr; }
  .recommendation-workspace { margin-top: 0; }
  .recommendation-profile-strip { padding: 20px 0; background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); border-radius: 0; }
  .recommendation-profile-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recommendation-profile-summary > div { min-height: 72px; padding: 12px 10px; border-bottom: 1px solid var(--prescription-line); }
  .recommendation-profile-summary > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .recommendation-profile-summary > div:nth-child(even) { border-left: 1px solid var(--prescription-line); }
  .recommendation-form { margin: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .recommendation-intro-line { margin-inline: -16px; grid-template-columns: 42px minmax(0,1fr); padding: 20px 16px; }
  .recommendation-intro-line > em { grid-column: 2; justify-self: start; }
  .recommendation-meta-fieldset, .recommendation-symptom-group, .recommendation-female-section, .recommendation-condition-section, .recommendation-danger-section { padding: 22px 0; background: transparent; border-left: 0; }
  .recommendation-radio-row, .recommendation-radio-row--three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .recommendation-check-grid, .recommendation-check-grid--safety, .recommendation-check-grid--danger { grid-template-columns: 1fr; gap: 0; }
  .recommendation-check { min-height: 62px; }
  .recommendation-danger-section { margin-inline: -16px; padding-inline: 16px; background: #fbf0eb; }
  .recommendation-form-error { margin-inline: 0; }
  .recommendation-submit-row { align-items: stretch; flex-direction: column; padding: 20px 0; }
  .recommendation-submit-row .primary-button { width: 100%; min-width: 0; }
  .recommendation-result { margin-top: 18px; }
  .recommendation-result-hero, .recommendation-result-alert { margin-inline: -16px; border-left: 0; border-right: 0; border-radius: 0; }
  .recommendation-result-layout { grid-template-columns: minmax(0,1fr); gap: 0; margin-top: 0; }
  .recommendation-result-layout > main,
  .recommendation-result-layout > aside { min-width: 0; }
  .recommendation-result-layout > main { gap: 0; }
  .recommendation-result-layout > aside { position: static; order: -1; }
  .recommendation-result-section { padding: 22px 0; background: transparent; border: 0; border-bottom: 1px solid var(--prescription-line); border-radius: 0; }
  .recommendation-result-boundary { margin-inline: -16px; padding-inline: 16px; background: var(--blue-soft); }
  .recommendation-guidance-list > div { grid-template-columns: 1fr; gap: 6px; }
  .recommendation-guidance-list .caution { padding-inline: 12px; }
  .recommendation-result-summary button { width: 100%; }
  .recommendation-result > .recommendation-result-section { margin-top: 0; }
}

@media all {
  .recommendation-gate-actions, .recommendation-radio-row, .recommendation-radio-row--three { grid-template-columns: 1fr; }
  .recommendation-profile-summary { grid-template-columns: 1fr; }
  .recommendation-profile-summary > div { padding-left: 0; border-left: 0 !important; }
  .recommendation-intro-line { grid-template-columns: 36px minmax(0,1fr); gap: 10px; }
  .recommendation-intro-line > span { width: 34px; height: 34px; }
  .recommendation-result-hero { min-height: 0; padding: 24px 100px 24px 18px; }
  .recommendation-result-hero > span { right: 18px; width: 68px; height: 68px; font-size: 31px; }
  .recommendation-result-alert { grid-template-columns: 1fr; padding: 24px 18px; }
  .recommendation-result-alert-icon { width: 54px; height: 54px; }
  .recommendation-analysis-list > div { grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
  .recommendation-analysis-list > div > span { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* H5 redesign: visual layer only. Existing views, IDs and application logic stay intact. */
:root {
  --paper: #fffef9;
  --surface: #f4fbf5;
  --line: #dce8df;
  --line-strong: #bfd8c6;
  --green-900: #0f5132;
  --green-800: #15633f;
  --green-700: #2d8255;
  --green-100: #dff3e6;
  --gold: #d87623;
  --gold-soft: #fff0dd;
  --shadow: 0 18px 46px rgba(25, 77, 51, .14);
  --font-scale: 1;
  --font-min-size: 12px;
}

html, body { min-width: 320px; background: #e5efe8; }

body {
  display: grid;
  place-items: start center;
  color: #173b2b;
}

.app-shell button, .app-shell a { touch-action: manipulation; }

.app-shell {
  width: min(100%, 390px);
  min-height: 100svh;
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.side-rail { display: none !important; }

.main-content {
  width: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 0 0 calc(82px + env(safe-area-inset-bottom));
  background: var(--paper);
}

.topbar {
  min-height: 84px;
  max-width: none;
  margin: 0;
  padding: 7px 16px 8px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 36px 36px;
  grid-template-rows: 38px 24px;
  gap: 3px 8px;
  align-items: center;
  color: #fff;
  background: var(--green-900);
}

.mobile-brand {
  grid-column: 1;
  grid-row: 1;
  width: 126px;
  height: 38px;
  display: block;
}

.mobile-brand .brand-art {
  width: 126px;
  height: 38px;
  aspect-ratio: auto;
  background-position: left center;
  filter: brightness(0) invert(1);
  mix-blend-mode: normal;
}

.date-block {
  min-width: 0;
  display: block;
  grid-column: 1;
  grid-row: 2;
  color: #c9e7d3;
}
.date-block strong, .date-line { font-size: 10px !important; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.date-block span { font-size: 10px !important; }
.date-divider { color: #7fb493; }
.lunar-date { color: #c9e7d3; }

.topbar-actions { display: contents; }
.weather-summary {
  min-height: 22px;
  display: flex;
  grid-column: 2 / 4;
  grid-row: 2;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  padding: 0;
  color: #dcefe1;
  border: 0;
  background: transparent;
}
.weather-summary .weather-icon, .weather-summary .weather-condition { display: none; }
.weather-summary .weather-value { min-width: 0; min-height: 0; gap: 3px; padding: 0; color: #dcefe1; border: 0; }
.weather-summary .weather-value svg { width: 12px; height: 12px; color: #9bcaae; }
.weather-summary .weather-value strong { font-size: 10px !important; }
.weather-summary .weather-value span { font-size: 10px !important; }

.font-size-control { display: block !important; grid-column: 2; grid-row: 1; }
.font-size-button {
  width: 36px;
  height: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
}
.font-size-button > span, .font-size-button > svg:last-child { display: none; }
.font-size-button > .font-size-icon { display: block; width: 17px; height: 17px; }
.font-size-menu { top: 52px; right: 8px; }

.member-switcher { display: block; grid-column: 3; grid-row: 1; }
.member-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.12);
}
.member-button .avatar { width: 22px; height: 22px; color: transparent; background: transparent; }
.member-button .avatar::after { content: ""; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; }
.member-button > span:nth-child(2), .member-button > svg { display: none; }

.app-view {
  max-width: none;
  margin: 0;
  padding: 0;
}

.season-band {
  min-height: 220px;
  margin: 0;
  padding: 22px 16px;
  display: block;
  color: var(--green-900);
  border: 0;
  border-radius: 0;
  background: #fffaf0 url("assets/lingnan-arcade-tea.png") center / cover no-repeat;
}

.season-band > div { max-width: 214px; }
.season-band::after { display: none; }
.eyebrow { margin-bottom: 8px; color: var(--green-700); font-size: 11px; }
.season-band h1 {
  margin: 0;
  color: var(--green-900);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.18;
}
#solarTermSummary { margin-top: 9px; color: #416051; font-size: 12px; line-height: 1.6; }
.season-detail-button {
  min-height: 34px;
  margin-top: 13px;
  padding: 6px 9px;
  color: #315442;
  border-color: rgba(38,101,65,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 11px;
}
.season-stats { display: none; }

.dashboard-grid {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.body-log, .formula-focus {
  min-height: 0;
  margin: 0;
  padding: 18px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.body-log { background: #e4f4e8; }
.formula-focus { color: #fff; background: #d87623; }
.formula-focus::before { display: none; }
.formula-focus > h2 { margin-top: 7px; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 24px; }
.formula-focus .formula-label, .formula-focus .section-kicker { color: #fff2d9; }
.formula-focus .formula-scenario { color: rgba(255,255,255,.92); }
.formula-focus .evidence-badge, .formula-focus .ingredient-row > span { border-color: rgba(255,255,255,.28); background: rgba(126,66,18,.18); }
.formula-focus .method-strip { border-color: rgba(255,255,255,.28); }
.formula-focus .method-strip div { border-color: rgba(255,255,255,.25); }
.formula-focus .method-strip dt, .formula-focus .method-strip dd { color: #fff; }
.formula-focus .caution-note { color: #6e461d; border-color: rgba(255,244,220,.7); background: #fff4df; }
.formula-focus .secondary-button { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.formula-focus .icon-button { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.formula-watermark { color: rgba(255,255,255,.16); }

.section-heading { align-items: flex-start; }
.section-kicker { color: var(--green-700); font-size: 11px; }
.section-heading h2 { font-size: 18px; }
.choice-chip { border-color: #b9d8c4; background: rgba(255,255,255,.82); }
.choice-chip.active { color: #fff; border-color: var(--green-800); background: var(--green-800); }
.mini-chip-group button { border-color: #cadfd0; background: #fff; }
.primary-button { width: auto; color: #fff; border-color: var(--green-900); border-radius: 8px; background: var(--green-900); }
.secondary-button { color: var(--green-900); border-color: #bcd3c4; border-radius: 8px; background: #fff; }
.log-footer { padding-top: 12px; border-top-color: rgba(28,92,57,.14); }
.log-footer p { font-size: 11px; }

.library-section {
  margin: 0;
  padding: 18px 16px;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.formula-list { gap: 0; margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.formula-list-item { min-height: 72px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; }
.formula-list-item:last-child { border-bottom: 0; }
.formula-list-item.active { color: var(--green-900); background: #f1f9f3; }
.formula-list-item .tag, .formula-list-item .list-meta { display: none; }
.formula-index { color: var(--green-800); background: #e4f4e8; }

.source-band {
  min-height: 0;
  margin: 0;
  padding: 17px 16px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
  color: #754525;
  border: 0;
  background: #fff0dd;
}
.source-symbol { width: 36px; height: 36px; color: #fff; background: #d87623; border-radius: 50%; }
.source-copy h2 { font-size: 16px; }
.source-copy p { font-size: 11px; }
.source-tags { grid-column: 1 / -1; }

/* Keep reading areas in the same prescription-paper language. */
.constitution-test-header,
.recommendation-header {
  color: var(--prescription-ink);
  background: var(--prescription-paper-deep);
  border-color: var(--prescription-line);
}
.constitution-test-header .section-kicker,
.recommendation-header .section-kicker { color: #8b651a; }
.constitution-test-header > div:first-child > p:last-child,
.recommendation-header > div:first-child > p:last-child { color: #526055; }
.constitution-test-header .secondary-button,
.recommendation-header .secondary-button {
  color: var(--green-800);
  background: var(--prescription-paper);
  border-color: var(--prescription-line);
}
.constitution-question-heading,
.recommendation-intro-line {
  color: var(--prescription-ink);
  background: var(--prescription-paper-deep);
  border-color: var(--prescription-line);
}
.constitution-question-heading h2 { color: var(--prescription-ink); }
.constitution-question-heading > span {
  color: #76520e;
  background: #fff0c9;
  border-color: #c7a159;
}
.recommendation-intro-line p { color: #526055; }
.solar-term-card.current {
  color: var(--prescription-ink);
  background: var(--prescription-paper-deep);
  border-color: var(--prescription-line);
  box-shadow: inset 4px 0 var(--green-700);
}
.solar-term-card.current small { color: #607067; }

.view-header {
  min-height: 0;
  margin: 0;
  padding: 22px 16px 16px;
  align-items: flex-start;
  color: var(--green-900);
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #f0f9f2;
}
.view-header h1 { margin-top: 5px; max-width: none; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 24px; font-weight: 800; line-height: 1.3; }
.view-header > div:first-child > p:last-child { margin-top: 7px; color: #60756a; font-size: 12px; line-height: 1.6; }
.view-header .primary-button, .view-header .secondary-button { width: auto; min-height: 36px; padding: 7px 10px; font-size: 11px; }

.h5-visual-strip {
  height: 94px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.h5-visual-strip--herbs { background-image: url("assets/lingnan-herb-courtyard.png"); }
.h5-visual-strip--solar { background-image: url("assets/lingnan-arcade-tea.png"); }
.h5-visual-strip--formula { background-image: url("assets/lingnan-prescription-paper.png"); background-position: center 54%; }
.h5-visual-strip--records { background-image: url("assets/lingnan-arcade-tea.png"); background-position: center 60%; }
.h5-visual-strip--herb-library {
  background-image: url("/generated/lingnan-herb-banner-4k.webp");
  background-position: center 56%;
}
.h5-visual-strip--constitution {
  background-image: url("/generated/lingnan-constitution-banner-4k.webp");
  background-position: center 10%;
}

.recommendation-profile-gate, .recommendation-profile-strip, .recommendation-form,
.recommendation-result, .solar-library, .catalog-toolbar, .catalog-layout,
.constitution-toolbar, .constitution-boundary, .constitution-grid,
.record-metrics, .records-dashboard, .record-timeline, .profile-layout,
.herb-summary-strip, .herb-table-wrap, .catalog-pagination {
  width: auto;
  max-width: none;
  margin: 0;
}

.recommendation-profile-gate, .recommendation-profile-strip,
.recommendation-form, .solar-library, .catalog-toolbar, .constitution-toolbar,
.constitution-boundary, .record-metrics, .record-timeline, .profile-layout,
.herb-summary-strip, .herb-table-wrap { padding: 18px 16px; }

.recommendation-profile-gate, .recommendation-profile-strip, .recommendation-form,
.recommendation-meta-fieldset, .recommendation-symptom-group, .recommendation-result-section {
  border-radius: 0;
  box-shadow: none;
}

.catalog-toolbar, .constitution-toolbar, .herb-toolbar { align-items: stretch; flex-direction: column; gap: 10px; }
.search-field { width: 100%; }
.segmented-control { width: 100%; overflow-x: auto; }
.catalog-layout, .records-dashboard, .profile-layout, .constitution-result-layout { grid-template-columns: 1fr; gap: 0; }
.catalog-sidebar { display: none; }
.catalog-card-grid, .constitution-grid { grid-template-columns: 1fr; }
.solar-term-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.solar-term-card { min-height: 88px; padding: 11px; }
.constitution-card { min-height: 0; border-radius: 8px; }

.herb-table-head { display: none; }
.herb-row { grid-template-columns: minmax(0,1fr) auto 16px; grid-template-rows: auto auto; gap: 6px 10px; padding: 13px 14px; }
.herb-row > span:nth-child(2), .herb-row > span:nth-child(3), .herb-row > span:nth-child(4) { display: none; }
.herb-row .safety { grid-column: 2; grid-row: 1 / 3; }
.herb-row > svg { grid-column: 3; grid-row: 1 / 3; }

.record-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; background: #f5fbf6; }
.record-metrics > div { min-height: 98px; padding: 11px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.record-metrics > div > strong { font-size: 18px; }
.calendar-panel, .trend-panel, .record-timeline, .profile-overview-panel, .profile-panel { border-radius: 0; box-shadow: none; }
.calendar-panel, .trend-panel { padding: 18px 16px; }
.record-timeline { border-top: 1px solid var(--line); }

.profile-layout { padding: 0; }
.profile-main, .profile-side-stack { gap: 0; }
.profile-overview-panel, .profile-panel { padding: 18px 16px; border: 0; border-bottom: 1px solid var(--line); }
.profile-overview-panel { background: #edf8f0; }
.profile-side-stack { display: contents; }

.bottom-nav {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 0;
  width: min(100%, 390px);
  height: calc(74px + env(safe-area-inset-bottom));
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  border: 0;
  border-top: 1px solid var(--line);
  background: rgba(255,254,249,.98);
}
.bottom-nav button { min-width: 0; color: #7a8d82; font-size: 10px !important; }
.bottom-nav button span { font-size: 10px !important; line-height: 1.2; }
.bottom-nav button.active { color: var(--green-800); }

.mobile-more-sheet {
  width: min(100%, 390px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 12px 12px 0 0;
  background: #fffef9;
}
.mobile-more-sheet nav button { min-height: 62px; }

dialog { border-radius: 8px; }
.formula-dialog, .record-dialog, .profile-dialog, .delete-record-dialog {
  width: min(calc(100vw - 24px), 366px);
  max-height: calc(100svh - 24px);
  border-color: var(--line);
  border-radius: 8px;
}

@media (min-width: 600px) {
  body { padding: 20px; }
  .app-shell { min-height: 844px; border-radius: 10px; }
  .bottom-nav { bottom: 20px; border-radius: 0 0 10px 10px; }
}

/* Home hierarchy refinement: bring the daily check-in forward and remove the
   inverted image-mark that rendered as a white block on mobile. */
.mobile-brand {
  width: auto;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.mobile-brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  color: #0f5132;
  border-radius: 50%;
  background: #f4d46c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.mobile-brand-mark svg { width: 17px; height: 17px; stroke-width: 2.25; }
.mobile-brand-copy { display: grid; gap: 1px; line-height: 1; }
.mobile-brand-copy strong { color: #fff; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; font-weight: 800; }
.mobile-brand-copy small { color: #b8dbbf; font-size: 9px; font-weight: 600; }
.mobile-brand .brand-art { display: none; }
.font-size-control, .member-switcher { width: 36px; min-width: 0; }

.dashboard-grid { gap: 0; }
.body-log { order: -1; background: #edf8ee; }
.formula-focus {
  order: 0;
  position: relative;
  overflow: hidden;
  color: #173b2b;
  background: #fff4e4;
  border-top: 1px solid #f2d3ad;
  border-bottom: 1px solid #f2d3ad;
}

.formula-focus::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -28px;
  width: 180px;
  height: 180px;
  border: 18px solid rgba(216, 118, 35, .11);
  border-radius: 50%;
  box-shadow: -32px 34px 0 -14px rgba(45, 130, 85, .11);
}

.formula-focus > * { position: relative; z-index: 1; }
.formula-focus > h2 { color: #7a3f18; font-size: 25px; }
.formula-focus .formula-label, .formula-focus .section-kicker { color: #b56220; }
.formula-focus .formula-scenario { max-width: 270px; color: #704d32; }
.formula-focus .evidence-badge, .formula-focus .ingredient-row > span { color: #704d32; border-color: #efc99f; background: rgba(255, 255, 255, .78); }
.formula-focus .method-strip { border-color: #efc99f; }
.formula-focus .method-strip div { border-color: #efc99f; }
.formula-focus .method-strip dt { color: #a4561d; }
.formula-focus .method-strip dd { color: #5d3d28; }
.formula-focus .caution-note { color: #704d32; border-color: #e9c89d; background: #fffaf2; }
.formula-focus .secondary-button { color: #8a481c; border-color: #dca56f; background: rgba(255, 255, 255, .72); }
.formula-focus .icon-button { color: #8a481c; border-color: #dca56f; background: rgba(255, 255, 255, .72); }
.formula-watermark { color: rgba(174, 89, 30, .11); }

/* Distinct visual cues for informational pages. They reference the arcade
   arches and a handwritten ledger without repeating the home photograph. */
.h5-visual-strip--solar,
.h5-visual-strip--records {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-image: none;
}

.h5-visual-strip--solar {
  display: block;
  padding: 0;
  color: transparent;
  background-color: #dfe7d8;
  background-image: url("/generated/lingnan-solar-terms-banner.webp");
  background-position: center;
  background-size: cover;
  border-top: 1px solid var(--prescription-line);
  border-bottom: 1px solid var(--prescription-line);
}

.h5-visual-strip--solar::before,
.h5-visual-strip--solar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  width: 108px;
  height: 92px;
  border: 12px solid #c5dfc7;
  border-bottom: 0;
  border-radius: 72px 72px 0 0;
}

.h5-visual-strip--solar::before { right: 24px; }
.h5-visual-strip--solar::after { right: 102px; opacity: .7; }
.h5-visual-strip--solar svg { position: relative; z-index: 1; width: 32px; height: 32px; stroke-width: 1.7; }
.h5-visual-strip--solar svg + svg { width: 28px; height: 28px; color: #56886d; }
.h5-visual-strip--solar::before,
.h5-visual-strip--solar::after,
.h5-visual-strip--solar svg { display: none; }

.h5-visual-strip--records {
  justify-content: flex-end;
  gap: 16px;
  padding-right: 44px;
  color: #b35e22;
  background-color: #fff2df;
  border-top: 1px solid #f0d3af;
  border-bottom: 1px solid #f0d3af;
}

.h5-visual-strip--records::before {
  content: "";
  position: absolute;
  left: 38px;
  top: 19px;
  width: 112px;
  height: 54px;
  border-top: 2px solid #efc691;
  border-bottom: 2px solid #efc691;
  box-shadow: 0 17px 0 -15px #efc691, 0 34px 0 -32px #efc691;
}

.h5-visual-strip--records svg { position: relative; z-index: 1; width: 31px; height: 31px; stroke-width: 1.7; }
.h5-visual-strip--records svg + svg { width: 22px; height: 22px; color: #d07a35; }

/* The abstract record divider reads as an empty placeholder in the narrow H5 shell. */
.h5-visual-strip--records { display: none; }

/* Keep the brand and both top actions legible in the narrowest H5 viewport. */
.mobile-brand-copy { align-content: center; }
.mobile-brand-copy strong { display: block !important; font-size: 16px !important; line-height: 1.08; }
.mobile-brand-copy small { display: block !important; font-size: 10px !important; line-height: 1.08; }
.font-size-button {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  grid-template-columns: 1fr;
}
.font-size-button > .font-size-icon { display: block !important; }
.font-size-button > .font-size-short-label { display: none !important; }
#weatherTemperature::before, #weatherHumidity::before { color: #a8d2b5; font-size: 9px; font-weight: 700; }
#weatherTemperature::before { content: "温 "; }
#weatherHumidity::before { content: "湿 "; }

/* Plain language is clearer than symbolic controls for older readers. */
.topbar { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 6px; }
.font-size-control, .member-switcher { width: auto; min-width: 0; }
.font-size-button {
  width: auto !important;
  min-width: 54px !important;
  max-width: none !important;
  padding: 0 7px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
}
.font-size-button > .font-size-icon { display: none !important; }
.font-size-button > .font-size-short-label {
  display: block !important;
  color: #fff;
  font-size: 10px !important;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.member-button {
  width: auto;
  min-width: 48px;
  padding: 0 4px;
  color: #fff;
  background: transparent;
}
.member-button .avatar, .member-button > svg { display: none !important; }
.member-button > span:nth-child(2) { display: block !important; }
.member-button > span:nth-child(2) small { display: none !important; }
.member-button > span:nth-child(2) strong {
  display: block !important;
  color: #fff;
  font-size: 11px !important;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Keep date, lunar date, and weather on one quiet baseline at the bottom. */
.topbar { grid-template-rows: 44px 24px; }
.date-block {
  grid-column: 1 / 3;
  grid-row: 2;
  align-self: end;
}
.date-block strong, .date-line, .date-block span {
  font-size: 10px !important;
  line-height: 1;
}
.date-line {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
  white-space: nowrap;
}
.weather-summary {
  width: auto;
  min-width: 66px;
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-content: flex-end;
  gap: 2px;
}
.weather-summary .weather-value strong { font-size: 9px !important; }
#weatherTemperature::before, #weatherHumidity::before { font-size: 8px; }

/* The two text controls are a compact group pinned to the upper-right. */
.topbar { position: relative; }
.font-size-control { position: absolute; top: 8px; right: 90px; }
.member-switcher { position: absolute; top: 8px; right: 16px; }

/* Large text must reflow the H5 instead of clipping its content. */
html[data-font-size="xlarge"] {
  --font-scale: 1.75;
  --font-min-size: 26px;
}
html[data-font-size="xlarge"] .app-shell { overflow-x: hidden; overflow-y: visible; }
html[data-font-size="xlarge"] .main-content { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
html[data-font-size="xlarge"] .topbar { min-height: 104px; grid-template-rows: 56px auto; }
html[data-font-size="xlarge"] .date-line {
  flex-wrap: wrap;
  row-gap: 4px;
  overflow: visible;
  white-space: normal;
}
html[data-font-size="xlarge"] .bottom-nav {
  height: calc(92px + env(safe-area-inset-bottom));
  padding-top: 9px;
  padding-bottom: calc(9px + env(safe-area-inset-bottom));
}
html[data-font-size="xlarge"] .bottom-nav button,
html[data-font-size="xlarge"] .bottom-nav button span {
  font-size: 12px !important;
  line-height: 1.25;
  white-space: normal;
}
html[data-font-size="xlarge"] :is(.season-band, .view-header, .formula-focus, .catalog-card, .constitution-card) {
  height: auto;
  min-height: 0;
}
html[data-font-size="xlarge"] :is(#solarTermSummary, .formula-list-copy small, .catalog-materials, .herb-identity small) {
  display: block;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  -webkit-line-clamp: unset;
}
html[data-font-size="xlarge"] .constitution-card { overflow: visible; }
html[data-font-size="xlarge"] .constitution-card > p {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
html[data-font-size="xlarge"] .record-metrics,
html[data-font-size="xlarge"] .herb-summary-strip {
  grid-template-columns: 1fr;
}
html[data-font-size="xlarge"] .record-metrics > div,
html[data-font-size="xlarge"] .herb-summary-strip > div {
  min-height: 0;
  padding-block: 16px;
  border-left: 0;
  border-bottom: 1px solid var(--line);
}
html[data-font-size="xlarge"] .record-metrics > div:last-child,
html[data-font-size="xlarge"] .herb-summary-strip > div:last-child { border-bottom: 0; }
html[data-font-size="xlarge"] .method-strip {
  grid-template-columns: 1fr;
  gap: 0;
}
html[data-font-size="xlarge"] .method-strip div {
  min-height: 0;
  padding: 12px 0;
  border-right: 0;
  border-bottom: 1px solid currentColor;
}
html[data-font-size="xlarge"] .method-strip div:last-child { border-bottom: 0; }
html[data-font-size="xlarge"] .formula-list-item {
  min-height: 108px;
  align-items: flex-start;
  padding-block: 14px;
}
html[data-font-size="xlarge"] .formula-list-copy small { line-height: 1.5; }

/* Override the legacy grid tracks: this pair is always anchored to the right edge. */
.topbar .font-size-control {
  position: absolute !important;
  top: 8px !important;
  right: 90px !important;
  left: auto !important;
  z-index: 3;
}
.topbar .member-switcher {
  position: absolute !important;
  top: 8px !important;
  right: 16px !important;
  left: auto !important;
  z-index: 3;
}

/* Explicit content sizing avoids the compact H5 rules overriding elderly mode. */
html[data-font-size="xlarge"] .app-view :is(p, button, input, select, textarea, span, small, strong, em, b, dt, dd, label, legend, time) {
  font-size: 28px !important;
  line-height: 1.55;
}
html[data-font-size="xlarge"] .app-view :is(.choice-chip, .mini-chip-group button, .segmented-control button) {
  min-height: 88px;
  white-space: normal;
}
html[data-font-size="xlarge"] .app-view .ingredient-row > span {
  min-height: 0;
  padding-block: 14px;
}
html[data-font-size="xlarge"] .app-view .field-label,
html[data-font-size="xlarge"] .app-view .formula-topline,
html[data-font-size="xlarge"] .app-view .section-heading,
html[data-font-size="xlarge"] .app-view .section-title-row {
  align-items: flex-start;
}

/* Home: turn the photo hero into a separate visual block when copy is enlarged. */
html[data-font-size="xlarge"] #homeView .season-band {
  min-height: 0;
  padding: 20px 16px 0;
  background: #fffaf0;
}
html[data-font-size="xlarge"] #homeView .season-band > div { max-width: none; }
html[data-font-size="xlarge"] #homeView .season-band::after {
  content: "";
  position: relative;
  right: auto;
  bottom: auto;
  display: block;
  width: calc(100% + 32px);
  height: 184px;
  margin: 20px -16px 0;
  color: transparent;
  background: url("assets/lingnan-arcade-tea.png") center / cover no-repeat;
}

/* Home formula rows: replace the desktop grid with a phone-width reading row. */
html[data-font-size="xlarge"] #homeView .formula-list { overflow: visible; }
html[data-font-size="xlarge"] #homeView .formula-list-item {
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: start;
  gap: 10px;
  min-height: 128px;
  padding: 16px 14px;
}
html[data-font-size="xlarge"] #homeView .formula-index { align-self: start; }
html[data-font-size="xlarge"] #homeView .formula-list-copy { min-width: 0; }
html[data-font-size="xlarge"] #homeView .formula-list-copy small { overflow: visible; }
html[data-font-size="xlarge"] #homeView .ingredient-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
html[data-font-size="xlarge"] #homeView .ingredient-row > span {
  min-width: 0;
  padding-block: 12px;
  border-bottom: 1px solid currentColor;
}
html[data-font-size="xlarge"] #homeView .ingredient-row > span:last-child { border-bottom: 0; }

/* Formula filters must stay visible for readers who cannot rely on a horizontal swipe. */
html[data-font-size="xlarge"] #formulaView .segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
}
html[data-font-size="xlarge"] #formulaView .segmented-control button {
  min-width: 0;
  min-height: 72px;
  font-size: 22px !important;
}
html[data-font-size="xlarge"] #formulaView .search-field input {
  font-size: 16px !important;
}

/* A seven-day calendar must not widen the 320px record view. */
html[data-font-size="xlarge"] #recordView .records-dashboard {
  grid-template-columns: minmax(0, 1fr);
}
html[data-font-size="xlarge"] #recordView :is(.calendar-panel, .trend-panel) {
  min-width: 0;
}

html[data-font-size="xlarge"] #recordView .calendar-grid > * {
  min-width: 0;
}

html[data-font-size="xlarge"] #recordView .calendar-week span {
  font-size: 18px !important;
}

html[data-font-size="xlarge"] #recordView .calendar-days button {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 0;
  aspect-ratio: auto;
  font-size: 20px !important;
  line-height: 1 !important;
}

html[data-font-size="xlarge"] #recordView .bar-chart :is(b, small) {
  max-width: 48px;
  font-size: 16px !important;
  line-height: 1.2 !important;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Herb filters carry the same information density as formula filters. */
html[data-font-size="xlarge"] #herbView .segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
}
html[data-font-size="xlarge"] #herbView .segmented-control button {
  min-width: 0;
  min-height: 72px;
  font-size: 22px !important;
}
html[data-font-size="xlarge"] #herbView .search-field input {
  font-size: 16px !important;
}
html[data-font-size="xlarge"] #constitutionView .search-field input {
  font-size: 16px !important;
}
html[data-font-size="xlarge"] #detailView .detail-hero {
  width: 100%;
  margin-inline: 0;
}

html[data-font-size="xlarge"] #detailView .detail-watermark {
  display: none;
}

/* Profile editing remains a full-width, vertically scrolling task on H5. */
@media all {
  html[data-font-size="xlarge"] .profile-dialog {
    width: min(366px, calc(100vw - 24px)) !important;
    max-width: 366px !important;
    overflow-x: hidden;
  }

  html[data-font-size="xlarge"] .profile-dialog .profile-form {
    min-width: 0;
    gap: 18px;
    padding: 18px 16px 0;
  }

  html[data-font-size="xlarge"] .profile-dialog .profile-form > * {
    min-width: 0;
  }

  html[data-font-size="xlarge"] .profile-dialog .dialog-footer {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 8px;
    margin: 0 -16px;
    padding: 14px 16px;
  }

  html[data-font-size="xlarge"] .profile-dialog .dialog-footer button {
    width: 100% !important;
    min-width: 0;
    min-height: 68px;
    padding-inline: 8px;
    font-size: 22px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
}

/* Final H5 header placement: one control per row on the right, with reserved
   room so the date never runs beneath the account name. */
.topbar .font-size-control {
  top: 8px !important;
  right: 16px !important;
}

.topbar .member-switcher {
  top: auto !important;
  right: 16px !important;
  bottom: 8px !important;
}

.topbar .font-size-button {
  min-width: 64px !important;
  padding-inline: 9px;
}

.topbar .member-button {
  min-width: 0;
  min-height: 22px;
  height: 22px;
  padding: 0;
  justify-content: flex-end;
}

.topbar .date-block {
  grid-column: 1 / -1;
  padding-right: 72px;
}

.topbar .weather-summary {
  display: none !important;
}

html:not([data-font-size="xlarge"]) .formula-focus .ingredient-row > span {
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
}

/* A topbar wordmark should contain only type that remains legible at phone size. */
.brand-art {
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQUFBAYFBQUHBgYHCQ8KCQgICRMNDgsPFhMXFxYTFRUYGyMeGBohGhUVHikfISQlJygnGB0rLismLiMmJyb/2wBDAQYHBwkICRIKChImGRUZJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJib/wAARCABcAOwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD6XooorzzcKKKKACis/X7S+v8AR7m003Un0y8kTEV0iBzG2fQ8Edq+Zdb8efFPwP4gm0vVtVaeWIhsTwq8cydmU4BwfbB7daTZUY82x9VUVw3wl8djx1oMt1Nara31pIIriOMkoSRkMuecHng+ldzTJatoFFFFABRRRQAUV4vq3xrl8O+Kr/RPEPhto47WYp5ttPuYp1VgpAzkEHqOteuaTqFrq2l2up2LmS2u4lliYjBKkZHFA3FrcuUVw3xovNU0z4f32q6RqUun3Nk8cm+IDLqWClTkdPmz+Fed/BT4peKfEHiaHw9rMUeoQyxu32tUCSRbVzlscEHGOmckUrjUW1c99ooopkhRRRQAVj6r4l0HSb+Kw1PVbezuZV3okzbcrkjOeg6HrWxXzH8cNXi1TxzOkRDxWMa224d2BJb8iSPwpSdkROXKrn0zFJHLGssTrJG4yrKcgj1Bp9eQ/Cu80/wX4Re48R+IIojekTxWTSb2hTHBCDJBbOTx6e9db4Z+I3hfxHqX9m2FzKt02fLSaLb5mOTj8PXFCYKSe5a8beMtO8HxWc2pW9zLHdOyBoFU7SMHnJHr+lXfDPibRvE1o1zpF4JwmPMjI2vGT0yD/wDqrxr9ojXI7jWbHRISGFkhlmI7O+MD8FAP/Aqm+F/iHwd4K8Py3l5qTXOqX2Glgt42cxIPurzgZ5yefbtSvrYjn963Q95orxHUvjn+9A0rQd0WfvXM2CfwUcfma9H+H/iyLxfozX6WclpJFJ5UsbHI3YByp7jmmmmWppuyOnoooplhXL6p4/8ABulX8mn6h4htILqJtrxFiSp9DgcV1FcZ8RPh9onjSxcXEKW2pquIL6NfnU9g395fY/higatfU6HR9d0XWkL6TqtpfBRlhBMrlfqByPxrSr4bvbPxB4F8UPA8klhqllJlZIm4I6hge6kfpX0j41n+KU+j6VrXg+5i23FnE11p/kRmSORlyWUuORzjHUY79kmXKFup6nXEfFTwJpvjbRUiurlbC7tTvgvMA7B3VuRlT+h5+vm9noHx217H27Xm0mI/xNMsTflEM/yrSi+CF7fsJfEfja/vn7qqk/8Ajzsf5UXEkk9zW8F3PgD4W+H306fxVZXF3NJ5tzJG3mMz4xgKm4gDtn3qprXx98L2mV03T77UXHQkLCh/E5P6Vf0/4F+BbYhp47++bv59zgH/AL5Ardt/hX8P4CCnhm2YjvI7v/NjRqF47s43wn8d9N1fWrbTNT0aTThdSCOOdJhKqsTgBhgYGe/6V7RXNWXgXwdZXUd3a+G9PjniYNHIIQSpHQjPeulpomVugVHNLFDGZJpEjQdWdgAPxqtrGnW2r6Zcabd+Z5Fwm1jG5Rh6EEdCDg14Te/AXWrjVXB8VpLpxOVedXaZR6bc4P1yKAST3Zy/7R7afN44t77T7y2ukns1E3kSq+11Zhzg8fLtr0fw98YPA+h+ENGsnubq4ntrKGKSK3tjlXCAMMtgdc964X4pfCCHwr4cs9Q0ea+1OTz/ACrrKg4DD5SFUcDPHU9RXVtrPgL4ealpHh7WPCVv9oOnwy3N+sKTNHKRhtwPPUZOD36VPU10aS3Oc+KnxgsvFHha50LTNIu4I7lk3XE7KMBWDY2jPXHrXE/DfU/GWgyXWo+FdDlvXuY/JNytk8xQA5IXHHUDOc9K9x+KHhq9+IUfhqy8NPbroTF7me+THlqvAXaByTjdx7845r0vQNIstB0a00fTo/LtbSMRoO59SfcnJPuaLMXMkrJHzZH4n+OKagl6bLWm+YZhfTT5be20LivpbRri6u9Js7q+tTaXU0KPNbnrG5AJX8DV2iqIlK/QKKKiuZDDbySrE8zIpYRx43OQOgz3NBJzPxJ8VReFPDkt0rKb6cGO0jPd/wC99F6/kO9eK/D3wnZXjf8ACR+M7mO10d3Kxm4kKG6kOc89cDnnuePWvR4vAmo+KfEP/CQ+NmVYkOLXSYn3LGnYOw6+px1PftXc69oOm61oU2i3dugtJECIqqB5RH3SvpjtU2vuZOLk7s4TSvhR4DupTqFrcz6jbOcqiXYaIe2UAP61ua1H4V8AaLLqlnpFnBcgeXbqsY8yWQjhQx+bHrz0zXKfCjwf4n8MeL9QF6NmliEoHVwUnORtIHr1+nI716hfaXZ3VxHfPbQyXsCMtvLMu8RE9wO3OORz70LYIrTRWZ5P8PvAeoXt5N4w8WWxuLuRmngsZcAyOeQXzwB6A/j70o9b+GJ8Svb634OfSb7zPLkLqTEjZ/iVSAPqFq94Q+Kus3XihNB12ws1DzNCZomMZjIzknJII49qsfEtPhvrl/BPfeJIbO/jIWSa0Xzt6Ds20EZHr296WltCdLaHo9n4d8O2yA2uiadGDyGS2Tn8cVqRxxxIEjRUUdFUYArzPxp4h8R6LpdrrvhS4sdS8OrEqECPeYsDGSwOSOPbB4Nbnwz8ap4z024le1Ftd2jKsyKcodwOGX8jx7VV9bGikr2OzoooplhRRRQBgeIvB/hrxHeWl5rWkQXtxaHMTvkEDOcHBG4Z7HIrVs723v7L7Vp00c8TbljcH5SVJU8+mQa4f4yeK5ND0OLRtMkP9ua232a1VD8yAkBn9uuB7n2rs9B02LR9EsNKg5js4EhB9doAz+PWgdtLnjMfx11Cz1O50jVvCLyahBM0HlWc5JLg427SpP5Z+lan/CZfFjXRjQvAqaZGw4m1BiCvuNxXP5GuD+JUS6H+0BY34xFFLdWl19eVDfmVNfRWp6/oelqTqWsWNnjtNcKh/ImkjR2VrI8Q8Z+Efitd+G9R1TxD4xthDawPO1nbuyKyqMkEKoGfTrXmvgf4heMfD95bwaZfXF9CzhRYzkypJk/dAPIJ/wBnFeu/GX4n+Gbvwbf6JoWprfX14VibykbaibgWO4gA8DHGetcr+zP4c0/UNfvNdu5o5bjTVAt7burNn94fpyB7nPGBUvfQpP3btH0lYyzT2VvNcW5tppI1aSEtuMbEZK574PFT0UVZgFFFVdSv7PTLCfUNQuEtrW3QvJLIcBRQBS8V6/p/hjQbrWdSk2wW65Cg/NI3ZF9yf8a+R9PsvEHxS8fTMp/0i9l82eUjKW0Q4/JRgAd+BW9428R678XPGUGjaHbyCxiYi1gPAA6GaT0/oOOvX1GzvPC/wS0+w0q+s765n1Jd9xqUEKssjrwV5YEBcjA9DnqTU7myXKvMwtP8U+J/hDcW3hrxLpqaj4eUsLS+tU2NtyScdicnlTg89cV7F4X8U6D4os/tWh6lDdqB88YOJI/ZlPIqpDceFfiH4ZlSJ4dU0yf5HXBDI30PKsK+b/iB4C8Q/DfVV1TRbq5Omlv3F/CxV4j/AHXx0Pv0P6U9ibKWj3Praivmfwj8e9Z09I7bxJZJqsS8G4ixHNj1I+636fWvYPDPxS8FeIFUQaulnO3/ACwvv3LD2yflP4E0JolwaO4opsbpIgeN1dGGQynINKTgE4z7CmSZXiey1W/0iWHRdUOm333o5tgYE/3TkHg+o5/lXh8fxI8ceFtdOmeINt55MgWaGaNVYj1VlA7dDyK7u7+L2i2GpS2GpaPqlk8TbX82NQy/Ubq6NtO8I+OLWy1pra31ONOYZuQRg8q3Q9exqXrszJ+98LJvFUXiO+0mKfwpqMNnckb9txEGEikdMkHafwri4fDHxP1Ab9X8Zpp8ZHzLbj5l/wC+Qo/Wr3xyt7yPwvBq+nXtxaXFhMOYZWQFG4Ocd87cfjXI6PH4Yk8LaZrXjXVtav7q+EhELSySISrlcDaOuADgmh72FLexwVrpOlH4iTaXrmrP9giupkuL0NhpNu7DZ5+8QPXrXZ3r/BrSYWMVre6zIOwaRQfqTt4rl9Ke0X4kebo/h19StlmkNvpky4JXYcBg2enXnPSvY7OXWbrw3rqa/wCD7LSbRbGZ4zGUIOFPyleue+eOlSkRFDfh94y8C39img6bbrpSvlRY3KjbJnqASSGz0weT6V2eg6Bo+gRTRaPYR2aTvvkCZO4/if06V8sfD3QT4l8WWGmSMyRM/mTMnBCKMnB7E4wPc19dKAAAOg4qou5pTbktRaKKKo1CqWsalZaPpdzqmoTCC0tYzJI57AfzJ6AdzV2vj34s6/4ubXdU8L65qk81na3rvFC2ACpOUJwORtIIB6Um7FRjzM6z4e3lz8SfjUPEN9GRbacrXEUJ5ESLxEv13MGPqc19LV43+zLoRsfCN3rco/eanPiM/wDTKPIH/jxb8hXT/GDxxbeDfDUvlyA6teKY7SIHlSeDIfZf1OB60LYqWsrIwfjD8Mr3xn4g0fU9OnjhVQLe9LnBWINkOvqRlhj6VwHxg+FujeDPCsGsaZd31zN9qWGb7S6tkMpwRhRjlR+dev8AwS1K/wBV+G+l3WoyPNMPMjErnLOquQCT9Bj8Kyv2jgD8NJiRnF1CR+ZpNK1wUmpcpxP7O/h7QPEWiajLrPhywuXtJlSO5kUs0gYEkMCcccYIHevdNG0LRdEWRdI0q0sBLjf9nhVC2Omcda8k/ZhEj+DNaSOQRStekI+3dtPlrg4789qzvFXxH+I/gLWjY6/Z6fqNs5LQXAhaNZ09QQeD6gg4/I0J2Q5Jyk0j36ivO/hx8VtD8ZyrYNE2maqQSLWVgwkx12Nxn1xgH613OpnUPsUn9li2N2eEN0WEY9zt5P04z6iqM2mtGVfEmv6T4b0uTU9Yu0trdOmfvOf7qjqT7V8/6pd+MvjVrAtNOs5NN8NW8mQ8vEf+85/jf0UdM/U16kPhjZ6rqo1fxnqlx4ju1P7uGQeTbQj0WNT0+p5712tzpVjPpEmkeQIbJ4jF5UH7oKv+ztxt/CkUmo7GH4E8FaH4H0o22nJmVwDcXkuN8p9z2HoO3615x+0xqOi3nhSxhg1O0mvoL5T5MUytIEKNkkA5xkLVSP4K2mu3s9zbePLm802OZ4tuzzJEZTgoW3YyPXH4VmfFj4XeHPB3gc6lYSXtzefaY4zLcSg8HOeAAOwpPYpW5tzP+EnxJ8O+BfCN3bXNpd3epXF20uyFQF27VC5YnjkHsa7jwn8ZtK8XawnhzVfDrQQ6g3kJmQToxbgK67RwfXmqX7Pvh3wxd+BbnVdV0mwuZoryUPcXcSvsRVU9W4AGSa9T0K68GSSgaDcaI0vQCxaLd/47TVwk1d6Hjfj/AOBE32iS+8GujROcnT55NpQ/7Dngj2b8zXK6V8DPHV7Ji8istMjzy09wHP5Jur6voo5UL2krWPK/Afwjbwy8c8vi3VZHVgxgs5DBC3swydw/KvVKKKZDbe5xvxH8C2PjHTxyttqUA/cXOOv+w3qv8vzByvDlg/wx8AXC3k0d1ezXBaKOPJVpnAVEGcE9Mnp3r0evHbrWP+E0+LVjY2zGXR9BLXDbORJIn8WO43bQP/r1LMpWTv1Ou+K0M03wy1ZJVEk6wRs+wcZDqSR7cE1yXwqvPEsfgG1TQNPtL4C6lVmupSnl9D07jnsa6HUfil4IEM1vc3E0ysDHJCbVuQeCCGArA0n4peEdKs00zw5oOovChJSNUAyScnncTRpe9yW1e9zi9LsfEl58YrmBbyHT9XeWV5LiGMvHH8hzgHsRxz613E0N3baL4k04eOz4g1OS1lhOnzAKwcfeCAsWzjcAB3NQw+J9en1ibWNF+GNxHe3CCNryff8AOox7KOw/KvLviG3iBfFk9/rVhHp1/chJfKgOABgAEcnnj161OxGkUej/ALPvhu7glvfEV5A0Mckf2e2DrgtyCzY/ADP1r2rcoYKSMnoM814pJ4d+MGr20bTeIkgjdAQI7jy8jHcotYc3wm8eG6F21/byzqdyyLdNvB+pAprRWSLTcVZI+iKKxPBtvrdp4dtLfxDcJc6jGCHkU7sjPGT3OMc1t1ZqgrzX4qfCuy8c3dtqEN9/Zt/EPLlk8reJY+wIyOR2P4V6VRQNNrVGfoGlWuh6LZaRZLi3s4ViTPU4HU+5PJ+tfIuoW3iP4jfEq8tljke8luWRlfO21iVsc+iqPzPqTX2VVe3srO2mmntrSCGW4bdNJHGFaQ+rEdT9aTVyoy5Tn7W88MeB9N0rw7c6jDp8ccASA3B2LJjqdx+XJJyRnvXB/tHa1pknw+t4Le+t7h7q9jMYilDblUMSeD0HH5ivUvEGi6b4g0qbS9WtVubWYYKt1U/3lPYj1FfHnxN8HXHgnxLJpbs09tIvm2s5HMkZPf3BGD/9ehlQSbPY/wBlaQtoWux44S6jP5of8K9T8beFtM8X6DNo+pp8r/NFMo+eF+zL/h3GRXH/ALPvhm88PeCTcajEYbvU5ftHlMMMkeMICPXqfxFen0LYmT966Pj228D+LfDXxG0zT49OuHuYryNoLqJCYnUMPnDdMY656d6+wqKKErBKXMFeP/HL4lv4ahbw7oxI1W5izLcA/wDHsjdMf7ZHT0617BXm/iv4S6J4m8aL4l1C8uAjIgns0A2zFRgfN1AwACB+YoYRtfUqfs46Zd2Hw9+03eR/aF29zEGGDswqgn6lSfpio/2lZVj+HSIxGZb+JR/3y5/pXfa/4dsNZ0ZdKZprKOID7PJZyGF4CBgFSPQdulfKXxXsvGOiaomg+Jtbu9VtYyZbOWaVmWRTxu5PB7EdvpSeiKj70rnsv7MTq/gO/hK/d1Fyc98xp/hXN/G74V/ZEm8UeFYBFCuXvbOIY2DvIgHb1HbqOOnZfs56Jd6T4A+0XkZifUblrmNG6+XtVVP47SfoRXqRAIIIyDwQadtAcrSuj5p+BPxG1eHxHaeF9XvZb6xvSY4Gmbc8L4JADHnacYwenH4/S9cPpvwu8IaZ4sXxNY2UkF0jF0gV/wByjkfeC44PJ4zgeldxQiZNN3QUUUUyTxn4k/FRIrXUdA0i1uYL9ZntpZ5QFCqCQSmDnJ/DHWpP2ddJ8vTdS1uRfmnkFvHkdFXlvzJH5VR+M3w+1K81oa9oNk959qwtzBFyyuON4HoR19xnvXqPgXRT4f8ACenaU4AmhizLg5+djubnvgnH4VCTvqYpNz1Gan4K8K6pqP8AaN/oltPdHkuQRuPqQDgn6iuV+KNpq/hzRotZ8Hyf2fFafLcWttEqoVJ4fbjnB4Ptj0NemU2REljaORFdHBVlYZDA9QRVWNHFNHG/CjxTeeLPDTXt/Ei3MExgd4xhZMAHOOx55FeS/tBYHjqA5/5co/8A0J69K8Q+KpvAKeQ/g8Jo+8+TcafKBHyf4l2ja3+RmvDfiB4kHizxJLqq2zQRlFjjiZtxCgdz7nJqJPSxjN+7Z7n1Rocgm0XT5R0e2jb81FXqyvCaSR+FtHjmGJFsYQw9DsFataG62CiiigYUVR0S7kvtKtruYKJJU3MFGBV6hCCiiigYVTvtL02/mt577T7a6ltm3QPNErmI+qkjj8KuUUAFFFFABRRRQAUUUUAFZWueHtD15rZtZ0u3vzauXh85N2wnr+BwOOnFatcxDdyavq01jdgC3gRmCRsy7juA5IPvUTnylRjc6ZQFUKoAAGAB0FLWHol7O17Pp8jeZHbllWRslyAxAye9blOEuZXQSjyuwUUUVRIUUUUAFFFFABRRRQBFdW8F3byW1zCk0MqlXjcZVgexFeSQ/BezTxT9te/DaMsnmrabTvPOdhP93364/OvYKKTSZLinuIAAMAYApaKKZQUUUUAf/9k=") !important;
}

.topbar {
  min-height: 84px !important;
  grid-template-rows: 45px 22px !important;
}

.mobile-brand,
.mobile-brand .brand-art {
  width: 118px !important;
  height: 45px !important;
}

/* Keep herb-detail controls below the image rather than over the specimen. */
.herb-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}

.herb-related-formula-button,
.herb-detail-actions .herb-note-button {
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--green-800);
  background: var(--prescription-paper);
  border: 1px solid var(--prescription-line);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.herb-related-formula-button:hover,
.herb-detail-actions .herb-note-button:hover {
  background: #fff7e5;
  border-color: #b99a57;
}

.herb-detail-actions .herb-note-button {
  color: #7b5620;
  background: var(--prescription-paper-deep);
}

.herb-related-formula-button svg,
.herb-detail-actions .herb-note-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.brand-art {
  background-image: url("data:image/jpeg;base64,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") !important;
}

/* Paper-toned header lets the hand-painted wordmark stay legible. */
.topbar {
  min-height: 96px !important;
  grid-template-rows: 54px 24px !important;
  color: #2a3d32;
  background: var(--prescription-paper);
  border-bottom: 1px solid var(--prescription-line);
}

.brand::after { display: none; }
.brand-art {
  background-image: url("data:image/jpeg;base64,Exitcode:0Walltime:5secondsOutput:/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wAARCABwAOwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1qiiiuY0Ciio7m5htIGmuJFjjXqzGgCSmSzxQJumkSNfV2AFZwk1DU+Yc2NsejuuZXHsDwv45PtUsOiWML+a8Xnzd5Zz5jfmen4Urjt3JJ74q8scKZaIDzHb7qZ5+p49Kig1MtEJXAkgJA86MYAJOMFSc+n51ZaKGSQyeUrPjBYjt70LaQHYRAgCcoMYx+FTaV9yvdtsSLPE8jRpKjSJ95QwJX6in1UutJsr1t89shk/56AbXH/AhzVY2+oad81rK17AOsMzfvAP9l+/0P51ZNkzUoqvZX0N/GWhJBU4dHGGQ+hHarFAgooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAoopk7+XbyODgqpOcZ7UANurmKztpJ522xxjJNUrW0kvJlvdQXDDmCA9Ih6n1b+VZmnaumu6jBHclE8jLiIciSTsfwGTiqHiPxPKbx7KyfYqHa7Dq3rz6Vm5q1w5klodmrq+dpBwcHHY0yQFgRniqPh1Gj0K2DDBIJ/NiRWljNWtUCZCrFE2uMe9PEgHBPSlMY5wSM+hqFyMspA6cEUtUVoywCD0oqrbI+4E5CirVNO4mrFG/09pZBd2bCK9jHysfuyD+6/qP5VLYXq31vvCmORTskjbrGw6g1ZrLvx/Zt/HqK8RSFYbodsE4V/wJx9D7UAtdDUooopiCiiigAoqBb61a4NutzCZ1ODGJBuH4danoAKKKKACiio5LmCKVIpJo0kk+4jMAW+g70ASUUUUAFFFZuneIdO1S7ltbWfNxESGjYEHg4yPWgRpUVT1bUo9I0ya9mRnjiwSq4yckDv8AWjStUt9Z0+O8td/lPnAdcEEdaALlFFFAwqO52fZZfNOI9h3H0GOadKHMbCIqr44LDIH4VwPiG51a2uZYrq4cq2eASEZT2x0qZy5RN2My1FzZ+JLD5HjMssZTI+8pI/xqYaalpfy3mqSbLdpmEUanLz4P8PoPc1paVr7anaT290qC6tIjPbzMoyu3nFS3/hS61m6S7a4ihs1jVY1kJ3KgHUjGBnk/jWSjpoRbsXtP8XNeTRwW+nkqflVVfpj8MV06sSgZlKnGSPSvPZNfsfDkbRaaYpLhhzPMev8AuqOcf5xRpXjC4XUY3vrieeMqzOqIB24AXoB7nmnGpb4mdEaM2rs72Rm3hc4JOOKeIlUEkZ9a50eMtPZlDw3UeeBlVP8AI1oajfbdBu54ZASYT5be5GB+pFWpJg4SReF7AWZEfey9VRSxH5Uv2uIfeLJ7uhUfmRWPoNt5Nnt/hGIx9EGP5mrgu/8AiZm0CSqBHu83naT6D8AapNslxSNIEEAg5B7io7m3S7tZYJRlJUKN9CKpyM1uyiEhCx5Cr8pHc49aVgplVJA0jsM4bLYHqQOBRcLD9MklGn26XmFuVXa4LAkkcZ/HGfxq5WJqxSCyIVVQlxyihenP+FSeF9Vm1rQ4ryeMIXZlXB+8AcZ/HFCetga6jtQ8UaRpV4LW/vFt5iAQHRgCP97GP1rSiminhWaGRHicZV1OQR6g1n+INAtPEWmPZ3ijnmOQD5o27EVzcnhPSNN8JLFqvm3w0zc0jW5KsATuIxnoAQefrTFoRePPD+lao0d3DqVhYagjDc8koXzF98c5HY/h9Lr/ABE0PT7WKFLi51CWNAhaGIkuQMZycdaqabNoBgR9B8LXF5kfJI1uAv8A38kNNXx5daZ4iTSdQ0JbcyFQkdtIHdd3Tpwf0pDOp0DXrfxDYm6top4grlGSZNpB/rVq71OxsCBeXlvbkjIEsqqSPxNWap6jo+n6sqDULSG48s5XeuSPxpknnmn+I7TTPiHftHqM02lzKXRIS0qs5wTgDPfdVfx/qp8SXelWdjpuoCUM7L5sBRpAcfd79jWt42+w+G5Y5dGjMGr3UItoYrYBQqbwd2AOpxtHrn2q9pOrQWmp248VR/ZdcEHlJcS48qRck/KR8oPOD0pF+Za0fXdcm1CC1ufDs1tZEbfNeXcyYHBPrXU0AggEHIPeimQzK8SawNG0t5Ixuupf3dvGBks56ce3+etcj4e0C4tZ3gi1mG01OVc3EXkhpUHXCsT6EE4rstQthbu+pQWRvLxFwiF8FV77c8A/qayLO/ste261babK+oWTGIRs4RuR6ng9T+tJkPcrajpV5qqx6FHd3NxbRP5l3dy4z7Rqe5798cVV0zSrfWHl0w6vqkQtBtNqyrEVXp2yD9ag8U6tqf27TJTFHpsizbcG73ZBI5cL0FWI9Vs7q9ki1jV7FluU2N5FsydOhEvsfXIoFpc7DTNPTS7FLWOWaVE6NM25vzq1WfodhNpunCCe9a8wxZJG67T0HU1oUy0FZ3iC3Fxo84EQkkVdyfLk5z2rRqCfEh2FSVHU/hUydkVFamLfaJp9rZXM2nQrFcLGWLZJ3KR8w59RnpVO91prCabVNRY/ZEZltIQf9d1AI9sc5NbqlHEqswwBz6KP8/zrjdX8IavrdzCbi5tESONUij80rhQAOm09+fxHpWUZOXQr2cVLV6HDSRR6nq014YI7ZJG3CKEYUV0VjstYDITHDAv3pHYKv4k9T+tc3qVzd6Lq9xp/2WCOS3cozli+70IzxyOelUp7a31Zg93qGqrJ6lUlA+nK4H0qHByfvOx1qdl7iOqm8Q2t1cJbWkjQozBXvHQjA77B2/3jz6Ada6l7/S4k/s+eXyooCEjQs6qFGCpz0J4Bya8wtvC+nbgX1a7f2NkM/n5ldDFpGmAmWe41C7c8ncwjz+WT+tN8sfhZNpS+JHoen30cARYZBNbkqMkgsu5sBgw+8Mke/uas6Y6TXd3PHeC4WQghFJxGPofXBrkvCoN5qLxRW6RWdhE0y20WcPKcqu4nlj97rXZaVD5VsZDbpbvI3zIgIHBIBwa2g7xuYTVpWJH+e9Uf3R/n+tRxvK+rSruiEKoMqCCxPYn071JbHdNK59cf5/Wq+l5aK5uWhaJpXP3ickDgHmqRLMnxjd+RpcpB5ETED3bgf0rd8O2YsPD1hbAY2QLke5GT+prlPFa/bdStbBeftFzHDx/dHJ/lXeAYGB0FTHdjnsjM8Ra5B4e0aa+mILKNsSE/fc9B/ntmoNG06Q+FhBd83N5E0lwT3eTJOfpnH4Vy3iTwpqmq+O7NpGmn0l3EpDMSkOMblx2zj9aveJ/EF3deJ7Lw5pAdZRLHLcyj+FRhsfTHJ/KrJsY9vrXiHwZ4Nt1m0uBIo5WiV5pCWyWY8qO3Xv6VteHfDN5J4iHiXVLm2uJLiEMipGw2ZUAEZ6fLx+NL8UnX/hDs5GGnTBz9ak1a11k+HLLUPD97KlxFbRk22AyyrtB4BH3v50g6HXVjeIPEkGiRrFGjXWoTcQWsfLOfU46D3qn4M8RT+KdDle5QwXMTmJ2j4ycdRnoeelXzaaT4ctbm/lVY8jdPcysXkf6seT9KYrWZzln4bvLS3vvEOs3MZ1t4meEnBS2OOAAeM9vb9ao23inRvEnhUReLri3SdpCqeUp3rjGH4B2nr7Ve0nw9oOtaC+snTZFMqytGk0zuFAJAIBPtmqfgiEQ+CGvLXSLa+uo533IwAdlGOhwcn2pFGWLbxb4Skj/sWWbUdMkw0JRDKjKeRleq/h+ddz4e1bXtQ2/2toi2aEcy+cB/44ef1pPC/jGx8S+ZDBHJbXMIy0EmM46ZHtXQ0yW+5heIxrsIS60SVZAmA9q0and7g9fwzUHiNYbzwtqMZiVJ4UWWUIPuyYDdfXH6GtDXtftdCsZJZpEM4XMcO75nPbj096yLC21pNBga0isZ3vQ01z9q3cs/PQdRtwMe1IhnOalCNmiNbQOgkkhIENmEO4gHiQ8Oc/hVnXbKfV7vRLB1unJmk3maVJGC5XOWTjgA8dq1YXvb3Ul0mfUbW0u7XDxxRWIZQAOCjMfQ1l6Tor3PjDV7N9TvY9o3u8DiNpCSCc4HvSJsehxxrFGscahUQBVUdAB2pawNM8IW2lakt7BfX7uM7lklBV+O/HNb9UWgqGZ/LV5HKoq/xE4wPepqzNa0qXUoCsVw6Y/5Z5wpqZbDvYxL4Jvvnhv0nWSI5CnLpyCCR3AxgkdAfaqdstzeeIWtTI2LdFIkJ42AcNx6jB/GsrVrEaROPMvdtwjbkEbEkH69B+NdbaI+m6RFugZZYYucOHPzdcMOq8Z9qwk1bUUI87scH8TNDuG1r7fZQyPD9mWWVwM7Qvy5J+m39a5C0nOQCQR9K9ltbt9QaS0vIFeGZdhXgh19D7f41xHjzS4P7UN3ZSh7iUbpkUKkUKKAFA9Txk0lUVRaHWv3bszPs9pIOcVsRi3jhLMMt2ya4631AIB+8Q/RqsPqM87JBAHaR+m1ST+A6mocG2dHOrHcaHdPbaNqNxbv5c0kqbCvZUOD+GSa14vFMt4LGKMKsjkmdgP4VODj0GOawtC0fVZFWG2meJI8K5lwyqMdCvf6Vo67of8AZmivKl2qxowJiSPaZATnYDnPUk4/wFaKVlozgnzSk2kdNZXMM1uUt7mIykfwsGI98Z+tMsrsRSiwILtAPmk3ZBxyevNec2ni+PSWIiTyGcY3T253kfjWpB4+V8rJNaneNp/dhWx354rRS0KjFtXZZfUII/F9tcXLYitYnmIHJZm4ArttJ1B9TtDcNF5aFiEGc5Hr+ea84tBbalqd5czMgid1jgZiwRyo7kA8ZOe3au+0WDUoUAu5IBAB8kcajp7EURbuZzfvWNaoltLdLp7lYIxcSKFeUKNzAdAT1pJ5XjI2hQvdjzz9KX/SPWL8jWlwscN4s+Hcmq6hBJpMi28Ej5uImY7EP99V9evH/wBeu6toEtbWKCPOyJAi59AMCk/0j1i/I0f6R6xfkaAeo9I0jz5aKu47jtGMn1qlrWi2mv2H2O+DmHeH+RsHIq1/pHrF+Ro/0j1i/I0XAwvEnh2e70Qw6LczWc0MXlxxRyFY5FxjYR06dDT/AAVoM3h3w7HaXLAzs5lkCnIUnHGfoBWvcm58pRCFLHO4jt9M020N2UInRV4+XLZOfTjqOlK+th9CG30DTrTWJtUt7ZY7yddsjqT83OTx0ycDmtCosXHrF+RoxcesX5GncRjeJvCsPiNrZ2lMMkLcsBncncf4fjW6qhFCqMKBgAdqjxcesX5Gj/SPWL8jQKxV1K0nYi705LX7cilVaeMncv8AdyCCK5bwZbalN4m1TUtQtzCXBjYFSBuyDgZ7AD+Vdn/pHrF+RprvPGhZjFgegNAuW7J6KZC7umXXBzx7in0xhQc4OBk0UUAclceEFdJbq8l3vtLska559AT2qloepXUarBJYItlbjDXEKHzB1xxnqT3rumUMpVgCCMEHvUbwK0BiXMakYGzjFZumuglo9DjLjxHplkG+yxeZcSReYihCV3H/AJZv6H3rmNcup9fIbUpZY4CCsUUO4pF/n3rvbnRrRJHa+tvlIx50I4+rKOh9xxT7Dw/aKzyRTrNG6FM8HHv9azjCzsi5czd29Dyyw8G3M4RzcC2gblZm/i/3R1Na813pfhWForJGmvSuWkIzI59z2H5V1p8MXq2stha6pGYC2Vd1zLCM5IGOPXr60Wnh7TNElEFvaG9vCu+WSZgOPVif5UpQbfvbG6mum5zvhqXWJbV7jT9YsNk7ebJFOQShPXg8j/61Pu7+K01qFtfvH1IIu+NbVdyRN6MPyxiugfw/oclwBqOkRWpkyVkSQ7G+pBwK1bOHQ9EVzafZ4ifvFW3Mf5mhQT6g5+Rz2oan/wAJTb/YbHS5ZwzDM06YEfPUH/69XD4N0OO4S3jslnkPL78YRfcgdfQVu/aLq94tozBEesso+Y/7q/1NWra1jtY9kYPJyzMclj6k1pGPYzlIpJ4d0yKw+xw2iRQbt4VOMNjGavW8C21ukMZYogwNxycVJRWtkZBRRRQBQtFubi4e4e4ZYg7IkQUYZQSAeec+/wBKoaxe38V7i23LAgXDdi+QCDwcjDD8foa3qKYGTrl1dW8B+z+Yp25Zgvy9ex9evtSahc3cOgLKjutyFBZtgHI5OQR04/KteigCjozzvp6/ahIJASCZGBJ/Qf57mrULTMZPOjRMOQm1925exPAwevFSUUgMG+n1Aa/DHD9oNr94hVA+7w3Xr94f5FTa7dX0ElotirENKN5CZyMHgc4/Pj3rYopgZWr3N5/ZUbWQeOeRlGWXlORkkf0pbW6uR4fSWU+VcbAA8vIJPRuOv6fhWpRQBl+H7ua5sAt0zGdSchkIOMnGc9a1KKKQBRRRQAUUUUAFFFFABVSbS7Sdt7QhX/vodp/SrdFJpPcE2tjLXSXhgUwtEtxEcxuqbdw9G55zVa4k3zGWVZ7OcrsfMQkRx7etbtFQ6a6Fqo+pjx+ZLaC0s7UmJVK+bcjA59B36mr9nYQWcSKkce8DBcKAWPrVminGCWrE5XCiiirJCiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP//Z") !important;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  filter: none !important;
  mix-blend-mode: normal;
}

.mobile-brand {
  width: 118px !important;
  height: 54px !important;
  display: block !important;
}

.mobile-brand .brand-art {
  width: 118px !important;
  height: 54px !important;
  display: block !important;
}

.mobile-brand-mark,
.mobile-brand-copy { display: none !important; }

.topbar .date-block,
.topbar .date-divider,
.topbar .lunar-date,
.topbar .weather-summary,
.topbar .weather-summary .weather-value,
.topbar .weather-summary .weather-value strong,
.topbar #weatherTemperature::before,
.topbar #weatherHumidity::before {
  color: #5b634d !important;
}

.topbar .font-size-control {
  position: absolute !important;
  top: 10px !important;
  right: 76px !important;
  bottom: auto !important;
}

.topbar .member-switcher {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  bottom: auto !important;
}

.topbar .font-size-button {
  color: #485340 !important;
  background: rgba(255,255,255,.58) !important;
  border: 1px solid #d7c9a5 !important;
}

.topbar .font-size-button > .font-size-short-label,
.topbar .member-button,
.topbar .member-button #currentMember {
  color: #485340 !important;
}

.topbar .member-button { background: transparent !important; }

/* Override the temporary failed image payload with the validated wordmark. */
.brand-art {
  background-image: url("data:image/jpeg;base64,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") !important;
}

/* Keep every catalog filter visible on the narrow H5 canvas. */
#formulaView .segmented-control,
#herbView .segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
}

#formulaView .segmented-control button,
#herbView .segmented-control button {
  min-width: 0;
}

/* Header arrangement requested for H5: actions on the upper-right, live
   temperature and humidity on the lower-right. */
.topbar .font-size-control {
  top: 8px !important;
  right: 67px !important;
}

.topbar .member-switcher {
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
}

.topbar .date-block {
  padding-right: 104px;
  transform: translateY(2px);
}

.topbar .weather-summary {
  width: auto;
  min-width: 0;
  min-height: 22px;
  display: flex !important;
  position: absolute;
  top: auto;
  right: 8px;
  bottom: 2px;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

/* Hidden avatar and chevron must not leave empty grid tracks around the name. */
.topbar .font-size-control {
  right: 67px !important;
}

.topbar .member-switcher {
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  width: auto;
}

.topbar .member-button {
  width: 53px !important;
  min-width: 53px !important;
  min-height: 36px;
  height: 36px;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  position: relative;
}

.topbar .member-button > span:nth-child(2) {
  width: auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.topbar .member-button #currentMember {
  width: auto;
  text-align: right;
}

html:not([data-font-size="xlarge"])[data-font-size] .formula-focus .ingredient-row b {
  width: 32px;
  height: 32px;
  font-size: calc(15px * var(--font-scale)) !important;
  font-weight: 800;
}

/* The product is always a 390px H5 canvas, even when a desktop browser adds
   empty space around it. Keep the daily tea block on its mobile composition
   instead of keying that composition to the outer browser width. */
.formula-focus .formula-watermark {
  display: none;
}

.formula-focus .formula-topline {
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
}

.formula-focus .formula-scenario {
  max-width: 100%;
  min-height: 0;
  line-height: 1.75;
}

html[data-font-size] .app-shell .formula-focus > h2 {
  font-size: calc(25px * var(--font-scale)) !important;
}

.formula-focus .formula-actions .secondary-button {
  flex: 1;
}

/* Source records remain available inside detail pages; omit the repeated
   home summary on the narrow H5 canvas. */
#homeView .source-band {
  display: none;
}

html:not([data-font-size="xlarge"]) .formula-focus .ingredient-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
}

html:not([data-font-size="xlarge"]) .formula-focus .ingredient-row > span {
  min-width: 0;
  min-height: 62px;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 11px;
  row-gap: 4px;
  padding: 9px 12px;
  line-height: 1.45;
}

html:not([data-font-size="xlarge"]) .formula-focus .ingredient-row small {
  gap: 7px;
}

html:not([data-font-size="xlarge"]) .formula-focus .method-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

html:not([data-font-size="xlarge"]) .formula-focus .method-strip div {
  min-width: 0;
  padding-inline: 10px;
}

html:not([data-font-size="xlarge"]) .formula-focus .method-strip div:first-child {
  padding-left: 0;
}

/* The header is an always-visible navigation aid, not reading copy.  Keep it
   compact so its three information groups have room at the narrow H5 width. */
@media all {
  html[data-font-size] .topbar {
    min-height: 84px !important;
    grid-template-rows: 44px 24px !important;
  }

  html[data-font-size] .topbar :is(.font-size-button, .member-button) {
    font-size: 11px !important;
    line-height: 1 !important;
  }

  html[data-font-size] .topbar .font-size-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html[data-font-size] .topbar .font-size-short-label {
    font-size: 11px !important;
  }

  html[data-font-size] .topbar .mobile-brand-copy strong {
    display: block !important;
    font-size: 16px !important;
    line-height: 1.08 !important;
  }

  html[data-font-size] .topbar .mobile-brand-copy small {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.08 !important;
  }

  html[data-font-size] .topbar .date-block :is(strong, span),
  html[data-font-size] .topbar .weather-summary :is(strong, span) {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  html[data-font-size] .topbar .weather-summary .weather-value strong {
    font-size: 14px !important;
  }

  html[data-font-size] .topbar :is(#weatherTemperature, #weatherHumidity)::before {
    font-size: 14px !important;
  }

  html[data-font-size] .topbar .date-line {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
}

html:not([data-font-size="xlarge"]) .formula-focus .ingredient-row > span {
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
}

/* Final H5 wordmark: use only the readable product name at this scale. */
.topbar {
  min-height: 84px !important;
  grid-template-rows: 45px 22px !important;
}

.mobile-brand,
.mobile-brand .brand-art {
  width: 118px !important;
  height: 45px !important;
}

.brand-art {
  background-image: url("data:image/jpeg;base64,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") !important;
}